JavaScript數(shù)組是一種特殊類型的對象，用于存儲多個值。數(shù)組中的每個值都有一個索引，索引從0開始。數(shù)組中的值可以是任何數(shù)據(jù)類型，包括數(shù)字、字符串、布爾值、對象和函數(shù)。

在JS中,數(shù)組方法是非常重要且常用的方法.在此整理總結(jié)一番.

JavaScript 數(shù)組的力量隱藏在數(shù)組方法中。

一. javaScript常用數(shù)組方法

二.方法詳解

1.push();

功能: 在數(shù)組最后一位添加一個或多個元素,并返回新數(shù)組的長度,改變原數(shù)組.(添加多個元素用逗號隔開)

 var arr = [1, 2, "c"];
    var rel = arr.push("A", "B");
    console.log(arr); // [1, 2, "c", "A", "B"]
    console.log(rel); //  5  (數(shù)組長度)

2.unshift();

功能: 在數(shù)組第一位添加一個或多個元素，并返回新數(shù)組的長度，改變原數(shù)組。(添加多個元素用逗號隔開)

 var arr = [1, 2, "c"];
    var rel = arr.unshift("A", "B");
    console.log(arr); // [ "A", "B",1, 2, "c"]
    console.log(rel); //  5  (數(shù)組長度)

3.pop();

功能：刪除數(shù)組的最后一位，并且返回刪除的數(shù)據(jù)，會改變原來的數(shù)組。(該方法不接受參數(shù),且每次只能刪除最后一個)

   var arr = [1, 2, "c"];
    var rel = arr.pop();
    console.log(arr); // [1, 2]
    console.log(rel); // c

4.shift();

功能：刪除數(shù)組的第一位數(shù)據(jù)，并且返回被刪除的數(shù)據(jù)，會改變原來的數(shù)組。(該方法同pop()；一樣不接受參數(shù),且每次只能刪除數(shù)組第一個)

    var arr = ["a","b", "c"];
    var rel = arr.shift();
    console.log(arr); // ['b', "c"]
    console.log(rel); // a

5.reverse();

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

  var arr = [1, 2, 3, "a", "b", "c"];
    var rel = arr.reverse();
    console.log(arr); //    ["c", "b", "a", 3, 2, 1]
    console.log(rel); //    ["c", "b", "a", 3, 2, 1]

6.sort();

sort() 方法是最強大的數(shù)組方法之一。

sort(); 方法用于對數(shù)組的元素進行排序,并返回數(shù)組。默認排序順序是根據(jù)字符串Unicode碼點。

例1：

  var arr1 = [10, 1, 5, 2, 3];
    arr1.sort();
    console.log(arr1);

打印結(jié)果：

結(jié)果并不是我們想要的排序結(jié)果，因為它是根據(jù)unicode編碼來排序的,這也顯示了其不穩(wěn)定性。

語法： arr.sort(function(a,b))
參數(shù)： function可選。用來指定按某種順序進行排列的函數(shù)。如果省略，元素按照轉(zhuǎn)換為的字符串的諸個字符的Unicode位點進行排序。

具體用法：

• 如果 function(a, b) {return: a - b;} ，=> a - b > 0 那么 a 會被排列到 b 之前; (從小到大排序)
• 如果 function(a, b) {return: b - a;} ，=> b - a > 0 那么b會被排列到 a 之前； (從大到小排序)

那么我們就可以運用以上所說的function(a,b)去完成對數(shù)字的排序:

    var arr = [10, 1, 5, 2, 3];
    arr.sort(function (a, b) {
      return a - b;
    });
    console.log(arr);

打印結(jié)果：

元素為對象時（可按其中某個屬性來排序）：

  var arr1 = [
      { name: "老八", age: "38" },
      { name: "趙日天", age: "28" },
      { name: "龍傲天", age: "48" },
    ];
    arr1.sort(function (a, b) {
      console.log(a, b);
      return b.age - a.age;
    });
    console.log(arr1);

打印結(jié)果：（按 age 排序（大到小））

7.splice();

功能：向數(shù)組中添加，或從數(shù)組刪除，或替換數(shù)組中的元素，然后返回被刪除/替換的元素所組成的數(shù)組?？梢詫崿F(xiàn)數(shù)組的增刪改；

 語法： arrayObject.splice(index,howmany,item1,…,itemX)

參數(shù)：

例，刪除arr()中第三個元素并添加 ”add1“ "add2"元素

 var arr = ["a", "b", "c", 2, 3, 6];
    var rel = arr.splice(2, 1, "add1", "add2");
    console.log(arr);   //原數(shù)組
    console.log(rel);	//新數(shù)組 

