javascript重塑基础系列之-push()和concat()的区别

javascript javascript, 重塑基础 评论

目录

区别

功能：往数组末尾追加数据

push

  • 会改变原有数组
  • 如果添加一个数组，会把数组作为对象追加到末尾
  • 如果添加一个数组并要解析，需要使用arr.push.apply()orArray.prototype.push.apply()

concat

  • 不会改变原有数组，而是返回追加数据后的数组的副本，原有数组不变
  • 如果添加一个数组，会把数组解析成元素逐个追加到末尾

示例1-往数组添加元素

push

1
2
3
4
5
6
7
8
9
var arr_src = new Array()
arr_src[0] = 1
arr_src[1] = 2
arr_src[2] = 3
arr_src[3] = 4
console.log(arr_src) //输出 [1,2,3,4]
var result = arr_src.push(5)
console.log(arr_src)  //输出[1,2,3,4,5]
console.log(result)   //输出5   即返回数组长度

运行结果

concat

1
2
3
4
5
6
7
8
9
var arr_src = new Array()
arr_src[0] = 1
arr_src[1] = 2
arr_src[2] = 3
arr_src[3] = 4
console.log(arr_src) //输出 [1,2,3,4]
var result = arr_src.concat(5)
console.log(arr_src)  //输出[1,2,3,4]
console.log(result)   //返回合并后的数组 输出[1,2,3,4,5]

运行结果

示例2-往数组中添加数组

push

1
2
3
4
5
6
7
8
9
10
11
12
13
var arr_src = new Array()
arr_src[0] = 1
arr_src[1] = 2
arr_src[2] = 3
arr_src[3] = 4
var arr_add = new Array()
arr_add[0] = 5
arr_add[1] = 6
console.log(arr_src) //输出 [1,2,3,4]
console.log(arr_add) //输出 [5,6]
arr_src.push(arr_add)
console.log(arr_src)  //输出[1,2,3,4,[5,6}]
console.log(arr_add)  //输出[5,6]

运行结果

如果要解析数组逐个追加可以使用apply,如下两种方法均可,arr_src数组会被改变，arr_add不变

1
2
3
arr_src.push.apply(arr_src,arr_add)        //[1, 2, 3, 4, 5,6]
//或者
Array.prototype.push.apply(arr_scr,arr_add)

尝试一下

concat

1
2
3
4
5
6
7
8
9
var arr_src = new Array()
arr_src[0] = 1
arr_src[1] = 2
arr_src[2] = 3
arr_src[3] = 4
console.log(arr_src) //输出 [1,2,3,4]
var result = arr_src.concat([5,6])
console.log(arr_src)  //输出[1,2,3,4]
console.log(result)   //输出[1,2,3,4,5,6]

运行结果

效率

测试环境

  • 两个10万的数组合并
  • chrome浏览器 Version 71.0.3578.98 (Official Build) (64-bit)

测试结果

  • concat优与apply
  • concat没有长度限制，apply在chrome浏览器下20万-30万之间就内存溢出，实际边界没有测试，不同浏览器不同

测试代码如下：保存为html用浏览器打开即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<head>
<script>
var testArray1=[]
var testArray2=[]
function reset(){
  var count = document.getElementById("count").value
  for(var i=0; i<count;i++){
    testArray1.push(i)
    testArray2.push(i+count)
  }
}
function setValue(id,value){
  document.getElementById(id).innerHTML = value
}
function testApply(){
  //初始化数组
  reset()
  var startTime=0
  var endTime=0
  console.log('开始：'+ (startTime=new Date().getTime()))
  setValue("startTime",startTime)
  var result=Array.prototype.push.apply(testArray1,testArray2) // result为合并后的数组长度
  console.log(result)
  console.log('结束：'+ (endTime=new Date().getTime()))
  setValue("endTime",endTime)
  console.log('耗时：'+(endTime-startTime))
  setValue("totalTime",endTime-startTime)
}
function testConcat(){
  //初始化数组
  reset()
  var startTime=0
  var endTime=0
  console.log('开始：'+ (startTime=new Date().getTime()))
  setValue("startTime",startTime)
  var result=testArray1.concat(testArray2) //result为合并后的数组
  console.log(result.length)
  console.log('结束：'+ (endTime=new Date().getTime()))
  setValue("endTime",endTime)
  console.log('耗时：'+(endTime-startTime))
  setValue("totalTime",endTime-startTime)
}
</script>
</head>
<body>
  <input type="text" id="count" />
  <button onclick="testApply()">testApply</button>
  <button onclick="testConcat()">testConcat</button>
  <br>
  <ul>
    <li>开始:<div id="startTime"></div></li>
    <li>结束:<div id="endTime"></div></li>
    <li>耗时:<div id="totalTime"></div>毫秒</li>
  </ul>
</body>
</html>

效果图：