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() 操作參數包含前次結果(可用於累加:accumulator (acc))

let result = numbers.reduce((acc, number) =>
    number + acc
    ,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() ：只要有１個以上符合條件，就為 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 

參考文件：

• Array｜MDN
• JS-for...in與for...of的差別

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