Arrow function 可以讓 function 更為簡潔，並且在 arrorw function 內的 scoop 都共享同一個 this 這就不用讓 function 一開始就 bind this。
function foo(a, b) {
return a + b;
}
const foo = (a, b) => {
return a + b;
}
ES6 支援在定義函數時就宣告預設值
function foo(height = 50, color = 'red')
也可以不使用函數預設值
function foo(height, color) {
let height = height || 50;
let color = color || 'red;
}
這樣寫一般沒問題，但當參數的布爾值為false時，就會有問題了。比如，我們這樣調用foo函數
foo(0, '')
因為0的布爾值為false，這樣height的取值將是50。同理color的取值為『red』。所以說，函數參數默認值不僅能是代碼變得更加簡潔而且能規避一些問題。
ES6 支援使用 string template，使得字符串的拼接更加的簡潔、直觀。
不使用 string template
const str = 'My name is' + name + '.';
使用 string template
const str = `My name is ${name}.`
解構賦值語法是JavaScript的一種表達式，可以方便的從數組或者對象中快速提取值賦給定義的變量。
const foo = ["one", "two", "three", "four"];
const [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
// 如果要忽略某些值，可以按照下面的寫法獲取
const [first, , ,last] = foo;
console.log(first); // "one"
console.log(last); // "four"
// 也可以這樣寫
const a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
// 也可以給他預設值
const a, b; [a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7
// 通過解構賦值可以方便的交換兩個變量的值。
let a = 1; let b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
// 也可以拿出 object 裡面的值
const struct = {
height: 50,
color: 'red'
};
const {height, color} = struct;
函數調用
foo(...iterableObj)
object 或者是 string
[...iterableObj, '4', ...'hello', 6]
Clone object
const cloneObj = {...obj};
Clone array
const arr = [1, 2, 3];
const arr2 = [...arr]; // 等同於 arr.slice()
值得注意的是透過 spread operator clone 跟 Object.assign 一樣 都屬於 shallow clone，表示只拷貝第一層的 property
restParam(1, 2, 3, 4, 5);
const restParam = (p1, p2, ...p3) => {
// p1 = 1
// p2 = 2
// p3 = [3, 4, 5]
}
const myObject = { a: 1, b: 2, c: 3 };
const { a, ...x } = myObject;
// a = 1
// x = { b: 2, c: 3 }
之前的 javascript 沒有 local scoop 的概念, let, const 補足了這一塊
{
var a = 100;
let b = 200;
}
console.log(a) // 100;
console.log(b) // undefined;
如果要在一個 array 裡面判斷是否包含某個值 在 ES7 之前的做法
const arr = ['react', 'angular', 'vue'];
if (arr.indexOf('react') !== -1) {
// 存在
}
ES7 之後多了 Array.prototype.includes()
const arr = ['react', 'angular', 'vue'];
if (arr.includes('react')) {
// 存在
}
ES7 多了指數運算，非常方便
a ** b = Math.pow(a, b)
async / await 解決了 callbackk hell 的問題，也大幅提升了程式可讀性。而 async / await 也可以配合著 for 使用
async function process(array) {
for await (let i of array) {
doSomething(i);
}
}
此函數可以回傳不包括繼承而來的 value
const obj = {a: 1, b: 2, c: 3};
// 不使用 Object.values()
Object.keys(obj).map((key)=>{
return obj[key];
});
// 使用 Object.values()
Object.values(obj);
// result = 1, 2, 3]
此函數可以回傳不包括繼承而來的 key / value pair
const obj = {a: 1, b: 2, c: 3};
// 不使用 Object.entires()
Object.keys(obj).map((key)=>{
return [key, obj[key]];
})
// 使用 Object.entires()
Object.entires(obj);
// result = [[a, 1], [b, 2], [c, 3]]
允許 string 補足給定的值到某個給定的長度
'abc'.padStart(10); // " abc"
'abc'.padStart(10, "foo"); // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padEnd(10); // "abc "
如果在 Promise 調用之後不管成功或者失敗都需要呼叫的函數可以使用 Promise.finally()
const doSomething() => {
doSomething1()
.then(doSomething2)
.then(doSomething3)
.catch(err => {
console.log(err);
}
)
.finally(() => {
// 不管結果如何一定被調用
});
}
flat() 會將一個 array 降低維度
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]
const arr4 = [1, 2, , 4, 5]; // 去除空資料
arr4.flat(); // [1, 2, 4, 5]
flatMap() 就是 flat() map() 結合體
const arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]); // [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8] // 只會將 flatMap 中的函數返回的數組 「壓平」 一層
就是分別去除字符串首尾空白字符
Object.fromEntries() 則是 Object.entries() 的反轉。 透過 Object.fromEntires() 可以將 array 變成 object
const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }
Reference