解构 JavaScript 中数组的第一个对象

Question

假设我们有以下对象：

const page = {
        name: 'Page 1',
        page_category: [
          {
            postId: 1,
            catId: 1,
            category: {
              id: 1,
              name: 'category 1'
            }
          },
          {
            postId: 3,
            catId: 2,
            category: {
              id: 2,
              name: 'category 2'
            }
          },
        ]
      }

要以解构方式获取 page_category 数组中的第一个对象，我们会这样做：

const { page_category: [first] } = page

但是如果我们想获取第一个对象的类别字段会怎样呢？

Answer 1

你可以解构数组解构中的对象：

const { page_category: [{category}] } = page;

const page = {
  name: 'Page 1',
  page_category: [{
      postId: 1,
      catId: 1,
      category: {
        id: 1,
        name: 'category 1'
      }
    },
    {
      postId: 3,
      catId: 2,
      category: {
        id: 2,
        name: 'category 2'
      }
    },
  ]
};

const { page_category: [{category}] } = page;
console.log(category);

destructuring assignment 语法类似于创建对象字面量的语法，下面的格式显示了它们如何具有相同的形状。您可以使用这个想法来协助您的解构模式：

const { 
  page_category: [
    {
      category
    }
  ]
} = page;

Answer 2

解构第一个对象的类别字段。

const {page_category: [ {category} ]} = page;

console.log("category ==>", category);

这样你会找到第一个类别对象。

解构 JavaScript 中数组的第一个对象

Destructuring first object of array in JavaScript

javascript

arrays

ecmascript-6

destructuring