如何使用 ES6 从嵌套在数组中另一个对象中的数组中获取对象

Question

我有以下结构的数据：

var DATA = {
'device_groups': [{
  'id': '1',
  'name': 'group 1',
  'devices': [{
    'id': 11,
    'name': 'device 11',
    'active': 1
  }, {
    'id': 12,
    'name': 'device 12',
    'active': 0
  }, {
    'id': 13,
    'name': 'device 13',
    'active': 0
  }] 
}, {
  'id': '2',
  'name': 'group 2',
  'devices': [{
    'id': 21,
    'name': 'device 21',
    'active': 1
  }, {
    'id': 22,
    'name': 'device 22',
    'active': 0
  }, {
    'id': 23,
    'name': 'device 23',
    'active': 1
  }]
}, {
  'id': '3',
  'name': 'group 3',
  'devices': [{
    'id': 31,
    'name': 'device 31',
    'active': 1
  }, {
    'id': 32,
    'name': 'device 32',
    'active': 0
  }, {
    'id': 33,
    'name': 'device 33',
    'active': 1
  }]  
}]
};

从所有这些 "device_groups" 数组和内部 "devices" 数组中，我需要获取单个对象数组，其中 'active' 为真 (1)。

如何以 ES6+ 的方式做到这一点？

Answer 1

您可以这样使用 map and filter：

var DATA={'device_groups':[{'id':'1','name':'group 1','devices':[{'id':11,'name':'device 11','active':1},{'id':12,'name':'device 12','active':0},{'id':13,'name':'device 13','active':0}]},{'id':'2','name':'group 2','devices':[{'id':21,'name':'device 21','active':1},{'id':22,'name':'device 22','active':0},{'id':23,'name':'device 23','active':1}]},{'id':'3','name':'group 3','devices':[{'id':31,'name':'device 31','active':1},{'id':32,'name':'device 32','active':0},{'id':33,'name':'device 33','active':1}]}]}

const filtered = DATA.device_groups.map(a => a.devices.filter(a => a.active === 1)),
  output = [].concat(...filtered);

console.log(output)

或者使用简单的 reduce

var DATA={'device_groups':[{'id':'1','name':'group 1','devices':[{'id':11,'name':'device 11','active':1},{'id':12,'name':'device 12','active':0},{'id':13,'name':'device 13','active':0}]},{'id':'2','name':'group 2','devices':[{'id':21,'name':'device 21','active':1},{'id':22,'name':'device 22','active':0},{'id':23,'name':'device 23','active':1}]},{'id':'3','name':'group 3','devices':[{'id':31,'name':'device 31','active':1},{'id':32,'name':'device 32','active':0},{'id':33,'name':'device 33','active':1}]}]}

const devices = DATA.device_groups
                  .reduce((a,d) => a.concat(d.devices.filter(f => f.active)),[]);

console.log(devices)

Answer 2

您可以使用 reduce and filter 来完成。

通过过滤器，我们仅从 devices 中取出状态为 active 的元素，然后将它们连接到 final output

var DATA={'device_groups':[{'id':'1','name':'group 1','devices':[{'id':11,'name':'device 11','active':1},{'id':12,'name':'device 12','active':0},{'id':13,'name':'device 13','active':0}]},{'id':'2','name':'group 2','devices':[{'id':21,'name':'device 21','active':1},{'id':22,'name':'device 22','active':0},{'id':23,'name':'device 23','active':1}]},{'id':'3','name':'group 3','devices':[{'id':31,'name':'device 31','active':1},{'id':32,'name':'device 32','active':0},{'id':33,'name':'device 33','active':1}]}]}

let output = DATA.device_groups.reduce((op,cur)=>{
  let temp = cur.devices.filter(ele=> ele.active)
  op = op.concat(temp)
  return op;
},[])

console.log(output)

Answer 3

基本上你可以使用reduce和filter来实现你想要的

var DATA = {
  'device_groups': [{
    'id': '1',
    'name': 'group 1',
    'devices': [{
      'id': 11,
      'name': 'device 11',
      'active': 1
    }, {
      'id': 12,
      'name': 'device 12',
      'active': 0
    }, {
      'id': 13,
      'name': 'device 13',
      'active': 0
    }]
  }, {
    'id': '2',
    'name': 'group 2',
    'devices': [{
      'id': 21,
      'name': 'device 21',
      'active': 1
    }, {
      'id': 22,
      'name': 'device 22',
      'active': 0
    }, {
      'id': 23,
      'name': 'device 23',
      'active': 1
    }]
  }, {
    'id': '3',
    'name': 'group 3',
    'devices': [{
      'id': 31,
      'name': 'device 31',
      'active': 1
    }, {
      'id': 32,
      'name': 'device 32',
      'active': 0
    }, {
      'id': 33,
      'name': 'device 33',
      'active': 1
    }]
  }]
};
const deviceGroups = DATA.device_groups;

const solution = deviceGroups.reduce((result, devicegroup) => {
  const filteredDevices = devicegroup.devices.filter(device => device.active === 1)
  return [...result, ...filteredDevices]
}, [])

console.log(solution)

Answer 4

使用 reduce 将每个 device_groups 的 devices 的内部数组合并到一个 devices 的数组中。然后用 active === 1 过滤合并后的数组，得到一组活动的设备。

var DATA = {"device_groups":[{"id":"1","name":"group 1","devices":[{"id":11,"name":"device 11","active":1},{"id":12,"name":"device 12","active":0},{"id":13,"name":"device 13","active":0}]},{"id":"2","name":"group 2","devices":[{"id":21,"name":"device 21","active":1},{"id":22,"name":"device 22","active":0},{"id":23,"name":"device 23","active":1}]},{"id":"3","name":"group 3","devices":[{"id":31,"name":"device 31","active":1},{"id":32,"name":"device 32","active":0},{"id":33,"name":"device 33","active":1}]}]};

var devices = DATA.device_groups
                  .reduce((acc, ele) => {
                     acc = acc.concat([...ele['devices']]); //merging each device array with the next with the concat().
                     return acc;
                   },[])
                  .filter((data) => data['active'] === 1);
console.log(devices);

Answer 5

您可以仅使用 forEach 并传播 ... 运算符，并在最终数组

中推送过滤后的结果，其中 active 属性为真

var DATA = {'device_groups': [{'id': '1','name': 'group 1','devices': [{'id': 11,'name': 'device 11','active': 1}, {'id': 12,'name': 'device 12','active': 0}, {'id': 13,'name': 'device 13','active': 0}] }, {'id': '2','name': 'group 2','devices': [{'id': 21,'name': 'device 21','active': 1}, {'id': 22,'name': 'device 22','active': 0}, {'id': 23,'name': 'device 23','active': 1
  }]}, {'id': '3','name': 'group 3','devices': [{'id': 31,'name': 'device 31','active': 1}, {'id': 32,'name': 'device 32','active': 0}, {'id': 33,'name': 'device 33','active': 1}]}]};

const result =[];
DATA.device_groups.forEach(devGroup => result.push(...devGroup.devices.filter(d => d.active)));
console.log(result);

如何使用 ES6 从嵌套在数组中另一个对象中的数组中获取对象

How to get objects from array nested in another object in array with ES6

javascript

arrays

ecmascript-6

ecmascript-2017