连接N个数组的最有效方法是什么?

2020/10/09 01:01 · javascript ·  · 0评论

连接JavaScript中的N个对象数组的最有效方法是什么?

数组是可变的,结果可以存储在输入数组之一中。

如果要连接两个以上的数组,concat()那么这样做是为了方便和可能的性能。

var a = [1, 2], b = ["x", "y"], c = [true, false];
var d = a.concat(b, c);
console.log(d); // [1, 2, "x", "y", true, false];

对于仅连接两个数组,可以使用push接受多个包含要添加到数组中的元素组成的参数的事实来代替将一个数组中的元素添加到另一个数组的末尾而无需生成新数组。使用slice()它也可以代替它,concat()但是这样做似乎没有性能优势

var a = [1, 2], b = ["x", "y"];
a.push.apply(a, b);
console.log(a); // [1, 2, "x", "y"];

在ECMAScript 2015及更高版本中,这可以进一步减少到

a.push(...b)

但是,似乎对于大型数组(成员数为100,000或更多),将元素数组传递给push(使用apply()或ECMAScript 2015扩展运算符)的技术可能会失败。对于此类阵列,使用循环是一种更好的方法。有关详细信息,请参见https://stackoverflow.com/a/17368101/96100

[].concat.apply([], [array1, array2, ...])

编辑:效率证明:http : //jsperf.com/multi-array-concat/7

edit2:Tim Supinie在评论中提到,这可能导致解释器超出调用堆栈的大小。这也许取决于js引擎,但是我至少在Chrome上也获得了“超出最大调用堆栈大小”的信息。测试案例:[].concat.apply([], Array(300000).fill().map(_=>[1,2,3]))(使用当前接受的答案我也遇到了相同的错误,因此有人在预料这种用例或为其他用例建立一个库,无论您选择哪种解决方案,都必须进行特殊测试。)

对于使用ES2015(ES6)的人

现在,您可以使用扩展语法来连接数组:

const arr1 = [0, 1, 2],
      arr2 = [3, 4, 5];

const result1 = [...arr1, ...arr2]; // -> [0, 1, 2, 3, 4, 5]

// or...

const result2 = [...arr2, ...arr1]; // -> [3, 4, 5, 0, 1, 2]

concat()方法用于连接两个或多个数组。它不会更改现有数组,只会返回已连接数组的副本。

array1 = array1.concat(array2, array3, array4, ..., arrayN);

使用Array.prototype.concat.apply处理多个数组的串联:

var resultArray = Array.prototype.concat.apply([], arrayOfArraysToConcat);

例:

var a1 = [1, 2, 3],
    a2 = [4, 5],
    a3 = [6, 7, 8, 9];
Array.prototype.concat.apply([], [a1, a2, a3]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

对于多个数组和ES6的数组,请使用

Array.prototype.concat(...arr);

例如:

const arr = [[1, 2, 3], [4, 5, 6], [7, 8 ,9]];
const newArr = Array.prototype.concat(...arr);
// output: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

如果您在通过map / filter / sort等将结果传递到管道中,并且想要连接数组数组,则可以使用 reduce

let sorted_nums = ['1,3', '4,2']
  .map(item => item.split(','))   // [['1', '3'], ['4', '2']]
  .reduce((a, b) => a.concat(b))  // ['1', '3', '4', '2']
  .sort()                         // ['1', '2', '3', '4']

现在,我们可以使用组合多个数组ES6 Spread而不是使用concat()串联数组,请尝试使用传播语法将多个数组组合为一个扁平数组。例如:

var a = [1,2];
var b = [3,4];
var c = [5,6,7];
var d = [...a, ...b, ...c];
// resulting array will be like d = [1,2,3,4,5,6,7]

这样解决。

let arr = [[1, 2], [3, 4], [5, 6]];
 console.log([].concat(...arr));

您可以使用jsperf.com网站来比较性能。这是concat的链接

之间增加了比较:

var c = a.concat(b);

和:

var c = [];
for (i = 0; i < a.length; i++) {
    c.push(a[i]);
}
for (j = 0; j < b.length; j++) {
    c.push(b[j]);
}

第二个铬的速度几乎慢了10倍。

轻松使用concat函数:

var a = [1,2,3];
var b = [2,3,4];
a = a.concat(b);
>> [1,2,3,2,3,4]

这是一个函数,通过它可以连接多个数组

function concatNarrays(args) {
    args = Array.prototype.slice.call(arguments);
    var newArr = args.reduce( function(prev, next) {
       return prev.concat(next) ;
    });

    return newArr;
}

范例-

console.log(concatNarrays([1, 2, 3], [5, 2, 1, 4], [2,8,9]));

将输出

[1,2,3,5,2,1,4,2,8,9]

通过推送合并数组

const array1 = [2, 7, 4];
const array2 = [3, 5,9];
array1.push(...array2);
console.log(array1)

使用ConcatSpread运算符:

const array1 = [1,2];
const array2 = [3,4];

// Method 1: Concat 
const combined1 = [].concat(array1, array2);

// Method 2: Spread
const combined2 = [...array1, ...array2];

console.log(combined1);
console.log(combined2);

如果您有数组数组,并且想要将元素合并为一个数组,请尝试以下代码(需要ES2015):

let arrOfArr = [[1,2,3,4],[5,6,7,8]];
let newArr = [];
for (let arr of arrOfArr) {
    newArr.push(...arr);
}

console.log(newArr);
//Output: [1,2,3,4,5,6,7,8];

或者如果您正在从事函数式编程

let arrOfArr = [[1,2,3,4],[5,6,7,8]];
let newArr = arrOfArr.reduce((result,current)=>{
    result.push(...current);
    return result;
});

console.log(newArr);
//Output: [1,2,3,4,5,6,7,8];

甚至在没有扩展运算符的情况下使用ES5语法甚至更好

var arrOfArr = [[1,2,3,4],[5,6,7,8]];
var newArr = arrOfArr.reduce((result,current)=>{
    return result.concat(current);
});
console.log(newArr);
//Output: [1,2,3,4,5,6,7,8];

如果您不知道否,这种方式很方便。代码时的数组数量。

用ES6缩短。

new Set([].concat(...Array));

这确实可以连接多个数组并使它们唯一

Codepen上的演示

其中'n'是一些数组,也许是arrays的数组。

var answer = _.reduce(n,function(a,b){return a.concat(b)})

如果只有两个数组可以连接,而您实际上需要追加一个数组而不是创建一个新数组,则可以采用推入或循环的方式。

基准:https : //jsperf.com/concat-small-arrays-vs-push-vs-loop/

尝试这个:

i=new Array("aaaa", "bbbb");
j=new Array("cccc", "dddd");

i=i.concat(j);

如果N个数组是从数据库中获得的而不是硬编码的,那么我将使用ES6这样做

let get_fruits = [...get_fruits , ...DBContent.fruit];

似乎正确的答案在不同的JS引擎中有所不同。这是我从ninjagecko的答案链接的测试套件中获得的结果

  • [].concat.apply在Windows和Android上的Chrome 83中最快,其次是reduce(慢56%);
  • concat在Mac上的Safari 13中,循环播放最快,其次是reduce(慢13%);
  • reduce在iOS上的Safari 12中最快,其次是循环播放concat(慢40%);
  • elementwisepush在Windows的Firefox 70中最快,其次是[].concat.apply(慢30%)。
本文地址:http://javascript.askforanswer.com/lianjiengeshuzudezuiyouxiaofangfashishenme.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!