展平 Javascript 数组答案

【问题标题】：Flatten Javascript array展平 Javascript 数组
【发布时间】：2019-11-24 02:23:47
【问题描述】：

我有一个这样的对象数组：

let list = [
  {
    'items': [
      'item 1',
      'item 2'
    ]
  },
  {
    'items': [
      'item 3'
    ]
  }
]

我想像这样从这个对象中展平数组：

['item 1','item 2','item 3']

我应该为这个输出使用哪个 JavaScript 函数？

我已经尝试过使用地图功能：

list.map(i => i.items)

但我得到了这个输出：

[["item 1","item 2"],["item 3"]]

注意：我正在寻找任何现有函数或包含在函数中的答案，因此我可以调用一个函数 - 而不是自己编写循环。

【问题讨论】：

使用第 3 方库，例如 underscorejs.org/#reduce
list.flatMap(i => i.items)
“注意：我正在寻找任何现有的函数/函数链（如果可用）以获得预期的输出。我不期待任何循环的结果。”环形。唯一的问题是它是否看起来像一个循环，或者你把它隐藏在像reduce这样不必要的复杂的东西中。
您是否尝试过使用数组结果的 reduce 方法？并使用扩展运算符将每个项目的项目添加到结果中
@Rajiv - 使用内置库函数，您至少需要两个循环（Mamun 的回答）或一个过于复杂的类似循环的东西（charlietfl 的）。

标签： javascript arrays typescript

【解决方案1】：

您可以使用Array.prototype.flatMap() 平展map() 结果：

flatMap() 方法首先使用映射函数映射每个元素，然后将结果展平为一个新数组。

let list = [
  {
    'items': [
      'item 1',
      'item 2'
    ]
  },
  {
    'items': [
      'item 3'
    ]
  }
]
list = list.flatMap(i => i.items);

console.log(list);

【讨论】：

Flatmap 不受 edge 和 IE 的支持，所以他必须添加 polyfill 来支持它，所以我认为 reduce 函数使用扩展运算符更好
@mthkhaled - FWIW，Edge 很快就会在切换到使用 V8 时拥有它。

【解决方案2】：

您可以使用reduce()。由于数组原型方法在内部进行循环，因此无法避免循环

let list = [
  {
    'items': [
      'item 1',
      'item 2'
    ]
  },
  {
    'items': [
      'item 3'
    ]
  }
];

const res = list.reduce((a,c) => [...a, ...c.items],[])

console.log(res)

【讨论】：

【解决方案3】：

https://lodash.com/docs/4.17.14#flatten

还有

https://lodash.com/docs/4.17.14#flattenDeep

看起来它们正是您所需要的。

【讨论】：

【解决方案4】：

您可以使用 Array.reduce 方法并遵循文档here

{
    let list = [
      {
        'items': [
          'item 1',
          'item 2'
        ]
      },
      {
        'items': [
          'item 3'
        ]
      }
    ];

    /**
    * @parameter {Array} arg
    */
    function splat (arg) {
        return arg.reduce((total, { items }) => [...total, ...items], []);
    }

    console.log(splat(list));
}

您还可以使用递归函数来创建一个接受嵌套对象数组的更通用的函数。

【讨论】：

【解决方案5】：

有多种方法可以实现：

const list = [{'items': ['item 1','item 2']},{'items': ['item 3']}]

// Using map and flat
console.log(list.map(o => o.items).flat())

// Using flatMap
console.log(list.flatMap(o => o.items))

// Using reduce
console.log(list.reduce((a, o) => a.concat(o.items), []))

// Using a plain old for loop (wrapped in a function)
const getItems = list => {
  let temp = []  
  for (let i = 0; i < list.length; i++) {
    const items = list[i].items
    for (let j = 0; j < items.length; j++) {
      temp.push(items[j])
    }
  }
  return temp
}
console.log(getItems(list))

但是，如果您想要一个性能优先的解决方案，reduce + for 循环是最好的选择：

const list = [{'items': ['item 1','item 2']},{'items': ['item 3']}]

console.log(list.reduce((a, o) => {
  for (var i = 0; i < o.items.length; i++) a.push(o.items[i])
  return a
}, []))

检查此jsperf 以获取测试用例。

【讨论】：