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