使用 JavaScript 將鍵值對推送到陣列中
- 使用 JavaScript 將鍵值對推送到陣列中
-
在 JavaScript 中使用
map()將鍵值對推送到陣列中 -
在 JavaScript 中使用
reduce()將鍵值對推送到陣列中 - 在 JavaScript 中使用 jQuery 將鍵值對推送到陣列中
本文討論如何使用 JavaScript 將鍵值對推送到陣列中。我們可以使用帶有 map() 和 reduce() 方法的 jQuery 和箭頭函式。
該目標也可以在不使用任何內建方法的情況下實現（本文稍後討論）。
使用 JavaScript 將鍵值對推送到陣列中
讓我們從不使用內建方法和函式開始。在下面的程式碼中，我們有一個名為 arr1 的陣列，其中包含兩個元素 left 和 top。
我們分別宣告另一個陣列和一個名為 arr2 和 obj 的物件。
編寫一個 for 迴圈，直到 arr1.length-1 執行。在每次迭代中，我們使用括號符號為 obj 建立鍵值對。
完成後，我們使用 push() 方法將 obj 插入 arr2 並在控制檯上列印。
JavaScript 程式碼：
var arr1 = ['left', 'top'], arr2 = [];
var obj = {};
for (i = 0; i < arr1.length; i++) {
obj[arr1[i]] = 0;
}
arr2.push(obj);
console.log(arr2);
輸出：
[{
left: 0,
top: 0
}]
現在，讓我們轉向將鍵值對推送到 arr2 的內建函式和方法。
在 JavaScript 中使用 map() 將鍵值對推送到陣列中
ECMAScript6 (ES6) 引入了箭頭函式，讓我們可以更簡潔地編寫函式。如果函式只有一個語句，我們只能使用這個函式。
map() 方法通過為每個陣列的元素呼叫一次函式來建立一個新陣列。它不會修改原始陣列並針對空元素執行。
JavaScript 程式碼：
var arr1 = ['left', 'top'];
const arr2 = arr1.map(value => ({[value]: 0}));
console.log(arr2);
輸出：
[{
left: 0
}, {
top: 0
}]
你可能已經觀察到我們可以新增兩個具有相同資料的物件。在上述輸出中，每個物件都有一個屬性。
在 JavaScript 中使用 reduce() 將鍵值對推送到陣列中
reducer 函式由 reduce() 方法執行。它只返回一個值，即函式的累積答案。
與 map() 方法一樣，reduce() 方法不會更新原始陣列併為陣列的空元素執行函式。
JavaScript 程式碼：
var arr1 = ['left', 'top'];
const arr2 = arr1.reduce((obj, arrValue) => (obj[arrValue] = 0, obj), {});
console.log(arr2);
輸出：
{
left: 0,
top: 0
}
在 JavaScript 中使用 jQuery 將鍵值對推送到陣列中
假設你想要在 arr2 陣列中具有兩個屬性（left、top）的一個物件的鍵值對。讓我們使用 jQuery 來實現。
示例程式碼：
var arr1 = ['left', 'top'], arr2 = [];
var obj = {};
$.each(arr1, function(index, value) {
obj[value] = 0;
});
arr2.push(obj);
console.log(arr2);
輸出：
[{
left: 0,
top: 0
}]
如果我們有兩個名為 keys 和 values 的陣列會怎樣。我們想從 keys 和 values 中獲取所有元素並將它們推送到第三個陣列中。
請參閱以下示例。
var keys = ['ID', 'FirstName', 'LastName', 'Gender'],
values = [1, 'Mehvish', 'Ashiq', 'Female'], arr = [];
var obj = {};
for (i = 0; i < keys.length && i < values.length; i++) {
obj[keys[i]] = values[i];
}
arr.push(obj);
console.log(arr);
輸出：
[{
FirstName: "Mehvish",
Gender: "Female",
ID: 1,
LastName: "Ashiq"
}]
