javascript的數(shù)組方法大全

更新時間：2022年01月23日 15:29:29 作者：前端菜鳥-AllenYe

這篇文章主要為大家介紹了javascript的數(shù)組方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

在日常開發(fā)中，我們會接觸到j(luò)s中數(shù)組的一些方法，這些方法對我們來說，可以很遍歷的達(dá)到我們想要的結(jié)果，但是因為方法比較多，有些方法也不常用，可能會過一段時間就會忘記，那么在這里我整理了21個數(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"];

也可以使用es6的擴(kuò)展運算符,不會改變原數(shù)組

let str3 = [...str1,...str2]

2：join();

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

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

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()　　　　　　　　//helloconsole.log(str1);　　　　　　　　　　//[12, 2]var str1 = [12,2,"hello"];
console.log(str1.pop()　　　　　　　　//hello
console.log(str1);　　　　　　　　　　//[12, 2]

4：shift();

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

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

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);

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ù)進(jìn)行反轉(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ù)進(jìn)行排序(默認(rèn)為升序)，并且返回排過序的新數(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",5,2,5,"abc","zoom"];
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)，strat為必選，表示從第幾位開始；end為可選，表示到第幾位結(jié)束(不包含end位)，省略表示到最后一位；start和end都可以為負(fù)數(shù)，負(fù)數(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ù)全部可選。第一個參數(shù)是小標(biāo)，第二個是刪除的長度，第一個參數(shù)可以為負(fù)數(shù)

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

// 刪除 
list.splice(0,1);  // 刪除  -> 從下標(biāo)為0開始,長度為1
console.log(list); // [2,3]
list.splice(0,2);  // 刪除  -> 從下標(biāo)為0開始,長度為2
console.log(list); // []

//替換
list.splice(0,1,4); // 替換 -> 從下標(biāo)為0開始,長度為1的數(shù)組元素替換成4
console.log(list);  // [4,2,3]
list.splice(0,2,4); // 替換 -> 從下標(biāo)為0開始,長度為2的數(shù)組元素替換成4(即4,2整體替換成4)
console.log(list);  // [4,3]

//添加
list.splice(1,0,5); // 表示在下標(biāo)為1處添加一項5
console.log(list);    // [1,5,2,3]

在這里插入圖片描述

如果第一個參數(shù)為負(fù)數(shù)就從后面往前數(shù)，入上圖

