Question

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

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

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

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

此输出应使用哪个JavaScript函数？

我尝试过使用map函数：

list.map(i => i.items)

但是我得到了以下输出：

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

注意：我正在寻找任何现有功能或包装在功能中的答案，以便我可以调用功能-而不是自己编写循环。

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

Answer 2

您可以使用Route::get('manufacturer-specifications', 'ManufacturerController@manufacturerSpecifications');。无法避免循环，因为Array原型方法在内部进行循环

reduce()

Answer 3

有多种方法可以实现此目的：

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

但是，如果您想要性能优先的解决方案，那么减少+ 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以获得测试用例。

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

您还可以使用递归函数来制作更通用的函数，该函数接受嵌套对象的数组。

Answer 5

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

还有

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

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

展平Javascript数组

5 个答案: