2. 程式人生 > >js中陣列的方法總結

js中陣列的方法總結

阿新 • • 發佈：2018-11-25

js中陣列的方法很多，經常都翻書看，無奈老是記不住，一到用的時候就忘了，大概還是因為用的少，也可能是因為方法確實太多，據不完全統計有23種。。。所以在這裡總結一下，當是記個筆記。

1、join()

join(separator): 將陣列的元素組起一個字串，以separator為分隔符，省略的話則用預設用逗號為分隔符，該方法只接收一個引數：即分隔符。

1

2

3

4

var arr = [1,2,3];

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

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

console.log(arr); // [1, 2, 3]（原陣列不變）

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

1

2

3

4

5

function repeatString(str, n) {

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

}

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

console.log(repeatString("Hi", 5)); // HiHiHiHiHi

2、push()和pop()

push(): 可以接收任意數量的引數，把它們逐個新增到陣列末尾，並返回修改後陣列的長度。 
pop()：陣列末尾移除最後一項，減少陣列的 length 值，然後返回移除的項。

1

2

3

4

5

6

7

var arr = ["Lily","lucy","Tom"];

var count = arr.push("Jack","Sean");

console.log(count); // 5

console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]

var item = arr.pop();

console.log(item); // Sean

console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

3、shift() 和 unshift()

shift()：刪除原陣列第一項，並返回刪除元素的值；如果陣列為空則返回undefined 。 
unshift:將引數新增到原陣列開頭，並返回陣列的長度 。

這組方法和上面的push()和pop()方法正好對應，一個是運算元組的開頭，一個是運算元組的結尾。

1

2

3

4

5

6

7

var arr = ["Lily","lucy","Tom"];

var count = arr.unshift("Jack","Sean");

console.log(count); // 5

console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]

var item = arr.shift();

console.log(item); // Jack

console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

4、sort()

sort()：按升序排列陣列項——即最小的值位於最前面，最大的值排在最後面。

在排序時，sort()方法會呼叫每個陣列項的 toString()轉型方法，然後比較得到的字串，以確定如何排序。即使陣列中的每一項都是數值， sort()方法比較的也是字串，因此會出現以下的這種情況：

1

2

3

4

5

var arr1 = ["a", "d", "c", "b"];

console.log(arr1.sort()); // ["a", "b", "c", "d"]

arr2 = [13, 24, 51, 3];

console.log(arr2.sort()); // [13, 24, 3, 51]

console.log(arr2); // [13, 24, 3, 51](元陣列被改變)

為了解決上述問題，sort()方法可以接收一個比較函式作為引數，以便我們指定哪個值位於哪個值的前面。比較函式接收兩個引數，如果第一個引數應該位於第二個之前則返回一個負數，如果兩個引數相等則返回 0，如果第一個引數應該位於第二個之後則返回一個正數。以下就是一個簡單的比較函式：

1

2

3

4

5

6

7

8

9

10

11

function compare(value1, value2) {

if (value1 < value2) {

return -1;

} else if (value1 > value2) {

return 1;

} else {

return 0;

}

}

arr2 = [13, 24, 51, 3];

console.log(arr2.sort(compare)); // [3, 13, 24, 51]

如果需要通過比較函式產生降序排序的結果，只要交換比較函式返回的值即可：

1

2

3

4

5

6

7

8

9

10

11

function compare(value1, value2) {

if (value1 < value2) {

return 1;

} else if (value1 > value2) {

return -1;

} else {

return 0;

}

}

arr2 = [13, 24, 51, 3];

console.log(arr2.sort(compare)); // [51, 24, 13, 3]

5、reverse()

reverse()：反轉陣列項的順序。

1

2

3

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

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

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

6、concat()

concat() ：將引數新增到原陣列中。這個方法會先建立當前陣列一個副本，然後將接收到的引數新增到這個副本的末尾，最後返回新構建的陣列。在沒有給 concat()方法傳遞引數的情況下，它只是複製當前陣列並返回副本。

