整理js數組方法以及高階函數

1.數組填充 fill()

語法：array.fill(value, start, end)

value	必填：填充的值
start	選填：開始的位置
end	選填：結束位置

arr = [1,2,3,4,5];
arr.fill(0);
//[0, 0, 0, 0, 0]
arr.fill(1,1);
//(5) [0, 1, 1, 1, 1]
arr.fill(2,2,3);
//[0, 1, 2, 1, 1]
arr = new Array(5).fill(0);
//[0, 0, 0, 0, 0]

2.數組合並 concat()

語法：array.concat(arr1,arr2,…)

參數選填，不填參數則進行數組複製操作

arr1 = [1,2,3]
arr2 = [3,4,6]
arr3 = arr1.concat(arr2);//[1, 2, 3, 3, 4, 6]
arr1 = [1,2,3]
arr2 = [3,4,6]
arr3 = [];
arr3 = arr3.concat(arr1, arr2);//[1, 2, 3, 3, 4, 6]  

在es6中，還可以使用拓展運算符進行數組合並

arr1 = [1,2,3]
arr2 = [3,4,6]
arr3 = [...arr1, ...arr2]//[1, 2, 3, 3, 4, 6]

3.from()

Array.from可以將兩類對象轉爲真正的數組：擁有 length 屬性的對象或可迭代的對象

語法：Array.from(object, mapFunction, thisValue)

object	必需，要轉換爲數組的對象。
mapFunction	對每個元素的操作
thisValue	可選，映射函數(mapFunction)中的 this 對象。

temp = {
	'0': 1,
	'1': 2,
	'2': 3,
	length: 3,
}
arr = Array.from(temp);//[1, 2, 3]
arr = Array.from(temp, item=>item*10);//[10, 20, 30]
arr = Array.from('hello');//["h", "e", "l", "l", "o"]

如果參數是一個數組，那麼Array.from會返回一個一模一樣的新數組。

arr = Array.from([1,2,3]);//[1, 2, 3]

4.entries(),keys(),values()

entries() 方法返回一個數組的迭代對象，該對象包含數組的鍵值對 (key/value)。可用於for of操作。
entries()是對鍵值對的遍歷、keys()是對鍵名的遍歷、values()是對鍵值的遍歷。

arr = [1,2,3]
for(let key of arr.keys()){
	console.log(key)// 0 1 2
}
for(let value of arr.values()){
	console.log(key)// 1 2 3
}
for(let (key,value) of arr.entries()){
	console.log(key, value)// [0,1]  [1,2]  [2,3]
}

還可以用手動調用next()的方式實現遍歷

arr = [1,2,3]
a = arr.entries();
a.next().value;// [0, 1]
a.next().value;// [1, 2]
a.next().value;// [2, 3]

5.join()

將數組元素轉換爲一個字符串
語法：array.join(separator)

指定要使用的分隔符。默認使用逗號作爲分隔符。

arr = [1,2,3]
arr.join()//"1,2,3"
arr.join('')//"123"

6.數組的添加刪除

• pop() 刪除最後一個元素,影響原數組

arr = [1,2,3]
arr.pop()//返回刪除的值，3
arr//[1,2]

• push() 在最後添加一個或者多個元素,影響原數組

arr = [1,2,3]
arr.push(4)//返回新的長度，4
arr//[1,2,3,4]
arr.push(5,6)
arr//[1,2,3,4,5,6]
arr.push([7])
arr//[1,2,3,4,5,6,[7]]

• shift() 刪除第一個元素,影響原數組

arr = [1,2,3]
arr.shift()//返回刪除的值，1
arr//[2,3]

• unshift() 在最前添加一個或者多個元素,影響原數組

arr = [2,3]
arr.unshift(1,2)//返回新的長度，4
arr//[1,2,2,3]

• slice(start, end) 截取數組的一部分,不影響原數組

start	截取開始的位置，包括 ，爲負數時 -1對應最後一個元素
end	截取結束的位置，不包括，默認到數組結束

arr = [1,2,3,4,5]
arr.slice(1,3)//[2,3]
arr//[1,2,3,4,5]
arr.slice(-2)//[4,5]
arr//[1,2,3,4,5]

• splice(start, num, item1,item2,…) 刪除或者替換區域內元素,影響原數組

start	開始的位置
num	刪除的個數，默認到數組結束
item	新增的元素

arr = [1,2,3,4,5]
arr.splice(1,2)//[2,3]
arr//[1,4,5]

arr = [1,2,3,4,5]
arr.splice(1,2,'item1', 'item2', 'item3')//[2,3]
arr//[1, "item1", "item2", "item3", 4, 5]

7.map()

對數組中每個元素進行處理，然後返回一個新的數組，不影響原數組。
需要注意的是，map不會對空數組進行檢測

語法：array.map(function(currentValue,index,arr), thisValue)

currentValue	當前值
index	當前索引
arr	原數組
thisValue	this的指向，默認爲全局對象

arr = [1,2,3]
arr.map(item=>item*10)//[10, 20, 30]
//上面的寫法等價於
arr.map(function(item){
	return item*10
})//[10, 20, 30]

