JavaScript - ES5

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

JavaScript ES5 中新增的特性

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

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()
多行字符串
对象方法
Object defineProperty()
属性 getter 和 setter
保留字作为属性名
"use strict"
String[number] 访问
String trim()
尾随逗号

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

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

输出

Is arr array? 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>

输出

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 Function bind()

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

示例

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

我们使用 bind() 方法从 bird 对象为 animal 对象借用 printInfo() 方法。在输出中，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.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()	使用现有对象作为原型创建新对象。
2	defineProperty()	克隆对象并将新属性添加到其原型中。
3	defineProperties()	将属性定义到特定对象中并获取更新后的对象。
4	getOwnPropertyDescriptor()	获取对象属性的属性描述符。
5	getOwnPropertyNames()	获取对象属性。
6	getPrototypeOf()	获取对象的原型。
7	keys()	以数组格式获取对象的所有键。

保护对象的方法

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

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",
         // 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 String 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 中，主要引入了数组和对象相关的方法。

打印页面