JS - Array 陣列基本操作

Array

  • 基本寫法 js var arr = [ "A", "B", "C" ]; 等同於 js 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 前端小幼苗的圖解筆記》