前言

當 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);
  })
}

• 注意：如果本來 HTML 某元素有既有的內容，但是又用 innerHTML 在同樣的元素上加上內容的時候，innerHTML 會把原本寫的東西覆蓋掉。JavaScript 初心者筆記: DOM - 如何用 JS 新增 HTML 內容

注意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);
}