(JavaScript) 合并数组的方法

本文介绍了JavaScript中数组方法concat()和push()的区别与应用场景。concat()用于合并数组且不改变原数组,而push()则是在原数组基础上追加元素。文章通过实例详细解释了两种方法的具体使用方式。
一、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属性,占用内存较少。

参考:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值