當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

concat合并的数组会有顺序么_超全的JS常用数组方法整理

發(fā)布時間：2025/3/11 javascript 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 concat合并的数组会有顺序么_超全的JS常用数组方法整理小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言
常用數(shù)組方法匯總
方法解析
- 1：concat();
- 2：join();
- 3：pop();
- 4：shift();
- 5：unshift();
- 7：reverse();
- 8：sort();
- 9：slice();
- 10：splice();
- 11：toString();
- 12：valueOf();
- 13：IndexOf();
- 14：lastIndexOf();
- 15：forEach();
- 16：map();
- 17：filter();
- 18：every();
- 19：some();
- 20.reduce();
- 21.reduceRight()
三：哪些數(shù)組方法會改變原數(shù)組
參考文章

前言

我們在學到j(luò)s中數(shù)組的時候，我們會接觸到j(luò)s中數(shù)組的一些方法這些方法對我們來說，可以很便利的達到我們想要的結(jié)果，但是因為方法比較多，有些方法也不常用，可能會過一段時間就會忘記，那么在這里我整理了21個數(shù)組的方法，供大家查閱。

常用數(shù)組方法匯總

方法解析

1：concat();

功能：合并數(shù)組，可以合并一個或多個數(shù)組，會返回合并數(shù)組之后的數(shù)據(jù)，不會改變原來的數(shù)組；

var str1 = [12,2,"hello"];var str2 = ["world"]; console.log(str1.concat(str2));　　　　　　　　//[12, 2, "hello", "world"] console.log(str1);　　　　　　　　　　　　　　　　//[12,2,"hello"];

2：join();

功能：將數(shù)組轉(zhuǎn)為字符串并返回轉(zhuǎn)化的字符串數(shù)據(jù)，不會改變原來的數(shù)組；

注意：()中用雙引號包括自己想用的分隔符，默認為逗號，這里方便觀察，我用了-　　

var str1 = [12,2,"hello"]; var str2 = ["world"]; console.log(str1.join("-"));　　　　　　　　//12-2-hello console.log(str1);　　　　　　　　　　　　　　//[12, 2, "hello"]

3：pop();

功能：刪除數(shù)組的最后一位，并且返回刪除的數(shù)據(jù)，會改變原來的數(shù)組

