iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

追求JS小姊姊30天系列 第 8

追求JS小姊姊系列 Day8 -- 鄭列展現的工具力(下)

前情提要

鄭列終於要展現JS喜歡的工具力了嗎?


鄭列是說,有人會跟情敵聊這麼久嗎
:.......... 腳會痠嗎
鄭列:快講完了。

姊姊,這就是鄭列我最後的工具力了

Array.prototype.reduce()

公式:array.reduce( callback [accumulator, currentValue, currentIndex, array], initialValue)
公式解釋:

  1. callback:陣列內的所有值都會被這個函式執行,它包含以下內容
    1. accumulator:用來累積回呼函式回傳值的累加器(accumulator)或 initialValue(若有提供的話,詳如下敘)。累加器是上一次呼叫後,所回傳的累加數值。
    2. currentValue:原陣列當前迭代的值
    3. currentIndex:原陣列當前迭代的索引值
    4. array:呼叫reduce的陣列
      2 . initialValue
    5. 有給初始值:做為第一次呼叫 callback 時傳入的累加器初始值。
    6. 沒有給初始值:原陣列的第一個元素將會被當作初始的累加器

工具力再啟動之 – 幫姐計算名品總價吧!

假設今天她請我計算她各精品總價值

//精品價目表
let jsCollections = [900000,100000,50000,66666,432424,73426];

let totallPrice = jsCollections.reduce((accumulator,currentValue)=>
accumulator+currentValue)
console.log(totallPrice);

工具力再啟動之 – 統合兩個堆積內容吧!

那如果覺得高級品的資訊拆分這樣不是很好看...怎麼辦?reduce!

let jsCollections = [900000,100000,50000];
let brand = ['Guci', 'Hermes', 'Apple']
const list = jsCollections.reduce((list, currentValue, index) => {
  const group = {};
  group[brand[index]] = currentValue;
  list[index] = group;
  return list;
}, [])
console.log(list)

工具力再啟動之 – 重複的禮物,姐不要

可以刪掉重複的東西,不論是什麼型別的內容。

let jsCollections = ["JS有收過的禮物","JS有收過的禮物","JS有收過的禮物","JS有收過的禮物",5,5,6,8,1,4,2];
function plusWay
let result = jsCollections.reduce((accumulator,currentValue)=>{
    if(accumulator !=="JS有收過的禮物"|| currentValue !=="JS有收過的禮物") {
    accumulator.push(currentValue);
    }return accumulator};);
console.log(result);


鄭列:是不是很厲害呢?
:感覺不知道她為何會喜歡呢,也沒有特別厲害.....
鄭列誒你這個很萬用誒,她是這樣說的。
我:.... (是不是一種敷衍的回應呢?)

-- to be continued --

那今天就到這邊摟!今天分享喜歡的歌是:
茄子蛋EggPlantEgg - 浪流連 Waves Wandering (Official Music Video)
https://www.youtube.com/watch?v=3Y0Ut5ozaKs

每天的休息,是為了後面的追求,明天見。

參考資料:
  1. MDN
  2. w3schools

上一篇
追求JS小姊姊系列 Day7 -- 鄭列展現的工具力(中)
下一篇
追求JS小姊姊系列 Day9 -- 如果時間能重來,我不想跟工具人聊天(上)
系列文
追求JS小姊姊30天30

1 則留言

1
MJ
iT邦新手 5 級 ‧ 2021-09-23 15:07:27

頭香/images/emoticon/emoticon07.gif

隊長好帥

我要留言

立即登入留言