JS陣列方法（ES5、ES6）-有解無憂

1. arr.push() 從后面添加元素，添加一個或多個，回傳值為添加完后的陣列長度

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

2. arr.pop() 從后面洗掉元素，只能是一個，回傳值是洗掉的元素

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

3. arr.shift() 從前面洗掉元素，只能是一個，回傳值是洗掉的元素

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

4. arr.unshift() 從前面添加元素，添加一個或多個，回傳值是添加完后的陣列的長度

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

5. arr.splice(index,num) 洗掉從index（索引值）開始之后的那num個元素，回傳值是洗掉的元素陣列

　　引數：index 索引值，num 個數

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

7. str.split() 將字串轉化為陣列

let str = '12345'
console.log(str.split(''))  // ["1","2","3","4","5"]

let str1 = '1/2/3/4/5'
console.log(str1.split('/'))  // ["1","2","3","4","5"]

8. arr.concat() 連接兩個陣列，回傳值是連接后的新陣列

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

9. arr.sort() 將陣列進行排序，回傳值是排好的陣列，默認是按照最左邊的數字進行排序（非數字整體大小）

1 let arr = [40,8,10,5,79,3]
2 console.log(arr.sort())  // [10,3,40,5,79,8]
3 
4 let arr2 = arr.sort((a,b) => a - b)
5 console.log(arr2)  // [3,5,8,10,40,79]
6 
7 let arr3 = arr.sort((a,b) => b - a)
8 console.log(arr3)  // [79,40,10,8,5,3]

9. arr.reverse() 將原陣列反轉，回傳值是反轉后的陣列

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

10. arr.slice(start, end) 切去索引值start到索引值end（不包含end的值）的陣列，回傳值是切出去的陣列

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

11. arr.forEach(callback) 遍歷陣列，無回傳值

 1 let arr = [1,2,3,4,5]
 2 arr.forEach((value, index, array) => {
 3    console.log(`value--${value}    index--${index}    array--${array}`) 
 4 })
 5 
 6 // value--1    index--0    array--1,2,3,4,5
 7 // value--2    index--1    array--1,2,3,4,5
 8 // value--3    index--2    array--1,2,3,4,5
 9 // value--4    index--3    array--1,2,3,4,5
10 // value--5    index--4    array--1,2,3,4,5

12. arr.map(callbak) 遍歷陣列(對原陣列的值進行操作)，回傳一個新陣列

1 let arr = [1,2,3,4,5]
2 let arr2 = arr.map( (value, index, array)=>{
3       return value = https://www.cnblogs.com/Faith-Yin/p/value * 2
4 })   
5 console.log(arr2) // [2,4,6,8,10]

13. arr.filter(callback) 過濾陣列，回傳一個滿足要求的陣列

1 let arr = [1,2,3,4,5]
2 let arr2 = arr.filter((value, index) => value >2)
3 console.log(arr2)  // [3,4,5]

14. arr.every(callback) 根據判斷條件，遍歷陣列中的元素，是否都滿足，若都滿足則回傳true，反之回傳false

1 let arr = [1,2,3,4,5]
2 
3 let arr2 = arr.every((value, index) => i > 2)
4 console.log(arr2)  // false
5 
6 let arr3 = arr.every((value, index) => i > 0)
7 console.log(arr3)  // true

15. arr.some(callback) 根據判斷條件，遍歷陣列中的元素，是否存在至少有一個滿足，若存在則回傳true，反之回傳false

1 let arr = [1,2,3,4,5]
2 
3 let arr2 = arr.some((value, index) => i > 2)
4 console.log(arr2)  // true
5 
6 let arr3 = arr.some((value, index) => i > 5)
7 console.log(arr3)  // false

16. arr.indexOf() 從前往后查找某個元素的索引值，若有重復的，則回傳第一個查到的索引值，若不存在，回傳 -1

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

17. arr.lastIndexOf() 從后往前查找某個元素的索引值，若有重復的，則回傳第一個查到的索引值，若不存在，回傳 -1

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

18. Array.from() [ES6]將偽陣列變成陣列，只要有length的就可以轉成陣列

1 let str = '12345'
2 console.log(Array.from(str))    // ["1", "2", "3", "4", "5"]
3 
4 let obj = {0:'a',1:'b',length:2}
5 console.log(Array.from(obj))   // ["a", "b"]

19. Array.of() [ES6]將一組值轉換成陣列，類似于宣告陣列

1 let str = '11'
2 console.log(Array.of(str))   // ['11']
3 
4 等價于 
5 console.log(new Array('11'))   // ['11]

　ps:
　　new Array()有缺點，就是引數問題引起的多載
　　console.log(new Array(2))  // [empty × 2] 是個空陣列
　　console.log(Array.of(2))  //  [2]

20. arr.find(callback) [ES6]找到第一個符合條件的陣列成員

