解析es6中的对象数组 [英] Destructuring array of objects in es6

问题描述

在es6中，如何使用解构简化以下几行?:

In es6, how can i simplify the following lines using destructuring?:

const array0 = someArray[0].data;
const array1 = someArray[1].data;
const array2 = someArray[2].data;

推荐答案

是否使用解构实际上是一种简化值得商de，但这是可以实现的:

Whether using destructuring would actually be a simplification is debatable but this is how it can be done:

const [
  { data: array0 },
  { data: array1 },
  { data: array2 }
] = someArray

实时示例:

const someArray = [
  { data: 1 },
  { data: 2 },
  { data: 3 }
];

const [
  { data: array0 },
  { data: array1 },
  { data: array2 }
] = someArray

console.log(array0, array1, array2);

发生的事情是，您首先从 someArray 中提取每个对象，然后通过提取 data 属性并重命名来破坏每个对象的结构:

What is happening is that you're first extracting each object from someArray then destructuring each object by extracting the data property and renaming it:

// these 2 destructuring steps
const [ obj1, obj2, obj3 ] = someArray // step 1
const { data: array0 } = obj1 // step 2
const { data: array1 } = obj2 // step 2
const { data: array2 } = obj3 // step 2

// written together give
const [
  { data: array0 },
  { data: array1 },
  { data: array2 }
] = someArray

也许可以将解构与映射结合在一起(可能)以提高可读性:

Maybe combine destructuring with mapping for (potentially) more readable code:

const [array0, array1, array2] = someArray.map(item => item.data)

实时示例:

const someArray = [
  { data: 1 },
  { data: 2 },
  { data: 3 }
];

const [array0, array1, array2] = someArray.map(item => item.data)

console.log(array0, array1, array2);

这篇关于解析es6中的对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！