本文記錄ES7后續(xù)一些自己沒(méi)get到的好用的新特性。

1.hasOwn

hasOwn用于檢查對(duì)象自身是否擁有某個(gè)屬性，而并非其原型鏈上的屬性。如果對(duì)象擁有該屬性，則返回true，否則返回false。

let obj = {  
  prop: 123  
};  
  
console.log(Object.hasOwn(obj, 'prop'));  // 輸出：true  
console.log(Object.hasOwn(obj, 'nonExistent'));  // 輸出：false

2.Promise.prototype.finally()

finally()方法在Promise被解決或拒絕后，無(wú)論如何都會(huì)執(zhí)行。它允許你指定在Promise結(jié)束時(shí)必須執(zhí)行的清理邏輯。在之前處理Promise回調(diào)中一般只會(huì)寫(xiě)then、catch,如果使用finally處理則更好。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .finally(() => {
    console.log('Fetch request completed.');
  });

3.Object.fromEntries()

這個(gè)靜態(tài)方法允許將鍵值對(duì)列表轉(zhuǎn)換為對(duì)象。它接收一個(gè)鍵值對(duì)的可迭代對(duì)象（如數(shù)組）作為參數(shù)，并返回一個(gè)新的對(duì)象。

const entries = [['name', 'John'], ['age', 30], ['city', 'New York']];

// 將鍵值對(duì)列表轉(zhuǎn)換為對(duì)象
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'John', age: 30, city: 'New York' }

4.globalThis

ES10引入了一個(gè)名為globalThis的全局屬性，它始終指向全局對(duì)象，無(wú)論在什么環(huán)境下。

// 在瀏覽器控制臺(tái)和 Node.js 中使用 globalThis
console.log(globalThis);
// 在瀏覽器全局作用域中聲明變量
globalThis.myVariable = "Hello World";
console.log(myVariable); // "Hello World"

除了訪問(wèn)全局變量，你還可以使用globalThis來(lái)調(diào)用全局函數(shù)。例如，如果你在全局作用域中定義了一個(gè)函數(shù)myFunction，你可以在Vue組件中使用globalThis.myFunction()來(lái)調(diào)用它。

// 在全局作用域中定義函數(shù)  
globalThis.myFunction = () => {  
  console.log("Hello, Vue!");  
};  
  
// 在Vue組件中調(diào)用全局函數(shù)  
export default {  
  mounted() {  
    globalThis.myFunction(); // 輸出 "Hello, Vue!"  
  }  
}

5.可選鏈操作符

可選鏈操作符 ?. 允許在訪問(wèn)可能為 null 或 undefined 的屬性或方法時(shí)避免出現(xiàn)錯(cuò)誤。如果鏈中的某個(gè)屬性或方法不存在，則整個(gè)表達(dá)式的值將為 undefined，而不會(huì)拋出異常。
可以使用 ?. 來(lái)訪問(wèn)可能為 null 或 undefined 的屬性或方法，避免出現(xiàn)錯(cuò)誤。例如：

const name = person?.name;
const age = person?.age?.value;

6.空值合并操作符

?? 可以用來(lái)提供默認(rèn)值，當(dāng)左側(cè)的值為 null 或 undefined 時(shí)，使用右側(cè)的值作為結(jié)果。
空值合并操作符 ?? 主要用于檢查變量是否為 null 或 undefined，如果是，則返回默認(rèn)值。與邏輯或操作符 || 不同，空值合并操作符只有在變量值為 null 或 undefined 時(shí)才會(huì)返回默認(rèn)值，其他 falsy 值（如空字符串、0 或 false）仍然會(huì)返回變量本身。例如：

const value = someVariable ?? defaultValue;

• ?? 和 || 運(yùn)算符的區(qū)別?? 和 || 都是 JavaScript 中的邏輯運(yùn)算符，但它們的行為在某些方面是不同的。

const value = someVariable || defaultValue;

someVariable ?? defaultValue 是一個(gè)邏輯非空運(yùn)算符，它表示如果 someVariable 不為 null 或 undefined，那么返回 someVariable，否則返回 defaultValue。

