對於JS中的數組(Array)我們經常使用，今天總結了一下常見的Array方法。
1. length
數組長度
let arr = ['a', 'b', 'c', 'd'];
console.log(arr.length);
2. join()
以指定的字符將數組連接起來，變成字符串
通常和String中的split連用，splint 是以指定字符分割成數組
參數：指定的字符, 如果未傳參則是以逗號(,)分割
let arr = ['a', 'b', 'c', 'd'];
console.log(arr.join('1'));
console.log(arr.join());
console.log(arr.join(''));
3. slice()
按傳入的下標截取數組
參數1：開始截取的位置即下標
參數2：可選 若不傳則默認截取到末尾。若傳入則截取到該下標的前一位，不包括當前下標的一位。
返回值：返回按指定下標截取後的數組(前包後不包)，不會影響原數組 (若想刪除一個數組中的某幾項則用splice())
若傳入負數則從數組的末尾往前數
let arr = ['a', 'b', 'c', 'd', 'e', 'f'];
console.log(arr);
console.log(arr.slice(1, 3));
console.log(arr.slice(1));
console.log(arr.slice(-3));
console.log(arr.slice(-3, -1));
4. splice() 刪除或添加數組
參數1：開始刪除的位置即下標
參數2：可選 刪除元素個數長度。若不傳則默認刪除到最後
參數3,4,5…: 添加的項數
返回值：返回刪除後的數組，會改變原數組
let arr = ['a', 'b', 'c', 'd', 'e', 'f'];
console.log(arr);
console.log(arr.splice(2, 3));
console.log(arr);
let arr1 = ['a', 'b', 'c', 'd', 'e', 'f'];
console.log(arr1);
console.log(arr1.splice(2, 2, 'xx', 'aa'));
console.log(arr1);
5. pop()和push()
pop() 移除數組的最後一項
返回值：返回刪除的項，會改變數組長度
push() 向一個數組後面添加項數
返回值：返回添加後的數組長度， 會改變原來數組
let arr = ['a', 'b', 'c'];
console.log(arr);
console.log(arr.pop());
console.log(arr);
let arr1 = ['a', 'b', 'c'];
console.log(arr1);
console.log(arr1.push('z'));
console.log(arr1);
6. shift()和unshift()
shift() 刪除數組中的第一項
返回值：返回刪除的項 會改變原數組
unshift() 向數組的最前面添加項
返回值：返回新的數組長度， 會改變原數組
let arr = ['a', 'b'];
console.log(arr);
console.log(arr.shift());
console.log(arr);
let arr1 = ['a', 'b'];
console.log(arr1);
console.log(arr1.unshift('x', 'z'));
console.log(arr1);
7. sort()
排序從小到大
返回值: 返回新數組 會改變原數組
let arr = [1, 3, 5, 3, 2, 4];
console.log(arr);
console.log(arr.sort());
console.log(arr);
8. reverse()
數組反轉
返回值：返回新數組，會改變原數組
let arr = [1, 3, 5, 3, 2, 4];
console.log(arr);
console.log(arr.reverse());
console.log(arr);
9. concat()
兩個數組連接
返回值：返回新數組，不會改變原數組
let arr = ['a', 'b'];
let arr1 = ['x', 'z'];
console.log(arr.concat(arr1));
console.log(arr);
console.log(arr1);
10. indexOf()和lastIndexOf()
查找一個數組(從首位開始查詢)中是否存在某個值，若存在返回當前的下標(只能匹配第一次出現)，否則返回-1
參數1：要查找的某個值
參數2：可選 傳入指定的下標，指定從哪個位置開始查詢
lastIndexOf() 查找一個數組(從末尾開始倒着查詢)中是否存在某個值(最後出現的值)，若存在返回當前的下標(只能匹配第一次出現)，否則返回-1
參數1：要查找的某個值
參數2：可選 傳入指定的下標，指定從哪個位置之前查詢
let arr = ['a', 'b', 'c', 'd', 'b', 'e'];
console.log(arr);
console.log(arr.indexOf('b'));
console.log(arr.indexOf('f'));
console.log(arr.indexOf('d', 2));
let arr1 = ['a', 'b', 'c', 'd', 'b', 'e'];
console.log(arr1);
console.log(arr1.lastIndexOf('b'));
console.log(arr1.lastIndexOf('f'));
console.log(arr1.lastIndexOf('d', 3)); // 這裏就是從數組['a', 'b', 'c', 'd'] 查詢是否有'd'
11. every()
檢測數組的每一項是否都符合條件，符合返回true，若有一項不符合則停止檢測返回false
參數：函數，有三個參數分別爲，當前的項，當前項的下標，檢測的數組
注意：不用改變原數組
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.every((item, x, y) => {
console.log(item, x, y)
return item >= 1
})
console.log(arr1);
12. some()
檢測數組中是否存在符合指定的條件，若有符合條件的則停止檢測返回true，否則false
參數：函數， 有三個參數分別爲，當前的項，當前項的下標，檢測的數組
注意：不用改變原數組
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.some((x, y, z) => {
console.log(x, y, z);
return x > 2
})
console.log(arr2);
13. filter()
過濾
檢測數組，返回符合條件的內容， 沒有符合的則返回空數組
參數：函數， 有三個參數分別爲，當前的項，當前項的下標，檢測的數組
注意：不用改變原數組
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.filter((x, y, z) => {
console.log(x, y, z);
return x > 2
})
console.log(arr1);
14. map()
映射
Array.map((item, index) => {})
返回一個新的數組, 新數組中的元素是原數組調用函數後處理過的值
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.map((item, index) => {
return item * index
})
console.log(arr1);
ES6 新增
15. includes()
檢測數組是否存在某個值，存在爲true，否則爲false
參數1：傳入的指定值
參數2：可選，表示搜索的起始位置，默認爲0。若爲負數，則從數組倒着查詢
注意：
如果傳入的值爲整數，其長度大於數組長度則返回false
如果傳入的值爲負數，其長度大於數組長度則重置從0開始查詢
let arr = ['x', 'b', 'a', 'c', 'd', 'e'];
console.log(arr.includes('b'));
console.log(arr.includes('z'));
console.log(arr.includes('a', 1));
console.log(arr.includes('a', 3));
console.log(arr.includes('e', -2)); // 這裏其實是從['d', 'e']中查詢值'e'是否存在
console.log(arr.includes('e', 10));
16. Array.of()
將一組值轉爲數組
如果沒有傳入參數則返回一個空數組[]
其實Array.of()可以代替Array()和new Array() 去創建和聲明一個新數組
console.log(Array.of());
console.log(Array.of('a'));
console.log(Array.of(1, 'a', 3, 'ab'));
console.log(Array.of(1, [1, 'a'], 3, 'ab'));
console.log(Array.of(1, 2, 3, 4, 5));
17. fill()
使用定值去填充一個數組，數組中的元素會被全部抹除
fill() 還會接受參數二和參數三，可以指定填充的起始位置和結束位置(前包後不包)
let arr = ['a', 'b', 'c'];
console.log(arr.fill(1));
let arr1 = ['a', 'b', 'c', 'd', 'e'];
console.log(arr1.fill(2, 2, 4));
18. copyWithin()
將數組中指定的成員項，複製到其他位置(會覆蓋原來的成員)，返回新數組會改變原數組。
參數1：指定從那個位置開始替換數據
參數2：可選，默認從0開始複製。若傳入則從指定位置爲複製的數據，若爲負數則從尾部數
參數3：可選，默認複製到最後。若傳入則從指定位置結果複製的數據，若爲負數則從尾部數
注意：改變原數組的方法有splice()和copyWithin()
let arr = [1, 2, 3, 4, 5, 6];
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8];
let arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr5 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
console.log(arr.copyWithin(4));
console.log(arr);
console.log(arr1.copyWithin(2));
console.log(arr1);
console.log(arr2.copyWithin(3, 4));
console.log(arr3.copyWithin(3, 4, 6));
console.log(arr5.copyWithin(3, -7, -5));
19. find()和findIndex()
find() 用來找出第一個符合條件的成員
參數是一個回調函數，依次查詢每一項，直到查詢到第一個符合條件的成員，並返回該項的值，若不存在則返回undefined
findIndex()
返回的是符合條件的位置，而find()是返回符合條件的項，如果所有成員都不滿足則返回-1
注意：
every() 查詢每一項，如果每一項都符合條件就返回true，如果有一項不符合就停止，返回false
some() 查詢每一項，只要有一項符合條件就返回true，停止查詢，否則返回false
let arr = [1, 2, 3, 4, 5, 6];
let arr1 = arr.find((item, index, arr) => {
console.log(item, index, arr)
return item > 3
})
console.log(arr1);
let arr2 = [1, 2, 3, 1, 3, 5, 4, 5, 6];
let arr3 = arr2.findIndex((item, index, arr) => {
return item > 3
})
console.log(arr3);
20. entries(), keys()和values
keys() 鍵名遍歷
values() 鍵值遍歷
entries() 鍵值對的遍歷
let arr = ['a', 'b', 'c', 'd', 'e'];
for(let i of arr.values()){
console.log(i)
}
for(let i of arr.keys()){
console.log(i)
}
for(let i of arr.entries()){
console.log(i)
}
for(let i of arr){
console.log(i)
}
