JS 數組方法學習彙總

前言 在 JS 中咱們數組用的是比較多的了，它自帶了不少方法能夠用，省去了咱們時間，特別是 ES6 當中對數組的擴展讓數組具備了更強大的功能，爲了之後使用數組的時候可以充分發揮數組的特性，在這裏對數組的方法進行一次彙總吧。

說明 標題後的標識 * 是說明該方法會改變原數組

對數組元素的操做

push() & pop() *

push() 向數組的末尾添加一個或更多元素（就是傳進去的參數），並返回新的長度。

pop() 刪除並返回數組的最後一個元素。

具體效果看代碼

let arr = [1,2,3];
let res1 = arr.push(5);
console.log(res1); // 4 arr的長度

console.log(arr); // [1,2,3,5] 

let res2 = arr.pop();
console.log(res2); // 5 移除的數組項

console.log(arr); // [1,2,3]

shift() & unshift() *

shift() 刪除並返回數組的第一個元素

unshift() 向數組的頭部添加一個或者多個元素（傳入的參數），並返回新的長度。

具體效果看代碼

let arr = [1,2,3];
let res1 = arr.shift();
console.log(res1); // 1 移除的數組項

console.log(arr); // [2,3] 

let res2 = arr.unshift(5,7);
console.log(res2); // 4 數組新長度

console.log(arr); // [5,7,2,3]

slice()

這個方法是從某個已有的數組返回選定的元素。通常帶兩參數 par1 和 par2，方法返回原數組 [par1, par2) 區間內的值組成的新數組。若是隻有一個參數 par1 的話，就返回原數組 [par1，數組尾] 區間內的值組成的新數組。
具體看代碼

let arr = [1,2,3];
console.log(arr.slice(1,2)); // [2]
console.log(arr.slice(1)); // [2,3]

console.log(arr); // [1,2,3]

splice() *

這個方法有點複雜了，他是從原數組中刪除/添加項目,並返回刪除的項目。具體是刪除仍是添加，看參數決定，它至少須要兩個參數 index，deleteCount，分別指代要開始刪除/添加項目的下標 index 和要刪除的項目的個數 deleteCount，後面若是其餘參數統統就是要加入 index 位置後面的項目了。看代碼就知道一切了。

let arr = [0,1,2,3,4];
// 刪除操作
console.log(arr.splice(0,2)); // [0,1] 從 下標 0 的位置開始刪除兩個元素，並返回。  
console.log(arr); // [2,3,4] 刪除後就剩它仨了

// 添加操做
console.log(arr.splice(1, 0, 5, 6, 7)); // [] 第二個參數 0 ，那就沒有刪除啥元素咯，而後在下標 1 的位置開始插入
console.log(arr); // [2, 5, 6, 7, 3, 4] 

// 替換操做
console.log(arr.splice(1,1,2)); // [5]
console.log(arr); // [2, 2, 6, 7, 3, 4 ]

這個方法是很強大的，能夠用它來實現數組元素的刪除，替換，添加的操做，看上面代碼就知道啦。

整個數組的大操做(轉換&拼接&排序&倒置)

join()

這個方法是將數組轉換爲字符串，數組元素間用傳進去的參數（ 沒有參數就用,） 分隔

let arr = [1,2,3,4,5];
console.log(arr.join('|')); // 1|2|3|4|5
console.log(arr.join()); // 1,2,3,4,5

concat()

這個方法用於拼接兩個數組並返回一個新的數組。

let arr = [1,2,3,4,5];
console.log(arr.concat([6,7,8])); // [ 1, 2, 3, 4, 5, 6, 7, 8 ]

sort() *

這個就不用講了吧，排序，不過默認的排序方法是把數字當成字符串來排序的，因此就會有了下面代碼中的問題，也有了咱們關於排序的重寫。

let arr = [1,22,13,4,5];
arr.sort();
console.log(arr) // [ 1, 13, 22, 4, 5 ] 由於 22 的第一個字符是 2 比 4 小，因此 22 比 4 小。。。 

arr.sort(function(val1,val2){
  return val1-val2;
})
console.log(arr); // [ 1, 13, 22, 4, 5 ]

reverse() *

如其名，倒置數組的元素。

let arr = [1,22,13,4,5];
arr.reverse();
console.log(arr) // [ 5, 4, 13, 22, 1 ]

toString() & toLocaleString() & valueOf()

這三個方法，是個對象就會有，數組對象也不例外，也順便寫出來看看吧，具體啥效果，看代碼吧。

let arr = [1,22,13,4,5];
console.log(arr.toString()); // 1,22,13,4,5
console.log(arr.toLocaleString()); // 1,22,13,4,5
console.log(arr.valueOf()); // [ 1, 22, 13, 4, 5 ]

數組位置方法

indexOf() & lastIndexOf()

這個用於查找數組中的元素，找到後返回元素的下標，找不到的話就返回 -1。兩個方法都是同樣的，只不過一個從頭至尾找，一個從尾到頭找

let arr = [1,22,13,4,5];
console.log(arr.indexOf(13)); // 2
console.log(arr.lastIndexOf(22)); // 1
console.log(arr.indexOf(44)); // -1

迭代方法

every() & some()

every() 對數組每一項運行一個函數，若是該函數對每一項都返回 true，則總體返回 true

some() 這個和上面同樣啦，不過這個只要有一項是 true，總體就返回 true