1

2

3

4

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

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

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

console.log(arr); // [1, 3, 5, 7](原陣列未被修改)

從上面測試結果可以發現：傳入的不是陣列，則直接把引數新增到陣列後面，如果傳入的是陣列，則將陣列中的各個項新增到陣列中。但是如果傳入的是一個二維陣列呢？

1

2

3

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

console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]

console.log(arrCopy2[5]); //[11, 13]

上述程式碼中，arrCopy2陣列的第五項是一個包含兩項的陣列，也就是說concat方法只能將傳入陣列中的每一項新增到陣列中，如果傳入陣列中有些項是陣列，那麼也會把這一陣列項當作一項新增到arrCopy2中。

7、slice()

slice()：返回從原陣列中指定開始下標到結束下標之間的項組成的新陣列。slice()方法可以接受一或兩個引數，即要返回項的起始和結束位置。在只有一個引數的情況下， slice()方法返回從該引數指定位置開始到當前陣列末尾的所有項。如果有兩個引數，該方法返回起始和結束位置之間的項——但不包括結束位置的項。

1

2

3

4

5

6

7

8

9

10

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

var arrCopy = 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(arrCopy); //[3, 5, 7, 9, 11]

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

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

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

arrCopy只設置了一個引數，也就是起始下標為1，所以返回的陣列為下標1（包括下標1）開始到陣列最後。 
arrCopy2設定了兩個引數，返回起始下標（包括1）開始到終止下標（不包括4）的子陣列。 
arrCopy3設定了兩個引數，終止下標為負數，當出現負數時，將負數加上陣列長度的值（6）來替換該位置的數，因此就是從1開始到4（不包括）的子陣列。 
arrCopy4中兩個引數都是負數，所以都加上陣列長度6轉換成正數，因此相當於slice(2,5)。

8、splice()

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()方法始終都會返回一個數組，該陣列中包含從原始陣列中刪除的項，如果沒有刪除任何項，則返回一個空陣列。

1

2

3

4

5

6

7

8

9

10

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

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]

9、indexOf()和 lastIndexOf()

indexOf()：接收兩個引數：要查詢的項和（可選的）表示查詢起點位置的索引。其中， 從陣列的開頭（位置 0）開始向後查詢。 
lastIndexOf：接收兩個引數：要查詢的項和（可選的）表示查詢起點位置的索引。其中， 從陣列的末尾開始向前查詢。

這兩個方法都返回要查詢的項在陣列中的位置，或者在沒找到的情況下返回1。在比較第一個引數與陣列中的每一項時，會使用全等操作符。

1

2

3

4

5

6

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

console.log(arr.indexOf(5)); //2

console.log(arr.lastIndexOf(5)); //5

console.log(arr.indexOf(5,2)); //2

console.log(arr.lastIndexOf(5,4)); //2

console.log(arr.indexOf("5")); //-1

10、forEach()

forEach()：對陣列進行遍歷迴圈，對陣列中的每一項執行給定函式。這個方法沒有返回值。引數都是function型別，預設有傳參，引數分別為：遍歷的陣列內容；第對應的陣列索引，陣列本身。

1

2

3

4

5

6

7

8

9

10

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

11、map()

map()：指“對映”，對陣列中的每一項執行給定函式，返回每次函式呼叫的結果組成的陣列。

下面程式碼利用map方法實現陣列中每個數求平方。

1

2

3

4

5

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

var arr2 = arr.map(function(item){

return item*item;

});

console.log(arr2); //[1, 4, 9, 16, 25]

12、filter()

filter()：“過濾”功能，陣列中的每一項執行給定函式，返回滿足過濾條件組成的陣列。

1

2

3

4

5

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]

13、every()

every()：判斷陣列中每一項都是否滿足條件，只有所有項都滿足條件，才會返回true。

1

2

3

4

5

6

7

8

9

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

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

14、some()

some()：判斷陣列中是否存在滿足條件的項，只要有一項滿足條件，就會返回true。

1

2

3

4

5

6

7

8

9

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

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

return x < 3;

});

console.log(arr2); //true

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

return x < 1;

});

console.log(arr3); // false

15、reduce()和 reduceRight()

這兩個方法都會實現迭代陣列的所有項，然後構建一個最終返回的值。reduce()方法從陣列的第一項開始，逐個遍歷到最後。而 reduceRight()則從陣列的最後一項開始，向前遍歷到第一項。

這兩個方法都接收兩個引數：一個在每一項上呼叫的函式和（可選的）作為歸併基礎的初始值。

傳給 reduce()和 reduceRight()的函式接收 4 個引數：前一個值、當前值、項的索引和陣列物件。這個函式返回的任何值都會作為第一個引數自動傳給下一項。第一次迭代發生在陣列的第二項上，因此第一個引數是陣列的第一項，第二個引數就是陣列的第二項。

下面程式碼用reduce()實現陣列求和，陣列一開始加了一個初始值10。

1

2

3

4

5

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

var sum = values.reduceRight(function(prev, cur, index, array){

return prev + cur;

},10);

console.log(sum); //25

下面是es6新增的方法

17.from() 

Array.from方法用於將兩類物件轉為真正的陣列：類似陣列的物件和可遍歷的物件（包括ES6新增的資料結構Set和Map）。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

 有些時候他的作用可以被擴充套件運算子代替

function foo() {
  var args = [...arguments];
}

18.of() 

Array.of方法用於將一組值，轉換為陣列。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

19.copyWithin()

copyWithin方法，在當前陣列內部，將指定位置的成員複製到其他位置（會覆蓋原有成員），然後返回當前陣列。也就是說，使用這個方法，會修改當前陣列。

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三個引數。

  • target（必需）：從該位置開始替換資料。
  • start（可選）：從該位置開始讀取資料，預設為0。如果為負值，表示倒數。
  • end（可選）：到該位置前停止讀取資料，預設等於陣列長度。如果為負值，表示倒數。

這三個引數都應該是數值，如果不是，會自動轉為數值。

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

上面程式碼表示將從3號位直到陣列結束的成員（4和5），複製到從0號位開始的位置，結果覆蓋了原來的1和2。

 20.find()和findIndex()

陣列例項的find方法，用於找出第一個符合條件的陣列成員。它的引數是一個回撥函式，所有陣列成員依次執行該回調函式，直到找出第一個返回值為true的成員，然後返回該成員。如果沒有符合條件的成員，則返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5

上面程式碼找出陣列中第一個小於0的成員。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

上面程式碼中，find方法的回撥函式可以接受三個引數，依次為當前的值、當前的位置和原陣列。

陣列例項的findIndex方法的用法與find方法非常類似，返回第一個符合條件的陣列成員的位置，如果所有成員都不符合條件，則返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

這兩個方法都可以接受第二個引數，用來繫結回撥函式的this物件。

另外，這兩個方法都可以發現NaN，彌補了陣列的IndexOf方法的不足。

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0

上面程式碼中，indexOf方法無法識別陣列的NaN成員，但是findIndex方法可以藉助Object.is方法做到。

21.fill()

fill方法使用給定值，填充一個數組。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

上面程式碼表明，fill方法用於空陣列的初始化非常方便。陣列中已有的元素，會被全部抹去。

fill方法還可以接受第二個和第三個引數，用於指定填充的起始位置和結束位置。

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

上面程式碼表示，fill方法從1號位開始，向原陣列填充7，到2號位之前結束。

22.entries()，keys()和values()

用於遍歷陣列。它們都返回一個遍歷器物件，可以用for...of迴圈進行遍歷，唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

23.includes()

