JavaScript - ES5

上一个

测验

下一个

JavaScript ES5，也称为 ECMAScript 5，于 2009 年发布。它是 JavaScript 的第一次重大修订。它引入了许多新特性，包括 getters 和 setters，以及 'use strict' 指令。ES5 相对于之前的 JavaScript 版本提供了显著改进。ES5 中引入的新特性使代码更强大、更简洁且更容易维护。

JavaScript ES5 中新增的特性

以下是 JavaScript ES5 版本中新增的方法、特性等。

Array every()
Array filter()
Array forEach()
Array isArray()
Array indexOf()
Array lastIndexOf()
Array map()
Array reduce()
Array reduceRight()
Array some()
Date now()
Date toJSON()
Date toISOString()
Function bind()
JSON parse()
JSON stringify()
Multiline strings
Object methods
Object defineProperty()
Property getters and setters
Reserved words as property names
"use strict"
String[number] access
String trim()
Trailing commas

在这里，我们详细解释了每个特性。

JavaScript Array every()

array.every() 方法检查数组中的每个元素是否满足特定条件。

示例

在下面的代码中，我们使用 array.every() 方法检查数组中的每个元素是否为偶数。

<html>
<body>
   <div id = "output"> 数组的所有元素都是偶数吗？ </div>
   <script>
      const arr = [10, 20, 30, 40, 2, 6];
      function even(element) {
         return element % 2 == 0;
      }
      document.getElementById("output").innerHTML += arr.every(even);
   </script>
</body>
</html>

输出

数组的所有元素都是偶数吗？ true

JavaScript Array filter()

array.filter() 方法过滤数组元素，并将过滤后的元素放入新数组中。

示例

在下面的代码中，我们过滤出能被 10 整除的数组元素。

<html>
<body>
   <div id = "output"> 能被 10 整除的元素是 </div>
   <script>
      const arr = [10, 20, 8, 30, 40, 2, 6];
      function divide(element) {
         return element % 10 == 0;
      }
      document.getElementById("output").innerHTML +=  arr.filter(divide);
   </script>
</body>
</html>

输出

能被 10 整除的元素是 10,20,30,40

JavaScript Array forEach()

array.forEach() 方法遍历数组元素。它类似于 JavaScript 中的循环。

示例

下面的代码使用 array.forEach() 方法遍历数组，并在新行中打印每个数组元素。

<html>
<body>
   <div id="output"> </div>
   <script>
      const arr = ["TATA", "Honda", "Toyota", "Maruti"];
      arr.forEach(traverse); // 使用 array.forEach() 方法
      function traverse(element) {
         document.getElementById("output").innerHTML += element + "<br>";
      }
   </script>
</body>
</html>

输出

TATA
Honda
Toyota
Maruti

JavaScript Array isArray()

Array.isArray() 方法检查传入的对象是否为数组。

示例

下面的代码使用 Array.isArray() 方法检查 arr 是否为数组。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const arr = ["TATA", "Honda", "Toyota", "Maruti"];
      let bool = Array.isArray(arr);
      document.getElementById("output").innerHTML += "arr 是数组吗？ " + bool;
   </script>
</body>
</html>

输出

arr 是数组吗？ true

JavaScript Array indexOf()

array.indexOf() 方法返回数组中特定元素第一次出现的索引。

示例

以下代码查找数组中 23 的第一个索引，即 0。

<html>
<body>
   <div id = "output"> The first index of 23 in the array is </div>
   <script>
      const arr = [23, 45, 32, 12, 23, 56];
      document.getElementById("output").innerHTML += arr.indexOf(23);
   </script>
</body>
</html>

输出

The first index of 23 in the array is 0

JavaScript Array lastIndexOf()

array.lastIndexOf() 方法返回数组中特定元素最后一次出现的索引。

示例

以下代码查找数组中 45 的最后一个索引，即 4。

<html>
<body>
   <div id = "output"> The last index of 45 in the array is </div>
   <script>
      const arr = [23, 45, 32, 45, 45, 56];
      document.getElementById("output").innerHTML += arr.lastIndexOf(45);
   </script>
</body>
</html>

输出