1 let arr = [1,2,3,4,5,2,4]
2 let arr2 = arr.find((value, index, array) => value > 2)
3 console.log(arr2)   // 3

21. arr.findIndex(callback) [ES6]找到第一個符合條件的陣列成員的索引值

1 let arr = [1,2,3,4,5]
2 let arr1 = arr.findIndex((value, index, array) => value > 2)
3 console.log(arr1)  // 2

22. arr.includes() [ES6]判斷陣列中是否包含特定的值

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

let arr2 = arr.includes(2)  
console.log(arr2)    // ture

let arr3 = arr.includes(9) 
console.log(arr3)    // false

let arr4 = [1,2,3,NaN].includes(NaN)
console.log(arr5)    // true

23. arr.fill(target, start, end) [ES6]使用給定的值，填充一個陣列（改變原陣列）

　　引數： target – 待填充的元素
　　　　　 start – 開始填充的位置 - 索引
　　　　 end – 終止填充的位置 - 索引（不包括該位置)

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

let arr2 = arr.fill(5)
console.log(arr2)  // [5, 5, 5, 5, 5]
console.log(arr)   // [5, 5, 5, 5, 5]

let arr3 = arr.fill(5,2)
console.log(arr3)  // [1,2,5,5,5]

let arr4 = arr.fill(5,1,3)
console.log(arr4)  // [1,5,5,4,5]

24. arr.keys() [ES6]遍歷陣列的鍵名

1 let arr = [1,2,3,4,5]
2 let arr2 = arr.keys()
3 for (let key of arr2) {
4     console.log(key)   // 0,1,2,3,4
5 }

25. arr.values() [ES6]遍歷陣列鍵值

let arr = [1,2,3,4,5]
let arr1 = arr.values()
for (let val of arr1) {
     console.log(val);   // 1,2,3,4,5
}

26. arr.entries() [ES6]遍歷陣列的鍵名和鍵值

1 let arr = [1,2,3,4,5]
2 let arr2 = arr.entries()
3 for (let e of arr2) {
4     console.log(e);   // [0,1] [1,2] [2,3] [3,4] [4,5]
5 }

　　entries() 方法回傳迭代陣列，

　　迭代陣列中每個值前一個是索引值作為 key，陣列后一個值作為 value，

27. arr.copyWithin() [ES6]在當前陣列內部，將制定位置的陣列復制到其他位置，會覆寫原陣列項，回傳當前陣列

引數:　　target --必選索引從該位置開始替換陣列項
　　　　 start --可選索引從該位置開始讀取陣列項，默認為0.如果為負值，則從右往左讀，
　　　　 end --可選索引到該位置停止讀取的陣列項，默認是Array.length,如果是負值，表示倒數

 1 let arr = [1,2,3,4,5,6,7]
 2 
 3 let arr2 = arr.copyWithin(1)
 4 console.log(arr2)   // [1, 1, 2, 3, 4, 5, 6]
 5 
 6 let arr3 = arr.copyWithin(1,2)
 7 console.log(arr3)   // [1, 3, 4, 5, 6, 7, 7]
 8 
 9 let arr4 = arr.copyWithin(1,2,4)
10 console.log(arr4)   // [1, 3, 4, 4, 5, 6, 7]

28. Array.isArray(value) 判斷一個值是否為陣列的方法，若為陣列，回傳true，反之回傳false

 1 let a = 1234
 2 let b = "fsaufh"
 3 let c = {a:1,b:2}
 4 let d = [1,2]
 5 
 6 let mark1 = Array.isArray(a)
 7 console.log(mark1)  // false
 8 
 9 let mark2 = Array.isArray(b)
10 console.log(mark2)  // false
11 
12 let mark3 = Array.isArray(c)
13 console.log(mark3)  // false
14 
15 let mark4 = Array.isArray(d)
16 console.log(mark4)  // true

29. arr.join(separate) 把陣列中的所有元素放入一個字串，separate表示分隔符，可省略，默認是逗號

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

30. arr.flat(pliy) [ES6]對陣列內嵌套的陣列“拉平”，就是把陣列中的陣列的元素挨個拿出來，放陣列元素所在位置，回傳一個新的陣列，不會影響到原來的陣列

　　引數：pliy表示拉平的層數，默認是1層，想無限拉平可以傳入Infinity關鍵字

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

31. arr.flatMap() [ES6]對原陣列的每個成員執行一個函式，相當于執行Array.prototype.map(),然后對回傳值組成的陣列執行flat()方法，該方法回傳一個新陣列，不改變原陣列，只能展開一層陣列，

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

32. arr.toString() 將陣列轉換為字串并回傳，陣列中的元素之間用逗號分隔，

1 let  arr = ["Banana", "Orange", "Apple", "Mango"]
2 console.log(arr.toString())  // Banana,Orange,Apple,Mango

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/147276.html

標籤：JavaScript

下一篇：戲說前端之CSS編碼規范