splice會改變原數(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為可選，表示開始查詢的位置，當(dāng)start為負(fù)數(shù)時，從數(shù)組的尾部向前數(shù)；如果查詢不到value的存在，則方法返回-1

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

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

14:lastIndexOf();

功能：根據(jù)指定的數(shù)據(jù)，從左向右，lastIndexOf() 方法可返回一個指定的元素在數(shù)組中最后出現(xiàn)的位置，從該字符串的后面向前查找。如果不存在指定的數(shù)據(jù)，返回-1，找到了指定的數(shù)據(jù)返回該數(shù)據(jù)的索引

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

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

在這里插入圖片描述

根據(jù)我的發(fā)現(xiàn)，indexOf的第二個參數(shù)傳進(jìn)去有用，lastIndexOf第二個參數(shù)跟沒傳一樣

15:forEach();

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

參數(shù)：forEach(callback);callback默認(rèn)有三個參數(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();

功能：

1.同forEach功能；

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

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

//功能1：同forEach
 var 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ù)需要返回布爾值，當(dāng)為true時，將本次數(shù)組的數(shù)據(jù)返回給filter，最后filter將所有回調(diào)函數(shù)的返回值組成新數(shù)組返回（此功能可理解為“過濾”）。

參數(shù)：filter(callback);callback默認(rèn)有三個參數(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：當(dāng)回調(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ù)組未改變//功能1：同forEach
var 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：當(dāng)回調(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默認(rèn)有三個參數(shù)，分別為value，index，self。

功能1：當(dāng)回調(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，默認(rèn)返回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
 //因為當(dāng)遍歷到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：當(dāng)每個回調(diào)函數(shù)的返回值都為true時，every的返回值為true，只要有一個回調(diào)函數(shù)的返回值為false，every的返回值都為false

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

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

19:some();

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

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

功能1：因為要判斷數(shù)組中的每一項，只要有一個回調(diào)函數(shù)返回true，some都會返回true，所以與every正好相反，當(dāng)遇到一個回調(diào)函數(shù)的返回值為true時，可以確定結(jié)果，那么停止執(zhí)行，后面都數(shù)據(jù)不再遍歷，停在第一個返回true的位置；當(dāng)回調(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

在這里插入圖片描述

20.reduce();

迭代數(shù)組的所有項，累加器，數(shù)組中的每個值（從左到右）合并，最終計算為一個值

參數(shù)：

callback:

previousValue 必選 --上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue）

currentValue 必選 --數(shù)組中當(dāng)前被處理的數(shù)組項

index 可選 --當(dāng)前數(shù)組項在數(shù)組中的索引值

array 可選 --原數(shù)組

initialValue: 可選 --初始值

實行方法：回調(diào)函數(shù)第一次執(zhí)行時，preValue 和 curValue 可以是一個值，如果 initialValue 在調(diào)用 reduce() 時被提供，那么第一個 preValue 等于 initialValue ，并且curValue 等于數(shù)組中的第一個值；如果initialValue 未被提供，那么preValue 等于數(shù)組中的第一個值.

let arr = [0,1,2,3,4]
let arr1 = arr.reduce((preValue, curValue) => 
    preValue + curValue
)
console.log(arr1)    // 10
let arr2 = arr.reduce((preValue,curValue)=>preValue + curValue,5)
console.log(arr2)    // 15

arr.reduce()拓展(高級用法)

（1）計算數(shù)組中每個元素出現(xiàn)的次數(shù)

let arr = [0,1,2,3,4]
let arr1 = arr.reduce((preValue, curValue) => 
    preValue + curValue
)
console.log(arr1)    // 10
let arr2 = arr.reduce((preValue,curValue)=>preValue + curValue,5)
console.log(arr2)    // 15

（2）數(shù)組去重

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

（3）將多維數(shù)組轉(zhuǎn)化為一維

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

21.reduceRight()

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

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

22 Array.from()

將偽數(shù)組變成數(shù)組，就是只要有l(wèi)ength的就可以轉(zhuǎn)成數(shù)組。 —es6

let str = '12345'
console.log(Array.from(str))    // ["1", "2", "3", "4", "5"]
let obj = {0:'a',1:'b',length:2}
console.log(Array.from(obj))   // ["a", "b"]
let aa= {0:'a',1:'b'}
console.log(Array.from(aa))   // []

在這里插入圖片描述

原來的不會發(fā)生改變

23 Array.of()

將一組值轉(zhuǎn)換成數(shù)組，類似于聲明數(shù)組 —es6

let str = '11'
console.log(Array.of(str))   // ['11']
// 等價于
console.log(new Array('11'))  // ['11]

ps：但是new Array()有缺點，就是參數(shù)問題引起的重載

console.log(new Array(2))   //[empty × 2]  是個空數(shù)組
console.log(Array.of(2))    // [2]

24 arr.copyWithin()

在當(dāng)前數(shù)組內(nèi)部，將制定位置的數(shù)組復(fù)制到其他位置，會覆蓋原數(shù)組項，返回當(dāng)前數(shù)組

參數(shù):

target --必選索引從該位置開始替換數(shù)組項
start --可選索引從該位置開始讀取數(shù)組項，默認(rèn)為0.如果為負(fù)值，則從右往左讀。
end --可選索引到該位置停止讀取的數(shù)組項，默認(rèn)是Array.length,如果是負(fù)值，表示倒數(shù)

let arr = [1,2,3,4,5,6,7]let arr1 = arr.copyWithin(1)console.log(arr1)   // [1, 1, 2, 3, 4, 5, 6]let arr2 = arr.copyWithin(1,2)console.log(arr2)   // [1, 3, 4, 5, 6, 7, 7]let arr3 = arr.copyWithin(1,2,4)console.log(arr3)   // [1, 3, 4, 4, 5, 6, 7]

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