var str1 = [12,2,"hello"]; console.log(str1.pop()　　　　　　　　//hello console.log(str1);　　　　　　　　　　//[12, 2]

4：shift();

功能：刪除數(shù)組的第一位數(shù)據(jù)，并且返回刪除的數(shù)據(jù)，會改變原來的數(shù)組。

5：unshift();

功能：在數(shù)組的首位新增一個或多數(shù)據(jù)，并且返回新數(shù)組的長度，會改變原來的數(shù)組

注意：unshift()方法返回的數(shù)據(jù)是新數(shù)組的長度，它增加的數(shù)據(jù)可以是一個也可以是多個，可以理解為增加一連串的數(shù)據(jù)，

var str1 = [12,2,"hello"]; var str2 = [43,2,"test"]; console.log(str1.unshift("你好"));　　　　　　　　　　　　　　//4 console.log(str2.unshift("hello","world"));　　　　　　　　//5 console.log(str1);　　　　　　　　　　　　　　　　　　　　　　　//["你好", 12, 2, "hello"] console.log(str2);　　　　　　　　　　　　　　　　　　　　　　　//["hello", "world", 43, 2, "test"]

6：push();

功能：在數(shù)組的最后一位新增一個或多個數(shù)據(jù)，并且返回新數(shù)組的長度，會改變原來的數(shù)組

注意：push()方法返回的是數(shù)據(jù)是新數(shù)組的長度，它增加的數(shù)據(jù)可以是一個也可以是多個，可以理解為增加一連串的數(shù)據(jù)。

var str1 = [12,2,"hello"]; var str2 = [43,2,"test"]; console.log(str1.push("你好"));　　　　　　　　　　//4 console.log(str2.push("hello","world"));　　　　//5 console.log(str1);　　　　　　　　　　　　　　　　　//[12, 2, "hello","你好"] console.log(str2);　　　　　　　　　　　　　　　　　//[43, 2, "test","hello", "world"]

7：reverse();

功能：將數(shù)組的數(shù)據(jù)進行反轉(zhuǎn)，并且返回反轉(zhuǎn)后的數(shù)組，會改變原數(shù)組

var str1 = [12,2,"hello"]; console.log(str1.reverse());　　　　　　//["hello", 2, 12] console.log(str1);　　　　　　　　　　　　//["hello", 2, 12]

8：sort();

功能：對數(shù)組內(nèi)的數(shù)據(jù)進行排序(默認為升序)，并且返回排過序的新數(shù)組，會改變原來的數(shù)組

注意：

8.1：這里的排序是針對字符的排序，先使用數(shù)組的toString()方法轉(zhuǎn)為字符串，再逐位比較，3是大于12的，因為首位3>1，不要與Number型的數(shù)據(jù)排序混淆
8.2：str2數(shù)組中增加了三個字符，可以看到，比較的時候，zoom是最大的，因為首位的英文字母通過ASCII碼可以轉(zhuǎn)為相應(yīng)的數(shù)值，再根據(jù)數(shù)值比較

var str1 = [12,2,43,5,2,5]; var str2 = [92,2,43,"hello",'zoom',5,2,5]; console.log(str1.sort());//[12, 2, 2, 43, 5, 5] console.log(str1);//[12, 2, 2, 43, 5, 5] console.log(str2.sort());//[2, 2, 43, 5, 5, 92, "abc", "hello", "zoom"] console.log(str2);//[2, 2, 43, 5, 5, 92, "abc", "hello", "zoom"]

8.3：排序問題

參數(shù)：sort(callback) 如果需要按照數(shù)值排序，需要傳參。sort(callback)，callback為回調(diào)函數(shù)，該函數(shù)應(yīng)該具有兩個參數(shù)，比較這兩個參數(shù)，然后返回一個用于說明這兩個值的相對順序的數(shù)字（a-b）。其返回值如下：

若 a 小于 b，返回一個小于 0 的值。

若 a 等于 b，則返回 0。

若 a 大于 b，則返回一個大于 0 的值。

var str3 = [92,2,43,5,2,5]; console.log(str3.sort(fn));　　　　　　　　　　　　　　　　　//[2, 2, 5, 5, 43, 92] console.log(str3);　　　　　　　　　　　　　　　　　　　　　　//[2, 2, 5, 5, 43, 92] function fn (a,b){return a-b;}

9：slice();

功能：截取指定位置的數(shù)組，并且返回截取的數(shù)組，不會改變原數(shù)組

參數(shù)：slice(startIndex, endIndex)

注意：可從已有的數(shù)組中返回選定的元素。該方法接收兩個參數(shù)slice(start,end)，stsrt為必選，表示從第幾位開始；end為可選，表示到第幾位結(jié)束(不包含end位)，省略表示到最后一位；start和end都可以為負數(shù)，負數(shù)時表示從最后一位開始算起，如-1表示最后一位。

var arr = ["T1","J1","L1","L2","M1"];console.log(arr.slice(1,3)); //["J1","L1"]console.log(arr.slice(1)); //["J1","L1","L2","M1"]console.log(arr.slice(-4,-1)); //["J1","L1","L2"]console.log(arr.slice(-2)); //["Lily","M1"]console.log(arr.slice(1,-2)); //["J1","L1"]console.log(arr); //["T1","J1","L1","L2","M1"]

10：splice();

功能：向數(shù)組中添加，或從數(shù)組刪除，或替換數(shù)組中的元素，然后返回被刪除/替換的元素。

參數(shù)：splice(start,num,data1,data2,...); 所有參數(shù)全部可選。

var arr = ["Tom","Jack","Lucy","Lily","May"]; console.log(arr.splice(2,0,"a","b"));//[] console.log(arr);//["Tom", "Jack", "a", "b", "Lucy", "Lily", "May"]---原數(shù)組改變

11：toString();

功能：將數(shù)組轉(zhuǎn)換成字符串，類似于沒有參數(shù)的join()。該方法會在數(shù)據(jù)發(fā)生隱式類型轉(zhuǎn)換時被自動調(diào)用，如果手動調(diào)用，就是直接轉(zhuǎn)為字符串。不會改變原數(shù)組

var str = [1,2,3]; console.log(str.toString()); //1,2,3 console.log(str);//[1,2,3]

12：valueOf();

功能：返回數(shù)組的原始值（一般情況下其實就是數(shù)組自身），一般由js在后臺調(diào)用，并不顯式的出現(xiàn)在代碼中

var str = [1,2,3]; console.log(str.valueOf()); //[1,2,3] console.log(str); //[1,2,3] //為了證明返回的是數(shù)組自身 console.log(str.valueOf() == str);//true

13：IndexOf();

功能：根據(jù)指定的數(shù)據(jù)，從左向右，查詢在數(shù)組中出現(xiàn)的位置，如果不存在指定的數(shù)據(jù)，返回-1，找到了指定的數(shù)據(jù)返回該數(shù)據(jù)的索引

參數(shù)：indexOf(value, start);value為要查詢的數(shù)據(jù)；start為可選，表示開始查詢的位置，當start為負數(shù)時，從數(shù)組的尾部向前數(shù)；如果查詢不到value的存在，則方法返回-1

注意：如果找到該數(shù)據(jù)，立即返回該數(shù)據(jù)的索引，不再往后繼續(xù)查找

var str = ["h","e","l","l","o"];console.log(str.indexOf("l")); //2console.log(str.indexOf("l",3)); //3console.log(str.indexOf("l",4)); //-1console.log(str.indexOf("l",-1)); //-1console.log(str.indexOf("l",-3)); //2

14：lastIndexOf();

功能：lastIndexOf() 方法可返回一個指定的字符串值最后出現(xiàn)的位置，如果指定第二個參數(shù) start，則在一個字符串中的指定位置從后向前搜索。

參數(shù)：lastIndexOf(value, start);value為要查詢的數(shù)據(jù)；start為可選的整數(shù)參數(shù)。規(guī)定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數(shù)，則將從字符串的最后一個字符處開始檢索。

var str = ["h","e","l","l","o"]; console.log(str.lastIndexOf("l")); //3 console.log(str.lastIndexOf("l",3)); //3 console.log(str.lastIndexOf("l",4)); //3 console.log(str.lastIndexOf("l",-1)); //3 console.log(str.lastIndexOf("l",-3)); //2

注意：該方法將從后向前檢索字符串，但返回是從起始位置 (0) 開始計算子字符串最后出現(xiàn)的位置。看它是否含有字符串。開始檢索的位置在字符串的 start 處或字符串的結(jié)尾（沒有指定 start 時）。如果沒有找到匹配字符串則返回 -1 。
注意：lastIndexOf() 方法是區(qū)分大小寫的！

15：forEach();

功能：ES5新增的方法，用來遍歷數(shù)組，沒有返回值，

參數(shù)：forEach(callback);callback默認有三個參數(shù)，分別為value(遍歷到的數(shù)組的數(shù)據(jù))，index(對應(yīng)的索引)，self(數(shù)組自身)。

var arr = ["Tom","Jack","Lucy","Lily","May"]; var a = arr.forEach(function(value,index,self){console.log(value + "--" + index + "--" + (arr === self)); }) // 打印結(jié)果為： // Tom--0--true // Jack--1--true // Lucy--2--true // Lily--3--true // May--4--true console.log(a); //undefined---forEach沒有返回值 //該方法為遍歷方法，不會修改原數(shù)組

16：map();

功能：

同forEach功能；

map的回調(diào)函數(shù)會將執(zhí)行結(jié)果返回，最后map將所有回調(diào)函數(shù)的返回值組成新數(shù)組返回。

參數(shù)：map(callback);callback默認有三個參數(shù)，分別為value，index，self。跟上面的forEach()的參數(shù)一樣

//功能1：同forEachvar arr = ["Tom","Jack","Lucy","Lily","May"];var a = arr.map(function(value,index,self){console.log(value + "--" + index + "--" + (arr === self))})// 打印結(jié)果為：// Tom--0--true// Jack--1--true// Lucy--2--true// Lily--3--true// May--4--true//功能2：每次回調(diào)函數(shù)的返回值被map組成新數(shù)組返回var arr = ["Tom","Jack","Lucy","Lily","May"];var a = arr.map(function(value,index,self){return "hi:"+value;})console.log(a); //["hi:Tom", "hi:Jack", "hi:Lucy", "hi:Lily", "hi:May"]console.log(arr); //["Tom", "Jack", "Lucy", "Lily", "May"]---原數(shù)組未改變

17：filter();

功能： 1.同forEach功能； 2.filter的回調(diào)函數(shù)需要返回布爾值，當為true時，將本次數(shù)組的數(shù)據(jù)返回給filter，最后filter將所有回調(diào)函數(shù)的返回值組成新數(shù)組返回（此功能可理解為“過濾”）。

參數(shù)：filter(callback);callback默認有三個參數(shù)，分別為value，index，self。

//功能1：同forEachvar arr = ["Tom","Jack","Lucy","Lily","May"];var a = arr.filter(function(value,index,self){console.log(value + "--" + index + "--" + (arr === self))})// 打印結(jié)果為：// Tom--0--true// Jack--1--true// Lucy--2--true// Lily--3--true// May--4--true//功能2：當回調(diào)函數(shù)的返回值為true時，本次的數(shù)組值返回給filter，被filter組成新數(shù)組返回var arr = ["Tom","Jack","Lucy","Lily","May"];var a = arr.filter(function(value,index,self){return value.length > 3;})console.log(a); //["Jack", "Lucy", "Lily"]console.log(arr); //["Tom", "Jack", "Lucy", "Lily", "May"]---原數(shù)組未改變

18：every();

功能：判斷數(shù)組中每一項是否都滿足條件，只有所有項都滿足條件，才會返回true。

參數(shù)：every()接收一個回調(diào)函數(shù)作為參數(shù)，這個回調(diào)函數(shù)需要有返回值，every(callback);callback默認有三個參數(shù)，分別為value，index，self。

功能1：當回調(diào)函數(shù)的返回值為true時，類似于forEach的功能，遍歷所有；如果為false，那么停止執(zhí)行，后面的數(shù)據(jù)不再遍歷，停在第一個返回false的位置。

//demo1:var arr = ["Tom","abc","Jack","Lucy","Lily","May"];var a = arr.every(function(value,index,self){console.log(value + "--" + index + "--" + (arr == self))})// 打印結(jié)果為：// Tom--0--true//因為回調(diào)函數(shù)中沒有return true，默認返回undefined，等同于返回false//demo2:var arr = ["Tom","abc","Jack","Lucy","Lily","May"];var a = arr.every(function(value,index,self){console.log(value + "--" + index + "--" + (arr == self))return value.length < 4;})// 打印結(jié)果為：// Tom--0--true// abc--1--true// Jack--2--true//因為當遍歷到Jack時，回調(diào)函數(shù)到return返回false，此時Jack已經(jīng)遍歷，但是后面數(shù)據(jù)就不再被遍歷了//demo3:var arr = ["Tom","abc","Jack","Lucy","Lily","May"];var a = arr.every(function(value,index,self){console.log(value + "--" + index + "--" + (arr == self))return true;})// 打印結(jié)果為：// Tom--0--true// abc--1--true// Jack--2--true// Lucy--3--true// Lily--4--true// May--5--true//因為每個回調(diào)函數(shù)的返回值都是true，那么會遍歷數(shù)組所有數(shù)據(jù)，等同于forEach功能

功能2：當每個回調(diào)函數(shù)的返回值都為true時，every的返回值為true，只要有一個回調(diào)函數(shù)的返回值為false，every的返回值都為false

19：some();

功能：判斷數(shù)組中是否存在滿足條件的項，只要有一項滿足條件，就會返回true。

參數(shù)：some()接收一個回調(diào)函數(shù)作為參數(shù)，這個回調(diào)函數(shù)需要有返回值，some(callback);callback默認有三個參數(shù)，分別為value，index，self。

功能1：因為要判斷數(shù)組中的每一項，只要有一個回調(diào)函數(shù)返回true，some都會返回true，所以與every正好相反，當遇到一個回調(diào)函數(shù)的返回值為true時，可以確定結(jié)果，那么停止執(zhí)行，后面都數(shù)據(jù)不再遍歷，停在第一個返回true的位置；當回調(diào)函數(shù)的返回值為false時，需要繼續(xù)向后執(zhí)行，到最后才能確定結(jié)果，所以會遍歷所有數(shù)據(jù)，實現(xiàn)類似于forEach的功能，遍歷所有。

//demo1:var arr = ["Tom","abc","Jack","Lucy","Lily","May"];var a = arr.some(function(value,index,self){console.log(value + "--" + index + "--" + (arr == self))return value.length > 3;})// 打印結(jié)果為：// Tom--0--true// abc--1--true// Jack--2--true//demo2:var arr = ["Tom","abc","Jack","Lucy","Lily","May"];var a = arr.some(function(value,index,self){console.log(value + "--" + index + "--" + (arr == self))return true;})// 打印結(jié)果為：// Tom--0--true//demo3:var arr = ["Tom","abc","Jack","Lucy","Lily","May"];var a = arr.some(function(value,index,self){console.log(value + "--" + index + "--" + (arr == self))return false;})// 打印結(jié)果為：// Tom--0--true// abc--1--true// Jack--2--true// Lucy--3--true// Lily--4--true// May--5--true

功能2：與every相反，只要有一個回調(diào)函數(shù)的返回值都為true，some的返回值為true，所有回調(diào)函數(shù)的返回值為false，some的返回值才為false

//demo1:var arr = ["Tom","abc","Jack","Lucy","Lily","May"];var a = arr.some(function(value,index,self){return value.length > 3;})console.log(a); //true//demo2:var arr = ["Tom","abc","Jack","Lucy","Lily","May"];var a = arr.some(function(value,index,self){return value.length > 4;})console.log(a); //false

20.reduce();

功能：從數(shù)組的第一項開始，逐個遍歷到最后，迭代數(shù)組的所有項，然后構(gòu)建一個最終返回的值。

參數(shù)：reduce()接收一個或兩個參數(shù)：第一個是回調(diào)函數(shù)，表示在數(shù)組的每一項上調(diào)用的函數(shù)；第二個參數(shù)（可選的）作為歸并的初始值，被回調(diào)函數(shù)第一次執(zhí)行時的第一個參數(shù)接收。 reduce(callback,initial);callback默認有四個參數(shù)，分別為prev，now，index，self。 callback返回的任何值都會作為下一次執(zhí)行的第一個參數(shù)。如果initial參數(shù)被省略，那么第一次迭代發(fā)生在數(shù)組的第二項上，因此callback的第一個參數(shù)是數(shù)組的第一項，第二個參數(shù)就是數(shù)組的第二項。

//demo1:不省略initial參數(shù)，回調(diào)函數(shù)沒有返回值var arr = [10,20,30,40,50];arr.reduce(function(prev,now,index,self){console.log(prev + "--" + now + "--" + index + "--" + (arr == self))}, 2019)// 打印結(jié)果為：// 2019--10--0--true// undefined--20--1--true// undefined--30--2--true// undefined--40--3--true// undefined--50--4--true// 此時回調(diào)函數(shù)沒有return，所以從第二次開始，prev拿到的是undefined//demo2:省略initial參數(shù)，回調(diào)函數(shù)沒有返回值var arr = [10,20,30,40,50];arr.reduce(function(prev,now,index,self){console.log(prev + "--" + now + "--" + index + "--" + (arr == self))})// 打印結(jié)果為：第一次，回調(diào)函數(shù)的第一個參數(shù)是數(shù)組的第一項。第二個參數(shù)就是數(shù)組的第二項// 10--20--1--true// undefined--30--2--true// undefined--40--3--true// undefined--50--4--true// 此時回調(diào)函數(shù)沒有return，所以從第二次開始，prev拿到的是undefined//demo3:不省略initial參數(shù)，回調(diào)函數(shù)有返回值var arr = [10,20,30,40,50];arr.reduce(function(prev,now,index,self){console.log(prev + "--" + now + "--" + index + "--" + (arr == self));return "hello";}, 2019)// 打印結(jié)果為：// 2019--10--0--true// hello--20--1--true// hello--30--2--true// hello--40--3--true// hello--50--4--true// 此時回調(diào)函數(shù)有return，所以從第二次開始，prev拿到的是回調(diào)函數(shù)return的值//demo4:省略initial參數(shù)，回調(diào)函數(shù)有返回值var arr = [10,20,30,40,50];arr.reduce(function(prev,now,index,self){console.log(prev + "--" + now + "--" + index + "--" + (arr == self));return "hello";})// 打印結(jié)果為：第一次，回調(diào)函數(shù)的第一個參數(shù)是數(shù)組的第一項。第二個參數(shù)就是數(shù)組的第二項// 10--20--1--true// hello--30--2--true// hello--40--3--true// hello--50--4--true// 此時回調(diào)函數(shù)有return，所以從第二次開始，prev拿到的是回調(diào)函數(shù)return的值//demo5：使用reduce計算數(shù)組中所有數(shù)據(jù)的和var arr = [10,20,30,40,50];var sum = arr.reduce(function(prev,now,index,self){return prev + now;})console.log(sum); //150// 回調(diào)函數(shù)的最后一次return的結(jié)果被返回到reduce方法的身上//demo6：使用reduce計算數(shù)組中所有數(shù)據(jù)的和var arr = [10,20,30,40,50];var sum = arr.reduce(function(prev,now,index,self){return prev + now;}, 8)console.log(sum); //158// 回調(diào)函數(shù)的最后一次return的結(jié)果被返回到reduce方法的身上// 因為reduce有第二個參數(shù)initial，在第一次執(zhí)行時被計算，所以最終結(jié)果被加上8

21.reduceRight()

功能：（與reduce類似）從數(shù)組的最后一項開始，向前逐個遍歷到第一位，迭代數(shù)組的所有項，然后構(gòu)建一個最終返回的值。

參數(shù)：同reduce。 demo：同reduce

三：哪些數(shù)組方法會改變原數(shù)組

unshift();

push()；

shift();

pop();

sort();

reverse();

splice();

這七個數(shù)組方法在上面都有過介紹了，可以看出，再用這些方法的時候，原數(shù)組是會被改變的。

參考文章

詳解21個JavaScript數(shù)組方法（整理）

總結(jié)

以上是生活随笔為你收集整理的concat合并的数组会有顺序么_超全的JS常用数组方法整理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python包的init文件_Pytho
下一篇： redis工具类_SpringBoot