从对象数组中，将属性的值提取为数组 - Javascript

在 Javascript 中，我们有时需要从一个对象数组中提取指定属性的值，以方便后续的处理和操作。本文将介绍几种在 Javascript 中实现该目的的方法。

方法一：使用 map() 方法

实现思路

map() 是 Javascript 中常用的数组方法之一。我们可以使用 map() 方法对对象数组中的每个元素进行遍历，并返回一个新的数组，其中每个元素都包含指定属性的值。

代码实现

const arr = [{ id: 1, name: 'John' }, { id: 2, name: 'Eric' }, { id: 3, name: 'Alice' }];
const nameArr = arr.map(item => item.name);
console.log(nameArr); // output: ['John', 'Eric', 'Alice']

代码解释

上述代码中，我们首先定义了一个对象数组 arr，包含了每个元素的 id 和 name 属性。接着，我们使用 map() 方法对 arr 进行遍历，并将每个元素的 name 属性存储到一个新的数组 nameArr 中。

代码演示

你可以在以下代码沙盒中测试该方法的实现效果：

方法二：使用 for 循环

实现思路

除了使用 map() 方法之外，我们也可以通过 for 循环遍历对象数组，并将每个元素的指定属性值存储到一个新数组中。

代码实现

const arr = [{ id: 1, name: 'John' }, { id: 2, name: 'Eric' }, { id: 3, name: 'Alice' }];
const nameArr = [];

for (let i = 0; i < arr.length; i++) {
  nameArr.push(arr[i].name);
}

console.log(nameArr); // output: ['John', 'Eric', 'Alice']

代码解释

上述代码中，我们同样先定义了一个对象数组 arr，其中包含了每个元素的 id 和 name 属性。我们通过 for 循环遍历每个元素，将其 name 属性的值存储到一个新数组 nameArr 中。

代码演示

你可以在以下代码沙盒中测试该方法的实现效果：

方法三：使用 reduce() 方法

实现思路

reduce() 方法是 Javascript 中常用的数组方法之一，也可以用于从对象数组中提取指定属性的值。我们可以通过 reduce() 方法遍历每个元素，并将其指定属性的值添加到一个新数组中。

代码实现

const arr = [{ id: 1, name: 'John' }, { id: 2, name: 'Eric' }, { id: 3, name: 'Alice' }];
const nameArr = arr.reduce((res, item) => {
  return [...res, item.name];
}, []);

console.log(nameArr); // output: ['John', 'Eric', 'Alice']

代码解释

上述代码中，我们定义了一个对象数组 arr，其中包含了每个元素的 id 和 name 属性。我们使用 reduce() 方法遍历每个元素，并将其 name 属性值添加到一个新数组 nameArr 中。

代码演示

你可以在以下代码沙盒中测试该方法的实现效果：

总结

本文介绍了几种在 Javascript 中从对象数组中提取指定属性值的方法，包括使用 map() 方法、使用 for 循环和使用 reduce() 方法。这些方法都可以实现相同的目标，取决于个人的偏好和需求，选择不同的方法来提取属性值是个人决定。