JS數組方法(ES5、ES6)


JS數組方法

1. arr.push()

從后面添加元素,添加一個或多個,返回值為添加完后的數組長度

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

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

2. arr.pop()

從后面刪除元素,只能是一個,返回值是刪除的元素

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

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

3. arr.shift()

從前面刪除元素,只能是一個,返回值是刪除的元素

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

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

4. arr.unshift()

從前面添加元素,添加一個或多個,返回值是添加完后的數組的長度

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

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

5. arr.splice(index,num)

刪除從 index(索引值)開始之后的那 num(默認到數組的結束位置)個元素,返回值是刪除的元素數組

參數:index 索引值,num 個數

// 1. 刪除數組中的某些項
let arr = [0, 1, 2, 3, 4]

console.log(arr.splice(2, 2))  // [2, 3]
console.log(arr)  // [0, 1, 4]


// 2. 將數據添加至數組的特定索引位置index
let arr2 = [1, 2, 3, 4, 5]

arr2.splice(2, 0, '測試值')
console.log(arr2) // [1, 2, "測試值", 3, 4, 5]

6. 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"]

7. arr.concat()

連接兩個數組,返回值是連接后的新數組

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

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

8. arr.sort()

將數組進行排序,返回值是排好的數組,默認是按照最左邊的數字進行排序(非數字整體大小)

let arr = [40,8,10,5,79,3] 

console.log(arr.sort())  // [10,3,40,5,79,8]


let arr2 = arr.sort((a,b) => a - b) 

console.log(arr2)  // [3,5,8,10,40,79]


let arr3 = arr.sort((a,b) => b - a) 

console.log(arr3)  // [79,40,10,8,5,3]

9. arr.reverse()

將原數組反轉,返回值是反轉后的數組

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

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

10. arr.slice(start, end)

切去索引值start到索引值end(不包含end的值)的數組,返回值是切出去的數組

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

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

11. arr.forEach(callback)

遍歷數組,無返回值

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

arr.forEach((value, index, array) => {
    console.log(`value--${value}    index--${index}    array--${array}`) 
})

// value--1    index--0    array--1,2,3,4,5
// value--2    index--1    array--1,2,3,4,5
// value--3    index--2    array--1,2,3,4,5
// value--4    index--3    array--1,2,3,4,5
// value--5    index--4    array--1,2,3,4,5

12. arr.map(callbak)

遍歷數組(對原數組的值進行操作),返回一個新數組

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

let arr2 = arr.map( (value, index, array)=>{
    return value = value * 2
}) 
console.log(arr2) // [2,4,6,8,10]

13. arr.filter(callback)

過濾數組,返回一個滿足要求的數組

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

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

14. arr.every(callback)

根據判斷條件,遍歷數組中的元素,是否都滿足,若都滿足則返回true,反之返回false

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

let arr2 = arr.every((value, index) => index > 2) 
console.log(arr2)  // false

let arr3 = arr.every((value, index) => index > 0) 
console.log(arr3)  // true

15. arr.some(callback)

根據判斷條件,遍歷數組中的元素,是否存在至少有一個滿足,若存在則返回true,反之返回false

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

let arr2 = arr.some((value, index) => index > 2)
console.log(arr2) // true

 let arr3 = arr.some((value, index) => index > 5)
console.log(arr3) // false

16. arr.indexOf()

從前往后查找某個元素的索引值,若有重復的,則返回第一個查到的索引值,若不存在,返回 -1

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

let arr3 = arr.indexOf(6) 
console.log(arr3)  // -1

17. arr.lastIndexOf()

從后往前查找某個元素的索引值,若有重復的,則返回第一個查到的索引值,若不存在,返回 -1

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

let arr3 = arr.lastIndexOf(6) 
console.log(arr3)  // -1

18. Array.from()

將偽數組變成數組,只要有length的就可以轉成數組

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

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

19. Array.of()

將一組值轉換成數組,類似於聲明數組

let str = '11'
console.log(Array.of(str))   // ['11']

// 等價於 
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)

找到第一個符合條件的數組成員

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

let arr2 = arr.find((value, index, array) => value > 2) 
console.log(arr2)   // 3

21. arr.findIndex(callback)

找到第一個符合條件的數組成員的索引值

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

let arr1 = arr.findIndex((value, index, array) => value > 2) 
console.log(arr1)  // 2

22. arr.includes()

判斷數組中是否包含特定的值

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)

使用給定的值,填充一個數組(改變原數組)

參數: 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()

遍歷數組的鍵名

let arr = [1, 2, 3, 4, 5] 
let arr2 = arr.keys() 

for (let key of arr2) { 
    console.log(key)   // 0,1,2,3,4
}

25. arr.values()

遍歷數組鍵值

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()

遍歷數組的鍵名和鍵值

entries() 方法返回迭代數組。
迭代數組中每個值 前一個是索引值作為 key, 數組后一個值作為 value。

let arr = [1, 2, 3, 4, 5] 
let arr2 = arr.entries() 

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

27.arr.copyWithin()

在當前數組內部,將制定位置的數組復制到其他位置,會覆蓋原數組項,返回當前數組

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

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

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

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

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

28. Array.isArray(value)

判斷一個值是否為數組的方法,若為數組,返回true,反之返回false

let a = 1234
let b = "fsaufh"
let c = {a:1,b:2}
let d = [1,2]

let mark1 = Array.isArray(a) 
 console.log(mark1)  // false

let mark2 = Array.isArray(b) 
console.log(mark2)  // false

let mark3 = Array.isArray(c) 
console.log(mark3)  // false

let mark4 = Array.isArray(d) 
console.log(mark4)  // true

29. arr.join(separate)

把數組中的所有元素放入一個字符串,separate表示分隔符,可省略,默認是逗號

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

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

30. arr.flat(pliy)

對數組內嵌套的數組“拉平”,就是把數組中的數組的元素挨個拿出來,放數組元素所在位置,返回一個新的數組,不會影響到原來的數組

參數:pliy表示拉平的層數,默認是1層,想無限拉平可以傳入Infinity關鍵字

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

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

31. arr.flatMap()

對原數組的每個成員執行一個函數,相當於執行Array.prototype.map(),然后對返回值組成的數組執行flat()方法。該方法返回一個新數組,不改變原數組。只能展開一層數組。

// 相當於 [[2, 4], [3, 6], [4, 8]].flat()

let arr = [2, 3, 4]

arr.flatMap((x) => [x, x * 2]) 3 // [2, 4, 3, 6, 4, 8]

32. arr.toString()

將數組轉換為字符串並返回。數組中的元素之間用逗號分隔。

let arr = ["Banana", "Orange", "Apple", "Mango"]

console.log(arr.toString())  // Banana,Orange,Apple,Mango

33. arr.reduce()

對數組中的每個元素執行一個提供的函數(升序執行),將其結果匯總為單個返回值。

接收4個參數:

  1. Accumulator (acc) (累計器)
  2. Current Value (cur) (當前值)
  3. Current Index (idx) (當前索引)
  4. Source Array (src) (源數組)
const array1 = [1, 2, 3, 4];

const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4
console.log(array1.reduce(reducer)); // expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5)); // expected output: 15


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM