[JavaScript ] ES7, ES8, ES10 有趣的 new features

這篇主要會挑一些有趣的 ES7, ES8, ES10 語法來做介紹，首先來看看 ES7 的 includes() 吧

.includes

可以判斷一個字串內是否含有某個字串

'Helloooo'.includes('o'); // true

或判斷陣列內是否含有某個字串

const pets = ['cat', 'dog', 'bat']
pets.includes('dog') // true

要注意的是，includes () 方法是有區分大小寫的

'Helloooo'.includes('O'); // false

** Exponentiation Operator

這個 ** 運算子相當於次方的意思

let x = 5;
let z = x ** 2;  // 25

.padStart() .padEnd()

可以在字串符開頭或結尾填充指定的字串，直到達到目標長度為止
第一個參數是目標長度，第二個參數是要填充的字串

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(1);          // "abc"

'abc'.padEnd(10);          // "abc       "
'abc'.padEnd(10, "foo");   // "abcfoofoof"
'abc'.padEnd(6, "123456"); // "abc123"
'abc'.padEnd(1);           // "abc"

Object.values

return 一個數組，找到物件裡面的屬性的 value。

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

Object.entires

return 一個陣列，找到物件的屬性 key 和 value。

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

Object.fromEntries

和 Object.entires 相反，把陣列轉換成物件

userProfiles = [["Tom", "23"], ["Sherry", "25"]];
const obj = Object.fromEntries(userProfiles);

obj ==Object {
  Sherry: "25",
  Tom: "23"
}

.flat()

壓平陣列的內建函式，會 return 一個新的陣列，參數為壓平的次數，預設為 1，除了壓平之外，也會移除空的陣列項目

let arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

let arr3 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(2); // [1, 2, 3, 4, 5, 6]

.flatMap()

同時結合 .flat 和 .map，執行完回調的函式執行結果之後，惠再把陣列壓平

let arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); // [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);// [2, 4, 6, 8]

.trim()

.trim() 把字串前後的空白刪除
.trimStart() 把字串前面的空白刪除
.trimEnd() 把字串後面的空白刪除

let word = '   hello    ';
console.log(word.trim()); // 'hello'

try...catch

可以標記一組要嘗試的陳述式，如果成功則交給 try 區塊執行，不成功，就交給 catch 區塊執行

try {
    true + "hi"
} catch {
    console.log("you messed up")
}
// 可以不用 error 參數