includes方法返回一個布林值，表示某個陣列是否包含給定的值，與字串的includes方法類似。該方法屬於ES7，但Babel轉碼器已經支援。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, NaN].includes(NaN); // true

該方法的第二個引數表示搜尋的起始位置，預設為0。如果第二個引數為負數，則表示倒數的位置，如果這時它大於陣列長度（比如第二個引數為-4，但陣列長度為3），則會重置為從0開始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

沒有該方法之前，我們通常使用陣列的indexOf方法，檢查是否包含某個值。

if (arr.indexOf(el) !== -1) {
  // ...
}

indexOf方法有兩個缺點，一是不夠語義化，它的含義是找到引數值的第一個出現位置，所以要去比較是否不等於-1，表達起來不夠直觀。二是，它內部使用嚴格相當運算子（===）進行判斷，這會導致對NaN的誤判。

[NaN].indexOf(NaN)
// -1

includes使用的是不一樣的判斷演算法，就沒有這個問題。

[NaN].includes(NaN)
// true

下面程式碼用來檢查當前環境是否支援該方法，如果不支援，部署一個簡易的替代版本。

const contains = (() =>
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(["foo", "bar"], "baz"); // => false

另外，Map和Set資料結構有一個has方法，需要注意與includes區分。

  • Map結構的has方法，是用來查詢鍵名的，比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。
  • Set結構的has方法，是用來查詢值的，比如Set.prototype.has(value)、WeakSet.prototype.has(value)。

相關推薦

JS中陣列方法詳解

JS中陣列的方法有很多，但是自己一直沒有抽時間進行整理分類，故單獨寫一篇博文，對目前我所掌握的JS中陣列相關的方法進行整理，夯實一下自己的基礎。 我將陣列相關的方法分為兩類 1.方法會改變原陣列 相應的方法有：shift、unshift、pop、push、rev

JS中陣列方法的底層實現

原始碼地址： https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js 陣列變異方法（即改變原陣列）：shift、unshift、splice、push、pop、sor

js中陣列方法push()、shift()與pop()、unshift()的區別

1、push()是用來在陣列末端新增項，shift()在移除陣列的第一個項。 2、pop()在陣列末端移除項，unshift()在陣列前端新增項。 3、push(),unshift()在推入多個

js中陣列方法大全

js陣列方法大全 　　一：前言 　　我們在學到js中陣列的時候，我們會接觸到js中陣列的一些方法，這些方法對我們來說，可以很遍歷的達到我們想要的結果，但是因為方法比較多，有些方法也不常用，可能會過一段時間就會忘記，那麼在這裡我整理了21個數組的方法，供大家查閱。   方法名對應版本功能原陣列是否

js中陣列和字串的方法總結

一、陣列方法簡單總結為以下幾種 　　1、原有：　　　　　增、刪、改、截、拼、復、排、轉 　　2、ES5擴充套件：　　　查、遍歷 增： 　　　　　　　前增 var arr = [3,4,5,6,7]; console.log(arr.unshift(

js中陣列的方法總結

js中陣列的方法很多，經常都翻書看，無奈老是記不住，一到用的時候就忘了，大概還是因為用的少，也可能是因為方法確實太多，據不完全統計有23種。。。所以在這裡總結一下，當是記個筆記。 1、join() join(separator): 將陣列的元素組起一個字串，以separator為分隔符，省略

js中陣列Array和字串String的屬性方法歸納總結

5、操作符的二義性，[  ]  建立陣列，屬性或陣列下標讀取寸；{ }物件宣告，函式直接量宣告，複合語句，結構語句限定如winth(){},swith(){},try{}catch()      {}；, 連續運算子，陣列或json元素分割符，函式形參分隔符；+字串連線符，數值運算子,增值運算子；()函式執行

js中陣列常用方法總結

  運算元組 運算元組，印象中運算元組的方法很多，下面總結了一下陣列中常用的幾個方法： JavaScript中建立陣列有兩種方式 （一）使用 Array 建構函式：   var arr1 = new Array(); //建立一個空陣列var arr2 = new Array(

原聲JS中indexOf()方法在陣列中的應用一

定義和用法 indexOf() 方法可返回某個指定的字串值在字串中首次出現的位置。 提示和註釋 註釋：indexOf() 方法對大小寫敏感！ 註釋：如果要檢索的字串值沒有出現，則該方法返回 -1。 註釋：字元位置是從 0 開

js中陣列遍歷的幾種方法及其區別

第一種最常用的：for迴圈  for(j = 0; j < arr.length; j++) { }  優化版for迴圈   for(j = 0,len=arr.length; j < len; j++) {

js中陣列除重方法大全

Array型別是js中的三大引用型別之一； Array中的每一項都可以用來儲存任何型別的資料，所以在陣列除重過程中就得考慮周全，下面將要介紹幾種陣列除重方式： （1）由於indexOf對陣列又迴圈了一次，所以效能不是最佳，加之indexOf在ie9以下不相容； （2） 由於雜湊表，

JS中陣列與物件的遍歷方法例項

一、陣列的遍歷： 首先定義一個數組 arr=['snow','bran','king','nightking']; 1、for迴圈，需要知道陣列的長度; 2、foreach，沒有返回值，可以不知道陣列長度； arr.forEach(function(ele,index

js中陣列的操作方法

1.concat 不會修改原陣列， （連線） 這個方法會先建立當前陣列的一個副本，然後將接收到的引數新增到這個副本的末尾，最後返回新建立的陣列。 沒有給concat()方法傳遞引數，它只是複製當前陣列並返回副本。 傳遞的引數是一個或者多個數組，會將這些陣列中的每

js中陣列的棧方法和佇列方法

1.棧方法 ECMAScript陣列提供了一種讓陣列的行為類似於其他資料結構的方法。具體來說，陣列可以表現的就像棧一樣（棧是一種可以限制插入和刪除的資料結構）。 棧是一種LIFO(Last-In-First-Out,後進先出)的資料結構。棧中項的插入和移除只發生再一個位置，就是棧的頂部

JS中陣列的使用方法

重點 push():最後一位追加 （作用是在原陣列上追加一位，返回值陣列的新長度） pop()：刪除最後一位 （刪除陣列的最後一位，返回值是被刪除的值） shift()：刪除第一位 （刪除第一個，返回刪除的值） unshift()：在第一位追加 （

js 中call() 方法和 apply() 方法用法總結

以前對js 的call() 和 apply() 方法的理解一直比較模糊，模稜兩可的狀態，今天閒著有空，在網上查找了相關資料做一下總結 1, 每個函式都包涵兩個非繼承而來的方法，call() 方法 和apply() 方法。 2，相同點兩個方法的作用都是一樣的。 都是在特定的作用域中呼叫

js陣列方法總結

傳統的js陣列方法 concat(),push(),pop(),shift(),unshift(),splice(),slice(),join(),sort(),reverse(); ES5新增陣列方法： indexOf(),lastIndexOf(),map(),filter(),forEach(),som

js中陣列物件去重的方法

方法一： 採用物件訪問屬性的方法，判斷屬性值是否存在，如果不存在就新增。 方法二： 採用陣列中的reduce方法，遍歷陣列，也是通過物件訪問屬性的方法 var arr = [{ ke

js中陣列的零碎總結

js中的陣列與Java中的陣列不同，使用方式也存在很多細微的差別： js中不能這樣定義陣列：           var[] a=new var[4];           var[] a=new var[]={1,2,3,4}; js中正確的定義姿勢：    

ionic3中引入第三方js庫的方法總結

以jquery為例： 建立ionic3專案：ionic start ionic3-test tabs 一、在使用的頁面匯入js檔案路徑；         下載jquery.min.js檔案，找到assets下面，建立js資料夾，將下載好的jquer