使用 map 迭代数组内的对象

Question

这是我的代码：

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

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

}

 

我可以通过执行以下操作访问 errorMessage：

this.state.errorMessage

但是对于访问AAAQQQ，我说：

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

我的问题：

上述方法是否正确访问对象数组中的元素？

Answer 1

item.AAAQQQ部分是。 如果您不使用数组map创建，则map部分不是。 我已经写了为什么在这里以及该怎么做，但基本上使用for-of ：

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

或forEach ：

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

当您需要索引以及项目（ .forEach((item, index) => { /*...*/ }) ）时， forEach非常方便。

Answer 2

我将列出访问元素的各种方法。 在此之前，我想告诉您什么时候可以使用哪些javascript函数。

像 map 和 filter 这样的数组函数将返回一个数组作为输出。 因此，如果您想对每个数组元素执行一些操作并将最终结果存储在数组中，那么我们可以使用 map 和 filter 方法。

当您想保存数组中所有元素的结果时可以使用映射，如果只想保存某些元素，则可以使用过滤器。

一个简单的例子在这里

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

基本上在过滤器中，每当您返回 true 时，元素将被保存，否则将被跳过。

因此，这里要注意的一点是，只要您想要另一个数组作为输出，就可以使用映射和过滤器。 否则，您还有其他迭代方式，例如 for、forEach。

for基本上是我们在所有编程语言中使用的普通 for 循环， forEach接受回调函数，因此您可以在那里执行操作。

在您的情况下，您不想为 someFunctions 存储任何输出，因此您可以使用 forEach，这是访问元素的最佳方式。

如果您只有一个对象，那么您可以直接使用圆括号索引访问方法。 this.state.someElement[0].AAAQQQ

否则，如果您有对象数组，那么 forEach 是最好的方法，因为您不必像这样手动编写

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

你可以直接这样做

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

如果你有这样的对象

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

然后你可以像这样访问元素。

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

请注意，这里我们想要每个元素的输出，因此我们使用了 map。