迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

在 JavaScript 中从两个数组创建一个对象

作者:迹忆客 最近更新:2022/11/23 浏览次数:

JavaScript 中从两个数组创建一个对象:

  1. 使用 Array.forEach() 方法迭代第一个数组。
  2. 使用索引访问第二个数组中的元素。
  3. 在每次迭代中,将键值对分配给一个对象。
const arr1 = ['name', 'age', 'country'];
const arr2 = ['Tom', 30, 'Chile'];

const obj = {};

arr1.forEach((element, index) => {
  obj[element] = arr2[index];
});

// 👉️ {name: 'Tom', age: 30, country: 'Chile'}
console.log(obj);

我们传递给 Array.forEach() 方法的函数会针对数组中的每个元素进行调用。

该函数传递了以下 3 个参数:

  • 当前元素
  • 迭代索引
  • 数组本身

我们利用索引访问第二个数组中的值,并将键值对分配给一个对象。

方法完成迭代后,对象包含来自两个数组的键值对。

另一种但更实用的方法是使用 Array.reduce() 方法。

从两个数组创建一个对象:

  1. 使用 reduce() 方法迭代第一个数组。
  2. 提供一个空对象作为累加器的初始值。
  3. 使用索引,将键值对分配给累积的对象。
  4. 返回结果。
const arr1 = ['name', 'age', 'country'];
const arr2 = ['Tom', 30, 'Chile'];

const obj = arr1.reduce((accumulator, element, index) => {
  return {...accumulator, [element]: arr2[index]};
}, {});

// 👇️️ {name: 'Tom', age: 30, country: 'Chile'}
console.log(obj);

我们传递给 reduce() 方法的函数会为数组中的每个元素调用。

我们提供了一个空对象作为累加器变量的初始值。

在每次迭代中,我们使用扩展语法 ... 将累加器的键值对解包到一个新对象中,然后添加当前键值对并返回结果。

一旦 reduce 方法迭代了整个数组,累加器对象将包含来自两个数组的键值对。

我们选择哪种方法是个人喜好的问题。 如果大家不熟悉 reduce 方法,使用 forEach 方法会更直观。

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便