打印結(jié)果：

8.concat();

功能： 數(shù)組的拼接(將多個數(shù)組或元素拼接形成一個新的數(shù)組),不改變原數(shù)組
如果拼接的是數(shù)組 則將數(shù)組展開,之后將數(shù)組中的每一個元素放到新數(shù)組中.
如果是其他類型, 直接放到新數(shù)組中
另外，如果不給該方法任何參數(shù)，將返回一個和原數(shù)組一樣的數(shù)組（復(fù)制數(shù)組）

    var arr1 = [1, 2, 3];
    var arr2 = ["a", "b", "c"];
    var arr3 = ["A", "B", "C"];
    var rel = arr1.concat(arr2, arr3);
    console.log(arr1); //原數(shù)組
    console.log(rel); //新數(shù)組

打印結(jié)果：

可以看到原數(shù)組 arr1() 并沒有被改變，該方法不改變原數(shù)組，后續(xù)不改變原數(shù)組方法將不再打印原數(shù)組

9.join();

功能：用特定的字符,將數(shù)組拼接形成字符串 (默認",")

   var list = ["a", "b", "c", "d"]; // "a-b-c-d"
    var result = list.join("-");     //"a-b-c-d"
    var result = list.join("/");     //"a/b/c/d"
    var result = list.join("");      //"abcd"
    var result = list.join();        //  a,b,c,d
    console.log(result);

10.slice();

功能： 裁切指定位置的數(shù)組，返回值為被裁切的元素形成的新數(shù)組 ，不改變原數(shù)組
同concat() 方法 slice() 如果不傳參數(shù),會使用默認值,得到一個與原數(shù)組元素相同的新數(shù)組 (復(fù)制數(shù)組)

語法： arr[].slice(startIndex,endIndex)
參數(shù)

  var list = ["a", "b", "c", "d"];
    var result = list.slice(1, 3);
    console.log(result);  // ["b", "c"]

11.toString();

功能: 直接將數(shù)組轉(zhuǎn)換為字符串,并且返回轉(zhuǎn)換后的新數(shù)組,不改變原數(shù)組,與join();方法不添加任何參數(shù) 相同.

 var list = ["a", "b", "c", "d"];
    var rel = list.toString();
    console.log(rel);   // a,b,c,d   (字符串類型)

12.valueOf();

功能: 返回數(shù)組的原始值（一般情況下其實就是數(shù)組自身）

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

13.indexOf();

功能: 查詢某個元素在數(shù)組中第一次出現(xiàn)的位置 存在該元素,返回下標,不存在 返回 -1 (可以通過返回值 變相的判斷是否存在該元素)

 var list = [1, 2, 3, 4];
    var index = list.indexOf(4); //3
    var index = list.indexOf("4"); //-1
    console.log(index);

14.lastIndexOf();

功能: 查詢某個元素在數(shù)組中最后一次出現(xiàn)的位置 (或者理解為反向查詢第一次出現(xiàn)的位置) 存在該元素,返回下標,不存在 返回 -1 (可以通過返回值 變相的判斷是否存在該元素)

    var list = [1, 2, 3, 4];
    var index = list.lastIndexOf(4); //3
    var index = list.lastIndexOf("4"); //-1
    console.log(index);

15.forEach();

功能: 遍歷數(shù)組,每次循環(huán)中執(zhí)行傳入的回調(diào)函數(shù) 。(注意: forEach() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。) 沒有返回值,或理解為返回值為undefined,不改變原數(shù)組.
語法:

arr[].forEach(function(value,index,array){
　 　//do something
})

參數(shù): item:每次循環(huán)的當前元素, index:當前項的索引, array:原始數(shù)組；

數(shù)組中有幾項，那么傳遞進去的匿名回調(diào)函數(shù)就需要執(zhí)行幾次；

實例1.:

 var list = [32, 93, 77, 53, 38, 87];
    var res = list.forEach(function (item, index, array) {
      console.log(item, index, array);
    });
    console.log(res);

打印結(jié)果

實例2: 數(shù)組中元素的和

    var list = [32, 93, 77, 53, 38, 87];
    var sum = 0;
    list.forEach(function (item) {
      console.log(item);
      sum += item;
    });
    console.log(sum);

打印結(jié)果

16.map();

功能: 遍歷數(shù)組, 每次循環(huán)時執(zhí)行傳入的回調(diào)函數(shù),根據(jù)回調(diào)函數(shù)的返回值,生成一個新的數(shù)組 ,
同forEach() 方法,但是map()方法有返回值,可以return出來;
語法:

