Question

我正在使用mockData创建一个Web应用程序，并且我试图遍历嵌套对象。我的问题是for循环工作但不是array.map并且不知道为什么。

这是for循环：

  for (let i = 0; i < fakeChartData.length; i++) {
    for (let j = 0; j < fakeChartData[i].poll.length; j++) {
      if (fakeChartData[i].poll[j].id === id) {
        return fakeChartData[i].poll[j]
      }
    }
  }

这是地图循环：

  fakeChartData.map(data => {
    data.poll.map(data => {
      if (data.id === id) {
        return data;
      }
    });
  });

我的数据结构：

fakeChartData = [
  {
    id: '232fsd23rw3sdf23r',
    title: 'blabla',
    poll: [{}, {}]
  },
  {
    id: '23dgsdfg3433sdf23r',
    title: 'againBla',
    poll: [{}, {}]
  }
];

我试图在onClick方法上加载传递给它的id的特定对象。这是完整的功能：

export const fetchPollOptById = (id) =>
  delay(500).then(() => {
    for (let i = 0; i < fakeChartData.length; i++) {
      for (let j = 0; j < fakeChartData[i].poll.length; j++) {
        if (fakeChartData[i].poll[j].id === id) {
          return fakeChartData[i].poll[j]
        }
      }
    }
});

Answer 1

for循环中的return语句会导致函数返回。但是，.map（）函数回调中的return语句只返回回调，然后将返回的值放入新数组中。请参阅documentation。如果您真的想使用.map（），可以这样做：

export const fetchPollOptById = (id) => {
    var result;
    fakeChartData.map(data => {
        data.poll.map(data => {
            if (data.id === id) {
                result = data;
                return data;
            }
        });
    });
    return result;
}

注意：我还假设你的民意调查对象有一个像这样的id字段：

  fakeChartData = [
      {
          id: '232fsd23rw3sdf23r',
          title: 'blabla',
          poll: [
              {id: 'pollId1', otherField: 'blah'},
              {id: 'pollId2', otherField: 'blah'}
          ]
      },
      {
          id: '23dgsdfg3433sdf23r',
          title: 'againBla',
          poll: [
              {id: 'pollId3', otherField: 'blah'},
              {id: 'pollId4', otherField: 'blah'}
          ]
      }
  ];

然后您可以获得这样的民意调查数据：

fetchPollOptById("pollId3"); //returns {id: "pollId3", otherField: "blah"}

Answer 2

如果我对你要做的事情是正确的，这应该有效：

return fakeChartData.reduce((acc, data) => acc.concat(data.poll), [])
                    .filter(pollObj => pollObj.id === id)[0]

首先它创建一个包含来自不同数据对象的所有轮询对象的数组，然后过滤它们以找到具有正确id的那个并返回该对象。

至于为什么使用map的方法不起作用：您以错误的方式使用它。 map使用函数并将其应用于数组的每个成员。

这是一个类似于你的数组和函数：

const arr = [1,2,3]
const getThingById(id) => {
  var mappedArray = arr.map(x => {
    if(x === id) return x
  })
  console.log(mappedArray) // [3]
}
getThingById(3) // undefined

这不起作用。 getThingById没有退货声明。返回语句return x 从传递给map 的函数中返回一些内容。基本上，您不应该使用map来做你想做的事情。 map用于何时返回数组。

Answer 3

试试这个

fakeChartData.map(data => {
    var result = data.poll.map(data => {
      if (data.id === id) {
        return data;
      }
    });
    return result;
  });

它应该工作。是的，你应该使用find()代替map()我认为。

Answer 4

有点长的实施：

let results = fakeChartData.map(data => {
    let innerResult = data.poll.filter(data => {
      if (data.id === id) {
        return data;
      }
     return innerResult.length ? innerResult[0] : null;
    });
  })
  .filter(x => (x !== null));
let whatYouwant = results.lenght ? results[0] : null;

如果你可以使用find（）它会看起来更好，但这取决于你需要支持哪些浏览器

Javascript循环：for-loop工作但不映射？

4 个答案: