JavaScript數組Array常用方法彙總

一.javascript中建立數組的方式

（1）使用 array 構造函數：

var arr1 = new array(); //建立一個空數組

var arr2 = new array(10); // 建立一個包含20項的數組

var arr3 = new array("zs","ls","ww"); // 建立一個包含3個字元串的數組

（2）使用數組字面量表示法：

var arr4 = []; //建立一個空數組

var arr5 = [10]; // 建立一個包含1項的數組

var arr6 = ["zs","ls","ww"]; // 建立一個包含3個字元串的數組

二、數組方法概括

方法名                功能                        原數組是否改變

join() 使用分隔符，将數組轉為字元串并傳回 n

pop() 删除最後一位，并傳回删除的資料 y

shift() 删除第一位，并傳回删除的資料 y

push 在最後新增一個或多個資料，傳回長度 y

unshift() 在第一位新增一或多個資料，傳回長度 y

concat() 合并數組，并傳回合并之後的資料 n

slice() 截取指定位置的數組，并傳回 n

sort() 排序（字元規則），傳回結果 y

reverse() 反轉數組，傳回結果 y

tostring() 直接轉為字元串，并傳回 n

splice() 删除指定位置，并替換，傳回删除的資料 y

valueof() 傳回數組對象的原始值 n

indexof() 查詢并傳回資料的索引 n

lastindexof() 反向查詢并傳回資料的索引 n

foreach() 參數為回調函數，會周遊數組所有的項，回調函數接受三個參數，分别為value，index，self；foreach沒有傳回值 n

map() 同foreach，同時回調函數傳回資料，組成新數組由map傳回 n

filter() 同foreach，同時回調函數傳回布爾值，為true的資料組成新數組由filter傳回 n

every() 同foreach，同時回調函數傳回布爾值，全部為true，由every傳回true n

some() 同foreach，同時回調函數傳回布爾值，隻要由一個為true，由some傳回true n

reduce() 歸并，同foreach，疊代數組的所有項，并建構一個最終值，由reduce傳回 n

reduceright() 反向歸并，同foreach，疊代數組的所有項，并建構一個最終值，由reduceright傳回 n

findindex()

找到數組中第一個符合條件的元素的下标并不再周遊

n

三、方法詳解

1.join()

功能：根據指定分隔符将數組中的所有元素放入一個字元串，并傳回這個字元串。

參數：join(str);參數可選，預設為","号，以傳入的字元作為分隔符。​​前端教育訓練​​

   var arr = [1,2,3];

   console.log(arr.join());         //1,2,3

   console.log(arr.join("-"));      //1-2-3

通過join()方法可以實作重複字元串，隻需傳入字元串以及重複的次數，就能傳回重複後的字元串，函數如下：

function repeatstring(str, n) {

return new array(n + 1).join(str);

}

console.log(repeatstring("abc", 3)); // abcabcabc

console.log(repeatstring("hi", 5)); // hihihihihi

2.pop()

pop()：數組末尾移除最後一項，減少數組的 length 值，然後傳回移除的項

ar arr = [1,2,3];

console.log(arr.pop());     //3

console.log(arr);           //[1,2]---原數組改變

3.shift()

功能：方法用于删除并傳回數組的第一個元素。

var arr = [1,2,3]

console.log(arr.shift());       //1

console.log(arr);               //[2,3]---原數組改變

4.push()

功能：向數組的末尾添加一個或更多元素，并傳回新的長度。

var arr = [1,2,3];

console.log(arr.push("hello"));  //4

console.log(arr);                //[1,2,3,"hello"]---原數組改變

console.log(arr.push("a","b"));  //6

console.log(arr);                //[1,2,3,"hello","a","b"]---原數組改變

5.unshift()

功能：向數組的開頭添加一個或更多元素，并傳回新的長度。

console.log(arr.unshift("hello"));  //4

console.log(arr);                   //["hello",1,2,3]---原數組改變

console.log(arr.unshift("a","b"));  //6

console.log(arr);                   //["a","b","hello",1,2,3]---原數組改變