arr[].map(function(item,index,array){
　　//do something
　　return XXX
})

參數(shù)： item:每次循環(huán)的當前元素, index:當前項的索引, array:原始數(shù)組；

示例:

    var list = [32, 93, 77, 53, 38, 87];
    var res = list.map(function (item, index, array) {
      return item + 5 * 2;
    });
    console.log("原數(shù)組", list);
    console.log("新數(shù)組", res);

打印結(jié)果:

17.filter();

功能: 遍歷數(shù)組, 每次循環(huán)時執(zhí)行傳入的回調(diào)函數(shù),回調(diào)函數(shù)返回一個條件,把滿足條件的元素篩選出來放到新數(shù)組中.
語法:

arr[].filter(function(item,index,array){
　　//do something
　　return XXX //條件
})

參數(shù)： item:每次循環(huán)的當前元素, index:當前項的索引, array:原始數(shù)組；
示例:

   var list = [32, 93, 77, 53, 38, 87];
    var resList = list.filter(function (item, index, array) {
      return item >= 60; // true || false
    });
    console.log(resList);

打印結(jié)果:

18.every();

功能: 遍歷數(shù)組, 每次循環(huán)時執(zhí)行傳入的回調(diào)函數(shù),回調(diào)函數(shù)返回一個條件,全都滿足返回true 只要有一個不滿足 返回false => 判斷數(shù)組中所有的元素是否滿足某個條件

 var list = [32, 93, 77, 53, 38, 87];
    var result = list.every(function (item, index, array) {
      console.log(item, index, array);
      return item >= 50;
    });
    console.log(result);

打印結(jié)果:false

19.some();

功能: 遍歷數(shù)組, 每次循環(huán)時執(zhí)行傳入的回調(diào)函數(shù),回調(diào)函數(shù)返回一個條件,只要有一個元素滿足條件就返回true,都不滿足返回false => 判斷數(shù)組中是否存在,滿足某個條件的元素示例:

    var list = [32, 93, 77, 53, 38, 87];
    var result = list.some(function (item, index, array) {
      return item >= 50;
    });
    console.log(result);

打印結(jié)果 : true

20.reduce();

功能: 遍歷數(shù)組, 每次循環(huán)時執(zhí)行傳入的回調(diào)函數(shù),回調(diào)函數(shù)會返回一個值,將該值作為初始值prev,傳入到下一次函數(shù)中, 返回最終操作的結(jié)果;
語法: arr.reduce( function(prev,item,index,array){} , initVal)
參數(shù):
reduce()方法里邊，有兩部分，第一是個回調(diào)函數(shù)，第二個參數(shù)是設(shè)置的初始值。
回調(diào)函數(shù)中可以有四個參數(shù)，
prev 回調(diào)初始值 (類似求和是 sum=0) 可以設(shè)置初始值( 參數(shù)),如果不設(shè)置初始值默認是數(shù)組中的第一個元素,遍歷時從第二個元素開始遍歷
item 每次循環(huán)的當前元素
index 每次循環(huán)的當前下標
array 原數(shù)組,

initVal初始值

實例1: 更多實例跳轉(zhuǎn)不設(shè)置初始值的累加

    var arr = [2, 3, 4, 5];
    var sum = arr.reduce(function (prev, item, index, array) {
      console.log(prev, item, index, array);
      return prev + item;
    });
    console.log(arr, sum);

打印結(jié)果

解析:

第一次循環(huán): prev = 2 ; item(當前循環(huán)元素) = 3 ; index(當前循環(huán)元素下標) = 1;原數(shù)組 =array;
因為沒有給prev設(shè)置初始值,所以prev 的值為數(shù)組中第一個元素,遍歷從第二個元素開始
第二次循環(huán):prev = 5; item(當前循環(huán)元素) = 4 ; index(當前循環(huán)元素下標) = 2;原數(shù)組 =array;
prev = 2+3(上次循環(huán)的元素) = 5 ;
…
最終prev = 14 ; arr中有四個元素 共循環(huán)三次;(因為沒設(shè)置初始值跳過第一次循環(huán)prev默認等于第一個值)

實例2 設(shè)置初始值的累加

   	var arr = [2, 3, 4, 5];
    var sum = arr.reduce(function (prev, item, index, array) {
      console.log(prev, item, index, array);
      return prev + item;
    }, 0);
    console.log(arr, sum);

打印結(jié)果

解析: 可以看到與上一次設(shè)置初始值相比,最終的結(jié)果相同,但是多循環(huán)的一次,因為設(shè)置了prev的初始值為0,所以循環(huán)遍歷從第一個元素開始,而不設(shè)置初始值,循環(huán)從第一個元素開始.

