再學JavaScript ES(6-10)全版本語法大全(4)- 偽陣列轉換為陣列

一角殘葉發表於2020-11-14

1 偽陣列轉換為陣列

偽陣列:

  1. 這個物件按照索引儲存資料
  2. 它具備一個 length 屬性

1.1 ES5

let args = [].slice.call(arguments) // 集合

// 將當前頁面的所有圖片轉換為陣列
let imgs = [].slice.call(document.querySelectorAll('img')) // nodelist

1.2 ES6

let args = Array.from(arguments)
let imgs = Array.from(document.querySelectorAll('img'))
  • 初始化並且填充預設值
let array = Array.from({ length: 5 }, function () {
    return 1
})

console.log(array)

在這裡插入圖片描述

2 生成新陣列

2.1 ES5

let array = Array(5)
let array = ['','']

2.2 ES6

let array = Array.of(1,2,3,4,5)
let array = Array(5).fill(6)
console.log(array)

在這裡插入圖片描述

let array = [1, 2, 3, 4, 5, 6]
console.log(array.fill(100,2,5))

在這裡插入圖片描述

3 查詢陣列

  • filter 會挨個查詢全部滿足條件的所有值
let array = [1, 2, 3, 4, 5, 6]

let find = array.filter(function (item) {
    return item === 3
})

console.log(find)

在這裡插入圖片描述


  • find 查到即返回
let array = [1, 2, 3, 4, 5, 6]

let find = array.find(function (item) {
    return item % 2 === 0
})

console.log(find)

在這裡插入圖片描述

let array = [1, 2, 3, 4, 5, 6]

let find = array.findIndex(function (item) {
    return item % 2 === 0
})

console.log(find)

在這裡插入圖片描述

相關文章