如何从嵌套数组中提取values并合并为扁平化数组

原生JS实现方案 #

直接使用ES6内置的flatMap方法，遍历samples数组提取每一项的values属性同时完成扁平化操作，修改后的setState代码如下：

this.setState(prevState => ({
  newArray: [...prevState.newArray, data.samples.flatMap(sample => sample.values)]
}));

如果运行环境不支持flatMap，可以用map+concat的兼容写法替代：

this.setState(prevState => ({
  newArray: [...prevState.newArray, [].concat(...data.samples.map(sample => sample.values))]
}));

如果你的需求是把合并后的values和prevState.newArray原有元素平层合并，而不是把整个合并数组作为单个元素插入，只要调整为如下写法即可：

this.setState(prevState => ({
  newArray: [...prevState.newArray, ...data.samples.flatMap(sample => sample.values)]
}));

工具库实现方案 #

Lodash

使用_.flatMap方法，还支持直接传入属性名作为迭代函数的语法糖，写法更简洁：

import _ from 'lodash';

this.setState(prevState => ({
  newArray: [...prevState.newArray, _.flatMap(data.samples, 'values')]
}));

Ramda

使用R.chain配合R.prop实现相同的逻辑：

import R from 'ramda';

this.setState(prevState => ({
  newArray: [...prevState.newArray, R.chain(R.prop('values'), data.samples)]
}));

内容的提问来源于stack exchange，提问作者nyphur