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

Question

I have this array of objects: var array = [{name: "Tom", id: 123}, {name: "chris", id: 1234}, {name: "Simon", id: 111}];

I want to iterate through the 3 objects in the array and extract the name of each one, and then push that name into a new array.

This is what I thought would work:

 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);

Answer 1

you can try this:

    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);

Answer 2

A small change to your code:

 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);

Answer 3

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)
}

This should work, it takes the name attribute from the "person", which is in this case an entry in your array.

Answer 4

A small change in your existing code would have worked:

 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" ]

Answer 5

This is the perfect use case for a .reduce() , whose goal is:

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

In your case, you want to accumulate all of the names and put them into a new Array. Perfect for .reduce() .

Note that the acc argument stands for accumulator, so each time you loop through a person , you make your changes to the accumulator and then pass it to the next loop.

Note: I would not recommend solving your problem using .forEach() since forEach will make changes directly to your original Array. Any changes you do, will be applied to people , and you will get a new Array back from forEach . This is why methods such as Array.prototype.map/reduce exist!

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;
}, []);

Answer 6

IMHO, the best approach as of 2021 is as follows:

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 );

The map 's documentation states:

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

This would be the most appropriate way (Provided you don't support IE anymore or you use a transpiler) since both arrays are of the same length.

If you need to omit elements I'd use the filter function for omitting those elements first and then the map function, and although that requires to iterate once through the original array and once through the filtered array, the purpose of the code is clearer for the reader of the code. Another approach is to use reduce to create another array and filter the elements in the callback given to reduce (not pushing them into the new array), this will only traverse the original array once but may lack clarity for readers depending on your code.