The last index of 45 in the array is 4

JavaScript Array map()

array.map() 方法通过将当前数组元素映射为新元素来返回一个新数组。

示例

以下代码使用 map() 方法通过将数组元素加倍来创建一个新数组。

<html>
<body>
   <div id = "output"> The new array is </div>
   <script>
      const arr = [1, 2, 3, 4, 5];
      function doubleEle(element) {
         return element * 2;
      }
      document.getElementById("output").innerHTML += arr.map(doubleEle);
   </script>
</body>
</html>

输出

The new array is 2,4,6,8,10

JavaScript Array reduce()

array.reduce() 方法将数组归约为一个单一值。

示例

以下代码使用 array.reduce() 方法对数组的所有元素进行乘法运算。

<html>
<body>
   <div id = "output">The multiplication result of the array elements is </div>
   <script>
      const arr = [1, 2, 3, 4, 5];
      function multiplier(multiplication, element) {
         return multiplication * 2;
      }
      document.getElementById("output").innerHTML += arr.reduce(multiplier);
   </script>
</body>
</html>

输出

The multiplication result of the array elements is 16

JavaScript Array reduceRight()

array.reduceRight() 方法从右向左而不是从左向右对数组进行归约。

示例

<html>
<body>
   <div id = "output">The merged array elements in the reverse order is: </div>
   <script>
      const arr = ["How", "are", "you", "doing?"];
      function merge(res, element) {
         return res += element + " ";
      }
      document.getElementById("output").innerHTML += arr.reduceRight(merge);
   </script>
</body>
</html>

输出

The merged array elements in the reverse order is: doing?you are How

JavaScript Array some()

array.some() 方法用于检查数组中的某些元素是否满足特定条件。

示例

以下代码检查数组是否包含一个或多个长度大于 3 的字符串。

<html>
<body>
   <div id = "output">Array contains one or more strings with lengths greater than 3?  </div>
   <script>
      const arr = ["How", "are", "you", "doing?"];
      function func_len(element) {
         return element.length > 3;
      }
      document.getElementById("output").innerHTML += arr.some(func_len);
   </script>
</body>
</html>

输出

Array contains one or more strings with lengths greater than 3? true

JavaScript Date now()

Date.now() 方法用于获取自 1970 年 1 月 1 日以来的总毫秒数。

示例

以下代码计算自 1970 年 1 月 1 日以来的总毫秒数。

<html>
<body>
   <div id = "output">Total milliseconds since 1st January, 1970 is: </div>
   <script>
      document.getElementById("output").innerHTML += Date.now();
   </script>
</body>
</html>

输出

自 1970 年 1 月 1 日以来的总毫秒数是：1702540225136

JavaScript Date toJSON()

date.toJSON() 方法将日期转换为 JSON 日期格式。JSON 日期格式与 ISO 格式相同。ISO 格式为 YYYY-MM-DDTHH:mm:ss.sssZ。

示例

以下代码以 JSON 格式打印当前日期。

<html>
<body>
   <div id = "output">The current date in JSON format is: </div>
   <script>
      const date = new Date();
      document.getElementById("output").innerHTML += date.toJSON();
   </script>
</body>
</html>

输出

当前日期的 JSON 格式是：2023-12-18T06:12:52.366Z

JavaScript Date toISOString()

date.toISOString() 方法用于将日期转换为 ISO 标准格式。

示例

以下代码以标准的 ISO 字符串格式打印当前日期。

<html>
<body>
   <div id = "output">The current date in ISO string format is: </div>
   <script>
      const date = new Date();
      document.getElementById("output").innerHTML += date.toISOString();
   </script>
</body>
</html>

输出

当前日期的 ISO 字符串格式是：2023-12-18T06:13:50.159Z

JavaScript Function bind()

bind() 方法用于从另一个对象借用方法。

示例

在以下代码中，bird 对象包含属性和 printInfo() 方法。animal 对象仅包含 name 和 category 属性。

我们使用 bind() 方法从 bird 对象借用 printInfo() 方法给 animal 对象。在输出中，printInfo() 方法打印 animal 对象的信息。

