迹忆客 专注技术分享

本文讨论如何使用 JavaScript 将键值对推送到数组中。我们可以使用带有 map() 和 reduce() 方法的 jQuery 和箭头函数。

该目标也可以在不使用任何内置方法的情况下实现（本文稍后讨论）。

让我们从不使用内置方法和函数开始。在下面的代码中，我们有一个名为 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 的内置函数和方法。

ECMAScript6 (ES6) 引入了箭头函数，让我们可以更简洁地编写函数。如果函数只有一个语句，我们只能使用这个函数。

map() 方法通过为每个数组的元素调用一次函数来创建一个新数组。它不会修改原始数组并针对空元素运行。

JavaScript 代码：

var arr1 = ['left', 'top'];
const arr2 = arr1.map(value => ({[value]: 0}));
console.log(arr2);

输出：

[{
 left: 0
}, {
 top: 0
}]

你可能已经观察到我们可以添加两个具有相同数据的对象。在上述输出中，每个对象都有一个属性。

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
}

假设你想要在 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"
}]