JS數組：push vs concat

animabear 發布于2019-08-22 14:05 / 556人閱讀

摘要：使用這么久對于數組的相關方法一直都是拿來就用對于方法更是常用。不過對于多個數組合并的時候因為返回的是新數組，可以鏈式下去。

使用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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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