iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 16
1
Modern Web

For 前端小幼苗的圖解筆記系列 第 16

[JavaScript] DOM 操作 & 陣列操作 ( forEach / map / reduce / filter / find / some / every )

DOM 操作

範例:按下按鈕 #btnNow 時, div#show 裡顯示今天日期:

document.querySelector('#btnNow').addEventListener("click",()=>{
    document.querySelector('#show').innerHTML = Date()
});

[語法] 選取 DOM 元素:

  • document.querySelector('cssSelector')- 以 CSS selector 指定
  • document.getElementById('idName')- 以 ID 指定
  • document.getElementsByClassName('className')- 以 Class 指定

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 result = numbers.map(number =>
    number * 2
)
console.log(result)  // 2, 4 , 6

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

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

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

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

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

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

let result = numbers.find( num => 
    num > 10    
)
console.log(result)  // 11 

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

let result = numbers.some( num => 
    num > 10    
)
console.log(result)  // true 

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

let result = numbers.every( num => 
    num > 10    
)
console.log(result)  // false 

參考文件:


個人 Blog: https://eudora.cc/


上一篇
[JavaScript] 宣告 / hoisting / function
下一篇
[CSS] Flex 觀念與應用
系列文
For 前端小幼苗的圖解筆記30

尚未有邦友留言

立即登入留言