21.reduceRight();

功能: 用法同reduce,只不過是從右向左

22.includes();

功能: 用來判斷一個數(shù)組是否包含一個指定的值，如果是返回 true，否則false。
實例

let site = ['runoob', 'google', 'taobao'];
 
site.includes('runoob'); 
// true 
 
site.includes('baidu'); 
// false

23.Array.from();

功能: 將一個類數(shù)組對象或者可遍歷對象轉(zhuǎn)換成一個真正的數(shù)組

注意 將一個類數(shù)組對象轉(zhuǎn)換為一個真正的數(shù)組，必須具備以下條件：

1、該 偽數(shù)組 / 類數(shù)組 對象必須具有l(wèi)ength屬性，用于指定數(shù)組的長度。如果沒有l(wèi)ength屬性，那么轉(zhuǎn)換后的數(shù)組是一個空數(shù)組。
2、該 偽數(shù)組 / 類數(shù)組 對象的屬性名必須為數(shù)值型或字符串型的數(shù)字

    var all = {
      0: "張飛",
      1: "28",
      2: "男",
      3: ["率土", "鴻圖", "三戰(zhàn)"],
      length: 4,
    };
    var list = Array.from(all);
    console.log(all);
    console.log(list, Array.isArray(list));

打印結(jié)果

24.find();

功能: 遍歷數(shù)組 每次循環(huán) 執(zhí)行回調(diào)函數(shù),回調(diào)函數(shù)接受一個條件 返回滿足條件的第一個元素,不存在則返回undefined
參數(shù)
item:必須 , 循環(huán)當前元素
index:可選 , 循環(huán)當前下標
array:可選 , 當前元素所屬的數(shù)組對象
實例:

    var list = [55, 66, 77, 88, 99, 100];
    var res= list.find(function (item, index, array) {
      return item > 60;
    });
    console.log(res); //66

打印結(jié)果為66,每次循環(huán)判斷當前元素是否滿足條件,如果滿足直接跳出循環(huán),返回第一個滿足條件的元素

----- 更新 2022年7月20日 15:17:34 ------
該方法可快速查找對象數(shù)組滿足條件的項

      let arr = [{ id: 1, name: 'coco' }, { id: 2, name: 'dudu' }]
      let res = arr.find(item => item.id == 1)
      console.log('res', res)  //res {id: 1, name: "coco"}

25.findIndex();

功能 遍歷數(shù)組,執(zhí)行回調(diào)函數(shù),回調(diào)函數(shù)接受一個條件,返回滿足條件的第一個元素下標,不存在則返回-1
參數(shù)
item:必須 , 循環(huán)當前元素
index:可選 , 循環(huán)當前下標
array:可選 , 當前元素所屬的數(shù)組對象

注意

findIndex();和indexOf();不同 (剛接觸時乍一看和indexOf()怎么一模一樣,仔細看了下才發(fā)現(xiàn)大有不同)
indexOf是傳入一個值.找到了也是返回索引,沒有找到也是返回-1 ,屬于ES5
findIndex是傳入一個測試條件,也就是函數(shù),找到了返回當前項索引,沒有找到返回-1. 屬于ES6
實例

   var list = [55, 66, 77, 88, 99, 100];
    var index = list.findIndex(function (item, index, array) {
      console.log(item, index, array);
      return item > 60;
    });
    console.log(index); // 1

打印結(jié)果為1, 循環(huán)步驟和find()方法一樣,但是它返回的是下標,find()返回的是滿足條件的元素

----- 更新 2022年7月20日 15:17:34 ------
該方法可快速查找對象數(shù)組滿足條件的索引，indexOf不支持

      let arr = [{ id: 1, name: 'coco' }, { id: 2, name: 'dudu' }]
      let res = arr.findIndex(item => item.id == 1)
      console.log('res', res)  //res 0

26.fill();

功能 用給定值填充一個數(shù)組
參數(shù)
value 必需。填充的值。
start 可選。開始填充位置。
end 可選。停止填充位置 (默認為 array.length)

實例

 var result = ["a", "b", "c"].fill("填充", 1, 2);

打印結(jié)果

27.flat();

功能 用于將嵌套的數(shù)組"拉平",變成一維的數(shù)組。該方法返回一個新數(shù)組，對原數(shù)據(jù)沒有影響。

注意 默認拉平一次 如果想自定義拉平此處 需要手動傳參 ,如果想全都拉平 傳 Infinity

    var list = [1, 2, [3, 4, [5]]];
    var arr = list.flat(); // 默認拉平一次
    console.log("拉平一次", arr);

    var arr = list.flat(2); // 拉平2次
    console.log("拉平兩次", arr);