6.concat()

功能: 将參數添加到原數組中。這個方法會先建立目前數組一個副本，然後将接收到的參數添加到這個副本的末尾，最後傳回新建構的數組。在沒有給 concat()方法傳遞參數的情況下，它隻是複制目前數組并傳回副本。

var arr1 = [1,3,5,7];

var arr2 = arr.concat(9,[11,13]);

console.log(arr2); //[1, 3, 5, 7, 9, 11, 13]

console.log(arr1); // [1, 3, 5, 7](原數組未被修改)

7.slice()

功能: 傳回從原數組中指定開始下标到結束下标之間的項組成的新數組。

slice()方法可以接受一或兩個參數，即要傳回項的起始和結束位置。在隻有一個參數的情況下， slice()方法傳回從該參數指定位置開始到目前數組末尾的所有項。如果有兩個參數，該方法傳回起始和結束位置之間的項——但不包括結束位置的項。

var arr = [1,3,5,7,9,11];

var arrcopy1 = arr.slice(1);

var arrcopy2 = arr.slice(1,4);

var arrcopy3 = arr.slice(1,-2);

var arrcopy4 = arr.slice(-4,-1);

console.log(arr); //[1, 3, 5, 7, 9, 11](原數組沒變)

console.log(arrcopy1); //[3, 5, 7, 9, 11]

console.log(arrcopy2); //[3, 5, 7]

console.log(arrcopy3); //[3, 5, 7]

console.log(arrcopy4); //[5, 7, 9]

8.sort()

功能：對數組中的元素進行排序，預設是升序。

var arr = [6,1,5,2,3];

console.log(arr.sort());    //[1, 2, 3, 5, 6]

console.log(arr);           //[1, 2, 3, 5, 6]---原數組改變

9.reverse()

功能: 反轉數組項的順序。

var arr = [13, 24, 51, 3];

console.log(arr.reverse()); //[3, 51, 24, 13]

console.log(arr); //[3, 51, 24, 13](原數組改變)

10.tostring()

功能：轉換成字元串，類似于沒有參數的join()。該方法會在資料發生隐式類型轉換時被自動調用，如果手動調用，就是直接轉為字元串。

console.log(arr.tostring());     //1,2,3

console.log(arr);                //[1,2,3]---原數組未改變

11.splice()

功能：很強大的數組方法，它有很多種用法，可以實作删除、插入和替換。

删除：可以删除任意數量的項，隻需指定 2 個參數：要删除的第一項的位置和要删除的項數。例如， splice(0,2)會删除數組中的前兩項。

插入：可以向指定位置插入任意數量的項，隻需提供 3 個參數：起始位置、 0（要删除的項數）和要插入的項。例如，splice(2,0,4,6)會從目前數組的位置 2 開始插入4和6。

替換：可以向指定位置插入任意數量的項，且同時删除任意數量的項，隻需指定 3 個參數：起始位置、要删除的項數和要插入的任意數量的項。插入的項數不必與删除的項數相等。例如，splice (2,1,4,6)會删除目前數組位置 2 的項，然後再從位置 2 開始插入4和6。

splice()方法始終都會傳回一個數組，該數組中包含從原始數組中删除的項，如果沒有删除任何項，則傳回一個空數組。

var arrremoved = arr.splice(0,2);

console.log(arr); //[5, 7, 9, 11]

console.log(arrremoved); //[1, 3]

var arrremoved2 = arr.splice(2,0,4,6);

console.log(arr); // [5, 7, 4, 6, 9, 11]

console.log(arrremoved2); // []

var arrremoved3 = arr.splice(1,1,2,4);

console.log(arr); // [5, 2, 4, 4, 6, 9, 11]

console.log(arrremoved3); //[7]

12.valueof()

功能：傳回數組的原始值（一般情況下其實就是數組自身），一般由js在背景調用，并不顯式的出現在代碼中

console.log(arr.valueof());         //[1,2,3]

console.log(arr);                   //[1,2,3]

