即將推出的 JavaScript 功能：使用「Array.zip」和「Array.zipKeyed」簡化陣列組合-js教程-PHP中文網

即將推出的 JavaScript 功能：使用「Array.zip」和「Array.zipKeyed」簡化陣列組合

DDD

發布： 2024-12-05 06:21:11

原創

844 人瀏覽過

Upcoming JavaScript Features: Simplifying Array Combinations with `Array.zip` and `Array.zipKeyed`

介紹

在 JavaScript 中，使用陣列是日常程式設計的主要內容。然而，以元素方式組合多個數組通常需要冗長的或外部的解決方案。即將推出的提案 Array.zip 和 Array.zipKeyed 旨在簡化此過程，使數組處理更加直觀和高效。讓我們深入研究這些提案、它們的語法、用例和潛在的挑戰。

1.問題：在 JavaScript 中組合陣列

當前的挑戰

組合多個陣列通常涉及：

使用循環。
依賴 Array.prototype.map 等輔助方法。
利用 Lodash 或 Ramda 等外部函式庫。

這會導致程式碼冗長且可讀性較差。例如，依元素合併兩個陣列需要：

const array1 = [1, 2, 3];
const array2 = ['a', 'b', 'c'];

const combined = array1.map((value, index) => [value, array2[index]]);
console.log(combined); // [[1, 'a'], [2, 'b'], [3, 'c']]

登入後複製

雖然實用，但這種方法缺乏優雅並引入了樣板文件。

2.解決方案：引入 Array.zip 和 Array.zipKeyed

這些方法是什麼？

Array.zip：將多個陣列逐個元素組合成一個新的元組陣列。
Array.zipKeyed：使用提供的一組鍵將多個陣列組合成物件。

這些方法旨在透過使多個陣列的同步更簡單且更符合人體工學來提高程式碼可讀性並簡化陣列操作。

3.語法與範例

數組.zip

句法：

Array.zip(...iterables);

登入後複製

參數：

iterables：要組合的陣列或iterables。

例子：

const numbers = [1, 2, 3];
const letters = ['a', 'b', 'c'];
const booleans = [true, false, true];

const result = Array.zip(numbers, letters, booleans);
console.log(result);
// Output: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

登入後複製

Array.zipKeyed

句法：

Array.zipKeyed(keys, ...iterables);

登入後複製

參數：

keys：表示結果物件的鍵的字串陣列。
iterables：要組合的陣列或iterables。

例子：

const keys = ['id', 'name', 'isActive'];
const ids = [101, 102, 103];
const names = ['Alice', 'Bob', 'Charlie'];
const statuses = [true, false, true];

const result = Array.zipKeyed(keys, ids, names, statuses);
console.log(result);
// Output:
// [
//   { id: 101, name: 'Alice', isActive: true },
//   { id: 102, name: 'Bob', isActive: false },
//   { id: 103, name: 'Charlie', isActive: true }
// ]

登入後複製

4.使用案例

資料合併

組合多個來源的資料時，例如傳回單獨陣列的 API：

const headers = ['Name', 'Age', 'City'];
const values = ['Alice', 30, 'New York'];

const result = Array.zipKeyed(headers, values);
console.log(result);
// Output: [{ Name: 'Alice', Age: 30, City: 'New York' }]

登入後複製

CSV 解析

透過將標題對應到對應的行值來將 CSV 檔案解析為物件：

const headers = ['Product', 'Price', 'Stock'];
const row1 = ['Laptop', 1000, 50];
const row2 = ['Phone', 500, 150];

const data = [row1, row2].map(row => Array.zipKeyed(headers, row));
console.log(data);
// Output:
// [
//   { Product: 'Laptop', Price: 1000, Stock: 50 },
//   { Product: 'Phone', Price: 500, Stock: 150 }
// ]

登入後複製

表單處理

組合欄位名稱和值進行處理：

const array1 = [1, 2, 3];
const array2 = ['a', 'b', 'c'];

const combined = array1.map((value, index) => [value, array2[index]]);
console.log(combined); // [[1, 'a'], [2, 'b'], [3, 'c']]

登入後複製

平行迭代

簡化涉及多個陣列的相關計算：

Array.zip(...iterables);

登入後複製

5.潛在的陷阱和解決方案

數組長度不均勻

如果輸入陣列的長度不同，則僅組合最短陣列的元素。

const numbers = [1, 2, 3];
const letters = ['a', 'b', 'c'];
const booleans = [true, false, true];

const result = Array.zip(numbers, letters, booleans);
console.log(result);
// Output: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

登入後複製