常用陣列Array的API
1.建立陣列
1.Array.from
Array.from()方法就是將一個類陣列物件或者可遍歷物件轉換成一個真正的陣列。
那麼什麼是類陣列物件呢？所謂類陣列物件，最基本的要求就是具有length屬性的物件。
1、將類陣列物件轉換為真正陣列：
let arrayLike = {
0: 'tom',
1: '65',
2: '男',
3: ['jane','john','Mary'],
'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]
2、將Set結構的資料轉換為真正的陣列：
var set = new Set([1,2,3,4,6,8,5])
console.log(set)
console.log(Array.from(set))
- 可以代替es5笨拙的arguments類陣列轉陣列的操作
function arg(){
//原es5操作
const arr = Array.prototype.slice.call(arguments);
console.log(arr)//[1, 2, 3, 4]
//es6代替後
const arr2 = Array.from(arguments)
console.log(arr2)//[1, 2, 3, 4]
//Array.from()還接收第二個可選的對映函式引數。這個函式可以直接增強新陣列的值
const arr3 = Array.from(arguments , a => a * 2)
console.log(arr3)//[2, 4, 6, 8]
}
arg(1,2,3,4)
2.Array.of()
Array.of()方法用於將一組數值轉換為陣列，舉例:
const a = Array.of(2,4,6,8);
console.log(a); // [2,4,6,8]
這個方法的主要目的是為了彌補陣列建構函式Array()的的不足。因為引數個數的不同會導致Array()的行為有一些差異。 舉例:
console.log(Array(2,3,4,5))//正常輸出[2, 3, 4, 5]
console.log(Array(3))//非自己想要輸出[空 ×3]，自己想要的結果是建立一個數值為3的陣列
console.log(Array.of(3))//輸出了想要的結果[3]
2.模擬棧方法（push，pop）
利用push() pop() 模擬棧資料結構，先進後出
1.push()將元素推進陣列末尾
2.pop()將陣列末尾將最後一個元素移出，並返回該元素
let arr = [1,2,3,4,5]
let arr2 = []
arr.forEach(item => {
arr2.push(item)
})
console.log(arr2)//[1, 2, 3, 4, 5]
arr2.pop()
console.log(arr2)//[1, 2, 3, 4]
3.模擬佇列方法（push，shift）(unshift,pop)
利用push()shift()或者反向操作unshift()pop()模擬佇列資料結構，先進先出
1.shift()將陣列首位元素移出
2.unshift將元素塞進陣列首位
//佇列方法push shift
//佇列方法unshift pop
let arr = [1,2,3,4,5]
let arr2 = []
arr.forEach(item => {
arr2.push(item)
})
console.log(arr2)//[1, 2, 3, 4, 5]
arr2.shift()
console.log(arr2)//[2, 3, 4, 5]
let arr3 = []
arr.forEach(item => {
arr3.unshift(item)
})
console.log(arr3)//[5, 4, 3, 2, 1]
arr3.pop()
console.log(arr3)//[5, 4, 3, 2]
4.排序方法sort reverse
1.sort()
sort()會在每一項上呼叫String()轉型函式，然後比較字串來決定順序。
let arr = [0,1,5,10,15]
console.log(arr.sort())//[0, 1, 10, 15, 5]
呼叫sort()會按照這些數值的字串形式重新排序。因此，即使5小於10，但字串"10"在字串"5"的前頭，所以10還是會排到5前面。很明顯，這在多數情況下都不是最合適的。為此，sort()方法可以接收一個比較函式，用於判斷哪個值應該排在前面。
//升序
function compareup(value1,value2){
return value1 - value2
}
//降序
function comparedown(value1,value2){
return value2 - value1
}
console.log(arr.sort(compareup))//[0, 1, 5, 10, 15]
console.log(arr.sort(comparedown))//[15, 10, 5, 1, 0]
2.reverse()
reverse()方法就是將陣列元素反向排列
let arr = [0,1,5,10,15]
arr.reverse()
console.log(arr)//[15, 10, 5, 1, 0]
5.操作方法concat slice splice
1.concat()
concat()方法可以在現有陣列全部元素基礎上建立一個新陣列。它首先會建立一個當前陣列的副本，然後再把它的引數新增到副本末尾，最後返回這個新構建的陣列。
concat()傳入的陣列引數，結果預設陣列打平，如下所示
let arr = [0,1,2,3]
let arr2 = arr.concat(2,[3,4],[4,5,6])
console.log(arr2)//[0, 1, 2, 3, 2, 3, 4, 4, 5, 6]
console.log(arr)//[0, 1, 2, 3]
concat()不會影響到原來的陣列，因為concat會先建立一個當前陣列副本進行操作
2.slice()
slice()方法可以接收一個或兩個引數：返回元素的開始索引和結束索引。如果只有一個引數，則slice()會返回該索引到陣列末尾的所有元素。如果有兩個引數，則slice()返回從開始索引到結束索引對應的所有元素，其中不包含結束索引對應的元素。記住，這個操作不影響原始陣列。
let arr = ['a','b','c','g','y']
console.log(arr.slice(1));//["b", "c", "g", "y"]
console.log(arr.slice(1,3));// ["b", "c"]
3.splice()
一個引數：刪除從引數開始直到末尾
兩個引數：刪除從第一個引數開始，長度為第二個引數
三個引數：1. 插入操作 開始位置、0（要刪除的元素數量）和要插入的元素，可以在陣列中指定的位置插入元素。第三個引數之後還可以傳第四個、第五個引數，乃至任意多個要插入的元素。
2.替換操作 splice()在刪除元素的同時可以在指定位置插入新元素，同樣要傳入3個引數：開始位置、要刪除元素的數量和要插入的任意多個元素。要插入的元素數量不一定跟刪除的元素數量一致。
let arr = ['a','b','c','g','y']
let arr2 = arr.splice(1)
console.log(arr2)//["b", "c", "g", "y"]
console.log(arr)//["a"]
let arr2 = arr.splice(1,2)
console.log(arr2)//["b", "c"]
console.log(arr)//["a", "g", "y"]
let arr2 = arr.splice(1,0,'r','t','b')
console.log(arr2)//[]
console.log(arr)// ["a", "r", "t", "b", "b", "c", "g", "y"]
let arr2 = arr.splice(1,3,'r','t','b')
console.log(arr2)//["b", "c", "g"]
console.log(arr)// ["a", "r", "t", "b", "y"]
6.搜尋和位置方法 indexOf lastIndexOf includes
indexOf()和includes()方法從陣列前頭（第一項）開始向後搜尋，而lastIndexOf()從陣列末尾（最後一項）開始向前搜尋。
indexOf()和lastIndexOf()都返回要查詢的元素在陣列中的位置，如果沒找到則返回-1。includes()返回布林值，表示是否至少找到一個與指定元素匹配的項。
let arr = ['a','b','c','g','y','g','b']
1.indexOf
console.log(arr.indexOf('c'))//2
2.lastIndexOf
console.log(arr.lastIndexOf('g'))//5
3.includes
console.log(arr.includes('y'))//true
console.log(arr.includes('x'))//false
7.迭代方法 every filter forEach map some
1.every
every()：對陣列每一項都執行傳入的函式，如果對每一項函式都返回true，則這個方法返回true。
let arr = [1,5,8,4,3,2]
let result = arr.every((item,index,array) => item < 6)//true
let result2 = arr.every((item,index,array) => item < 10)//false
console.log(result)
console.log(result2)
2.filter
filter()：對陣列每一項都執行傳入的函式，函式返回true的項會組成陣列之後返回。
let result = arr.filter((item,index,array) => {
return item > 3
})
console.log(result)//[5, 8, 4]
3.forEach
forEach()：對陣列每一項都執行傳入的函式，沒有返回值。
let arr2 = []
arr.forEach((item,index,array) => {
if(item > 3)
arr2.push(item)
return arr2
})
console.log(arr2)//[5,8,4]
4.map
map()：對陣列每一項都執行傳入的函式，返回由每次函式呼叫的結果構成的陣列。
let arr2 = arr.map((item,index,array) => {
return item * 2
})
console.log(arr2)// [2, 10, 16, 8, 6, 4]
5.some
some()：對陣列每一項都執行傳入的函式，如果有一項函式返回true，則這個方法返回true。
let arr = [1,5,8,4,3,2]
let result3 = arr.some((item,index,array) => item < 6)//true
console.log(result3)
8.歸併方法reduce
對每一項都會執行的歸併函式，以及可選的以之為歸併起點的初始值。傳給reduce()的函式接收4個引數：上一個歸併值、當前項、當前項的索引和陣列本身。這個函式返回的任何值都會作為下一次呼叫同一個函式的第一個引數。如果沒有給這兩個方法傳入可選的第二個引數（作為歸併起點值），則第一次迭代將從陣列的第二項開始，因此傳給歸併函式的第一個引數是陣列的第一項，第二個引數是陣列的第二項。
實際應用
1.累加
var arr5 = [1,2,3,4,3,2,1,24,5,6,7,4,3]
var sum = arr5.reduce((pre,cur,index,array) => {
return pre + cur
})
console.log(sum)//65
-
reduce計算元素出現次數
var arr = ['a','b','b','c','d','e','e','e','f']const arr2 = arr.reduce((pre,cur) => { if(cur in pre){ pre[cur]++ }else{ pre[cur] = 1 } return pre },{}) console.log(arr2)
3.reduce實現陣列去重
var arr3 = [1,2,3,4,3,2,1,24,5,6,7,4,3]
const arr4 = arr3.reduce((pre,cur) => {
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(arr4)