2024-09-06 JavaScript 系列六：第3課 ── 認識匿名函式

JavaScript 系列六：第3課 ── 認識匿名函式
課程目標
能夠從陣列刪除元素

認識 for in 迴圈寫法

認識匿名函式（anonymous function）

課程內容
在 JavaScript 中，刪除陣列元素的方法，有超多種

這邊介紹一種根據索引刪除的方法

var fruits = ["apple", "banana", "orange"];

var index = 1;

var num = 1;

fruits.splice(index, num)

console.log(fruits)

.splice() 函式第一個傳索引，第二個傳要刪的數量，通常就傳 1 就好了（一次刪一個即可）

實務上，你就根據情況，隨便找一個能用的方式，來操作陣列就對了

之前我們介紹過 for of 的寫法，很簡單好用

var fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit)
}

這邊多介紹一個 for in 的寫法，需要索引時可以用

var fruits = ["apple", "banana", "orange"];

for (const index in fruits) {
  const fruit = fruits[index];
  console.log(index);
  console.log(fruit);
}

最後來介紹匿名函式（anonymous function）

聽起來很玄，但其實就只是沒有名字的函式而已

以下是有名字的函式

function hello1()
{
  alert("hello1");
}

var hello2 = () => {
  alert("hello2");
}

以下是沒有名字的函式

<button>
  hello
</button>

var button = document.querySelector('button');

button.onclick = () => {
  alert(123)
};

動態宣告一個函式，然後直接指派、使用，就是匿名函式

在 JavaScript 中，很多時候，有些小任務，需要宣告新函式來用，但又懶得去設計命名那些的

這時候就可以用匿名函式來節省時間

雖然看起來有點不習慣、有點奇怪

但在實務上，非常多地方，其實都會用到匿名函式，算是 JavaScript 非常好用的一個功能、特性

課後作業
接續上一課作業，這次來實作「刪除事項」

請更新 render 函式，讓 UI 看起來像這樣

<ul>
  <li>
    <span>倒垃圾</span>
    <button>刪除</button>
  </li>
  <li>
    <span>繳電話費</span>
    <button>刪除</button>
  </li>
  <li>
    <span>採買本週食材</span>
    <button>刪除</button>
  </li>
</ul>

然後在過程中，動態產生 button 的時候，將 .onclick 屬性設定為一個 arrow function

這個 arrow function 不能直接更新 DOM，而是先去更新 data model，接著 render，用這種方式間接更新 DOM

deleteBtn.onclick = () => {
  // 請寫出此 arrow function 內容（更新 todos 陣列）

  render();
};

提示：由於 javascript 中 hoisting 的特性，for loop 拿到的索引，在裡面的 arrow function 中使用，很容易抓錯

關於索引一直拿不到的問題，請參閱這邊我跟 birdie 同學的討論

https://codelove.tw/@birdie2019/post/2anbka

文章取自: https://codelove.tw/@howtomakeaturn/post/Aq5V0x
by 站長阿川