解构对象数组以获取嵌套值ES6

时间:2019-07-17 07:47:14

标签: javascript arrays ecmascript-6 javascript-objects

我有一个对象数组,例如:

const array = [
{
  name: 'object1', 
  value: true, 
  parameters: [
   { name: 'inner1', value: true},
   { name: 'inner2', value: false},
 ]
},
{
  name: 'object2', 
  value: false,
}

];

我需要获取数组中每个对象的值。 要获取object1和object2的值,我已使用

const [{value: object1}, {value: object2}] = array;

如何获取values数组中的parameters个对象?如何以正确的方式解构它?找不到正确的方法。

3 个答案:

答案 0 :(得分:1)

您必须使用parameters:并保持解构状态:

const array = [{
    name: 'object1',
    value: true,
    parameters: [{
        name: 'inner1',
        value: true
      },
      {
        name: 'inner2',
        value: false
      },
    ]
  },
  {
    name: 'object2',
    value: false,
  }
];

const [{ parameters: [
  { value: value1 },
  { value: value2 }
]}] = array;
console.log(value1, value2);

但这不是可远程读取的IMO。我更喜欢使用标准的点/括号表示法来获取parameters数组,并使用.map来提取值:

const array = [{
    name: 'object1',
    value: true,
    parameters: [{
        name: 'inner1',
        value: true
      },
      {
        name: 'inner2',
        value: false
      },
    ]
  },
  {
    name: 'object2',
    value: false,
  }
];

const values = array[0].parameters.map(({ value }) => value);
console.log(values);

答案 1 :(得分:1)

您可以使用Array#flatMap并仅映射paramters的值。

const
    array = [{ name: 'object1', value: true, parameters: [{ name: 'inner1', value: true }, { name: 'inner2', value: false }] }, { name: 'object2', value: false }],
    values = array.flatMap(({ parameters = []}) => parameters.map(({ value }) => value));

console.log(values);

答案 2 :(得分:0)

解构必须遵循要解构的对象的形状。在这种情况下,考虑它的一个好方法是只复制对象本身,然后将每个值替换为变量名以将该值分配给

// Object from which to deconstruct values
const myArray = [{
    name: 'object1', 
    value: true, 
    parameters: [
       { name: 'inner1', value: true},
       { name: 'inner2', value: false}]
    }];

// Deconstruction
const [{
    name: nameVar, 
    value: valueVar, 
    parameters: [
        { name: paramNameVar1, value: valueVar1},
        { name: paramNameVar2, value: valueVar2}]

     }] = myArray

当然,一旦开始获取更复杂的对象,解构这种方法可能会花费更多精力,可读性和效率会降低。