前言
一直以來都想來總結一下js的陣列使用方法，因為有時候時間一長有的方法就記不太清，突然要用的時候還要去查，這裡做下總結，自己鞏固一下同時也方便以後有緣人一起來看?
首先我們先來看一下谷歌瀏覽器裡Array內建的方法有多少，如下↓
----------------這裡我們先來說一下最常用的幾個，然後再一個一個解讀剩下的----------------
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看一下
改成正常的匿名函式看一下?
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組成個陣列返回了
複製程式碼
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"]
複製程式碼---------------------結尾總結---------------------------
都是些簡單方法總結我居然寫了一天，如有錯誤的地方望大家及時指正?