//為了證明傳回的是數組自身

console.log(arr.valueof() == arr);  //true

13.indexof()

功能：根據指定的資料，從左向右，查詢在數組中出現的位置，如果不存在指定的資料，傳回-1。該方法是查詢方法，不會對數組産生改變。

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

var arr = ["h","e","l","l","o"];

console.log(arr.indexof("l"));        //2

console.log(arr.indexof("l",3));      //3

console.log(arr.indexof("l",4));      //-1

console.log(arr.indexof("l",-1));     //-1

console.log(arr.indexof("l",-3));     //2

14.lastindexof()

功能：根據指定的資料，從右向左，查詢在數組中出現的位置，如果不存在指定的資料，傳回-1。該方法是查詢方法，不會對數組産生改變。

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

console.log(arr.lastindexof("l"));        //3

console.log(arr.lastindexof("l",3));      //3

console.log(arr.lastindexof("l",1));      //-1

console.log(arr.lastindexof("l",-3));     //2

console.log(arr.lastindexof("l",-4));     //-1

15.foreach()

功能：對數組進行周遊循環，對數組中的每一項運作給定函數。這個方法沒有傳回值。

參數:  都是function類型，預設有傳參，參數分别為：周遊的數組内容；第對應的數組索引，數組本身。

var arr = [1, 2, 3, 4, 5];

arr.foreach(function(x, index, a){

console.log(x + '|' + index + '|' + (a === arr));

});

// 輸出為：

// 1|0|true

// 2|1|true

// 3|2|true

// 4|3|true

// 5|4|true

16.map()

功能：對數組中的每一項運作給定函數，傳回每次函數調用的結果組成的數組。

如果你想要數組裡的每一個值都發生變化就使用map

let arr = [10, 30, 50, 60, 120, 230, 340, 450]

       let newarr = arr.map(n => {

           return n * 2

       })

       console.log(newarr);

17.filter()

功能: 過濾，數組中的每一項運作給定函數，傳回滿足過濾條件組成的數組。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var arr2 = arr.filter(function(x, index) {

return index % 3 === 0 || x >= 8;

console.log(arr2); //[1, 4, 7, 8, 9, 10]

18.every()

功能：判斷數組中每一項都是否滿足條件，隻有所有項都滿足條件，才會傳回true。

var arr2 = arr.every(function(x) {

return x < 10;

console.log(arr2); //true

var arr3 = arr.every(function(x) {

return x < 3;

console.log(arr3); // false

19.some()

功能: 判斷數組中是否存在滿足條件的項，隻要有一項滿足條件，就會傳回true。

var arr2 = arr.some(function(x) {

var arr3 = arr.some(function(x) {

return x < 1;

20.reduce()

功能：從數組的第一項開始，逐個周遊到最後，疊代數組的所有項，然後建構一個最終傳回的值。

參數：

第一個參數是：accumulator是目前聚合值，

第二個參數是: current是數組循環時的目前元素

第三個參數是: index 是數組元素的索引值

第四個參數是: array 是數組本身

int : 是accumulator的初始值 可以自行進行設定

一般常用的是前面的兩個參數,後面兩個參數不常用,常用的使用場景便是數組的求和

// 作用:對數組中所有的内容進行彙總   要傳至少兩個值

       let arr = [10, 30, 50, 60, 120, 230, 340, 450]

       let newarr = arr.reduce((pre, n) => {

           return pre + n

       }, 0)

21.reduceright()

功能：（與reduce類似）從數組的最後一項開始，向前逐個周遊到第一位，疊代數組的所有項，然後建構一個最終傳回的值。

參數：同reduce。

var arr = [1,2,3,4,5];

var sum = arr.reduceright(function(pre, cur, index, array){

return pre + cur;

},10);

console.log(sum); //25

22.findindex()

功能: 傳回數組中滿足提供的測試函數的第一個元素的索引。若沒有則傳回-1。

let arr = [10, 2, 9, 17, 22];

let index = arr.findindex((item) => item > 13)

console.log(index);  // 3