资讯专栏INFORMATION COLUMN

(JavaScript) 合并数组的方法

econi / 2085人阅读

摘要:添加元素到数组合并两个数组错误方法应该用方法,将被的数组当成参数数组。会改变数组,返回最新属性,占用内存较少。

一、Array.prototype.concat()

concat方法将创建一个新的数组,然后将调用它的对象(this指向的对象)中的元素以及所有参数中的数组类型的参数中的元素以及非数组类型的参数本身按照顺序放入这个新数组,并返回该数组
concat方法并不修改调用它的对象(this指向的对象)和参数中的各个数组本身的值,而是将他们的每个元素拷贝一份放在组合成的新数组中。原数组中的元素有两种被拷贝的方式:

对象引用(非对象直接量):concat方法会复制对象引用放到组合的新数组里,原数组和新数组中的对象引用都指向同一个实际的对象,所以,当实际的对象被修改时,两个数组也同时会被修改,如:原数组和新数组里都有一个对象obj,如果改变其属性,则原数组与新数组里的obj属性都发生变化。

字符串和数字(是原始值,而不是包装原始值的StringNumber对象):concat方法会复制字符串和数字的值放到新数组里。

1. 连接两个数组
var alpha = ["a", "b", "c"];
var numeric = [1, 2, 3];

// 组成新数组 ["a", "b", "c", 1, 2, 3]; 原数组 alpha 和 numeric 未被修改
var alphaNumeric = alpha.concat(numeric);
2. 连接三个数组
var num1 = [1, 2, 3];
var num2 = [4, 5, 6];
var num3 = [7, 8, 9];

// 组成新数组[1, 2, 3, 4, 5, 6, 7, 8, 9]; 原数组 num1, num2, num3 未被修改
var nums = num1.concat(num2, num3);
3. 将非数组值合并到数组里
var alpha = ["a", "b", "c"];

// 组成新数组 ["a", "b", "c", 1, 2, 3], 原alpha数组未被修改
var alphaNumeric = alpha.concat(1, [2, 3]);
二、Array.prototype.push()

push()方法添加一个或多个元素到数组的末尾,并返回数组新的长度(length属性值)

arr.push(element1, ..., elementN)

1. 添加元素到数组
var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");

console.log(sports); // ["soccer", "baseball", "football", "swimming"]
console.log(total);  // 4
2. 合并两个数组

错误方法

var sports1 = ["soccer", "baseball"];
var sports2 = ["football", "swimming"];

var total = sports1.push(sports2);
    
/* or */

var total = Array.prototype.push.call(sports1, sports2);
    
console.log(sports1);    // ["soccter", "baseball", ["football", "swimming"]]

应该用apply方法,将被push的数组当成参数数组。

var sports1 = ["soccer", "baseball"];
var sports2 = ["football", "swimming"];

var total = Array.prototype.push.apply(sports1, sports2);
console.log(sports1);    // ["soccter", "baseball", "football", "swimming"]
三、选择哪个方法

Array.prototype.concat()返回一个新数组,不会改变原数组,但是会占用较多内存。

Array.prototype.push()会改变this数组,返回最新length属性,占用内存较少。

参考:

Array.prototype.concat() - MDN

Array.prototype.push() - MDN

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79524.html

相关文章

  • JavaScript数组方法数组合并

    摘要:可以看到,方法,简洁高效,且能实现多个数组合并并且能够实现深度嵌套注意最后还是使用了哦,换成是不可以的。多个数组合并原生的方法可以简单实现多个数组合并,比如会返回至于其他方法,应该只是一个接口的问题,可以像下面这样实现。 网易前端面试的时候,面试官问我有几种数组合并的方法,当时第一反应就是concat,但是面试官说几种,我寻思着原生js方法好像也只有concat呀,就说不改变原数组的话...

    izhuhaodev 评论0 收藏0
  • JavaScript 小技巧之数组合并

    摘要:对于一些小数组来说,这样做当然没有问题。第一个主要问题在于,我们将要追加的数组的元素数量翻倍了当然是临时性的,因为实质上要将数组内容拷贝到函数调用栈上。所以,假如要追加的数组中有一百万个元素,那么几乎一定会超过函数和的调用栈限制的大小。 原文链接: https://davidwalsh.name/combi... 这是一篇介绍 JavaScript 技术的小短文。我们将会讲到组合/合并...

    张率功 评论0 收藏0
  • JavaScript数组合并数组排列组合

    array.push.apply() 该方法会改变原数组 var arr1 = [1,2]; var arr2 = [aa,as]; arr1.push.apply(arr1, arr2); console.log(arr1); //[1, 2, aa, as] console.log(arr2); //[aa, as] n个数组合并成一个数组 var obj = { 1...

    ranwu 评论0 收藏0
  • Javascript数组常用方法

    摘要:数组常用方法介绍删除数组最后一位元素。开始下标删除个数,插入元素可以多个注意当数组执行上面的这些方法时,都会修改原数组。输出从数组中找出所有符合指定条件的元素。内容返回将数组合成一个值。合并数组或合并数组的值。 JavaScript 数组常用方法介绍 array.pop – 删除数组最后一位元素。 var arr = [1, 2, 3]; arr.pop();// 返回 3 arr;/...

    verano 评论0 收藏0

发表评论

0条评论

econi

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<