而 someVariable || defaultValue 是一個(gè)邏輯或運(yùn)算符，它表示如果 someVariable 為假值（false、0、null、undefined、NaN 或者 ""），那么返回 defaultValue，否則返回 someVariable。

所以主要的區(qū)別在于：

?? 只檢查其左邊的操作數(shù)為 null 或 undefined。如果左邊的操作數(shù)不是 null 或 undefined，無(wú)論其值是什么（即使是 false、0、"" 等假值），都將返回左邊的操作數(shù)，而不會(huì)考慮右邊的操作數(shù)。
|| 會(huì)檢查其左邊的操作數(shù)的所有假值（包括 null、undefined、false、0、""、NaN 等）。如果左邊的操作數(shù)為任何假值，都將返回右邊的操作數(shù)，否則返回左邊的操作數(shù)。
因此，使用 ?? 可以確保當(dāng)變量為 null 或 undefined 時(shí)返回默認(rèn)值，而使用 || 則無(wú)法保證這一點(diǎn)。

7.動(dòng)態(tài) import() 函數(shù)

能夠動(dòng)態(tài)地導(dǎo)入模塊，返回一個(gè) Promise 對(duì)象，可以在需要時(shí)按需加載代碼。例如：

import("./module.js")
    .then(module => {
        // 使用導(dǎo)入的模塊
    })
    .catch(error => {
        // 處理導(dǎo)入失敗的情況
    });

8.Promise.allSettled()

接收多個(gè) Promise 對(duì)象，并返回一個(gè)新的 Promise，當(dāng)所有的 Promise 完成（不管是成功還是失?。r(shí)才會(huì)被 resolve。返回的結(jié)果是一個(gè)數(shù)組，每個(gè)元素包含原始 Promise 的狀態(tài)和值。例如：

Promise.allSettled([promise1, promise2])
    .then(results => {
        for (const result of results) {
            console.log(result.status, result.value);
        }
    });

Promise.allSettled() 是一個(gè)新的 Promise API，它接收一個(gè) Promise 數(shù)組，并在所有 Promise 完成后返回一個(gè)新的 Promise，該 Promise 的值是一個(gè)包含每個(gè) Promise 狀態(tài)和結(jié)果的對(duì)象數(shù)組。無(wú)論 Promise 是成功還是失敗，它都會(huì)被解析。

• Promise.allSettled() 和 Primise.all()的區(qū)別

首先，Promise.allSettled() 接受一個(gè) Promise 數(shù)組作為參數(shù)，而 Promise.all() 也接受一個(gè) Promise 數(shù)組，但兩者在處理異步操作和返回結(jié)果上有不同的行為。

返回結(jié)果：

• Promise.allSettled() 返回一個(gè) Promise 對(duì)象，這個(gè)對(duì)象的狀態(tài)取決于輸入的 Promise 數(shù)組中所有 Promise 的狀態(tài)。如果所有的 Promise 都成功，這個(gè)方法返回的 Promise 將處于成功狀態(tài)，并且它的結(jié)果值是一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象包含了對(duì)應(yīng) Promise 的狀態(tài)和值。如果任何一個(gè) Promise 失敗，這個(gè)方法返回的 Promise 將處于失敗狀態(tài)，并且它的失敗值是第一個(gè)失敗的 Promise 的失敗原因。

• Promise.all() 返回一個(gè) Promise 對(duì)象，這個(gè)對(duì)象的狀態(tài)取決于輸入的 Promise 數(shù)組中所有 Promise 的狀態(tài)。如果所有的 Promise 都成功，這個(gè)方法返回的 Promise 將處于成功狀態(tài)，并且它的結(jié)果值是一個(gè)數(shù)組，數(shù)組元素是每個(gè) Promise 的成功結(jié)果。如果任何一個(gè) Promise 失敗，這個(gè)方法返回的 Promise 將處于失敗狀態(tài)，并且它的失敗值是第一個(gè)失敗的 Promise 的失敗原因。
  使用場(chǎng)景：

