JavaScript ESelease 筆記：釋放現代 JavaScript 的力量

JavaScript ES6，正式名稱為 ECMAScript 2015，引入了重大增強功能和新功能，改變了開發人員編寫 JavaScript 的方式。以下是定義 ES6 的前 20 個功能，它們使 JavaScript 程式設計變得更有效率和愉快。

JavaScript ES6 的 20 大功能

1 Let 和 Const

• let 允許區塊範圍的變數宣告。
• const 建立區塊作用域常數，防止重新指派。

2 箭頭函數

• 函數表達式的語法更短，保持了 this 的詞法值。

   const add = (a, b) => a + b;

3 範本文字

• 增強的字串文字，支援插值和多行字串。

   const name = 'World';
   const greeting = `Hello, ${name}!`;

4 解構賦值

• 將陣列中的值或物件中的屬性解壓縮為不同變數的語法。

   const arr = [1, 2, 3];
   const [x, y, z] = arr;

5 預設參數

• 函數參數可以有預設值，讓函數更有彈性。

   function multiply(a, b = 1) {
       return a * b;
   }

6 休息與傳播運算子

• ...可用於擴充或聚集元素。

   const sum = (...numbers) => numbers.reduce((a, b) => a + b, 0);
   const arr = [1, 2, 3];
   const newArr = [...arr, 4, 5];

7 模組

• ES6 引入了模組系統以更好地組織程式碼。

   // export
   export const pi = 3.14;
   // import
   import { pi } from './math.js';

8 課程

• JavaScript 現有的基於原型的繼承的語法糖，允許更簡單的類別定義。

   class Animal {
       constructor(name) {
           this.name = name;
       }
       speak() {
           console.log(`${this.name} makes a noise.`);
       }
   }

9 承諾

• 處理非同步操作的本機方法，提供回呼的更清晰的替代方案。

   const fetchData = () => new Promise((resolve, reject) => {
       // async operation
   });

10 增強的物件文字
- 定義物件屬性和方法的更簡潔語法。

    const name = 'John';
    const person = {
        name,
        greet() {
            console.log(`Hello, ${this.name}`);
        }
    };

11 符號資料型別
- 用於唯一識別碼的新原始資料類型。

    const sym = Symbol('description');

12 地圖與佈景集合
- 用於儲存唯一值或鍵值對的新資料結構。

    const mySet = new Set([1, 2, 3]);
    const myMap = new Map([[1, 'one'], [2, 'two']]);

13 WeakMap 和 WeakSet
- 允許對其密鑰進行垃圾回收的集合。

    const weakMap = new WeakMap();

14 迭代器與產生器
- 使用 Symbol.iterator 自訂可迭代物件以及可以使用 function* 暫停的函數。

    function* generator() {
        yield 1;
        yield 2;
    }

15 for...of 循環
- 用於迭代可迭代物件（例如陣列和字串）的新循環構造。

    for (const value of [1, 2, 3]) {
        console.log(value);
    }

16 Array.prototype.find() 和 Array.prototype.findIndex()
- 搜尋陣列並傳回第一個符合項目或其索引的方法。

    const arr = [5, 12, 8, 130, 44];
    const found = arr.find(element => element > 10);

17 String.prototype.includes()
- 檢查字串是否包含指定子字串的方法。

    const str = 'Hello, world!';
    console.log(str.includes('world')); // true

18 Object.assign()
- 將值從一個或多個來源物件複製到目標物件的方法。

    const target = { a: 1 };
    const source = { b: 2 };
    Object.assign(target, source);

19 Object.entries() 和 Object.values()
- 以陣列形式檢索物件的條目或值的方法。

    const obj = { a: 1, b: 2 };
    console.log(Object.entries(obj)); // [['a', 1], ['b', 2]]

20 Promise.all() 和 Promise.race()
- 同時處理多個 Promise 的方法。

    Promise.all([promise1, promise2]).then(results => {
        // handle results
    });

結論

JavaScript ES6 從根本上增強了該語言，使其更加強大且對開發人員友好。透過利用這些功能，開發人員可以編寫更清晰、更有效率且更易於維護的程式碼。在您的下一個專案中擁抱 ES6 的力量！

以上是JavaScript ESelease 筆記：釋放現代 JavaScript 的力量的詳細內容。更多資訊請關注PHP中文網其他相關文章！