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

• 注意：如果本来 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);
}