使用 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"
}]