經常使用的數組方法

數組方法

js的裏面的數組方法有不少，平時開發中經常使用的如forEach、map、filter等等，接下來是對數組方法的一些使用和總結，方便往後查閱。

1. join()

• 將數組中全部元素都轉化爲字符串並鏈接在一塊兒，返回最後生成的字符串
• 能夠指定一個可選的字符串在生成的字符串中來分隔數組的各個元素，默認爲逗號

var a = [1,2,3,4]
console.log(a.join()); // "1,2,3,4"
console.log(a.join(""); // "1234"
console.log(a.join(" ")); // "1 2 3 4"
console.log(a.join("-")); // "1-2-3-4"
複製代碼

2. reverse()

• 將數組中的元素倒敘排序，返回逆序的數據
• 不從新生成數組，而是在原先數組的基礎上進行從新排列

var a = ['a','b','c','d']
console.log(a.reverse()); // ["d", "c", "b", "a"]
複製代碼

3. sort()

• 將數組中的元素排序並返回排序後的數組（按升序）
• 當不帶參數調用sort時，數組元素以字母表的順序排序

var a = ['aa', 'dd', 'bb', 'cc']
console.log(a.sort()); // ["aa", "bb", "cc", "dd"]
var a = [20,10,5,2,3,4]
console.log(a.sort()); // [10,2,20,3,4,5] ???? 沒有進行排序？？？
複製代碼

-這種狀況是why？

緣由：[在排序的時候，sort方法會去調用數組每一項的toString方法，無論數組元素是什麼類型，都將轉成字符串進行比較]

能夠經過如下方式來解決上述問題

var a = [20,10,5,2,3,4]
  function sequence(a,b){
5   return a - b;
6  }
7  console.log(arr.sort(sequence)); // [2,3,4,5,10,20]
//[總結]：
// A.若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。
// B.若 a 等於 b，則返回 0。
// C.若 a 大於 b，則返回一個大於 0 的值
複製代碼

4. concat()

• 鏈接兩個或多個數組
• 返回一個新的數組，不改變原數組

var a = ['a','b']
console.log(a.concat([3,4,5])) // ["a", "b", 3, 4, 5]
console.log(a) // ['a','b']
複製代碼

5. push()和pop()

• push(): 在數組末尾添加元素，返回數組長度，會改變原數組
• pop(): 刪除數組最後一項，返回刪除的元素,會改變原數組

var a = ['a','b']
console.log(a.push('c')) // 3 返回數組長度
console.log(a) // ['a','b','c']
console.log(a.pop()) // 'c' 返回末尾刪除的元素
console.log(a) // ['a','b']
複製代碼

6.shift()和unshift()

• shift(): 刪除數組的第一項，返回刪除元素的值,會改變原數組
• unshift(): 在數組第一項前面添加元素，返回添加後數組長度，會改變原數組

var a = ['a','b']
console.log(a.shift()) // 'a' 返回刪除第一項元素
console.log(a) // ['b','c']
console.log(a.unshift()) // 3 返回添加元素後數組長度
console.log(a) // ['a','b','c']
var a = []
console.log(a.shift()) // undefined 當數組爲空時，返回undefined
複製代碼

7.slice

• 返回數組中指定範圍（下標）的數組元素組成的新數組
• 能夠接受1或2個參數
• 1個參數表示的時數組的當前位置開始一直到數組末尾的全部項
• 2個參數則表示從起始位置至結束位置之間的全部項，但不包含結束位置項
• 不改變原數組

var a = [1,3,5,7,9]
console.log(a.slice(2)) // [5,7,9] 從下標2開始一直截取到最後
console.log(a) // [1,3,5,7,9]
console.log(a.slice(2,4)) [5,7] // 從下標2開始截取到下標4的元素，不包含下標爲4的值
console.log(a.slice()) // [1,3,5,7,9]
console.log(a.slice(1,-2)) // [3,5] 終止下標爲負數，出現負數時，將負數加上數組長度的值來替換該位置的數（1，3）
console.log(a.slice(-4,-1)) // [3,5,7] 兩個值都爲負數時，都加上數組長度值（1，4）
複製代碼

8.splice

• 能夠實現數組的插入、刪除和替換
• 2個參數時，能夠做刪除操做，分別表示要刪除數組第一個元素的位置和項數
• 3個參數時，能夠作插入操做，分別表示起始位置、刪除的項數（0）、插入的項
• 3個參數，能夠做替換操做，分別表示起始位置、刪除的項數、插入的項
• 改變原數組

var a = [1,3,5,7,9]
console.log(a.splice(1,3)) // [3,5,7]
console.log(a) // [1,9]
var a = [1,3,5,7,9]
console.log(a.splice(1,0,2,3)) // [1,2,3,3,5,7,9]
var a = [1,3,5,7,9]
console.log(a.splice(1,2,2,3) // [1,2,3,7,9]
複製代碼

9.indexOf()和 lastIndexOf()

• indexOf(): 接受兩個參數，第一個表示要查找的元素，第二個表示起點位置索引，從數組的首位向後找，返回元素下標
• lastIndexOf(): 接受兩個參數，第一個表示要查找的元素，第二個表示起點位置索引，從數組末尾向前找，返回元素下標

var a = [1,3,5,7,9]
console.log(a.indexOf(9)) // 4
console.log(a.lastIndexOf(9)) // 4
var a = [1,3,3,5,7,7,9]
console.log(a.indexOf(3)) // 1 默認從前向後找
console.log(a.lastIndexOf(3)) // 2 默認從後向前找
複製代碼

10.forEach()

• 對數組進行遍歷循環

var arr = [1,3,5,7,9];
arr.forEach(function(item, index, arr){
console.log(item + '-' + index + '-' + (arr === arr));
});
// 1-0-true 3-1-true 5-2-true 7-3-true 9-4-true
// item表示數組每項的值，index表示下標，arr原數組
複製代碼

11.map()

• 對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組

var arr = [1,3,5,7,9];
var arr2 = arr.map(function(item){
return item*2
});
console.log(arr2) // [2,6,10,14,18]
複製代碼

12.filter()

• 對數組中的每一項運行給定函數，返回知足條件的元素組成的數組

var arr = [1,3,5,7,9];
var arr2 = arr.filter(function(item,index){
return item > 3
});
console.log(arr2) // [5,7,9]
複製代碼

13.every()

• 判斷數組中的每一項是否知足條件，只有當每一項都知足才返回true

var arr = [1,3,5,7,9];
var arr2 = arr.every(function(item){
return item < 10
});
console.log(arr2) // true

var arr2 = arr.every(function(item){
return item > 1
});
console.log(arr2) // false
複製代碼

14.some()

• 判斷數組中的每一項是否知足條件，只要有一項都知足就返回true

var arr = [1,3,5,7,9];
var arr2 = arr.some(function(item){
return item = 9
});
console.log(arr2) // true

var arr2 = arr.some(function(item){
return item > 10
});
console.log(arr2) // false
複製代碼

15.reduce()和 reduceRight()

• 這兩個方法都是用來迭代數組的全部項，最終會有一個返回值
• reduce()：從數組的第一項開始，逐個遍歷至最後一項
• reduceRight(): 從數組最後一項開始，遍歷至第一項
• 接受兩個參數：（1）每項調用的函數 （2）初始值
• 函數裏面包含四個參數：前一個值、當前值、元素索引和數組對象，該函數返回的任何值都會做爲一個參數傳給下一項，第一次迭代發生在數組的第二項上，所以第一個參數是數組的第一項，第二個參數就是數組的第二項

var arr = [1,3,5,7,9];
var sum = arr.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum) // 35
複製代碼