Question

我有以下数据：

const store = [{
    name: "outside",
    color: "lightpink",
    position: [-400, 0, 300],
    url: "src/assets/picture1.jpg",
    link: 1,
  },
  [{
      name: "To the Yard",
      color: "lightblue",
      position: [-100, 0, 900],
      url: "src/assets/picture5.jpg",
      link: 2,
    },
    {
      name: "To the Room",
      color: "lightblue",
      position: [-100, 0, 900],
      url: "src/assets/picture5.jpg",
      link: 0,
    },
  ],
  {
    name: "Hall",
    color: "red",
    position: [20, 10, 0],
    url: "src/assets/picture3.jpg",
    link: 1,
  },
  // ...
];

我想要实现的是通过使用JS中的map（）函数将所有链接属性数据放入新数组中。问题是我在数组中也有对象数组，因此我需要将2和0以及1和1放在一起。因此结果应该是[1、2、0、1]。为此，我尝试了以下方法：

store.map((entry) => {
  if (Array.isArray(entry)) {
    return entry.map(item => item.url)
  } else {
    return entry.url
  }
})

但没有结果

Answer 1

您可以将Array#flatMap与数组的递归映射一起使用。

const
    getLink = o => Array.isArray(o) ? o.flatMap(getLink) : o.link,
    store = [{ name: "outside", color: "lightpink", position: [-400, 0, 300], url: "src/assets/picture1.jpg", link: 1 }, [{ name: "To the Yard", color: "lightblue", position: [-100, 0, 900], url: "src/assets/picture5.jpg", link: 2 }, { name: "To the Room", color: "lightblue", position: [-100, 0, 900], url: "src/assets/picture5.jpg", link: 0 }], { name: "Hall", color: "red", position: [20, 10, 0], url: "src/assets/picture3.jpg", link: 1 }],
    result = store.flatMap(getLink);

console.log(result);

Answer 2

您可以先.flat（Array.prototype.flat()）个数组，然后再.map

const res = store.flat().map((s) => s.link)

const store = [
  {
    name: "outside",
    color: "lightpink",
    position: [-400, 0, 300],
    url: "src/assets/picture1.jpg",
    link: 1,
  },
  [
    {
      name: "To the Yard",
      color: "lightblue",
      position: [-100, 0, 900],
      url: "src/assets/picture5.jpg",
      link: 2,
    },
    {
      name: "To the Room",
      color: "lightblue",
      position: [-100, 0, 900],
      url: "src/assets/picture5.jpg",
      link: 0,
    },
  ],
  {
    name: "Hall",
    color: "red",
    position: [20, 10, 0],
    url: "src/assets/picture3.jpg",
    link: 1,
  },
  // ...
]

const res = store.flat().map((s) => s.link)

console.log(res)

Answer 3

您可以展平数组，然后调用map()函数。

const store = [
    {
      name: "outside",
      color: "lightpink",
      position: [-400, 0, 300],
      url: "src/assets/picture1.jpg",
      link: 1,
    },
    [
      {
        name: "To the Yard",
        color: "lightblue",
        position: [-100, 0, 900],
        url: "src/assets/picture5.jpg",
        link: 2,
      },
      {
        name: "To the Room",
        color: "lightblue",
        position: [-100, 0, 900],
        url: "src/assets/picture5.jpg",
        link: 0,
      },
    ],
    {
      name: "Hall",
      color: "red",
      position: [20, 10, 0],
      url: "src/assets/picture3.jpg",
      link: 1,
    },
  ];

let result = store.flat().map(e => e.url);
console.log(result);

Answer 4

flat您的数组，然后映射展平的数组。

store.flat().map(s => s.url)

如何在JS中遍历包含对象的数组和对象数组

4 个答案: