JS数组：push vs concat

animabear 发布于2019-08-22 14:05 / 461人阅读

摘要：使用这么久对于数组的相关方法一直都是拿来就用对于方法更是常用。不过对于多个数组合并的时候因为返回的是新数组，可以链式下去。

使用JS这么久, 对于JS数组的相关方法一直都是拿来就用,对于push方法更是常用。但是在一次用到contact方法的时候自问了一句: push和contact到底有哪些区别?

先看下MDN的定义:

【push】:adds one or more elements to the end of an array and returns the new length of the array.

var animals = ["pigs", "goats", "sheep"];
console.log(animals.push("cows")); // expected output: 4
console.log(animals); // expected output: Array ["pigs", "goats", "sheep", "cows"]


animals.push(["new arr"]); // expected output: 5
console.log(animals); // expected output: Array ["pigs", "goats", "sheep", "cows", Array(1)]

【contact】:The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

var array1 = ["a", "b", "c"];
var array2 = ["d", "e", "f"];

console.log(array1.concat(array2)); // expected output: Array ["a", "b", "c", "d", "e", "f"]
console.log(array1); // expected output: Array ["a", "b", "c"]
console.log(array2); // expected output: Array ["d", "e", "f"]

摘取重点：

push方法添加元素到数组末尾，改变的是同一个数组, 返回值是添加之后数组的长度

contact方法是合并两个或者多个数组，不会改变存在的数组，返回的是合并的数组

那性能会不会有区别?

环境：win8.1 chrome 63.0.3239.132

// push demo
var arr3 = [1, 2, 3];
var arr4 = [4, 5, 6];
console.time("push");
for (let index = 10000; index > 0; index--) {
  arr3.push(...arr4);
}
console.timeEnd("push"); // push: 2.39892578125ms

// contact demo
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
console.time("contact");
for (let index = 10000; index > 0; index--) {
  arr1 = arr1.concat(arr2);
}
console.timeEnd("contact"); // contact: 312.762939453125ms

在我这个环境上push+解构的性能是要好于contact的。不过对于多个数组合并的时候, contact因为返回的是新数组，可以链式下去。

GPU服务器私有云 push与concat区别 js?push js push 数据被覆盖 js对象的push

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

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

【js运算性能系列】拼接字符串的方法及性能比较

摘要：将多个字符串拼接在一起，通常有以下三种方法，在实践中都是经常用到的。先把字符串写入临时数组中，然后调用数组的方法，将其中的字符串元素连接起来。使用字符串的函数。将多个字符串拼接在一起，通常有以下三种方法，在实践中都是经常用到的。使用字符串连接符 ‘+’, string1 + string2 + ... 使用数组的join函数。先把字符串写入临时数组中，然后调用数组的join方法，...

周国辉 2019-08-21 14:47 评论0 收藏0
JavaScript数组——常用数组方法汇总

摘要：本文记录关于数组的一些常用方法，搜集总结。对于数组中的每个元素，都会调用函数一次。返回值是一个新数组，其中的每个元素均为关联的原始数组元素的回调函数返回值。本文记录关于js数组的一些常用方法，搜集总结。主要思路： 1. 方法功能是什么 2. 传递的参数是什么 3. 返回值是什么 4. 原来的数组是否改变第一组：关于数组的增加、删除和修改 1.push 向数组末尾增加新的...

HollisChuang 2019-08-21 10:33 评论0 收藏0
js函数调用模式和常用的几个方法

摘要：一函数调用的种模式方法调用模式当一个函数被保存为对象的一个属性时，我们称它为一个方法。二函数常用的三个方法在指定值和参数参数以数组或类数组对象的形式存在的情况下调用某个函数。当绑定函数被调用时，该参数会作为原函数运行时的指向。一、函数调用的4种模式 (1) 方法调用模式当一个函数被保存为对象的一个属性时，我们称它为一个方法。当一个方法被调用时，this 被绑定到该对象。如果调用表达...

zhigoo 2019-08-19 18:32 评论0 收藏0
翻译连载 | JavaScript轻量级函数式编程-第 8 章：列表操作 |《你不知道的JS》姊妹篇

摘要：通过对一系列任务建模来理解一些非常重要的函数式编程在列表操作中的价值一些些看起来不像列表的语句作为列表操作，而不是单独执行。映射我们将采用最基础和最简单的操作来开启函数式编程列表操作的探索。函子是采用运算函数有效用操作的值。原文地址：Functional-Light-JS 原文作者：Kyle Simpson－《You-Dont-Know-JS》作者关于译者：这是一个流淌着...

sPeng 2019-08-22 11:08 评论0 收藏0
js不完全入门之数组

摘要：数组是值得有序集合。数组元素甚至可以是对象或其它数组。不同数组自动更新。数组对象继承上的大量数组操作方法字符串和数组字符串可以理解为类数组，但它不是数组博客地址不完全入门之数组欢迎交流指正数组是值得有序集合。每个值叫做元素，每个元素在数组中都有数字位置编号，也就是索引。JS中的数组是弱类型的，数组中可以含有不同类型的元素。数组元素甚至可以是对象或其它数组。 var arr = [1,...

bergwhite 2019-08-20 10:22 评论0 收藏0