使用 map 迭代数组内的对象

Question

Here is my code:

class SomeClass{
    constructor(props){
        super(props);
           this.state = {
              SomeElement:
              [
                {
                   AAAQQQ: "",
                   AAA: ""
                },
              ],
              errorMessage: ""
           };
       }

    MyFunction = (someParam) =>{
      //do something
    }

}

 

I can access errorMessage by doing:

this.state.errorMessage

But for accessing AAAQQQ, do I say:

this.state.SomeElement.map((item, index) =>{
    SomeFunction(item.AAAQQQ);
});

My Question :

Is the above approach correct to access an element inside of an array of objects ?

Answer 1

The item.AAAQQQ part is. The map part isn't if you aren't using the array map creates. I've written up why here and what to do instead, but basically use for-of :

for (const item of this.state.SomeElement) {
    SomeFunction(item.AAAQQQ);
}

or forEach :

this.state.SomeElement.forEach(item => {
    SomeFunction(item.AAAQQQ);
});

forEach is handy when you need the index as well as the item ( .forEach((item, index) => { /*...*/ }) ).

Answer 2

I will list down various ways to access the elements. Before that, I would like to tell you when can you use which javascript functions.

Array Functions like map and filter will return an array as output. So, if you have a case wherein you want to perform some operation on each array element and store the final result in an array then we can use the map and filter method.

You can use a map when you want to save the result for all the elements in the array and you can use a filter if you want to save only for some elements.

A simple example is here

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const allSquare = arr.map(element => (element * element));
const evenElements = arr.filter(element => {
  if(arr%2 == 0) {
     return true;  
  }
  return false;
});

// more concise way to write
const evenElements = arr.filter(element => !(element%2));

Basically in filter whenever you return true, the element will be saved otherwise skipped.

So, the point to note down here is whenever you want another array as output then you can use a map and filter. Otherwise, you have other iterative ways like for, forEach.

for is basically the normal for loop which we use in all programming languages and forEach accepts callback function so you can perform operations there.

In your case, you don't want to store any output for the someFunctions so you can use forEach, and that is the best way to access the elements.

If you have only one object then you can directly use the round bracket index access method . this.state.someElement[0].AAAQQQ

Otherwise, if you have array of object then forEach is the best approach becuase you don't have to do manual work of writing like this

for(let i = 0; i<this.state.someElement.length; i++) {
  // do something
}

you can directly do like this

this.state.someElement.forEach((ele, index) => {
  // do something
})

If you have object of object like this

const people = {
  person1: { name: 'John', age: 10 },
  person2: { name: 'Ajay', age: 12 },
  person3: { name: 'Rocky', age: 15 }
}

Then you can access element like this.

const peopleKeys = Object.keys(people);
const names = peopleKeys.map((key) => {
  return people[key].name;
})
console.log(names) // ['John', 'Ajay', 'Rocky']

Note that here we want output from every element hence we have use map.