<html>
<body>
   <div id = "result"> </div>
   <script>
      const output = document.getElementById("result");
      const bird = {
         name: "Parrot",
         category: "Bird",
         printInfo() {
            return "The name of the " + this.category + " is - " + this.name;
         }
      }

      const animal = {
         name: "Lion",
         category: "Animal",
      }
      const animalInfo = bird.printInfo.bind(animal);
      output.innerHTML += animalInfo();
   </script>
</body>
</html>

输出

Animal 的名称是 - Lion

JavaScript JSON parse()

JSON.parse() 方法用于将字符串转换为 JSON 对象。

示例

以下代码将字符串转换为对象。同时，我们在输出中打印了对象属性的值。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      const objStr = '{"name":"Sam", "age":40, "city":"Delhi"}';
      const obj = JSON.parse(objStr);
      output.innerHTML += "The parsed JSON object values are - <br>";
      output.innerHTML += "name : " + obj.name + "<br>";
      output.innerHTML += "age : " + obj.age + "<br>";
      output.innerHTML += "city: " + obj.city + "<br>";
   </script>
</body>
</html>

输出

解析后的 JSON 对象值为 -
name : Sam
age : 40
city: Delhi

JavaScript JSON stringify()

JSON.stringify() 方法将对象转换为字符串。

示例

下面的代码使用 JSON.stringify() 方法将 obj 对象转换为字符串。

<html>
<body>
   <div id = "output">The object in the string format is - </div>
   <script>
      const obj = {
         message: "Hello World!",
         messageType: "Welcome!",
      }
      document.getElementById("output").innerHTML += JSON.stringify(obj);
   </script>
</body>
</html>

输出

The object in the string format is - {"message":"Hello World!","messageType":"Welcome!"}

JavaScript 多行字符串

你可以使用反斜杠 (\) 来换行，从而以多行方式定义字符串。

示例

在下面的示例中，我们以多行方式定义了 str 字符串，并使用反斜杠来换行。

<html>
<body>
   <div id = "output"> </div>
   <script>
      let str = "Hi \
                 user";
      document.getElementById("output").innerHTML += "The string is - " + str;
   </script>
</body>
</html>

输出

The string is - Hi user

JavaScript 对象方法

在 ES5 中，添加了与对象相关的用于操作和保护对象的方法。

操作对象的方法

序号	方法	描述
1	create()	使用现有对象作为 prototype 创建新对象。
2	defineProperty()	克隆对象并为其 prototype 添加新属性。
3	defineProperties()	为特定对象定义属性并获取更新后的对象。
4	getOwnPropertyDescriptor()	获取对象的属性描述符。
5	getOwnPropertyNames()	获取对象属性。
6	getPrototypeOf()	获取对象的 prototype。
7	keys()	以数组格式获取对象的所有键。

保护对象的方法

序号	方法	描述
1	freeze()	通过冻结对象来防止添加或更新对象属性。
2	seal()	密封对象。
3	isFrozen()	检查对象是否被冻结。
4	isSealed()	检查对象是否被密封。
5	isExtensible()	检查对象是否可扩展。
6	keys()	以数组格式获取对象的所有键。
7	preventExtensions()	防止对象的 prototype 更新。

JavaScript Object defineProperty()

你可以使用 Object.defineProperty() 方法来定义对象的单个属性，或更新属性值和元数据。

示例

下面的代码包含 car 对象的 brand、model 和 price 属性。我们使用 defineProperty() 方法在对象中定义了 gears 属性。

<html>
<body>
   <div id = "output">The obj object is - </div>
   <script>
      const car = {
         brand: "Tata",
         model: "Nexon",
         price: 1000000,
      }
      Object.defineProperty(car, "gears", {
         value: 6,
         writable: true,
         enumerable: true,
         configurable: true
      })
        
      document.getElementById("output").innerHTML += JSON.stringify(car);
   </script>
</body>
</html>

输出

The obj object is - {"brand":"Tata","model":"Nexon","price":1000000,"gears":6}

JavaScript 属性 getter 和 setter

getter 和 setter 用于安全地访问和更新对象属性。

示例

在下面的代码中，watch 对象包含 brand 和 dial 属性。我们使用 get 关键字定义了 getter 来访问 brand 属性值。

同时，我们使用 set 关键字定义了 setter 来将 dial 属性值设置为大写。

通过这种方式，你可以安全地更新对象属性值。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      const watch = {
         brand: "Titan",
         dial: "ROUND",
         // 用于获取 brand 属性的 Getter
         get watchBrand() {
            return this.brand;
         },
         // 用于设置手表表盘的 Setter
         set watchDial(dial) {
            this.dial = dial.toUpperCase();
         }
      }
      output.innerHTML = "The Watch brand is - " + watch.watchBrand + "<br>";
      watch.watchDial = "square";
      output.innerHTML += "The Watch dial is - " + watch.dial;
   </script>
</body>
</html>

输出

The Watch brand is - Titan
The Watch dial is - SQUARE

JavaScript 保留字作为属性名

ES5 之后，你可以在对象中使用保留字作为属性名。

示例

在下面的代码中，delete 被用作对象属性名。

<html>
<body>
   <div id = "output">The obj object is - </div>
   <script>
      const obj = {
         name: "Babo",
         delete: "Yes",
      }
      document.getElementById("output").innerHTML += JSON.stringify(obj);
   </script>
</body>
</html>

输出

The obj object is - {"name":"Babo","delete":"Yes"}

JavaScript "use strict"

严格模式也在 ES5 中引入。

严格模式允许你克服错误并编写清晰的代码。你可以使用 "use strict" 指令来声明严格模式。

示例

在下面的代码中，你可以取消注释 num = 43 这一行并观察错误。严格模式不允许开发者在不使用 var、let 或 const 关键字的情况下定义变量。

<html>
<body>
   <div id = "output">The value of num is: </div>
   <script>
      "use strict";
      let num = 43; // 这是有效的
      // num = 43; // 这是无效的
      document.getElementById("output").innerHTML += num + "<br>";
   </script>
</body>
</html>

输出

The value of num is: 43

JavaScript 字符串[number] 访问

在 ES5 之前，使用 charAt() 方法从特定索引访问字符串字符。

ES5 之后，你可以将字符串视为字符数组，并像访问数组元素一样从特定索引访问字符串字符。

示例

<html>
<body>
   <div id = "output1">The first character in the string is: </div>
   <div id = "output2">The third character in the string is: </div>
    
   <script>
      let str = "Apple";
      document.getElementById("output1").innerHTML += str[0];
      document.getElementById("output2").innerHTML += str[2];
   </script>
</body>
</html>

输出

The first character in the string is: A
The third character in the string is: p

JavaScript 字符串 trim()

string.trim() 方法从字符串两端移除空白字符。

示例

在下面的代码中，我们使用 string.trim() 方法从 str 字符串的开头和结尾移除空白字符。

<html>
<body>
   <div id = "output"> </div>
   <script>
      let str = "    Hi, I am a string.    ";
      document.getElementById("output").innerHTML = str.trim();
   </script>
</body>
</html>

输出

Hi, I am a string.

JavaScript 尾随逗号

你可以在数组和对象中添加尾随逗号（最后一个元素后的逗号）。

示例

在下面的代码中，我们在最后一个对象属性和数组元素后添加了尾随逗号。代码运行无误并打印输出。

<html>
<body>
   <div id = "demo1"> </div>
   <div id = "demo2"> </div>
   <script>
      const obj = {
         name: "Pinku",
         profession: "Student",
      }
      document.getElementById("demo1").innerHTML =JSON.stringify(obj);
      let strs = ["Hello", "world!",];
      document.getElementById("demo2").innerHTML = strs;
   </script>
</body>
</html>

输出

{"name":"John","profession":"Student"}
Hello,world!

注意 JSON 字符串不允许尾随逗号。

例如，

let numbers = '{"num1": 10,"num2": 20,}';
JSON.parse(numbers); // 无效

numbers ='{"num1": 10,"num2": 20}';
JSON.parse(numbers); // 有效

在 ES5 中，大多数与数组和对象相关的函数被引入。

JavaScript ES5 怎么用？ES5 特性有哪些？