使用 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