PJCHENder 未整理筆記

[JS30] Day18: Tally String Times with Reduce

2017-09-26

[JS30] Day18: Tally String Times with Reduce

@([WesBos] JS30)[JavaScript]

keywords: 時間, time, Array-like to Array, dataset, 秒數轉時分秒

今天會練習如何去把時間累加起來。

將時間累加

把 Array-like 的 Node 元素轉成 Array(Array-like to Array)

我們取得的 Node Element 它是 Array-like 的物件,而不是真的 Array,因此他沒有 Array.prototype.map 這個 function 可以使用,因此我們需要先把它轉成 Array:

方法一:使用 spread operator(...

1
const timeNodes = [...document.querySelectorAll('[data-time]')]

方法二:使用 Array.from()

1
const timeNodes = Array.from(document.querySelectorAll('[data-time]'))

把 data-set 的資料取出來

使用 Element.dataset.<attribute> 可以把 data-time 的值取出來。

陣列的解構賦值

在 ES6 中可以直接透過解構的方式賦值,像是下面這樣子:

1
2
let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1, 2, 3

如此變數 a = 1, b = 2, c = 3,這是最基本的陣列解構賦值方式。

因此,我們可以用這樣的寫法:

1
2
3
// 使用陣列的解構賦值
const [min, sec] = time.split(':') // ['12', '39']
.map(str => parseInt(str)) // 把字串轉成數值

陣列的解構賦值 @ PJCHENder HackMD

使用 Array.prototype.reduce

透過 Array.prototype.reduce( callback<accumulator, currentValue, currentIndex, array>, initialValue ) 每次 return 的內容都會存到 accumulator 中,因此可以累加陣列裡的內容後回傳。

JavaScript 陣列 @ PJCHENder HackMD

程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 將 array-like 的 Node Element 轉成 Array
const timeNodes = [...document.querySelectorAll("[data-time]")];

const totalSeconds = timeNodes
.map(node => node.dataset.time) // 把 nodeElement 的 data-time 取出來
.map(time => { // 把 time 全部變成秒數
const [min, sec] = time // 使用陣列的解構賦值
.split(":") // 得到字串['12', '39']
.map(str => parseInt(str)); // 把字串轉成數值
return min * 60 + sec;
})
.reduce((totalSeconds, currentSeconds) => { // 將所有的秒數累加
return totalSeconds + currentSeconds;
}, 0);

將秒數轉成「時:分:秒」

加總所有的秒數取得 totalSeconds 後,我們就可以將這個秒數在轉換為時分秒。

在這裡我們透過 Math.floor 達到無條件捨去的效果。而 totalSeconds % 3600 表示扣掉轉換完小時之後所剩下的秒數。

1
2
3
4
5
let hours = Math.floor(totalSeconds / 3600)         // Math.floor 無條件捨去
let mins = Math.floor((totalSeconds % 3600) / 60)
let seconds = totalSeconds % 3600 % 60

console.log(hours, mins, seconds);

完成作品

Day18: Tally String Times with Reduce

掃描二維條碼,分享此文章