ES5和ES6陣列常見方法總結
ES5常見方法
1，棧方法（LIFO）後進先出：
push() 往陣列尾部新增元素
pop()從陣列尾部移除元素，並返回該元素,同時陣列長度減1
var arr = [1,2,3] arr.push(4)//arr = [1,2,3,4] var b = arr.pop()//4
2，佇列方法（FIFO）先進先出
shift()移除陣列首部元素，並返回該元素，同時陣列長度減1
unshift()向陣列首部新增元素
var arr = [1,2,3] var b = arr.shift()//1 arr.unshift(1)//arr = [1,2,3,]
3，陣列重新排序的方法
reverse()反轉陣列順序
sort()按照升序排列陣列
//reverse()反轉陣列順序 var arr = [1,2,3] var b = arr.reverse()//[3,2,1] //sort() 將陣列每一項執行toString()方法，然後比較得到的字串，從小到大進行排序 var arr = [1,3,5,25,15] var b = arr.sort() // [1, 15, 25, 3, 5] //這種結果顯然不是我們想要的，sort()可以接受一個比較函式作為引數，以便我們指定哪個值在哪個值前面 function compare(value1,value2){ return value1 - value2 }var arr = [1,3,5,25,15] var b = arr.sort(compare) // [1, 3,5,15,25]
4，陣列的操作方法
concat()基於當前陣列所有項建立一個副本，將接受的引數，新增這個副本陣列的尾部，並返回一個新陣列，不影響原陣列
var arr = [1,2,3] var b = arr.concat([4,5],'6') // [1, 2, 3, 4, 5, "6"]
slice()基於當前陣列的部分項建立一個副本，並返回新陣列，不影響原陣列
var arr = [1,2,3,4,5] var b = arr.slice() //[1, 2, 3, 4, 5]var c = arr.slice(1,) //[2, 3, 4, 5] var d = arr.slice(1,4) //[2, 3, 4]
splice()刪除(可不刪除)陣列中連續的項並插入(可以不插入)其他項，返回刪除項，改變原有的陣列
//第一個引數---要刪除第一項的位置 //第二個引數---要刪除的項數 //第三個及其以後的引數---用來插入的項 var arr = [1,2,3,4,5] var b = arr.splice(0,1) // arr = [2,3,4,5] b = [1] var c = arr.splice(1,2,7,8) // arr = [2,7,8,5] c = [3,4] var d = arr.splice(1,0,9,0) // arr = [2,7,9,0,8,5] d = []
5，位置方法
indexOf()從陣列頭部開始查詢某項，找到後返回第一次找到該項的索引值，若找不到返回-1，該方法接受兩個引數。開始查詢的起點位置的索引值，要查詢的項。
lastIndexOf()從陣列尾部開始查詢某項，找到後返回第一次找到該項的索引值，若找不到返回-1，該方法接受兩個引數。開始查詢的起點位置的索引值，要查詢的項。
6，迭代方法
以下方法都接受三個引數：陣列項，該項的索引值，陣列本身
- forEach()---對陣列中的每一項執行給定的函式，此方法無返回值；
- map()---對陣列中的每一項執行給定的函式，返回函式執行結果組成的新陣列，不影響原陣列；
- filter()---對陣列中的每一項執行給定函式，返回函式執行結果為true構成的新陣列，不影響原陣列；
- every()---對陣列每一項執行給定函式，如果函式執行結果都為true，則返回true，否則返回false；
- some()---對陣列每一項執行給定函式，如果有一項執行函式結果為true，則返回true。
//forEach var arr = [1,2,3,4] arr.forEach((item,index,array)=>{ //某些操作 }) //map arr = [1,2,3,4] var b = arr.map((item,index,array)=>{ return item*2 }) //b = [2, 4, 6, 8] //filter arr = [1,2,3,4] var d = arr.filter((item,index,array)=>{ return item > 3 }) //d = [4] //every arr = [1,2,3,4] var e = arr.every((item,index,array)=>{ return item > 3 }) //e = false //some arr = [1,2,3,4] var f = arr.some((item,index,array)=>{ return item > 3 }) //some = true
6，歸併方法
reduce()從陣列第一項開始向後逐個遍歷陣列，返回給定函式執行結果
reduceRight()從陣列第一項開始向後逐個遍歷陣列，返回給定函式執行結果
該方法接受兩個引數，1，每一項呼叫的函式；2，可選的作為歸併基礎的初始值；傳給此方法的函式接受4個引數，前一個值，當前值，索引項和陣列物件，這個函式返回的任何值都會作為第一個引數自動傳給下一項，第一次迭代發生在陣列的第二項，因此第一個入參是陣列的第一項，第二個入參是陣列的第二項。
var arr = [1,2,3,4,5] var b = arr.reduce((prev,cur,index,array)=>{ return prev + cur }) // b = 15 var arr = [1,2,3,4,5] var b = arr.reduce((prev,cur,index,array)=>{ return prev + cur },4) //b = 19
ES6常見的方法
1，form():將類陣列的物件(array-like object)和可遍歷(iterable)的物件轉換為真正的陣列
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']
只要是部署了Iterator介面的資料結構，Array.from都能將其轉為陣列。
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
值得提醒的是，擴充套件運算子（...）也可以將某些資料結構轉為陣列。
// arguments物件 function foo() { var args = [...arguments]; } // NodeList物件 [...document.querySelectorAll('div')]
擴充套件運算子背後呼叫的是遍歷器介面（Symbol.iterator），如果一個物件沒有部署這個介面，就無法轉換。Array.from方法則是還支援類似陣列的物件。所謂類似陣列的物件，本質特徵只有一點，即必須有length屬性。因此，任何有length屬性的物件，都可以通過Array.from方法轉為陣列，而此時擴充套件運算子就無法轉換。
對於還沒有部署該方法的瀏覽器，可以用Array.prototype.slice方法替代。
const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj) )();
Array.from還可以接受第二個引數，作用類似於陣列的map方法，用來對每個元素進行處理，將處理後的值放入返回的陣列。
Array.from(arrayLike, x => x * x); // 等同於 Array.from(arrayLike).map(x => x * x); Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
2，of()將一組值轉換為陣列
Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1 Array() // [] Array(3) // [, , ,] Array(3, 11, 8) // [3, 11, 8] //Array方法沒有引數、一個引數、三個引數時，返回結果都不一樣。只有當引數個數不少於2個時，Array()才會返回由引數組成的新陣列。引數個數只有一個時，實際上是指定陣列的長度。 //Array.of基本上可以用來替代Array()或new Array()，並且不存在由於引數不同而導致的過載。它的行為非常統一。 Array.of() // [] Array.of(undefined) // [undefined] Array.of(1) // [1] Array.of(1, 2) // [1, 2]
Array.of方法可以用下面的程式碼模擬實現。
function ArrayOf(){ return [].slice.call(arguments); }
3，陣列實列的方法：copyWith()在當前陣列內部，將指定的成員複製到其他位置(會覆蓋原有成員)，然後返回當前陣列，這個方法會修改當前陣列。
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號位複製到0號位 [1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5] // -2相當於3號位，-1相當於4號位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5] // 將3號位複製到0號位 [].copyWithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5} // 將2號位到陣列結束，複製到0號位 var i32a = new Int32Array([1, 2, 3, 4, 5]); i32a.copyWithin(0, 2); // Int32Array [3, 4, 5, 4, 5] // 對於沒有部署TypedArray的copyWithin方法的平臺 // 需要採用下面的寫法 [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); // Int32Array [4, 2, 3, 4, 5]
4，陣列例項的find()和findIndex()
find()用於找出第一個符合條件的陣列成員，它的引數是一個回撥函式，所有的成員依次執行該回調函式，直到找到第一個返回值為true的成員，然後返回該成員。如果沒有符合條件的成員，則返回undefined。
[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
5，fill()
使用給定值，填充一個數組
['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7] //fill方法還可以接受第二個和第三個引數，用於指定填充的起始位置和結束位置。 ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
6，entries()，keys()和values()——用於遍歷陣列。它們都返回一個遍歷器物件（詳見《Iterator》一章），可以用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" //如果不使用for...of迴圈，可以手動呼叫遍歷器物件的next方法，進行遍歷。 let letter = ['a', 'b', 'c']; let entries = letter.entries(); console.log(entries.next().value); // [0, 'a'] console.log(entries.next().value); // [1, 'b'] console.log(entries.next().value); // [2, 'c']