如何将两个数组合并成一个数组？

Question

我正在尝试将JavaScript中的两个数组合并成一个。

var lines = new Array("a","b","c");
lines = new Array("d","e","f");

这是一个快速的例子，我想要能够将它们组合起来，这样当读取第二行时，数组中的第四个元素将返回"d"。

我应该如何做到这一点？

- Diesal11

---

同样的问题，更多（详细）答案：https://dev59.com/BHI-5IYBdhLWcg3w-9wK - ignis

所有简单的问题都有更多的答案，因为更多的人会在谷歌上搜索它们（或使用网站内置的搜索功能）。 - Camilo Martin

@ignis 这不是一个重复问题。那个问题特别询问如何在结果数组中删除重复项。它更具体，而这个问题则更为普遍。 - J.D.

Answer 1

var a = ['a','b','c'];
var b = ['d','e','f'];
var c = a.concat(b); //c is now an an array with: ['a','b','c','d','e','f']
console.log( c[3] ); //c[3] will be 'd'

- Moin Zaman

---

@Matt 是的，因为它只是一个数组，它不会跟踪其内容。 - Nate-Wilkins

@geotheory，请查看underscorejs，那里有一个reduce函数可用。underscorejs.org ;) - picsoung

这篇旧帖子里，但如果有人现在搜索的话，@geotheory的问题有一个简单的答案：Array.prototype.concat.apply([], [[1,2],[3,4],[5,6]])。 - sjmeverett

使用 ES6: c = a.push(...b) 的翻译是：将数组 b 中的元素展开后，添加到数组 a 的末尾，并返回新数组的长度，赋值给变量 c。 - Abdennour TOUMI

你还可以这样做：const newArr = [...arr1, ...arr2]; 这行代码将两个数组合并成一个新数组。 - Diego Fortes

Answer 2

使用现代JavaScript语法 - 扩展运算符：

const a = ['a', 'b', 'c'];
const b = ['d', 'e', 'f'];

const c = [...a, ...b]; // c = ['a', 'b', 'c', 'd', 'e', 'f']

这也是JavaScript中最快的连接数组的方法。

- vitaly-t

---

有帮助(+1)，但对于"最快的方法"的说法，您有源头或至少有论据吗？ - kjhughes

Answer 3

使用本地的Node.js v16.4进行速度测试。
对象展开符的速度是原来的3倍。

_{ObjectCombining.js}

export const ObjectCombining1 = (existingArray, arrayToAdd) => {
  const newArray = existingArray.concat(arrayToAdd);
  return newArray;
};

export const ObjectCombining2 = (existingArray, arrayToAdd) => {
  const newArray = [ ...existingArray, ...arrayToAdd ]
  return newArray
};

_{ObjectCombining.SpeedTest.js}

import Benchmark from 'benchmark';

import * as methods from './ObjectCombining.js';

let suite = new Benchmark.Suite();

const existingArray = ['a', 'b', 'c'];
const arrayToAdd = ['d', 'e', 'f'];

Object.entries(methods).forEach(([name, method]) => {
  suite = suite.add(name, () => method(existingArray, arrayToAdd));

  console.log(name, '\n', method(existingArray, arrayToAdd),'\n');
});

suite
  .on('cycle', (event) => {
    console.log(`  ${event.target}`);
  })
  .on('complete', function () {
    console.log(`\n ${this.filter('fastest').map('name')} is fastest.\n`);
  })
  .run({ async: false });

_结果

- GollyJer

---

请问你能否添加 existingArray.push(...arrayToAdd) 的测试？ - vitaly-t

@vitaly-t 或者，鉴于基准测试“相当无用”，不要使用它（参见https://ericlippert.com/2012/12/17/performance-rant/和https://mrale.ph/blog/2012/12/15/microbenchmarks-fairy-tale.html）。 - VLAZ