超詳細的js陣列方法（總結）

在平時的開發中我們經常會用的陣列的內置方法，也是面試最常問到的東西，陣列是js中最常用到的資料集合，其內置的方法有很多，熟練掌握這些方法，可以有效的提高我們的作業效率，同時對我們的代碼質量也是有很大影響，

創建陣列

1. 字面量表示

let arr = [] // 創建一個空陣列
let arr1 = [1, 2] // 創建一個包含兩項資料的陣列

2. 使用Array建構式

• 無引數構造

let arr = new Array() // 創建一個空陣列

• 帶引數構造

如果只傳一個數值引數，則表示創建一個初始長度為指定數值的空陣列

let arr = new Array(5) // 創建一個陣列長度為5的空陣列

如果傳入一個非數值的引數或者引數個數大于 1，則表示創建一個包含指定元素的陣列

let arr = new Array(1,2,3) // 創建一個包含3個數值的陣列

陣列方法大全

陣列原型方法主要有以下這些：

• join()：回傳值為用指定的分隔符將陣列每一項拼接的字串
• push()：向陣列的末尾添加元素，回傳值是當前陣列的length(修改原陣列)
• pop()：洗掉陣列末尾的元素,回傳值是被洗掉的元素（修改原陣列）
• shift()：洗掉首位元素，回傳值是被洗掉的元素（修改原陣列）
• unshift()：向首位添加元素，回傳值是陣列的長度（修改原陣列）
• slice()：回傳陣列中指定起始下標和結束下標之間的（不包含結束位置）元素組成的新陣列
• splice()：對陣列進行增刪改（修改原陣列）
• fill()：使用特定值填充陣列中的一個或多個元素(修改原陣列)
• filter()：過濾,陣列中的每一項運行給定函式，回傳滿足過濾條件組成的陣列
• concat()：用于連接兩個或多個陣列
• indexOf()：回傳當前值在陣列中第一次出現位置的索引
• lastIndexOf()：回傳查找的字串最后出現的位置，如果沒有找到匹配字串則回傳 -1，
• every()：判斷陣列中每一項是否都符合條件
• some()：判斷陣列中是否存在滿足的項
• includes()：判斷一個陣列是否包含指定的值
• sort()：對數字的元素進行排序(修改原陣列)
• reverse()：對陣列進行倒敘(修改原陣列)
• forEach()：回圈遍歷陣列每一項（沒有回傳值）
• map()：回圈遍歷陣列的每一項（有回傳值）
• copyWithin(): 從陣列的指定位置拷貝元素到陣列的另一個指定位置中（修改原陣列）
• find(): 回傳第一個匹配的值，并停止查找
• findIndex(): 回傳第一個匹配值的索引，并停止查找
• toLocaleString()、toString():將陣列轉換為字串
• flat()、flatMap()：扁平化陣列
• entries() 、keys() 、values():遍歷陣列

方法示例

1. join()
   將所有陣列元素結合為一個字串,它的行為類似 toString()，但是您還可以規定分隔符,原陣列不變

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

3. push()和 pop()
   push() 向陣列末尾添加元素，可以添加一個或多個元素
   pop() 洗掉陣列的最后一個元素并回傳洗掉的元素

let arr = [1, 2, 3, 4, 5]
let arr1 = arr.push(6, 7)  
console.log(arr1) // 7
console.log(arr) // [1, 2, 3, 4, 5, 6, 7]

let arr = [1, 2, 3, 4, 5]
let arr2 = arr.pop()
console.log(arr2);   // 5
console.log(arr);   // [1, 2, 3, 4]

4. shift和unshift
   shift洗掉首位元素，回傳值是被洗掉的元素
   unshift 向首位添加元素，回傳值是陣列的長度

let arr = [1, 2, 3, 4, 5]
let arr2 = arr.shift()
console.log(arr2)  // 1
console.log(arr)  // [2,3,4,5]

let arr = [1, 2, 3, 4, 5]
let arr2 = arr.unshift(0)
console.log(arr2)  // 6
console.log(arr)  // [0,1,2,3,4,5]

5. slice(起始下標，結束下標)回傳陣列中指定起始下標和結束下標之間的（不包含結束位置）元素組成的新陣列，只有一個引數就回傳從該引數下標到當前陣列末尾的所有元素,當出現負數時，將負數加上陣列長度的值（6）來替換該位置的數

let arr = [1, 2, 3, 4, 5]

let arr1 = arr.slice(1)
console.log(arr1)  //[2, 3, 4, 5]
let arr2 = arr.slice(1,3)
console.log(arr2) // [2, 3]
let arr3 = arr.slice(1, -2)
console.log(arr3) // [2, 3]
console.log(arr) // [1, 2, 3, 4, 5]

6. splice()

• splice(index, howmany, item1, ....., itemX)
  index 必需，指定在什么位置添加/洗掉專案，使用負值指定從陣列末尾開始的位置，
  howmany 可選，要洗掉的專案數，如果設定為 0，則不會洗掉任何專案，
  item1, ..., itemX 可選，要添加到陣列中的新專案，

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

7. fill(value, start, end)es6新增
   使用制定的元素填充陣列，其實就是用默認內容初始化陣列
   value：填充值，
   start：填充起始位置，可以省略，
   end：填充結束位置，可以省略，實際結束位置是end-1，

let arr = [1, 2, 3, 4, 5]
let arr1 = arr.fill(6);
console.log(arr1) // [6, 6, 6, 6, 6]
console.log(arr) // [6, 6, 6, 6, 6]

let arr2 = arr.fill(6, 1, 2);
console.log(arr2) // [1, 6, 3, 4, 5]

8. filter()

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

9. concat（）
   用于連接兩個或多個陣列，不會改變原有陣列回傳一個陣列的副本

let arr = [1, 2, 3, 4, 5]
let arr1 = ['a', 'b', 'c', 'd']

let arr3= arr.concat(6,arr1)
console.log(arr)  // [1, 2, 3, 4, 5]
console.log(arr1)  // ['a', 'b', 'c', 'd']
console.log(arr3)  // [1, 2, 3, 4, 5, 6, 'a', 'b', 'c', 'd']

可以看到第一個引數不是陣列，但concat方法還是把它拼接到了arr陣列的后面
10. indexOf(item,start)和lastIndexOf(item,start)
item 查找的元素
start 可選的整數引數，開始檢索的位置，如省略該引數，則將從字串的首字符開始檢索，
item 查找的元素
start 可選的整數引數，開始檢索的位置，如省略該引數，則將從字串的最后一個字符處開始檢索，

let arr = [1, 2, 3, 4, 5, 6, 3]
console.log(arr.indexOf(3)) // 2
console.log(arr.lastIndexOf(3)) // 6
console.log(arr.indexOf(3, 2)) // 2
console.log(arr.lastIndexOf(3,4)) // 2
console.log(arr.indexOf("3")) // -1

11. every()判斷陣列中每一項都是否滿足條件，只有所有項都滿足條件，才會回傳 true，

let arr = [1, 2, 3, 4, 5, 6, 10, 11]
let arr2 = arr.every(function(x) {
 return x < 10;
})
console.log(arr2);  // false
let arr3 = arr.every(function(x) {
 return x < 20;
})
console.log(arr3);  // true

12. some()判斷陣列中是否存在滿足條件的項，只要有一項滿足條件，就會回傳 true

let arr = [1, 2, 3, 4, 5, 6, 10, 11]
let arr2 = arr.some(function(x) {
 return x < 10
});
console.log(arr2);  // true
let arr3 = arr.some(function(x) {
 return x > 20
});
console.log(arr3);  // false

13. includes(searchElement，fromIndex) es7 新增,檢測陣列中是否包含一個指定的值，如果是回傳true，否則false，
    searchElement 需要查找的元素
    fromIndex 可選，從該索引處開始查找，默認為 0，

let arr = [1, 2, 3, 4, 5, 6, 10, 11]
let arr1 = arr.includes(31);
console.log(arr1); // false
let arr2 = arr.includes(6, 3)
console.log(arr2); // true

14. sort()
    對陣列元素排序，沒有引數時按照字母順序（字符編碼的順序）進行排序

let arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort());   // ["a", "b", "c", "d"]
let arr2 = [13, 24, 51, 3];
console.log(arr2.sort());   // [13, 24, 3, 51]
console.log(arr2);   // [13, 24, 3, 51](原陣列被改變)

array.sort(compareFunction)可以通過提供“比較函式”來排序，該函式應回傳負值、零值或正值，具體取決于引數，例如：
function(a, b){return a-b}
如果第一個引數應該位于第二個之前則回傳一個負數，如果兩個引數相等則回傳 0，如果第一個引數應該位于第二個之后則回傳一個正數，
15. reverse（）
用于顛倒陣列中元素的順序

let arr = [13, 24, 51, 3];
console.log(arr.reverse());   //[3, 51, 24, 13]
console.log(arr);   //[3, 51, 24, 13](原陣列改變)

16. forEach()對陣列進行遍歷回圈，對陣列中的每一項運行給定函式，沒有回傳值
    array.forEach(function(currentValue, index, arr),thisValue)

function(currentValue, index, arr) 必需，為陣列中的每個元素運行的函式，

• currentValue 必需，當前值，
• index 可選，索引，
• arr 可選，當前元素所屬的陣列物件
  thisValue 可選，要傳遞給函式以用作其 "this" 值的值，如果此引數為空，則值 "undefined" 將作為其 "this" 值傳遞，

let arr = [1, 2, 3, 4]
arr.forEach((item,index,ar) => {
  console.log(item + '|' + index + '|' + (ar === arr))
})
1|0|true
2|1|true
3|2|true
4|3|true

17. map()對陣列中的每一項運行給定函式并回傳處理后的值,不會改變原陣列

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

18. copyWithin(target, start, end) [es6 新增]從陣列的指定位置拷貝元素到陣列的另一個指定位置中
    target 必需，復制到指定目標索引位置，
    start 可選，元素復制的起始位置，
    end 可選，停止復制的索引位置 (默認為 array.length)，如果為負值，表示倒數，

let arr = [1, 2, 3, 4, 5, 6, 10, 11]
arr.copyWithin(1, 2, 3);
console.log(arr) // [1, 3, 3, 4, 5, 6, 10, 11]

19. find((currentValue, index, arr) => {}, thisValue)和 findIndex((currentValue, index, arr) => {}, thisValue)
    (currentValue, index, arr) => {} 必需，為陣列中的每個元素運行的函式，

• currentValue 必需，當前元素值，
• index 可選，當前元素的索引，
• arr 可選，當前元素所屬的陣列物件
  thisValue 可選，要傳遞給函式以用作其 "this" 值的值，如果此引數為空，則值 "undefined" 將作為其 "this" 值傳遞，
  二者的區別是：find()方法回傳匹配的值，而 findIndex()回傳匹配位置的索引，

let arr = [1, 2, 3, 4, 5, 6, 10, 11]
let a = arr.find((value, keys, arr) => {
    return value > 2;
}) 
console.log(a) // 3 回傳匹配的值
let b = arr.findIndex((value, keys, arr) => {
    return value > 2;
}) 
console.log(b) // 2 回傳匹配位置的索引

find()和findIndex()方法都會在回呼函式第一次查找結果為true時停止查找并回傳第一個匹配的值
20. toLocaleString()和toString()講陣列轉換為字串

let arr = [1, 2, 3, 4, 5, 6, 10, 11]
const str = arr.toLocaleString();
const str1 = arr.toString()
console.log(str); // 1,2,3,4,5,6,10,11
console.log(str1); // 1,2,3,4,5,6,10,11

21. flat()、flatMap() [es6 新增]
    flat()回傳一個扁平化的陣列
    引數： 指定要提取嵌套陣列的結構深度，使用Infinity，可展開任意深度的嵌套陣列，默認值為 1

let arr = [0, 1, 2, [3, 4]]
let arr1 = arr.flat()
console.log(arr) // [0, 1, 2, [3, 4]]
console.log(arr1) // [0, 1, 2, 3, 4]

let arr2 = [0, 1, 2, [[[3, 4]]]]
let arr3 = arr2.flat(2)
console.log(arr3) // [0, 1, 2, [3, 4]]

let arr4 = arr2.flat(Infinity)
console.log(arr4)// [0, 1, 2, 3, 4]

// 如果原陣列有空項，flat()方法會跳過空項
let arr5 = [1, 2, , 4, 5];
let arr6 = arr5.flat();
console.log(arr6) // [1, 2, 4, 5]

flatMap()對陣列的每個成員執行函式，相當于執行Array.prototype.map(),然后對回傳值組成的陣列執行flat()方法，

// 相當于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

21. entries() 、keys() 、values()[es6 新增]
    entries()，keys()和values() —— 用于遍歷陣列，它們都回傳一個遍歷器物件，可以用for...of回圈進行遍歷
    區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷

let arr = ['a', 'b', 'c', 'd']
for (let index of arr.keys()) {  
  console.log(index)
}  
// 0  
// 1  
// 2
// 3
for (let item of arr.values()) {  
  console.log(item)
}  
// a   
// b   
// c
// d
for (let [index, item] of arr.entries()) {  
  console.log(index, item)
}  
// 0 "a"  
// 1 "b"
// 3 "c"  
// 4 "d"

或者手動呼叫遍歷器物件的next方法，進行遍歷

let arr = ['a', 'b', 'c', 'd']
let item = arr.entries()
console.log(item.next().value) // [0,  a ]  
console.log(item.next().value) // [1,  b ]  
console.log(item.next().value) // [2,  c ]
console.log(item.next().value) // [3,  d ]
console.log(item.next().value) // undefined

標籤：其他

上一篇：3個CSS影片庫，比Animated還好用，讓你的網站酷炫起來

下一篇：js陣列詳細操作方法及決議合集