2024-09-04 JavaScript 系列六：第2課 ── 認識陣列操作

發表於 2024-09-05 分類於 OneDayOneNote 閱讀次數：

課程目標
能夠新增元素到陣列

課程內容
因為我們不再使用「在各處胡亂更新各處 DOM」的寫法

現在要認真開始學習，如何在 JavaScript 中，用各種變數、資料型別，建立出 data model

這一課來學學新增元素到陣列的方法

1
2
3

<button onclick="more()">
  more
</button>

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

function more()
{
  fruits.push("orange");
  console.log(fruits);
}

非常簡單，使用陣列的 .push() 函式就可以

在 JavaScript 中，陣列相關操作的函式、寫法，有非常多種

我的建議是，各種寫法都可以，如果你有查到，隨便挑你喜歡的用就可以了

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

請在 html 的部份加入「輸入資料的 UI」，大概類似這樣

<input type="text">
<button onclick="add()">新增</button>
<div id="root">
</div>

接著請將 add 函式完成，過程中不能直接更新 DOM，而是先去更新 data model，接著 render，用這種方式間接更新 DOM

function add()
{
  // 請寫出此函式內容（更新 todos 陣列）

  render();
}

做出以上功能，你就完成這次的課程目標了