最近學到的JS語法(1/n)

移除陣列重複項

new Set()：最簡潔好用的語法

let arr = [1, 2, 3, 4, 5, 1, 2 ,3, 4, 5];

[...new Set(arr)];

console.log(arr);
console.log([...new Set(arr)]);

new Set()不會改變原始陣列。

參考資料：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set

累加物件值

reduce()

const arr = [1, 2, 3, 4, 5];
const reduceArr = arr.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
});
console.log(reduceArr); // 15

accumulator：累加值
currentValue：下一個要加的值

設定初始值

const arr = [1, 2, 3, 4, 5];
const reduceArr = arr.reduce((accumulator, currentValue) => {
  console.log(accumulator); // 5, 6, 8, 11, 15
  console.log(currentValue); // 1, 2, 3, 4, 5
  return accumulator + currentValue
}, 5); // 5是初始值，從5開始加

accumulator

5：初始值
6：5+1
8：6+2
11：8+3
15：11+4

取得物件property value

Object.values()：取得值

let object = {a: 1, b: 2, c: 3};

console.log(Object.values(object));  // [1, 2, 3]

Object.entries()

let object = {a: 1, b: 2, c: 3};

console.log(Object.entries(object));
// [
//   ["a", 1],
//   ["b", 2],
//   ["c", 3]
// ]

較舊的方法：Object.keys()：取得key並回傳陣列

let object = {a: 1, b: 2, c: 3};

console.log(Object.keys(object)); // ["a", "b", "c"]

參考資料：https://ithelp.ithome.com.tw/articles/10239942

for loop

for…in…：用來迭代物件，並取得key值

想用for...in...取得value的話：

for…of…：用來迭代陣列

想用for...of...迭代object的話，得跟Object.keys()一起使用

參考資料：https://kanboo.github.io/2018/01/30/JS-for-of-forin/

應用：把物件各項值相加

Object.values()、reduce()搭配使用

let object = {a: 1, b: 2, c: 3};

const total = Object.values(object).reduce((acc,cur)=>{
    return acc+cur
})

console.log(total)

1. Object.values()取得[1, 2, 3]
2. 使用reduce()方法累加

最近最常使用到的就是reduce()，多練習應該會越來越熟！