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 中，主要引入了陣列和物件相關的方法。

列印頁面