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