---
tags: 讀書會
---

# Javascript 30 讀書會 day18

主題 : Tally String Times with Reduce
使用 Reduce 計算字符串時間

---

### 本周實作目標：

加總影片長度

---

### 流程大綱：

1. 抓到元素

2. 換算時間


---

### 流程大綱：

1. 抓到元素
- 如何抓到屬性欄中的值
- 抓到值後如何轉換成秒數並加總

2. 換算時間
- 秒數如何換算成 時: 分: 秒

---

1. 將選擇到的偽物件還是偽陣列推進陣列中

- 抓到時間的元素應該是這單元最麻煩的，但只要知道幾個重點就沒有問題囉

document.querySelectorAll('[data-time]')

這樣我們就抓到所有 `li`

如果不知道怎麼抓到屬性可以參考 [CSS 选择器](https://www.runoob.com/cssref/css-selectors.html)

---

2. 選擇到為偽陣列，要將他轉為陣列可以使用

- Array.from()
>Array.from() 方法會從類陣列（array-like）或是可迭代（iterable）物件建立一個新的 Array 實體。

- 其餘運算子 ...
>其餘運算字會幫助我們把輸入函式中的參數值變成陣列的形式

[Array.from()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

[[筆記] JavaScript ES6 中的展開運算子（spread operator）和其餘運算子（rest operator）](https://pjchender.blogspot.com/2017/01/es6-spread-operatorrest-operator.html)

---

3. 從陣列中抓時間元素出來，目標是秒數的總和

---

### dataset 簡介

- `data-*` 属性允许我们在标准内于HTML元素中存储额外的信息

- 在 DOM 中，可以使用 dataset 读取到数据。

<li class="apple-list" data-apple="2:33">A</li>

document.querySelector('.apple-list').dataset.apple // "2.33"

[MDN - 使用数据属性](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Howto/Use_data_attributes)

[HTMLElement.dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset)

---

3. 從陣列中抓時間元素出來，目標是秒數的總和

  const totalSec = timeNodes.map(node => node.dataset.time)


---

3. 從陣列中抓時間元素出來，目標是秒數的總和

- map()
- split()
- reduce()
- Array.reduce( (x, y) => x + y)

---

4. 將總秒數轉換成 時: 分: 秒

你們很棒一定都會

秒換算成 => 時: 分: 秒
一小時: 60 分 * 60 秒 => 3600 秒
一分鐘: 60 秒

小時 = total秒 / 3600 
分 = (total秒 % 3600) / 60
秒 = 剩下的秒數

function getTime(secs) {
  let secondsLeft = secs
  hours = Math.floor(secondsLeft / 3600)
  secondsLeft = secondsLeft % 3600
  mins = Math.floor(secondsLeft / 60)
  secondsLeft = secondsLeft % 60
  return hours + ":" + mins + ":" + secondsLeft
}

---

結束，謝謝大家


---

參考資料
[影片 - JavaScript Array Reduce](https://www.youtube.com/watch?v=g1C40tDP0Bk&ab_channel=ProgrammingwithMosh)
[Array.prototype.reduce()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)