如何从嵌套数组中解构所有对象？-解网

问：

一个数组，其中包含具有属性的对象，这些属性具有嵌套的数组，这些数组包含更多具有属性的对象。

const courses = [
  {
    name1: 'Half Stack application develop',
    id: 1,
    parts: [
      {
        name: 'Fundamentals of React',
        exercises: 10,
        id: 1
      },
      {
        name: 'Using props to pass data',
        exercises: 7,
        id: 2
      },
      {
        name: 'State of a component',
        exercises: 14,
        id: 3
      },
      {
        name: 'Redux',
        exercises: 11,
        id: 4
      }
    ]
  }, 
  {
    name1: 'Node.js',
    id: 2,
    parts: [
      {
        name: 'Routing',
        exercises: 3,
        id: 1
      },
      {
        name: 'Middlewares',
        exercises: 7,
        id: 2
      }
    ]
  },
]

如何从嵌套数组中解构所有对象？

到目前为止，我只能从嵌套数组中获取第一个对象的属性。但我需要所有其他对象。即使在更新数组时，它也适用于父数组，但不适用于包含对象的子数组。

for (const {
  name1: n,
  parts: [{ name: n2, exercises: ex }],
} of courses) {
  console.log(`${n}:
  ${n2} ${ex}`);
}

实际结果：半栈应用开发： React 10 基础 Node.js：路由 3

预期结果：

半栈应用开发： React 10 基础使用道具传递数据 7 组件的状态 14 Redux 11

Node.js：路由 3 中间件 7

JavaScript ReactJS 对象嵌套列表解构

0赞 egemenakturk 2/22/2023

为了更好地阅读，你能修复第一个数组吗

答：

0赞 T.J. Crowder 2/22/2023 #1

如何从嵌套数组中解构所有对象？

要做到这一点，你必须知道数组中有多少个元素，这样你就知道在解构模式中使用了多少个元素。但是你的数组的长度各不相同，所以你不能这样做。

相反，只需获取数组本身，然后（如果需要）在使用这些数组时进行一些解构：

for (const { name1, parts } of courses) {
    console.log(`${name1}:`);
    for (const {name, exercises} of parts) {
        console.log(`* ${name}: ${exercises}`);
    }
}

const courses = [ { name1: "Half Stack application developm", id: 1, parts: [ { name: "Fundamentals of React", exercises: 10, id: 1 }, { name: "Using props to pass data", exercises: 7, id: 2 }, { name: "State of a component", exercises: 14, id: 3 }, { name: "Redux", exercises: 11, id: 4 }, ], }, { name1: "Node.js", id: 2, parts: [ { name: "Routing", exercises: 3, id: 1 }, { name: "Middlewares", exercises: 7, id: 2 }, ], }, ];
for (const { name1, parts } of courses) {
    console.log(`${name1}:`);
    for (const {name, exercises} of parts) {
        console.log(`* ${name}: ${exercises}`);
    }
}

.as-console-wrapper {
    max-height: 100% !important;
}

当然，这只是如何使用数组的一个例子。你可以用它做任何你喜欢的事情，比如创建一个字符串：parts

for (const { name1, parts } of courses) {
    const partsString = parts.map(({name, exercises}) =>
        `${name}: ${exercises}`
    ).join(", ");
    console.log(`${name1}: ${partsString}`);
}

const courses = [ { name1: "Half Stack application developm", id: 1, parts: [ { name: "Fundamentals of React", exercises: 10, id: 1 }, { name: "Using props to pass data", exercises: 7, id: 2 }, { name: "State of a component", exercises: 14, id: 3 }, { name: "Redux", exercises: 11, id: 4 }, ], }, { name1: "Node.js", id: 2, parts: [ { name: "Routing", exercises: 3, id: 1 }, { name: "Middlewares", exercises: 7, id: 2 }, ], }, ];
for (const { name1, parts } of courses) {
    const partsString = parts.map(({name, exercises}) =>
        `${name}: ${exercises}`
    ).join(", ");
    console.log(`${name1}: ${partsString}`);
}

.as-console-wrapper {
    max-height: 100% !important;
}

或者你可以用来创建一个新的数组（可能带有课程名称、部分名称和练习）以传递给其他一些代码（例如您在评论中提到的 React 组件）：map

const result = courses.map(({ name1, parts }) =>
    parts.map(({ name, exercises }) => ({
        course: name1,
        name,
        exercises,
    }))
);

const courses = [ { name1: "Half Stack application developm", id: 1, parts: [ { name: "Fundamentals of React", exercises: 10, id: 1 }, { name: "Using props to pass data", exercises: 7, id: 2 }, { name: "State of a component", exercises: 14, id: 3 }, { name: "Redux", exercises: 11, id: 4 }, ], }, { name1: "Node.js", id: 2, parts: [ { name: "Routing", exercises: 3, id: 1 }, { name: "Middlewares", exercises: 7, id: 2 }, ], }, ];
const result = courses.map(({ name1, parts }) =>
    parts.map(({ name, exercises }) => ({
        course: name1,
        name,
        exercises,
    }))
);
console.log(JSON.stringify(result, null, 4));

.as-console-wrapper {
    max-height: 100% !important;
}

或者，再次使用，创建一个包含嵌套部分的对象数组：map

const result = courses.map(({ name1, parts }) => ({
    course: name1,
    parts: parts.map(({ name, exercises }) => ({ name, exercises })),
}));

const courses = [ { name1: "Half Stack application developm", id: 1, parts: [ { name: "Fundamentals of React", exercises: 10, id: 1 }, { name: "Using props to pass data", exercises: 7, id: 2 }, { name: "State of a component", exercises: 14, id: 3 }, { name: "Redux", exercises: 11, id: 4 }, ], }, { name1: "Node.js", id: 2, parts: [ { name: "Routing", exercises: 3, id: 1 }, { name: "Middlewares", exercises: 7, id: 2 }, ], }, ];
const result = courses.map(({ name1, parts }) => ({
    course: name1,
    parts: parts.map(({ name, exercises }) => ({ name, exercises })),
}));
console.log(JSON.stringify(result, null, 4));

.as-console-wrapper {
    max-height: 100% !important;
}

或根据需要进行调整/调整。

0赞 Daniel 3/4/2023

非常感谢您的回答！它可以在控制台中工作。但是我需要它存储在一个变量中，然后将该变量作为 {props.var} 传递到我的 react.all 中我的应用程序的返回部分中，我需要如何将其 for 循环存储在变量中并能够在循环外console.log。

0赞 Daniel 3/4/2023

而来自外部对象的属性名称：“name1”实际上具有属性名称：“name”。它与内部对象中的 name 属性相同。映射时，属性名称相同，但在不同的对象中。谢谢

0赞 T.J. Crowder 3/4/2023

@Daniel - 我又添加了几个例子，你应该能够从那里概括出来。

0赞 Daniel 3/4/2023

非常感谢T.J.克劳德!!

上一个：使用数组作为嵌套数组的键？

下一个：Ramda 从数组内的嵌套对象获取密钥

如何从嵌套数组中解构所有对象？

How to destructure all of the objects from the nested arrays?

评论

评论