JavaScript裡的陣列Array使用方法總結，超全的o

七度丟失的夢發表於2020-04-04
JavaScript陣列

前言

一直以來都想來總結一下js的陣列使用方法，因為有時候時間一長有的方法就記不太清，突然要用的時候還要去查，這裡做下總結，自己鞏固一下同時也方便以後有緣人一起來看?

首先我們先來看一下谷歌瀏覽器裡Array內建的方法有多少，如下↓

JavaScript裡的陣列Array使用方法總結，超全的o
真是不看不知道，一看嚇一跳，在我印象裡陣列的使用方法加上ES6、7...新語法最多也就十幾個吧 這裡我數了一下從concat到valueOf總共37個(你敢信，無知啊)，下面的“__”開頭的就暫時不說了

----------------這裡我們先來說一下最常用的幾個，然後再一個一個解讀剩下的----------------

1. Array.push()

向陣列的末尾新增一個或更多元素，並返回新的長度。

let arr = [1,2,3];
console.log(arr.push(6));  // 4
console.log(arr)           // [1, 2, 3, 6]
複製程式碼

2.Array.pop()

刪除陣列的最後一個元素，並返回刪除的元素。

let arr = [1,2,3];
console.log(arr.pop());  // 3
console.log(arr)        // [1, 2]
複製程式碼

3. Array.unshift()

向陣列的開頭新增一個或更多元素，並返回新的長度。

let arr = [1,2,3];
console.log(arr.unshift(6));  // 4
console.log(arr)              // [6, 1, 2, 3]
複製程式碼

4. Array.shift()

刪除並返回陣列的第一個元素。

let arr = [1,2,3];
console.log(arr.shift()); // 1
console.log(arr)          // [2, 3]
複製程式碼

5. Array.splice(開始的位置下標，刪除的個數，要插入的元素1，元素2，...)

方法用於新增或刪除陣列中的元素,並返回刪除的陣列。PS:這個方法增刪改查都可以，上面4個方法都可以用splice實現

let arr1 = ['a', 'b', 'c', 'd'];
console.log(arr1.splice(2,0,1));   // []
console.log(arr1)                  // ["a", "b", 1, "c", "d"]
let arr2 = ['a', 'b', 'c', 'd'];
console.log(arr2.splice(2,1));     // ['c']
console.log(arr2)                  // ["a", "b", "d"]
let arr3 = ['a', 'b', 'c', 'd'];
console.log(arr3.splice(2,1,'e'));    // ["c"]
console.log(arr3);                    // ["a", "b", "e", "d"]
let arr4 = ['a', 'b', 'c', 'd'];
console.log(arr4.splice(2,1,'e',4));  // ["c"]
console.log(arr4);                    // ["a", "b", "e", 4, "d"]
複製程式碼

6. Array.slice(開始的位置下標，結束位置的下標)

選取陣列的的一部分，並返回一個新陣列。（不包括結束位置）。

注意:slice()方法不會改變原始陣列。

其實slice()同樣也可以操作字串和substring()的功能一樣

let arr1 = ['a', 'b', 'c', 'd'];
console.log(arr1.slice(1, 3));  // ["b", "c"]
console.log(arr1);              // ["a", "b", "c", "d"]
let arr2 = ['a', 'b', 'c', 'd'];
console.log(arr2.slice(1));     // ["b", "c", "d"]
console.log(arr2);              // ["a", "b", "c", "d"]
複製程式碼

7. Array.concat(陣列1，陣列2，...)

連線 2 個或更多陣列，並返回連線後的新陣列。

注意:concat()方法不會改變原始陣列。

let arr1 = [1, 2, 3],arr2 = [4, 5, 6];
let arr = arr1.concat(arr2);
console.log(arr);     //[1, 2, 3, 4, 5, 6]
複製程式碼

8. Array.join(指定字元)

將陣列裡所有的元素連線成一個字串，並返回該字串，元素是通過指定的分隔符進行分隔的。如果省略該引數，則使用逗號作為分隔符。