具體看代碼啦

let arr = [1, 2, 3, 4, 5];
console.log(
  arr.every(function (item, index, array) {
    return (item > 2)
  })
);  // false
console.log(
  arr.some(function (item, index, array) {
    return (item > 2)
  })
); // true

forEach()

這個是對數組中的每一項運行給定函數，沒有返回值。看代碼吧

let arr = [1,2,3,4,5]
// 打印整個數組
arr.forEach(function(item){
  console.log(item);
});

map()

這個方法是對數組的每一項運行給定函數，返回每一項返回結果組成的數組。

let arr = [1,2,3,4,5]
let newArr = arr.map(function(item){
  return item+1
});
console.log(newArr); // [ 2, 3, 4, 5, 6 ]

filter()

這個方法是對數組的每一項運行給定函數，返回該函數會返回爲 true 的數組項組成的新數組。

let arr = [1,2,3,4,5]
let newArr = arr.filter(function(item){
  return item > 2
});
console.log(newArr); // [ 3, 4, 5 ]

ES6 擴展的數組方法

Array.from() 對象轉爲數組

這個方法用於將兩類對象轉爲真正的數組，分別是類數組對象和可遍歷對象（包括 ES6 新增的數據結構 Set 和 Map）用法就看代碼吧

let arrLike = {
  '0':'1',
  '1':'2',
  '2':'2',
  length:'3'
}
 
let arr = Array.from( arrLike);
console.log(arr); // [ '1', '2', '2' ]

在實際應用中，DOM 操做返回的 NodeList 集合就是一個類數組對象。

Array.of() 值轉爲數組

這個是用來替代 Array() 或 new Array()的，爲啥要替換，來段代碼感覺下就知道了

console.log(Array()); // []
console.log(Array(3)); // [, , ,]
console.log(Array(1, 2, 3)); // [ 1, 2, 3 ]

console.log(Array.of()); // []
console.log(Array.of(undefined)); // [undefined]
console.log(Array.of(3)); // [3]
console.log(Array.of(1, 2, 3)); // [ 1, 2, 3 ]

看出門道了吧，Array() 會由於參數不一樣會有不一樣的效果，而 Array.of() 就不會存在這種問題啦。

copyWithin() 數組內成員複製 *

這個方法有點迷，暫時不知道是用來幹啥的，可是也記一下它能幹啥，沒準之後就用上了。
它的話是在當前數組內部將指定位置的成員複製到其餘位置（覆蓋掉原有成員），而後返回該數組。他有下面三個參數

• target（必選）：從該位置開始替換數據
• start（可選）：從該位置讀取數據，默認 0。若是爲負值，表示倒數。
• end（可選）：到該位置前中止讀取數據，默認是數組長度，若是爲負值，表示倒數。

具體有啥效果就看代碼吧

let arr = [1, 2, 3, 6, 5];
// 從下標 0 開始換 下標 1（也就是 2）開始的數據，一直替換到 下標 4 前（也就是到 arr[3] 結束）
// 人話說就是 arr[0] 到 arr[4-2] 的值被 arr[1] 到 arr[4-1] 的值替換掉
console.log(arr.copyWithin(0, 1, 4)); // [ 2, 3, 6, 6, 5 ]


arr2 = [0, 1, 2, 3, 4, 5, 6];
console.log(arr2.copyWithin(1, 3, 6)); // [ 0, 3, 4, 5, 4, 5, 6 ]

find() & findIndex() 查找數組元素

find() 用於查找符合第一個符合條件的數組成員，並將其返回。若是沒有的話，就返回 undefined。

findIndex() 和上面同樣，不過他返回的是那個符合條件的數組的下標。

啥效果就看代碼吧

let arr = [0, 1, 2, 3, 5, 5, 6];
arr.find(function (value, index, arr) {
 return value > 4;
})  // 返回數值 5 

arr.findIndex(function (value, index, arr) {
 return value > 4;
}) // 返回下標 4

### fill() 數組填充
這個方法是用給定值填充一個數組。初始化數組的時候能夠用到。它有三個參數：
value 填充數組的值
start 填充的起始位置
end 填充的結束位置

[1, 2, 3].fill('a') // [ 'a', 'a', 'a' ]
[1, 2, 3, 4, 5].fill('a', 2, 4) // [ 1, 2, 'a', 'a', 5 ]

entries() & key() & values() 遍歷數組

這三個都會返回一個迭代器對象，能夠用 for...of 循環遍歷，區別是，entries() 遍歷鍵值對，keys() 遍歷鍵名，values() 遍歷鍵值，啥效果看代碼。

let arr = [1, 2];
for (let [index, ele] of arr.entries()) {
  console.log(index, ele);
} // 0 1  1 2
for (let index of arr.keys()) {
  console.log(index);
} // 0  1
for (let ele of arr.values()) {
  console.log(ele);
} // 1 2

includes() 判斷數組是否有某值

這個方法如其名，用於判斷數組內是否有某個值，若是有，返回 true，沒有，返回 false。他若是有第二個參數的話，那麼第二個參數表示開始搜索的位置。

let arr=[1,2,3,4,5,6,7];
arr.includes(1) // true
arr.includes(1,5) // false 從下標 5 開始搜沒有 1

關於數組的的方法，就總結道這邊了，若是還有遺漏或者錯誤的地方的話，就麻煩下下面評論修正啦。