iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
自我挑戰組

邊工作邊進行前端學習之旅系列 第 24

[Day 24] DOM Array Methods 實作練習

前言

當 JS 學了將基本語法練習、觀念都學過之後,就開始學找實作練習,透過看老師的作法慢慢拆解每個步驟,而自己再實際撰寫語法,將每個任務完成。 而這次的練習,主要是陣列相關的操作語法,除了老師的課程帶領外,我會根據左側按鈕的功能,先除查找資料嘗試跟著撰寫相應的功能,這樣一來會使記憶更深刻。

成品

課程來源:
udemy - 20 Web Projects With Vanilla JavaScript

需求觀察

  • 使用fetch來串接API
  • 透過左側按鈕,使用陣列的方法來實現不同事件
    • 運用forEach()來將陣列資料呈現到畫面
    • 運用map()計算金額的倍數
    • filter()篩選出符合條件的資料
    • sort()用來排序資料
    • reduce()計算陣列中資料的累加結果

使用fetch來串接資料

  • 這裡使用 async、await 做出非同步的處理
    • 在 await 下,會等 promise 任務完成後才會再進行下一段程式
  • 此練習的串接資料來源 https://randomuser.me/api
  async function getRandomUser() {
  const res = await fetch('https://randomuser.me/api');  //執行完後發出promise
  const data = await res.json();
  //查看取得的資料,並從中選擇要用的部分
  //console.log(data);
  const user = data.results[0];

  //創造新的使用者,並建立新的物件
  const newUser = {
    name: `${user.name.first} ${user.name.last}`,
    money: Math.floor(Math.random() * 1000000)
  };
  console.log(newUser);
  addData(newUser);
}

  • 查看取得的data

取得資料後,將所新創的物件傳入陣列


//將新建立的物件(newUser)放入陣列中
function addData(newObj) {
  //這裡的data是在最前面所宣告的 初始陣列
  data.push(newObj);
  
    //不放入參數,使用預設data
  updateDOM();


}

將傳入新物件的陣列,顯示於畫面

  • 使用forEach()來呈現畫面的資料
    • 傳入參數為item,為新創的物件資料,內有:name,money
    • 創造新的div並增加class給他
    • innerHTML插入內容
    • 用 appendChild() 把上面新增的內容放入,新增的內容會依序排列在後面,不會被洗掉
//將新創立的物件輸出呈現到畫面上(dom)
function updateDOM(provideData = data) {
  console.log(provideData);
  //清除main區域的div
  main.innerHTML = `<h2><strong>Person</strong>  Wealth</h2>`;
  provideData.forEach(item => {
    const element = document.createElement('div');
    //在新div增加class
    element.classList.add('person');
    element.innerHTML = `<strong>${item.name}</strong> ${item.money}`;
    main.appendChild(element);
  })
}
注意updateDOM()參數的回傳的資料
function updateDOM(provideData) {
  console.log(provideData);
}

function updateDOM(provideData = data) {
  console.log(provideData);
}

數字轉金錢格式

//將回傳的隨機數字,轉換為金錢格式 -https://stackoverflow.com/questions/149055/how-to-format-numbers-as-currency-strings
function formatMoney(Money) {
  return '$' + Money.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');;
}

  • formatMoney()要放入剛剛forEach所傳入的金額,從這邊去調整數字的格式
element.innerHTML = `<strong>${item.name}</strong>  ${formatMoney(item.money)}`;

運用map()建立 double money事件

  • 會像 forEach 去執行整個陣列資料,但不同的是他會回傳東西
//double money 
function doubleMoney() {
  data = data.map(item => {
    return { ...item }

  });
  //console.log(data);
 
}

//double money 
function doubleMoney() {
  data = data.map(item => {
    return { ...item, money: item.money * 2 }

  });
  console.log(data);

}

運用sort來建立排名


//sortEvent
function sortEvent() {
  data = data.sort((a, b) => {
    return b.money - a.money;
  });
  //console.log(data);
  updateDOM();
}

JS 將陣列 Array 重新排列的 sort(),參考此文章來製作排名按鈕的功能。

filter篩選百萬以上的人員

function filterMillionaires() {
  data = data.filter((item) => {
    return item.money > 1000000;
  });

  updateDOM();

}

製作金額累加功能 reduce

reduce 的基礎語法

arr.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)
  • accumulator
    用來累積回呼函式回傳值的累加器(accumulator)或 initialValue。累加器是上一次呼叫後,所回傳的累加數值。
  • currentValue
    原陣列目前的個別item。
  • currentIndex
    原陣列目前的個別item的索引

參考文章

MDN
JavaScript reduce 在做什麼?

理解完reduce()所回傳的參數資料後...

  • 讓金額加總計算 accumulator += currentValue.money
//calculateMoney
function calculateMoney() {
  const reduceArr = data.reduce((accumulator, currentValue) => {
    //console.log(accumulator);
   // console.log(currentValue.money);
    return accumulator += currentValue.money;
  }, 0);


  const totalEl = document.createElement('div');
  totalEl.innerHTML = `<h3>Total Wealth: <strong> ${formatMoney(reduceArr)} </strong> </h3> `;
  main.appendChild(totalEl);
}


上一篇
[Day 23] JS - 陣列 (Array) 常用方法介紹
下一篇
[Day 25] LocalStorage 介紹
系列文
邊工作邊進行前端學習之旅30

尚未有邦友留言

立即登入留言