打印結(jié)果:

28.flatMap();

功能 flat()和map()的組合版 , 先通過map()返回一個新數(shù)組,再將數(shù)組拉平( 只能拉平一次 )

    var list = [55, 66, 77, 88, 99, 100];
    var newArr = list.map(function (item, index) {
      return [item, index];
    });
    console.log("Map方法:", newArr);

    var newArr = list.flatMap(function (item, index) {
      return [item, index];
    });
    console.log("flatMap方法:", newArr);

打印結(jié)果

29.split()

定義和用法

split() 方法用于把一個字符串分割成字符串數(shù)組。

語法

stringObject.split(separator, howmany)

參數(shù)

separator ：必需。字符串或正則表達式，從該參數(shù)指定的地方分割 stringObject。

howmany ： 可選。該參數(shù)可指定返回的數(shù)組的最大長度。如果設(shè)置了該參數(shù)，返回的子串不會多于這個參數(shù)指定的數(shù)組。

如果沒有設(shè)置該參數(shù)，整個字符串都會被分割，不考慮它的長度。

返回值

一個字符串數(shù)組。該數(shù)組是通過在 separator 指定的邊界處將字符串 stringObject 分割成子串創(chuàng)建的。返回的數(shù)組中的字串不包括 separator 自身。

但是，如果 separator 是包含子表達式的正則表達式，那么返回的數(shù)組中包括與這些子表達式匹配的字串（但不包括與整個正則表達式匹配的文本）。

提示和注釋

注釋：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每個字符之間都會被分割。

注釋：String.split() 執(zhí)行的操作與 Array.join 執(zhí)行的操作是相反的。

實例

例子 1

在本例中，我們將按照不同的方式來分割字符串：

<script type="text/javascript">
var str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
</script>

輸出：

How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

例子 2

在本例中，我們將分割結(jié)構(gòu)更為復(fù)雜的字符串：

"2:3:4:5".split(":")	//將返回["2", "3", "4", "5"]
"|a|b|c".split("|")	//將返回["", "a", "b", "c", ""]

例子 3

使用下面的代碼，可以把句子分割成單詞：

var words = sentence.split(' ')

或者使用正則表達式作為 separator：

var words = sentence.split(/\s+/)

例子 4

如果您希望把單詞分割為字母，或者把字符串分割為字符，可使用下面的代碼：

"hello".split("")	//可返回 ["h", "e", "l", "l", "o"]

若只需要返回一部分字符，請使用 howmany 參數(shù)：

"hello".split("", 3)	//可返回 ["h", "e", "l"]

三.數(shù)組定義與使用

創(chuàng)建數(shù)組的方法

有以下幾種

使用數(shù)組字面量表示法：

let array = [1, 2, 3];

使用Array構(gòu)造函數(shù)：

let array = new Array(1, 2, 3);

使用Array.of()方法：

let array = Array.of(1, 2, 3);

數(shù)組的主要方法

包括

push()：向數(shù)組末尾添加一個或多個元素，并返回新的數(shù)組長度。

array.push(4);

pop()：移除數(shù)組的最后一個元素，并返回該元素的值。

array.pop();

shift()：移除數(shù)組的第一個元素，并返回該元素的值。

array.shift(); 

unshift()：向數(shù)組的開頭添加一個或多個元素，并返回新的數(shù)組長度。

array.unshift(0);

splice()：從數(shù)組中添加/刪除項目，然后返回被刪除的項。

array.splice(1, 2);

slice()：返回數(shù)組的淺拷貝，從start到end（不包括end）。

let newArray = array.slice(1, 3);

concat()：連接兩個或多個數(shù)組，返回一個新的數(shù)組。

let newArray = array.concat([4, 5]);

forEach()：對數(shù)組的每個元素執(zhí)行給定的函數(shù)。

array.forEach(
    function(element) {
        console.log(element); 
        
    });

map()：對數(shù)組的每個元素執(zhí)行給定的函數(shù)，返回一個新的數(shù)組。

let newArray = array.map(function(element) {
  return element * 2;
});

filter()：創(chuàng)建一個新數(shù)組，其包含通過所提供函數(shù)實現(xiàn)的測試的所有元素。

let newArray = array.filter(function(element) {
  return element > 2;
});

reduce()：對數(shù)組的每個元素執(zhí)行給定的函數(shù)，返回一個值。

let sum = array.reduce(function(total, element) {
  return total + element;
}, 0);

以上就是JavaScript數(shù)組的一些基本介紹和方法，更多方法和屬性可以參考MDN文檔。

最新評論