示例 JavaScript 中操作 Array 的幾種方法。

# Array

  • 基本寫法

    var arr = [
        "A",
        "B",
        "C"
    ];
    

    等同於

    var arr = new Array("A", "B", "C");
    
    • 最後一個值後面不要加逗號
    • 換行不換行都沒差
  • [ ] 取陣列值第幾個
    arr[0] 第一個陣列值
    arr[-1] 最後一個陣列值

  • arr.length 取陣列長度

  • arr.sort() 陣列內重排序


# 陣列操作的幾種方法

let friends = ['Amy', 'Berry', 'Claire']

#for...in :迭代 屬性(key)

for (let index in friends){
    console.log(index)             // 0, 1, 2
    console.log(friends[index])    // Amy, Betty, Claire
}

#for...of:迭代陣列值

for (let friend of friends){
    console.log(friend)         // Amy, Betty, Claire
}
  • 延伸:如果想要迭代物件的話:使用Object.keys()

    let obj = {
        key1: 'value1',
        key2: 'value2',
        key3: 'value3'
    }
    
    for (let key of Object.keys(obj)){
        console.log(key + ": " + obj[key])
        // key1: value1, key2: value2, key3: value3
    }
    

#forEach():歷遍每一個元素執行

friends.forEach(friend => 
    console.log(friend)    // / Amy, Betty, Claire
)
friends.forEach((friend, index) => {
        console.log(`${index}-${friend}`)   
        // / 0-Amy, 1-Betty, 2-Claire
    } 
)

let numbers = [1, 2, 3]

#map():將每一次的結果集合為一個新陣列回傳

let mapNumbers = numbers.map(number =>
    number * 2
)
console.log(mapNumbers)  // 2, 4 , 6

#reduce() 操作參數包含前次結果(可用於累加:accumulator (acc))

let reduceNumbers = numbers.reduce((acc, number) =>
    number + acc
    ,0
)
console.log(reduceNumbers)  // 6  (1+2+3)

#filter():回傳所有符合條件的元素

let filterNumbers = nums.filter( num => 
        num > 10    
)
console.log(filterNumbers)  // [11, 13] 

#find():回傳第一個符合條件的元素

let findNumbers = nums.find( num => 
    num > 10    
)
console.log(findNumbers)  // 11 

let nums = [1, 3 , 5, 7,  9 , 11 , 13]

#some() :只要有1個以上符合條件,就為 true

let someNumbers = nums.some( num => 
    num > 10    
)
console.log(someNumbers)  // true 

#every() :每一個都符合時才會回傳 true

let everyNumbers = nums.every( num => 
    num > 10    
)
console.log(everyNumbers)  // false 

參考文件:


本文同步發表在第 12 屆 iT 邦幫忙鐵人賽 《For 前端小幼苗的圖解筆記》 (opens new window)