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()
• 尾随逗号

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

JavaScript 数组 every()

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

示例

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

<html>
<body>
   <div id = "output"> All elements of the array are even? </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>

输出

All elements of the array are even? true

JavaScript 数组 filter()

array.filter() 函数过滤数组元素，并在新数组中获取过滤后的元素。

示例

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

<html>
<body>
   <div id = "output"> Elements divisible by 10 are </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>

输出

Elements divisible by 10 are 10,20,30,40

JavaScript 数组 forEach()

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

示例

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

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

输出

TATA
Honda
Toyota
Maruti

JavaScript 数组 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 += "Is arr array? " + bool;
   </script>
</body>
</html>

输出

Is arr array? true

JavaScript 数组 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 数组 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 数组 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 数组 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 数组 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 数组 some()

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

示例

以下代码检查数组是否包含 1 个或多个长度大于 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>

输出

Total milliseconds since 1st January, 1970 is: 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>

输出

The current date in JSON format is: 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>

输出

The current date in ISO string format is: 2023-12-18T06:13:50.159Z

JavaScript 函数 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>

输出

The name of the Animal is - 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>

输出

The parsed JSON object values are -
name : Sam
age : 40
city: Delhi

JavaScript JSON stringify()

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

示例

以下代码使用 JSON.strringify() 方法将 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 添加了与对象相关的方法来操作和保护对象。

操作对象的方法

保护对象的方法

JavaScript 对象 DefineProperty()

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

示例

以下代码包含 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 用于安全地访问和更新对象属性。

示例

在下面的代码中，手表对象包含 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",
         // Getter to get brand property
         get watchBrand() {
            return this.brand;
         },
         // Setter to set Watch dial
         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; // This is valid
      // num = 43; // This is invalid
      document.getElementById("output").innerHTML += num + "<br>";
   </script>
</body>
</html>

输出

The value of num is: 43

JavaScript String[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); // Invalid

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

在 ES5 中，主要引入了与数组和对象相关的方法。