如果你需要知道所有異步操作的結(jié)果，無(wú)論成功還是失敗，Promise.allSettled() 是最好的選擇。
如果你只關(guān)心所有異步操作是否成功，而不在意失敗的操作具體是什么，你可以選擇 Promise.all()。
總的來(lái)說(shuō)，Promise.allSettled() 和 Promise.all() 各有其特點(diǎn)，選擇哪個(gè)方法取決于你的具體需求。

9.Promise.any()

和Promise.allSettled()的區(qū)別在于可以全部執(zhí)行并且返回錯(cuò)誤的Promise錯(cuò)誤信息數(shù)組

10.Array.at()

取出數(shù)組中特定順序的元素
在日常開(kāi)發(fā)中，我們一般會(huì)使用[]，直接來(lái)獲取數(shù)組中的元素，比如array[0]、array[2]，
但是如果是取出數(shù)組中的倒數(shù)第2個(gè)元素時(shí)候，我們得先求出數(shù)組的長(zhǎng)度 array[array.length - 2],這個(gè)就比較麻煩了，
at()方法是JavaScript中數(shù)組對(duì)象的一個(gè)新方法，它可以根據(jù)指定的索引返回?cái)?shù)組中對(duì)應(yīng)的元素。如果指定的索引超出數(shù)組范圍，at()方法返回undefined。

const array = [1,2,3,4,5,6,7,8];
console.log(array.at(0)); // 數(shù)組中元素索引為0的元素  1
console.log(array.at(-1)); // 倒數(shù)第一個(gè)元素  8
console.log(array.at(-2)); // 倒數(shù)第二個(gè)元素  7
console.log(typeof array.at(-10)); //返回undefined

除了數(shù)組，字符串和 TypedArray 對(duì)象現(xiàn)在也有 at() 方法。

const str = 'Hello world!';
console.log(str.at(0)); // H
console.log(str.at(1)); // e
console.log(str.at(-1)); // !
console.log(str.at(-3)); // l
console.log(typeof str.at(30)); // undefined


const typedArray = new Uint8Array([16, 32, 48, 64]);
console.log(typedArray.at(0)); // 16
console.log(typedArray.at(1)); // 32
console.log(typedArray.at(-1)); // 64
console.log(typedArray.at(-3)); // 32
console.log(typeof typedArray.at(30)); // undefined

11.“#”聲明私有屬性

以前我們用“_”來(lái)表示私有屬性，但是不安全，仍然有可能被外部修改。在 JavaScript 中，使用 "#" 符號(hào)聲明私有屬性是一種相對(duì)較新的特性，被稱為“私有字段”（Private Fields）。它是在 ECMAScript 2019 標(biāo)準(zhǔn)中引入的，主要用于防止類的屬性被意外修改或訪問(wèn)。

class Person {
    #money=1
    constructor (name) {
      this.name = name
    }
    get money () {
      return this.#money
    }
    set money (money) {
      this.#money = money
    }
    showMoney () {
      console.log(this.#money)
    }
  }
  const p1 = new Person('fatfish')
  console.log(p1.money) // 1
  // p1.#money = 2 // We cannot modify #money in this way
  p1.money = 2
  console.log(p1.money) // 2
  console.log(p1.#money) // 未捕獲的語(yǔ)法錯(cuò)誤：私有字段“#money”必須在封閉的類中聲明class

12.findLast()

findLast是一個(gè)用于在列表中查找最后一個(gè)滿足特定條件的元素的函數(shù)。具體來(lái)說(shuō)，這個(gè)函數(shù)會(huì)從列表的末尾開(kāi)始逐個(gè)檢查元素，直到找到第一個(gè)滿足條件的元素為止。如果找不到滿足條件的元素，函數(shù)會(huì)返回null或undefined。

const array = [1, 2, 3, 4, 5];  
const lastNumber = array.findLast(num => num > 3);  
console.log(lastNumber); // 輸出：5

在這個(gè)例子中，findLast函數(shù)會(huì)在數(shù)組array中查找最后一個(gè)大于3的數(shù)字。由于5是最后一個(gè)大于3的數(shù)字，因此lastNumber的值為5。

----更新到2022即ES13