如何从数组中的对象的某些键中提取值答案

【问题标题】：How to extract values from certain keys from objects that are in an array如何从数组中的对象的某些键中提取值
【发布时间】：2017-11-18 23:16:20
【问题描述】：

我有这个对象数组：var array = [{name: "Tom", id: 123}, {name: "chris", id: 1234}, {name: "Simon", id: 111}];

我想遍历数组中的 3 个对象并提取每个对象的名称，然后将该名称推送到一个新数组中。

这是我认为可行的：

var array = [{name: "Tom", id: 123}, {name: "chris", id: 1234}, {name: "Simon", id: 111}];
var newArrayOfNames = [];
Object.values(array).forEach(function(name){
  newArrayOfNames.push(name);
});
console.log(newArrayOfNames);

【问题讨论】：

将此newArrayOfNames.push(name); 编辑为newArrayOfNames.push(name.name);
var names = array.map(o => o.name).
我发现我的测试环境不支持Object.values(array)。参考Uncaught TypeError: Object.values is not a function JavaScript

标签： javascript arrays object

【解决方案1】：

你可以试试这个：

    var array = [{name: "Tom", id: 123}, {name: "chris", id: 1234}, {name: "Simon", id: 111}];
    var newArrayOfNames = [];
    array.forEach(function(item) {
      newArrayOfNames.push(item.name);
    });
    console.log(newArrayOfNames);

【讨论】：

【解决方案2】：

对现有代码稍作改动即可：

var array = [{name: "Tom", id: 123}, {name: "chris", id: 1234}, {name: "Simon", id: 111}];
var newArrayOfNames = [];
Object.values(array).forEach(function(person){ // note that person is the object on each iteration of array
  newArrayOfNames.push(person.name); // object has property called name
});
console.log(newArrayOfNames); // => [ "Tom",  "chris",  "Simon" ]

【讨论】：

【解决方案3】：

对您的代码稍作改动：

var array = [{name: "Tom", id: 123}, {name: "chris", id: 1234}, {name: "Simon", id: 111}];
var newArrayOfNames = [];
Array.prototype.forEach.call(array, function(o){
  newArrayOfNames.push(o.name);
});
console.log(newArrayOfNames);

【讨论】：

【解决方案4】：

let array = [{name: "Tom", id: 123}, {name: "chris", id: 1234}, {name: "Simon", id: 111}];
let names = []
for(let person of array) {
    names.push(person.name)
}

这应该可行，它从“人”中获取名称属性，在这种情况下，它是您数组中的一个条目。

【讨论】：

【解决方案5】：

这是.reduce() 的完美用例，其目标是：

reduce() 方法对累加器应用一个函数，每个数组中的元素（从左到右）将其减少为单个价值。

在您的情况下，您希望累积所有名称并将它们放入一个新数组中。非常适合.reduce()。

请注意，acc 参数代表累加器，因此每次循环通过 person 时，都会对累加器进行更改，然后将其传递给下一个循环。

注意：我不建议使用.forEach() 解决您的问题，因为forEach 会直接更改您的原始数组。您所做的任何更改都将应用于people，并且您将从forEach 获得一个新数组。这就是Array.prototype.map/reduce等方法存在的原因！

const people = [
  { name: "Tom", id: 123} ,
  { name: "chris", id: 1234} ,
  { name: "Simon", id: 111 },
];

const names = people.reduce((acc, person) => {
  acc.push(person.name);

  return acc;
}, []);

【讨论】：

【解决方案6】：

恕我直言，截至 2021 年的最佳方法如下：

let array = [
    {
        name: "Tom",
        id: 123
    },
    {
        name: "chris",
        id: 1234
    },
    {
        name: "Simon",
        id: 111
    }
];
// Use the Array's map function to transform the elements of the array into something else
let newArrayOfNames = array.map( pValue => pValue.name );

console.log( newArrayOfNames );

map 的文档指出：

map() 方法创建一个新数组，其中填充了对调用数组中的每个元素调用提供的函数的结果。

这将是最合适的方式（前提是您不再支持 IE 或您使用转译器），因为两个数组的长度相同。

如果您需要省略元素，我会先使用 filter 函数来省略这些元素，然后再使用 map 函数，虽然这需要遍历原始数组和过滤后的数组，但代码的目的对于代码的读者来说更清楚。另一种方法是使用reduce 创建另一个数组并过滤给reduce 的回调中的元素（不将它们推送到新数组中），这只会遍历原始数组一次，但可能对读者来说不够清晰，具体取决于你的代码。

【讨论】：