使用 JavaScript 將鍵值對推送到陣列中

Mehvish Ashiq 2023年1月30日 2022年5月5日
  1. 使用 JavaScript 將鍵值對推送到陣列中
  2. 在 JavaScript 中使用 map() 將鍵值對推送到陣列中
  3. 在 JavaScript 中使用 reduce() 將鍵值對推送到陣列中
  4. 在 JavaScript 中使用 jQuery 將鍵值對推送到陣列中
使用 JavaScript 將鍵值對推送到陣列中

本文討論如何使用 JavaScript 將鍵值對推送到陣列中。我們可以使用帶有 map()reduce() 方法的 jQuery 和箭頭函式。

該目標也可以在不使用任何內建方法的情況下實現(本文稍後討論)。

使用 JavaScript 將鍵值對推送到陣列中

讓我們從不使用內建方法和函式開始。在下面的程式碼中,我們有一個名為 arr1 的陣列,其中包含兩個元素 lefttop

我們分別宣告另一個陣列和一個名為 arr2obj 的物件。

編寫一個 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 陣列中具有兩個屬性(lefttop)的一個物件的鍵值對。讓我們使用 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
}]

如果我們有兩個名為 keysvalues 的陣列會怎樣。我們想從 keysvalues 中獲取所有元素並將它們推送到第三個陣列中。

請參閱以下示例。

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"
}]
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Array