解析es6中的对象数组

Question

在es6中,如何使用解构来简化以下行？:

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

Answer 1

是否使用解构实际上是一种简化是有争议的,但这是如何做到的:

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属性并重命名它来解构每个对象:

// 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

也许将解构与映射相结合(可能)更易读的代码:

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);

Answer 2

我相信你真正想要的是

const array = someArray.map(x => x.data)

如果你真的想要三个变量(提示:你不应该),你可以将mapping与解构结合起来:

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