1. 從ES7到ES12,了解JavaScript的新特性與語法演變

        共 21725字,需瀏覽 44分鐘

         ·

        2023-08-24 04:27

        ??ES2016(ES7):

        一、Array.prototype.includes

        1.1 定義

        Array.prototype.includes 是一個用于判斷數(shù)組是否包含特定元素的方法。它返回一個布爾值,表示數(shù)組中是否存在指定的值。

        1.2 語法

              
              arr.includes(searchElement[, fromIndex])
        • arr: 要調(diào)用 includes 方法的數(shù)組。
        • searchElement: 要查找的元素。
        • fromIndex (可選): 開始查找的索引位置。如果省略該參數(shù),則從數(shù)組的開頭(索引 0)開始查找。如果 fromIndex 為負(fù)數(shù),則從數(shù)組的末尾開始計算。

        1.3 返回值

        一個布爾值。如果數(shù)組包含指定的元素,則返回 true,否則返回 false。

        1.4 舉例

              
              const numbers = [12345];

        console.log(numbers.includes(3)); // true
        console.log(numbers.includes(6)); // false
        console.log(numbers.includes(32)); // false,從索引 2 開始查找

        二、Exponentiation Operator 指數(shù)運算符

        2.1 定義

        Exponentiation Operator 是一個用于進(jìn)行指數(shù)運算的運算符,它允許將一個數(shù)值(底數(shù))進(jìn)行指定次數(shù)的乘方運算。

        2.2 語法

              
              base ** exponent
        • base: 底數(shù),即要進(jìn)行乘方運算的數(shù)值。
        • exponent: 指數(shù),表示要將底數(shù)乘方的次數(shù)。

        2.3 舉例

              
              console.log(2 ** 3); // 2的3次方,輸出: 8
        console.log(5 ** 2); // 5的2次方,輸出: 25
        console.log(10 ** 0); // 任何數(shù)的0次方都為1,輸出: 1

        Exponentiation Operator 提供了一種簡潔的語法來進(jìn)行乘方運算,避免了使用 Math.pow 等其他方法。

        ??ES2017(ES8):

        一、Async functions

        1.1 定義

        Async functionsasync 聲明的函數(shù),async 函數(shù)是 AsyncFunction 構(gòu)造函數(shù)的實例,其中允許使用 await 關(guān)鍵字。

        1.2 語法

              
              async function name([param[, param[, ...param]]]{
          // statements
        }

        1.3 返回值

        一個 Promise

        1.4 示例:

              
              async function fetchData() {
          try {
            console.log('Fetching data...');
            const response = await fetch('https://api.example.com/data');
            const data = await response.json();
            console.log('Data fetched successfully:', data);
            return data;
          } catch (error) {
            console.error('Error fetching data:', error);
            throw error;
          }
        }

        fetchData();

        二、Object.entries

        2.1 返回值

        Object.entries() 方法返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組。

        2.2 語法

              
              Object.entries(obj);

        2.3 示例

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

        三、Object.values

        3.1 返回值

        Object.values()方法返回一個給定對象自身可枚舉屬性值的數(shù)組。

        3.2 語法

              
              Object.values(obj);

        3.3 示例

              
              const obj = { a1b2 };
        const values = Object.values(obj);
        console.log(values); // 輸出:[1, 2]

        四、Object.getOwnPropertyDescriptors

        4.1 返回值

        Object.getOwnPropertyDescriptors() 方法用來獲取一個對象的所有自身屬性的描述符。

        4.2 語法

              
              Object.getOwnPropertyDescriptors(obj);

        4.3 示例

              
              const obj = { a1b2 };
        const descriptors = Object.getOwnPropertyDescriptors(obj);
        console.log(descriptors);
        // 輸出:
        // {
        //   a: { value: 1, writable: true, enumerable: true, configurable: true },
        //   b: { value: 2, writable: true, enumerable: true, configurable: true }
        // }

        五、Trailing commas 尾后逗號

        5.1 定義

        如果你想要添加新的屬性,并且在上一行已經(jīng)使用了尾后逗號,你可以僅僅添加新的一行,而不需要修改上一行。

        5.2 示例

              
              // 數(shù)組
        const arr = [
          1,
          2,
        ];

        // 對象
        const obj = {
          a1,
          b2,
        };

        // 函數(shù)參數(shù)定義
        function sum(x, y,{
          return x + y;
        }

        // 函數(shù)調(diào)用
        console.log(sum(12)); // 輸出:3

        六、String.prototype.padStart()

        6.1 定義

        padStart() 用另一個字符串填充當(dāng)前字符串。

        6.2 返回值

        在原字符串開頭填充指定的填充字符串直到目標(biāo)長度所形成的新字符串。

        6.3 語法

              
              str.padStart(targetLength);
        str.padStart(targetLength, padString);

        6.4 示例

              
              const str = 'abc';
        const paddedStr = str.padStart(10);
        console.log(paddedStr); // 輸出:"       abc"

        七、String.prototype.padEnd()

        7.1 定義

        padEnd() 方法會用一個字符串填充當(dāng)前字符串(如果需要的話則重復(fù)填充)。

        7.2 返回值

        返回在原字符串末尾填充指定的填充字符串直到目標(biāo)長度所形成的新字符串。

        7.3 語法

              
              str.padEnd(targetLength);
        str.padEnd(targetLength, padString);

        7.4 示例

              
              const str = 'abc';
        const paddedStr = str.padEnd(10);
        console.log(paddedStr); // 輸出:"abc       "

        ??ES2018(ES9):

        一、Async iterators 異步迭代器

        1.1 定義

        異步迭代器是在 ES2018 中引入的一種新的迭代器類型。它允許在進(jìn)行迭代時異步地獲取序列的下一個值。

        1.2 異步迭代器協(xié)議

        異步迭代器對象必須實現(xiàn)一個名為 Symbol.asyncIterator 的方法,該方法返回一個異步迭代器對象。

        異步迭代器對象應(yīng)該實現(xiàn)一個名為 next 的異步方法,該方法返回一個 Promise,解析為一個包含 valuedone 屬性的對象。

        • value:表示迭代器返回的值。
        • done:一個布爾值,表示迭代器是否已完成迭代。

        1.3 舉例

              
              // 異步迭代器示例
        const asyncIterable = {
          [Symbol.asyncIterator]() {
            let i = 0;
            return {
              async next() {
                if (i < 3) {
                  await new Promise((resolve) => setTimeout(resolve, 1000));
                  return { value: i++, donefalse };
                } else {
                  return { donetrue };
                }
              },
            };
          },
        };

        // 異步迭代
        (async function () {
          for await (const num of asyncIterable) {
            console.log(num);
          }
        })();

        二、Object rest properties 剩余屬性

        2.1 定義

        Object rest properties 允許使用剩余語法來獲取除已解構(gòu)屬性之外的其余屬性,并將它們放置在一個新的對象中。

        2.2 語法

              
              const { prop1, prop2, ...rest } = object;

        2.3 舉例

              
              const person = { name'John'age30city'New York'country'USA' };

        const { name, age, ...address } = person;

        console.log(name); // 'John'
        console.log(age); // 30
        console.log(address); // { city: 'New York', country: 'USA' }

        三、Object spread properties 擴展屬性

        3.1 定義

        Object spread properties 允許使用擴展運算符將一個對象的所有屬性拷貝到另一個對象中。

        3.2 語法

              
              const newObj = { ...obj };

        3.3 舉例

              
              const defaults = { option1trueoption2false };
        const userConfig = { option2true };

        const finalConfig = { ...defaults, ...userConfig };

        console.log(finalConfig);
        // Output: { option1: true, option2: true }

        四、Promise.prototype.finally

        4.1 定義

        Promise.prototype.finally 方法允許你在 Promise 完成時,無論結(jié)果是成功還是失敗,都執(zhí)行一些代碼。

        4.2 語法

              
              promise.finally(onFinally);
        • onFinally: 一個在 Promise 完成時執(zhí)行的函數(shù)。

        4.3 返回值

        一個新的 Promise,由原始 Promise 完成時的值或原始錯誤傳遞。

        4.4 舉例

              
              function fetchData() {
          return new Promise((resolve, reject) => {
            // 模擬異步操作
            setTimeout(() => {
              const data = Math.random();
              data > 0.5 ? resolve(data) : reject('Error: Data too small');
            }, 1000);
          });
        }

        fetchData()
          .then((result) => console.log('Success:', result))
          .catch((error) => console.error('Error:', error))
          .finally(() => console.log('Finally: Cleanup or Final Tasks'));

        ??ES2019(ES10):

        一、Array.prototype.{flat, flatMap} 扁平化嵌套數(shù)組

        1.1 Array.prototype.flat

        1.1.1 定義

        flat() 方法會按照一個可指定的深度遍歷遞歸數(shù)組,并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回。

        1.1.2 語法
              
              arr.flat([depth]);
        • depth 是數(shù)組遍歷的深度,默認(rèn)是 1。
        1.1.3 返回值

        一個新數(shù)組,不會改變舊數(shù)組。

        1.1.4 舉例
              
              const arr = [12, [[[34]]]];

        arr.flat();           // [1, 2, [[[3, 4]]]]
        arr.flat(3);          // [1, 2, [3, 4]]
        arr.flat(-1);         // [1, 2, [[[3, 4]]]]
        arr.flat(Infinity);   // [1, 2, 3, 4]
        1.1.5 注意

        flat() 會移除數(shù)組中的空項。

              
              let arr = [12, , , 3];
        arr.flat();           // [1, 2, 3]
        1.1.6 替換
        • reduceconcat
              
              let arr = [12, [34]];
        arr.reduce((arr, val) => arr.concat(val), []);
        • 擴展運算符與 concat
              
              let arr = [12, [34]];
        [].concat(...arr);

        1.2 Array.prototype.flatMap

        1.2.1 定義

        flatMap() 方法首先使用映射函數(shù)映射數(shù)組(深度值為 1)的每個元素,然后將結(jié)果壓縮成一個新數(shù)組。

        1.2.2 返回值

        一個新數(shù)組,并且每個元素都是回調(diào)函數(shù)的結(jié)果。

        1.2.3 語法
              
              arr.flatMap(function callback(currentVal[, index[, array]]{

        }[, thisArg])
        • callback: 可以生成一個新數(shù)組所調(diào)用的函數(shù)
          • currentVal: 當(dāng)前數(shù)組在處理的元素
          • index: 可選,正在處理的元素索引
          • array: 可選,被調(diào)用的數(shù)組
        • thisArg: 執(zhí)行 callback 函數(shù)時使用的 this 值
        1.2.4 舉例
              
              let arr = ['My name''is''''Lisa'];
        let newArr1 = arr.flatMap(cur => cur.split(' '));
        let newArr2 = arr.map(cur => cur.split(' '));
        console.log(newArr1); // ["My", "name", "is", "", "Lisa"]
        console.log(newArr2); // [["My", "name"], ["is"], [""], ["Lisa"]]

        二、Object.fromEntries

        2.1 定義

        fromEntries() 方法會把鍵值對列表轉(zhuǎn)換成一個對象。

        2.2 返回值

        一個新的對象。

        2.3 語法

              
              Object.fromEntries(iterable)
        • iterable: Array、Map 等可迭代對象

        2.4 舉例

              
              let map = new Map([['a'1], ['b'2]]);
        let mapToObj = Object.fromEntries(map);
        console.log(mapToObj);   // {a: 1, b: 2}

        let arr = [['a'1], ['b'2]];
        let arrToObj = Object.fromEntries(arr);
        console.log(arrToObj);    // {a: 1, b: 2}

        let obj = {a1b2};
        let newObj = Object.fromEntries(
          Object.entries(obj).map(
            ([key, val]) => [key, val * 2]
          )
        );
        console.log(newObj);   // {a: 2, b: 4}

        三、String.prototype.{trimStart, trimEnd}

        3.1 String.prototype.trimStart

        3.1.1 定義

        trimStart() 方法用來刪除字符串的開頭的空白字符。

        trimLeft() 是它的別名。

        3.1.2 返回值

        一個新的字符串,這個字符串左邊的空格已經(jīng)被去除掉了。

        3.1.3 語法
              
              str.trimStart();
        str.trimLeft();
        3.1.4 ?? 舉例
              
              let str = '    a b cd  ';
        str.trimStart();   // 'a b cd  '
        str.trimLeft();    // 'a b cd  '

        3.2 String.prototype.trimEnd

        3.2.1 定義

        trimEnd() 方法用來刪除字符串末尾的空白字符。trimRight() 是它的別名。

        3.2.2 返回值

        一個新的字符串,這個字符串右邊的空格已經(jīng)被去除了。

        3.2.3 語法
              
              str.trim

        End();
        str.trimRight();
        3.2.4 ?? 舉例
              
              let str = '    a b cd  ';
        str.trimEnd();     // '    a b cd'
        str.trimRight();   // '    a b cd'

        四、Symbol.prototype.description

        4.1 定義

        description 是一個只讀屬性,返回 Symbol 對象的可選描述符。

        4.2 語法

              
              Symbol.prototype.description

        4.3 返回值

        一個可選的字符串描述符。

        4.4 ?? 舉例

              
              const sym = Symbol('This is my symbol');
        console.log(sym.description);   // "This is my symbol"

        五、Optional catch binding

        5.1 定義

        ES10 引入了可選的 catch 綁定,允許在 catch 塊中省略異常參數(shù)。

        5.2 語法

              
              try {
          // 代碼塊
        catch {
          // 異常處理
        }

        5.3 舉例

              
              try {
          // 可能出現(xiàn)異常的代碼
        catch {
          // 不需要異常參數(shù)了,直接處理異常
        }

        六、Array.prototype.sort()

        6.1 定義

        在 ES10 中,規(guī)范明確了 Array.prototype.sort() 方法必須使用穩(wěn)定排序算法。在先前的規(guī)范中,對于沒有指定排序算法的瀏覽器和引擎,可能使用不穩(wěn)定的排序算法。穩(wěn)定排序算法會保持相等元素的原始相對順序。

        6.2 示例

              
              const arr = [{ num2 }, { num1 }, { num2 }, { num3 }];
        arr.sort((a, b) => a.num - b.num);
        console.log(arr);
        // Output: [{ num: 1 }, { num: 2 }, { num: 2 }, { num: 3 }]

        ??ES10(ES2019):

        一、空值合并運算符(Nullish coalescing Operator)

        1.1 定義

        空值合并運算符(??)是一個邏輯操作符,用于在變量為 null 或 undefined 時,提供一個默認(rèn)值。

        1.2 語法

              
              const result = valueToCheck ?? defaultValue;

        1.3 示例

              
              const name = null;
        const defaultName = 'John Doe';
        const result = name ?? defaultName;
        console.log(result); // Output: "John Doe"

        const age = 0;
        const defaultAge = 18;
        const result2 = age ?? defaultAge;
        console.log(result2); // Output: 0

        二、可選鏈 Optional chaining

        2.1 定義

        可選鏈操作符(?.)允許在對象鏈中安全地訪問深層的屬性或方法,當(dāng)遇到 null 或 undefined 時不會拋出錯誤,而是返回 undefined。

        2.2 語法

              
              const result = object?.property?.nestedProperty;

        2.3 示例

              
              const person = {
          name'John Doe',
          address: {
            city'New York',
          },
        };

        const cityName = person?.address?.city;
        console.log(cityName); // Output: "New York"

        const age = person?.age;
        console.log(age); // Output: undefined

        三、globalThis

        3.1 定義

        globalThis 是一個全局對象的標(biāo)準(zhǔn)屬性,用于在任何環(huán)境中獲取全局對象,無論在瀏覽器、Web Workers、Node.js 還是其他環(huán)境中。

        3.2 使用場景

        在不同的環(huán)境中,獲取全局對象有不同的方式:

        • 在瀏覽器中可以使用 windowself
        • 在 Web Workers 中可以使用 selfglobalThis
        • 在 Node.js 中可以使用 global

        現(xiàn)在,可以統(tǒng)一使用 globalThis 來獲取全局對象,無需關(guān)心當(dāng)前運行環(huán)境。

        3.3 示例

        在瀏覽器中:

              
              console.log(globalThis === window); // true
        console.log(globalThis === self);   // true

        在 Node.js 中:

              
              console.log(globalThis === global); // true

        在 Web Workers 中:

              
              console.log(globalThis === self);   // true

        四、BigInt

        4.1 定義

        BigInt 是一種內(nèi)置對象,用于表示任意大的整數(shù)。

        4.2 創(chuàng)建 BigInt

        BigInt 可以通過在整數(shù)字面量后面加 n 來創(chuàng)建。

              
              const bigIntNumber = 9007199254740991n;

        或者調(diào)用函數(shù) BigInt() 并傳遞一個整數(shù)值或字符串值。

              
              const bigIntNumber2 = BigInt(9007199254740991);
        const bigIntNumber3 = BigInt('9007199254740991');

        4.3 示例

              
              const a = 9007199254740991n;
        const b = BigInt('9007199254740991');
        const c = BigInt(9007199254740991);

        console.log(a); // Output: 9007199254740991n
        console.log(b); // Output: 9007199254740991n
        console.log(c); // Output: 9007199254740991n

        console.log(typeof a); // Output: "bigint"

        五、String.prototype.matchAll()

        5.1 定義

        matchAll() 方法返回一個包含正則表達(dá)式全局匹配結(jié)果的迭代器。

        5.2 語法

              
              const iterator = string.matchAll(regexp);

        5.3 示例

              
              const str = 'test1test2';

        const regexp = /t(e)(st(\d?))/g;
        const matches = [...str.matchAll(regexp)];

        for (const match of matches) {
          console.log(match);
        }

        六、Promise.allSettled()

        6.1 定義

        Promise.allSettled() 方法返回一個在所有給定的 promise 都已經(jīng) fulfilled 或 rejected 后的 promise,并帶有一個對象數(shù)組,每個對象表示對應(yīng)的 promise 結(jié)果。

        6.2 語法

              
              const promises = [promise1, promise2, ...];
        Promise.allSettled(promises)
          .then(results => {
            // Handle results
          })
          .catch(error => {
            // Handle error
          });

        6.3 示例

              
              const promise1 = Promise.resolve(1);
        const promise2 = Promise.reject(new Error('Error occurred'));

        Promise.allSettled([promise1, promise2])
          .then(results => {
            console.log(results);
          })
          .catch(error => {
            console.error(error);
          });

        七、Dynamic import(按需 import)

        7.1 定義

        Dynamic import 是一種動態(tài)導(dǎo)入模塊的方法,它可以在需要的時候才加載模塊,而不是在代碼運行時一開始就加載。

        7.2 語法

              
              import(modulePath)
          .then(module => {
            // Use module
          })
          .catch(error => {
            // Handle error
          });

        7.3 示例

              
              button.addEventListener('click', event => {
          import('./test.js')
            .then(test => {
              alogBox.open();
            })
            .catch(error => {
              // Handle error
            });
        });

        八、Promise.any

        8.1 定義

        Promise.any() 方法接受一組 Promise 實例作為參數(shù),并返回一個新的 Promise 實例。該 Promise 實例在參數(shù)中的任意一個 Promise 成功(fulfilled)時變?yōu)?fulfilled 狀態(tài),如果所有參數(shù)實例都變成 rejected 狀態(tài),則返回一個 AggregateError 類型的實例,包含所有錯誤信息。

        8.2 語法

              
              Promise.any([promise1, promise2, ...])
          .

        then(result => {
            // Handle the first fulfilled result
          })
          .catch(errors => {
            // Handle errors
          });

        8.3 示例

              
              const promise1 = new Promise((resolve, reject) => setTimeout(reject, 500'Error 1'));
        const promise2 = new Promise(resolve => setTimeout(resolve, 300'Result 2'));
        const promise3 = new Promise(resolve => setTimeout(resolve, 800'Result 3'));

        Promise.any([promise1, promise2, promise3])
          .then(result => {
            console.log(result); // Output: "Result 2"
          })
          .catch(errors => {
            console.error(errors); // Output: AggregateError: All promises were rejected
          });

        ??ES2021(ES12):

        一、邏輯運算符和賦值表達(dá)式

        1.1 定義

        ES12 引入了邏輯運算符和賦值表達(dá)式的組合,這些運算符方便地對變量進(jìn)行條件賦值操作。

        1.2 語法

        • &&=:邏輯與賦值表達(dá)式,將右側(cè)的值賦給左側(cè)的變量,但僅當(dāng)左側(cè)的變量在布爾上下文中為真時。
        • ||=:邏輯或賦值表達(dá)式,將右側(cè)的值賦給左側(cè)的變量,但僅當(dāng)左側(cè)的變量在布爾上下文中為假時。
        • ??=:空值合并賦值表達(dá)式,將右側(cè)的值賦給左側(cè)的變量,但僅當(dāng)左側(cè)的變量為 null 或 undefined 時。

        1.3 示例

              
              let x = 5;
        let y = 10;

        // 邏輯與賦值表達(dá)式
        x &&= y;
        console.log(x); // Output: 10 (因為 x 為真,所以將 y 賦給 x)

        let a = 0;
        let b = 20;

        // 邏輯或賦值表達(dá)式
        a ||= b;
        console.log(a); // Output: 20 (因為 a 為假,所以將 b 賦給 a)

        let foo = null;
        let bar = 'Hello';

        // 空值合并賦值表達(dá)式
        foo ??= bar;
        console.log(foo); // Output: "Hello" (因為 foo 為 null,所以將 bar 賦給 foo)

        二、String.prototype.replaceAll()

        2.1 定義

        String.prototype.replaceAll() 方法用于替換字符串中所有匹配的子字符串,類似于 String.prototype.replace(),但是會替換所有匹配,而不僅僅是第一個匹配。

        2.2 語法

              
              const newStr = originalStr.replaceAll(searchValue, replaceValue);

        2.3 示例

              
              const str = 'Hello, hello, hello';

        const newStr = str.replaceAll('hello''Hi');
        console.log(newStr); // Output: "Hello, Hi, Hi"

        三、數(shù)字分隔符

        3.1 定義

        數(shù)字分隔符是一種增強的數(shù)值表示法,可以在數(shù)字中使用下劃線 _ 進(jìn)行分隔,以提高數(shù)字的可讀性。

        3.2 示例

              
              const billion = 1_000_000_000;
        const pi = 3.14_15_92_65;
        console.log(billion); // Output: 1000000000
        console.log(pi); // Output: 3.14159265


        瀏覽 19
        點贊
        評論
        收藏
        分享

        手機掃一掃分享

        分享
        舉報
        評論
        圖片
        表情
        推薦
        點贊
        評論
        收藏
        分享

        手機掃一掃分享

        分享
        舉報
          
          

            1. jizz性欧美17 | 一级黄色操逼大片 | 日韩人妻精品一区二区三区 | 精品欧美一级 | 91无码人妻东京热精品一区 |