let arr = ["a", 1, "b", 2];
console.log(arr.join())     // "a,1,b,2"
console.log(arr.join("-"))  // "a-1-b-2"
console.log(arr)            // ["a", 1, "b", 2]
複製程式碼

9. Array.toString()

將陣列作為字串返回，陣列中的元素之間用逗號分隔和arr.join()一個效果

let arr = [1, 2, 3, 4, 5];
console.log(arr.toString())// 1,2,3,4,5
複製程式碼

10. Array.forEach(fn, thisValue) thisValue可傳可不傳，決定在fn用this指向

對陣列中的每個元素執行給定函式。這個方法沒有返回值。這裡fn是可以傳3個引數function(currentValue：必傳當前元素, index：可選當前元素的索引值, arr：可選當前元素所屬的陣列物件)

let myArr = [1,5,8]
myArr.forEach((v,i,arr)=>{
    console.log(v,i,arr)
})
//1  0  [1, 5, 8]
//5  1  [1, 5, 8]
//8  2  [1, 5, 8]
複製程式碼

加上thisValue看一下

JavaScript裡的陣列Array使用方法總結，超全的o
本以為是應該把 newObj列印出來，沒想到居然把window列印出來了，這是為什麼呢，原來是ES6裡的箭頭函式this指向問題：作為方法的箭頭函式this指向全域性window物件

改成正常的匿名函式看一下?

JavaScript裡的陣列Array使用方法總結，超全的o
這裡要想使用thisValue還不能用箭頭函式啊

11. Array.map()

對陣列中的每個元素執行給定函式，返回每次函式呼叫的結果組成的陣列。

傳參和forEach一樣：Array.map(function(currentValue,index,arr), thisValue)，唯一區分就是，map會返回每次函式呼叫的結果組成的陣列

let myArr = [1,5,8]
myArr.forEach((v,i,arr)=>{
    console.log(v,i,arr)
})
//1  0  [1, 5, 8]
//5  1  [1, 5, 8]
//8  2  [1, 5, 8]
//[undefined, undefined, undefined] 在迴圈執行結束，把每次返回的undefined組成個陣列返回了
複製程式碼

JavaScript裡的陣列Array使用方法總結，超全的o
這裡我們再來看一個動態圖，更形象一點?
JavaScript裡的陣列Array使用方法總結，超全的o

12. Array.filter()

對陣列中的每個元素執行給定函式，返回該函式會返回 true 的元素組成的陣列，傳參和forEach一樣：array.filter(function(currentValue,index,arr), thisValue)

let arr = [1, 2, 3, 4, 5]
let bigNum = value => value > 3
let newArr = arr.filter(bigNum)
console.log(newArr)
// [4, 5] 滿足條件的元素返回為一個新的陣列
複製程式碼

13. Array.every()

對陣列中的每個元素執行給定函式，如果該函式對每個元素都返回 true ，則返回 true，就是檢測陣列中的每個元素是否都符合條件。傳參和forEach一樣：array.every(function(currentValue,index,arr), thisValue)

let arr = [1, 2, 3, 4]
let isAllBig3 = value => value > 3
let isAllSmall8 = value => value < 8
console.log(arr.every(isAllBig3))      //false  不是所有都大於3
console.log(arr.every(isAllSmall8))    //true   是所有都小於8
複製程式碼

14. Array.some()

對陣列中的每個元素執行給定函式，如果任一元素返回 true ，則返回 true，如果返回了true , 迴圈結束，剩餘的元素不會再執行檢測。

傳參和forEach一樣：array.some(function(currentValue,index,arr),thisValue)

let arr= [1, 2, 3]
let ishave3 = value => value == 3
let ishave6 = value => value == 6
console.log(arr.some(ishave3))    // true  arr裡有3
console.log(arr.some(ishave6))    // false arr裡沒有6
複製程式碼

15. Array.reduce()

將陣列元素計算為一個值（從左到右）。array.reduce(function(total, currentValue, currentIndex, arr), initialValue) total：初始值是陣列第一個值，後面會賦值為每次迴圈返回的值 currentValue：初始值是陣列第二個值，後面依次第三個...到最後一個

注意：該方法只迴圈arr.length-1次 所以我們通常用它來計算一個陣列元素之和

let arr = [1, 2, 3, 4]
let add = (a, b) => a + b
console.log(arr.reduce(add))  //   10
複製程式碼

16. Array.reduceRight()

將陣列元素計算為一個值（從右到左）。和上面的方法功能一樣，只是迴圈正好相反從最後一個元素開始

17. Array.sort()

如果不傳引數按照字母順序對陣列排序（預設排序順序是根據字串UniCode碼），支援傳入指定排序方法的函式作為引數：arr.sort(fn(secondValue, firstValue))

先看最簡單的用法：

let arr = ["dfc", "cf", "lol", "anf"]
console.log(arr.sort());         //   ["anf", "cf", "dfc", "lol"]
console.log(arr)                 //   ["anf", "cf", "dfc", "lol"]
// 該方法會改變原始陣列
複製程式碼

其實sort底層是封裝了排序演算法的，V8 引擎 sort 函式只給出了兩種排序 InsertionSort 和 QuickSort，數量小於10的陣列使用 InsertionSort，比10大的陣列則使用 QuickSort。點選githubV8-Arrray.js原始碼地址 底層原始碼有興趣的童鞋可以去研究研究

下面我們來看一下如何利用sort()的排序來給我們平時專案開發帶來便利:

  • 方法一：a-b 升序排列
let arr = [4, 2, 3, 6, 9, 1]
console.log(arr.sort((a, b)=> a-b))
// [1, 2, 3, 4, 6, 9]
複製程式碼
  • 方法二：b-a 降序排列
let arr = [4, 2, 3, 6, 9, 1]
console.log(arr.sort((a, b)=> b-a))
// [9, 6, 4, 3, 2, 1]
複製程式碼
  • 方法三：對於複雜的資料陣列，我們可以封裝屬於自己排序方法
let students = [
    {name: "tom", age: 18},
    {name: "jack", age: 26},
    {name: "rose", age: 20}
]
let sortByAge = (a, b) => a.age - b.age
students.sort(sortByAge)
/* 最後輸出
[{name: "tom", age: 18},
 {name: "rose", age: 20},
 {name: "jack", age: 26}]
*/
複製程式碼
  • 方法四：其實我們還可以寫的再靈活一點，更低耦合點
// 先想一下如果還有學生身高資料，要我們按身高來進行排序，如果按上面那種寫法
// 我們得封裝兩個方法，如果以後還有更多的屬性，這樣是不是很麻煩
// 看下面↓
let students = [
    {name: "tom", age: 18, height: 177},
    {name: "jack", age: 26, height: 170},
    {name: "rose", age: 20, height: 166}
]
let sortBy = (attr) => {return (a, b)=> a[attr] - b[attr]}
students.sort(sortBy("height"))
/*輸出
0: {name: "rose", age: 20, height: 166}
1: {name: "jack", age: 26, height: 170}
2: {name: "tom", age: 18, height: 177}
*/
students.sort(sortBy("age"))
/*輸出
0: {name: "tom", age: 18, height: 177}
1: {name: "rose", age: 20, height: 166}
2: {name: "jack", age: 26, height: 170}
*/
複製程式碼

18. Array.reverse()

反轉陣列的元素順序。會改變原始陣列

let arr = [11, 12, 14, 13]
console.log(arr.reverse())   // [13, 14, 12, 11]
console.log(arr)             // [13, 14, 12, 11]
複製程式碼

19. Array.find()

對陣列中的每個元素執行給定函式，在測試條件時返回 true 時, find() 返回符合條件的元素，之後的值不會再呼叫執行函式。如果沒有符合條件的元素返回 undefined

傳參：array.find(function(currentValue, index, arr),thisValue)

let arr = [1, 2, 3, 5, 7]
let big3 = a => a>3
console.log(arr.find(big3))  // 5
console.log(arr)             // [1, 2, 3, 5, 7]
複製程式碼

20. Array.findIndex()

返回符合傳入測試（函式）條件的陣列元素索引。之後的值不會再呼叫執行函式。如果沒有符合條件的元素返回 -1

let arr = [1, 2, 3, 5, 7]
let big3 = a => a>3
console.log(arr.findIndex(big3))  // 3
console.log(arr)                  // [1, 2, 3, 5, 7]
複製程式碼

21. Array.includes()

判斷一個陣列是否包含一個指定的值。如果是返回 true，否則false。語法：arr.includes(searchElement, fromIndex)

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
複製程式碼

22. Array.indexOf()

返回第一個與給定引數相等的陣列元素的索引，沒有找到則返回 -1。語法：array.indexOf(item,start)，start選填：從下標這（包括該元素）之後的所有元素

let arr = ["aa", "bb", "cc", "dd"]
console.log(arr.indexOf("bb"))       // 1
console.log(arr.indexOf("bb", 2))    // -1
複製程式碼

23. Array.lastIndexOf()

返回在陣列中搜尋到的與給定引數相等的元素的索引裡最大的值，沒有找到返回-1。語法：array.lastIndexOf(item,Index)，index選填：指下標在這（包括該元素）之前的所有元素

let arr = ["aa", "bb", "cc", "dd", "bb"]
console.log(arr.lastIndexOf("bb"))      // 4
console.log(arr.lastIndexOf("bb", 2))   // 1
複製程式碼

24. Array.isArray()

判斷物件是否為陣列。如果物件是陣列返回 true，否則返回 false。

let obj = {}
let arr = []
Array.isArray(obj)  // false
Array.isArray(arr)  // true
複製程式碼

25. Array.valueOf()

返回陣列物件的原始值。

let arr = [1,2,3]
console.log(arr.valueOf())
//  [1, 2, 3]
複製程式碼

26. Array.entries()、27.Array.keys()、28.Array.values()

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

let arr = ["a", "b", "c"]
let item = arr.entries()
console.log(item.next().value)  // [0, "a"]
console.log(item.next().value)  // [1, "b"]
console.log(item.next().value)  // [2, "c"]
console.log(item.next().value)  // undefined
 
let ikey = arr.keys()
console.log(ikey.next().value)  // 0
console.log(ikey.next().value)  // 1
console.log(ikey.next().value)  // 2
console.log(ikey.next().value)  // undefined
 
let ivalue = arr.values()
console.log(ivalue.next().value)  // a
console.log(ivalue.next().value)  // b
console.log(ivalue.next().value)  // c
console.log(ivalue.next().value)  // undefined
複製程式碼

29. Array.flat(num)

用於將巢狀的陣列“拉平”，變成一維陣列。該方法返回一個新陣列，對原陣列沒有影響。num：表示拉幾層的巢狀陣列，如果不確定可以寫Infinity，這樣不管多少層都可以

[1, 2, [3, 4]].flat()           // [1, 2, 3, 4]
[1, 2, [3, [4, 5]]].flat()      // [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)     // [1, 2, 3, 4, 5]
[1, [2, [3]]].flat(Infinity)    // [1, 2, 3]
// 如果原陣列有空位，flat()方法會跳過空位。
[1, 2, , 4, 5].flat()           // [1, 2, 4, 5]
複製程式碼

30. Array.flatMap()

對原陣列的每個成員執行一個函式，相當於執行map(),然後對返回值組成的陣列執行flat()方法。該方法返回一個新陣列，不改變原陣列。

[2, 3, 4].flatMap((x) => [x, x * 2])  // [2, 4, 3, 6, 4, 8]
複製程式碼

31. Array.fill()

用於將一個固定值替換陣列的元素,語法：array.fill(value, start, end)

let arr = ["a", "b", "c", "d", "e"]
arr.fill("dd")
console.log(arr)  //  ["dd", "dd", "dd", "dd", "dd"]
arr.fill("a", 1, 3)
console.log(arr)  //  ["dd", "a", "a", "dd", "dd"]
複製程式碼

32. Array.copyWithin()

從陣列的指定位置拷貝元素到陣列的另一個指定位置中。語法：array.copyWithin(target, start, end)

target：必需。複製到指定目標索引位置。 start：可選。元素複製的起始位置。 end：可選。停止複製的索引位置 (預設為 array.length)。如果為負值，表示倒數。

let arr = ["a", "b", "c", "d", "e", "f"];
arr.copyWithin(2, 0, 2);
console.log(arr)
// ["a", "b", "a", "b", "e", "f"]
複製程式碼

33. Array.toLocaleString()

這方法陣列基本不用了，主要操作日期物件返回一個日期，該日期使用當前區域設定並已被轉換為字串。

let arr = ["a", "b", "c"]
arr.toLocaleString()
//  返回空
["a", "b", "c"].toLocaleString()
// "a,b,c"
new Date().toLocaleString()
// "2020/3/7 上午12:26:31"
複製程式碼

34. Array.constructor

返回物件的建構函式。

[1,2,3].constructor
// Array() { [native code] }
複製程式碼

35. Array.hasOwnProperty()、36.Array.propertyIsEnumerable()、37.Array.isPrototypeOf()

這三個方法都是和原型鏈相關的,運算元組基本用不到

  • hasOwnProperty()
let arr = ["a", "b"]
arr.hasOwnProperty("a")
// false
arr.hasOwnProperty("0")
// true
複製程式碼
  • 其實hasOwnProperty主要是返回一個布林值，判斷物件是否包含特定的自身（非繼承）屬性。看下面↓
function f(){
  this.a = 1;
  this.b = 2;
  this.c = function(){}
}
f.prototype = {
  d : 3,
  e : 4,
  g : function(){}
}
let o = new f();
o.hasOwnProperty('a'); //true
o.hasOwnProperty('b'); //true
o.hasOwnProperty('c'); //true
o.hasOwnProperty('d'); //false
o.hasOwnProperty('e'); //false
o.hasOwnProperty('g'); //false
 
o.propertyIsEnumerable('a'); //true
o.propertyIsEnumerable('b'); //true
o.propertyIsEnumerable('c'); //true
o.propertyIsEnumerable('d'); //false
o.propertyIsEnumerable('e'); //false
o.propertyIsEnumerable('g'); //false
複製程式碼
  • propertyIsEnumerable()是用來檢測屬性是否屬於某個物件的,如果檢測到了,返回true,否則返回false.

1.這個屬性必須屬於例項的,並且不屬於原型.

2.這個屬性必須是可列舉的,也就是自定義的屬性,可以通過for..in迴圈出來的.

只要符合上面兩個要求,就會返回true;

let arr = ["a", "b", "c"]
arr.propertyIsEnumerable("a")
// false
arr.propertyIsEnumerable("0")
// true
複製程式碼
  • isPrototypeOf()用於測試一個物件是否存在於另一個物件的原型鏈上。陣列基本用不到

38. Array.of()

of是幫助開發者在使用 Array 構造器時避開 JS 語言的一個怪異點。呼叫 new Array() 構造器時，根據傳入引數的型別與數量的不同，實際上會導致一些不同的結果

let items = new Array(2);
console.log(items.length); // 2
console.log(items[0]); // undefined
console.log(items[1]); // undefined
 
items = new Array("2");
console.log(items.length); // 1
console.log(items[0]); // "2"
 
items = new Array(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
 
items = new Array(3, "2");
console.log(items.length); // 2
console.log(items[0]); // 3
console.log(items[1]); // "2"
複製程式碼

這時候引入了 Array.of() 方法來解決這個問題。該方法的作用非常類似 Array 構造器，但在使用單個數值引數的時候並不會導致特殊結果。 Array.of() 方法總會建立一個包含所有傳入引數的陣列，而不管引數的數量與型別。

let items = Array.of(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
 
items = Array.of(2);
console.log(items.length); // 1
console.log(items[0]); // 2
 
items = Array.of("2");
console.log(items.length); // 1
console.log(items[0]); // "2"
複製程式碼

39. Array.form()

form()方法用於通過擁有 length 屬性的物件或可迭代的物件來返回一個陣列。如果物件是陣列返回 true，否則返回 false。

Array.from("abcdef");
// ["a", "b", "c", "d", "e", "f"]
複製程式碼

---------------------結尾總結---------------------------

都是些簡單方法總結我居然寫了一天，如有錯誤的地方望大家及時指正?

相關文章