push

push()方法将一个或多个元素添加到数组的末尾,并且返回新的数组长度。

语法:

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

concat

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

语法:

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

因此,push与concat的对原数组的操作是不同的,push是在原数组基础上操作的,而concat的原数组不会改变。

//push
var sports = ['soccer', 'baseball'];
var total = sports.push('football', 'swimming'); console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']
console.log(total); // 4
//concat
var sports = ['soccer', 'baseball'];
var total = sports.concat('football', 'swimming'); console.log(sports); // ['soccer', 'baseball']
console.log(total); // ['soccer', 'baseball','football', 'swimming']

添加长度大于1的数组,push会将数组作为整体添加到数组末尾,而concat则不会

//push
var sports = ['soccer', 'baseball'];
var total = sports.push(['football', 'swimming']); console.log(sports); //["soccer", "baseball", Array[2]]0: "soccer"1: "baseball"2: Array[2]length: 3__proto__: Array[0] console.log(total); // 3
//concat
var sports = ['soccer', 'baseball'];
var total = sports.concat(['football', 'swimming']); console.log(sports); // ["soccer", "baseball"] console.log(total); // ["soccer", "baseball", "football", "swimming"]

那么在上一步的操作中如何使用push方法,使sports变成["soccer", "baseball", "football", "swimming"] ,而不是["soccer", "baseball", Array[2]]?[1]

首先push和concat均可使用call()和Apply(), 其中

apply()方法能劫持另外一个对象的方法,继承另外一个对象的属性.

Function.apply(obj,args)方法能接收两个参数
obj:这个对象将代替Function类里this对象
args:这个是数组,它将作为参数传给Function(args-->arguments)

call()和apply的意思一样,只不过是参数列表不一样.

Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj:这个对象将代替Function类里this对象
params:这个是一个参数列表

从Apply()的定义上,你大概已经知道解决方法了,利用Apply,将数组作为参数传给push,这样就能得到你想要的结果了。

var sports = ['soccer', 'baseball'];
var total = Array.prototype.push.apply(sports,['football', 'swimming']);

/*or
var total = sports.push.apply(sports,['football', 'swimming']);
*/ console.log(sports); // ["soccer", "baseball", "football", "swimming"]
console.log(total); // 4

相关链接:

[1] stackoverflow  How to extend an existing JavaScript array with another array? [duplicate]

push与concat的更多相关文章

  1. javascript push 和 concat 的区别

    array.push(item1,item2,item3...) array.concat(item1,item2,item3...) 1. push和concat的元素都既可以是普通元素(任意类型) ...

  2. 微信小程序之数组操作:push与concat的区别

    微信小程序中需要用到数组的操作,push和concat二者功能很相像,但有两点区别. 先看如下例子: var arr = []; arr.push(); arr.push(); arr.push([, ...

  3. JavaScript的push(),pop(),concat()方法

    push 方法 将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1 [item2 [. . . [itemN ]]]]) 参数 arrayObj 必选项.一个  ...

  4. JavaScript中push ,pop ,concat ,join方法

    push 方法 将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1 [item2[. . . [itemN ]]]]) 说明 push 方法将以新元素出现的顺序 ...

  5. js push ,pop ,concat ,join方法

    push 方法 将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1 [item2[. . . [itemN ]]]]) 说明 push 方法将以新元素出现的顺序 ...

  6. JavaScript引用类型之Array数组的concat()和push()方法的区别

    在javascript中,我们一般都只用push向数组的尾部插入新元素的,但是其实在javascript中还有另外一个方法和push一样,也是向数组尾部插入新元素的,但是他们之间却存在着一定的区别,当 ...

  7. 微信小程序中concat 和push的区别

    push和concat二者功能很相像,但有两点区别. 先看如下例子: var arr = []; arr.push(1); arr.push(2); arr.push([3, 4]) arr.push ...

  8. [Redux] Avoiding Array Mutations with concat(), slice(), and ...spread

    For Redux, you cannot use mutable methods like push, splice. Need to use immutable methods such as c ...

  9. JavaScript—从数组的indexOf方法深入——Object的Property机制。

    在js中,可以说万物皆对象(object),一个数组也是一个对象(array). 很多对象都有很多很方便的方法 比如数组的push,concat,slice等等,但是如果一些对象,它没有实现这些方法, ...

随机推荐

  1. CString string char* char 之间的字符转换(多种方法)

    在写程序的时候,我们经常遇到各种各样的类型转换,比如 char* CString string 之间的互相转换.首先解释下三者的含义. CString 是一种很有用的数据类型.它们很大程度上简化了MF ...

  2. 【转】MATLAB在一幅图上添加多个纵坐标轴

    来源:http://wenku.baidu.com/link?url=m_eEkzbjnT9ccgAnlPVDqHCVyrZOD2EplXxxIiQc69DI0lHAWzwpZXfdDy_7DPbwI ...

  3. C++ STL中Map的按Key排序和按Value排序

    map是用来存放<key, value>键值对的数据结构,可以很方便快速的根据key查到相应的value.假如存储学生和其成绩(假定不存在重名,当然可以对重名加以区 分),我们用map来进 ...

  4. WPF——数据绑定(二)绑定方法—绑定本地对象

    注意:本人初学WPF,文中表达或技术性问题请勿见怪,欢迎指正,谢谢 标记拓展语法:绑定到本地对象 什么是绑定到本地对象,我个人理解就是实现UI层上两个或多个控件的相互关联,一个控件的状态改变,导致另一 ...

  5. Android -- 距离感应器控制屏幕灭屏白屏

    权限                                                                                             <u ...

  6. 网件无线网卡在windows 2012支持问题

    网件的无线网卡的驱动是支持windows 8.1的,但是安装了驱动后,却没法启动网卡.网上搜索后发现,service里面网件有一进程没法启动:而2012年忘记官方论坛技术支持答复咨询居然说,网件驱动不 ...

  7. SASS学习笔记_02

    导入 当模块化布局的时候 导入头和尾 私有化 不生成css文件 文件名前面加下划线   结果   嵌套导入   导入css文件 不推荐   注释 和默认变量值

  8. IT小小鸟读后感

    我是一只小小鸟(读后感) 当我成为闽江学院的一名学子时,我选择了我自己的专业(软件工程).成为大一新生的我对着未来充满着希望憧憬.但现实并不是美好的我得替今后的我想想以后大学毕业了到底我到了社会上要用 ...

  9. hdu 3157 Crazy Circuits 网络流

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3157 You’ve just built a circuit board for your new r ...

  10. byte和hexstring,int,string等的转换类

    public class HexConversion { /** * 16进制数的字符串转字节数组(16进制转字节数组) * * @param hexString * 16进制字符串 * @retur ...