arr//[1,2,3]

8.reduce()，reduceRight()

從數組開始操作到數組結束。返回一個值，不影響原數組
語法：array.reduce(function(total,currentValue,index,arr), initialValue)

total	初始值或計算之後返回的值
currentValue	當前值
index	當前索引
arr	原數組
initialValue	傳遞給函數初始值的值

reduce()是從左往右計算，reduceRight()是從右往左計算。

arr = [1,2,3]
arr.reduce((x,y)=>x+y)//6

reduce()會把結果繼續和下一個元素做累積計算。上一次運算的x+y會放在x中進行下一次運算，直至結束。
reduce()不會對空數組進行操作

arr = []
a = arr.reduce((x,y)=>x+y)//error: Reduce of empty array with no initial value

9.filter()

對內容進行過濾。不影響原數組

語法：array.filter(function(currentValue,index,arr), thisValue)

currentValue	當前值
index	當前索引
arr	原數組
thisValue	this的指向，默認爲全局對象

arr = [1,2,3,4,5];
//獲取所有奇數，關於邏輯與或的知識請自行百度
arr.filter(item=>item&1)//[1,3,5]

arr = ['hello','world','good','nice','csdn'];
arr.filter(item=>item.length>4)//["hello", "world"]

10.every()

所有元素爲真則爲真。不影響原數組
語法：array.every(function(currentValue,index,arr), thisValue)

currentValue	當前值
index	當前索引
arr	原數組
thisValue	this的指向，默認爲全局對象

arr = [1,2,3,4,5];
arr.every(item=>item>1)//false
arr.every(item=>item<6)//true

11.some()

有一個元素爲真則爲真，所有爲假則爲假。不影響原數組

語法：array.some(function(currentValue,index,arr), thisValue)

currentValue	當前值
index	當前索引
arr	原數組
thisValue	this的指向，默認爲全局對象

arr = [1,2,3,4,5];
arr.some(item=>item>4)//true
arr.some(item=>item<1)//false

12.sort()

對數組進行排序處理。默認根據ASCII碼進行排序。如果帶參數，參數必須爲函數。影響原數組

arr = [10, 1, 20, 2];
arr.sort();//[1, 10, 2, 20]
//sort()方法默認把所有元素先轉換爲String再排序，
//因爲字符'1'比字符'2'的ASCII碼小,所以'10'排在了'2'的前面

arr.sort((x, y )=>{return x>y?1:-1});//[1, 2, 10, 20]

arr = ['array','Array', 'sort', 'Sort'];
arr.sort()//["Array", "Sort", "array", "sort"]
//大寫的英文字符的ASCLL碼小於小寫的英文字符的ASCLL碼

arr.sort((x, y )=>{
	x = x.toUpperCase();
	y = y.toUpperCase();
	return x>y?1:-1
});
//["Array", "array", "Sort", "sort"]

13.find(), findIndex(), indexOf(), lastIndexOf()

• find(function(currentValue, index, arr),thisValue)

返回查詢的第一個元素（之後的元素將不會再調用函數）、不會對空數組進行操作、如果沒有符合條件的返回undefined、不影響原數組

currentValue	當前值
index	當前索引
arr	原數組
thisValue	this的指向，默認爲全局對象

arr = [1,2,3,4]
arr.find(item=>item===2)//2
arr.find(item=>item===5)//undefined

• findIndex(function(currentValue, index, arr),thisValue)

返回查詢的第一個元素的索引（之後的元素將不會再調用函數）、不會對空數組進行操作、如果沒有符合條件的返回-1、不影響原數組

currentValue	當前值
index	當前索引
arr	原數組
thisValue	this的指向，默認爲全局對象

arr = [1,2,3,4]
arr.findIndex(item=>item===2)//1
arr.findIndex(item=>item===5)//-1

• indexOf(item, start)

返回 item 的第一次出現的位置，沒有則返回-1。

item	查找的元素
start	開始檢索的位置，有效值0至length-1，默認從開始到結束

arr = [1,2,2,3,4]
arr.indexOf(2)//1,只返回第一次出現的下標
arr.indexOf(2, 3)//-1,從3下標開始檢索，沒有元素2，所以返回-1

• lastIndexOf(item, start)

返回 item 的最後一次出現的位置（即從後往前的第一個），沒有則返回-1。與indexOf()的區別僅僅在於方向不同。

item	查找的元素
start	開始檢索的位置，有效值0至length-1，默認從最後一個元素開始

arr = [1,2,2,3,4]
arr.lastIndexOf(2)//2 ,只返回第一次出現的下標（從後往前的第一個）
arr.lastIndexOf(2, 1)//1,從1下標開始向前檢索
arr.lastIndexOf(2, 0)//-1,從0下標開始向前檢索

14.forEach()

語法：forEach(function(currentValue, index, arr),thisValue)

遍歷數組、不會對空數組進行操作.

currentValue	當前值
index	當前索引
arr	原數組
thisValue	this的指向，默認爲全局對象

arr = [1,2,3,4]
sum = 0
arr.forEach(item=>sum+=item)
sum//10