JavaScript ES 中令人難以置信的新功能(4)

最新的 ECMAScript 版本 ES15 引入了一些新功能，為 Javascript 開發人員提供出色的開發體驗。這些增強功能跨越不同領域，從更新的 Javascript 語法和資料處理到安全性、效能和提高開發人員生產力的工具方面的進步。

1. 數組分組

ES15 中最令人興奮（也是我個人最喜歡的功能之一）的功能是 Object.groupBy() 方法。
這種方式簡化了根據特定標準對數組中的元素進行分組的方式。這使得資料操作更加有效率且不易出錯。

範例：

const cities = [
  { name: 'Melbourne', country: 'Australia' },  
  { name: 'Auckland', country: 'New Zealand' },
  { name: 'Sydney', country: 'Australia' },
  { name: 'Brisbane', country: 'Australia' },
  { name: 'Wellington', country: 'New Zealand' }
];

const groupedByCountry = Object.groupBy(cities, fruit => fruit.country);
console.log(groupedByCountry);

// Output:
// {
//   "Australia": [
//       { "name": "Melbourne", "country": "Australia" },
//       { "name": "Sydney", "country": "Australia" },
//       { "name": "Brisbane", "country": "Australia" }
//   ],
//   "New Zealand": [
//       { "name": "Auckland", "country": "New Zealand" },
//       { "name": "Wellington", "country": "New Zealand" }
//   ]
// }

透過使用此功能，我們可以減少對傳統上用於數組分組的自訂函數或第三方函式庫的需求。

此外，透過此功能，我們可以透過直接表達我們的意圖來使我們的程式碼更易於理解和維護

2. 管道運算子(|>)

有時我們需要使用多個函數作為連結過程。在這種情況下，我們可以使用管道運算子 (|>) 來簡化連結過程。

範例：

const double = (x) => x * 2;
const increment = (x) => x + 1;
const square = (x) => x * x;

const result = 5 |> double |> increment |> square;

// Output: 121

上面的傳統做法是這樣的

const double = (x) => x * 2;
const increment = (x) => x + 1;
const square = (x) => x * x;

const result = square(increment(double(5)));
console.log(result);

// Output: 121

透過使用管道運算符，我們可以使用更函數式的程式風格。由此，我們可以透過消除深度巢狀函數呼叫的複雜性來使程式碼更具可讀性。

3. 方法連結運算子 (?.())

ES15 透過引進新的方法鏈運算子擴展了可選鏈。此方法連結運算子增加了深度嵌套物件中方法呼叫的安全性。

範例：

const data = {
  user: {
    getName: () => 'Tim'
  }
};

console.log(data.user?.getName?.());  // Output: 'Alice'
console.log(data.user?.getAge?.());  // Output: undefined

方法連結運算子 (?.()) 可讓您安全地呼叫可能為 null 或未定義的物件上的方法。這降低了呼叫方法引起的運行時錯誤的風險。

4. 設定方法增強

ES15 引入了Set 物件的多項增強功能，包括union、intersection、difference 和symmetryDifference

const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);

const unionSet = setA.union(setB);
const differenceSet = setA.difference(setB);
const intersectionSet = setA.intersection(setB);
const symmetricDifferenceSet = setA.symmetricDifference(setB);

console.log(unionSet); // Output: {1, 2, 3, 4, 5}
console.log(differenceSet); // Output: {1, 2}
console.log(intersectionSet); // Output: {3}
console.log(symmetricDifferenceSet); // Output: {1, 2, 4, 5}

• 聯盟 Set 實例的 union() 方法接受一個集合並傳回一個新集合，其中包含該集合和給定集合中的一個或兩個中的元素。
  

• 差異 Set 實例的 Difference() 方法接受一個集合並傳回一個新集合，其中包含該集合中但不包含給定集合中的元素。
  

• 交叉路口 Set 實例的 intersection() 方法接受一個集合並傳回一個新集合，其中包含該集合和給定集合中的元素。
  

• 對稱差異
  Set 實例的 symmetryDifference() 方法接受一個集合並傳回一個新集合，其中包含位於該集合或給定集合中的元素，但不同時位於兩者中。

5. 增強的 JSON 模組

在先前的 ECMAScript 版本中，開發人員依賴捆綁器或載入器來匯入 JSON 檔案。 ES15 現在支援動態匯入和模式驗證，可以更輕鬆地處理結構化資料並確保匯入的資料符合預期格式。

您現在可以直接匯入 JSON 數據，就像匯入 JavaScript 模組一樣。

範例：

const cities = [
  { name: 'Melbourne', country: 'Australia' },  
  { name: 'Auckland', country: 'New Zealand' },
  { name: 'Sydney', country: 'Australia' },
  { name: 'Brisbane', country: 'Australia' },
  { name: 'Wellington', country: 'New Zealand' }
];

const groupedByCountry = Object.groupBy(cities, fruit => fruit.country);
console.log(groupedByCountry);

// Output:
// {
//   "Australia": [
//       { "name": "Melbourne", "country": "Australia" },
//       { "name": "Sydney", "country": "Australia" },
//       { "name": "Brisbane", "country": "Australia" }
//   ],
//   "New Zealand": [
//       { "name": "Auckland", "country": "New Zealand" },
//       { "name": "Wellington", "country": "New Zealand" }
//   ]
// }

const double = (x) => x * 2;
const increment = (x) => x + 1;
const square = (x) => x * x;

const result = 5 |> double |> increment |> square;

// Output: 121

但是，此變更可能會破壞依賴較舊的非標準導入 JSON 方式的程式碼，或某些建置工具組態有較舊的行為。

以上是JavaScript ES 中令人難以置信的新功能(4)的詳細內容。更多資訊請關注PHP中文網其他相關文章！