ES6轉ES5 命令列轉碼babel-cli

安裝命令：

$ npm install --global babel-cli

轉碼命令：

# 轉碼結果輸出到標準輸出
$ babel example.js

# 轉碼結果寫入一個檔案
# --out-file 或 -o 引數指定輸出檔案
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整個目錄轉碼
# --out-dir 或 -d 引數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 引數生成source map檔案
$ babel src -d lib -s
 

var let const

let,const具有塊級作用域，不具有變數提升,
const 用於不能被重新賦值的變數

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6 每次迴圈都是獨立的作用域

暫時性死區

if (true) {
  // TDZ開始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ結束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}
 

使用let宣告變數時，只要變數在還沒有宣告完成前使用，就會報錯。

不允許重複宣告

// 報錯
function func() {
  let a = 10;
  var a = 1;
}

// 報錯
function func() {
  let a = 10;
  let a = 1;
}

頂層物件的屬性

頂層物件，在瀏覽器環境指的是window物件，在 Node 指的是global物件。ES5 之中，頂層物件的屬性與全域性變數是等價的。

window.a = 1;
a // 1

a = 2;
window.a // 2

從 ES6 開始，全域性變數將逐步與頂層物件的屬性脫鉤。

var a = 1;
// 如果在 Node 的 REPL 環境，可以寫成 global.a
// 或者採用通用方法，寫成 this.a
window.a // 1

let b = 1;
window.b // undefined
 

變數的解構賦值

ES6 允許寫成下面這樣

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

如果解構不成功，變數的值就等於undefined。

字串的解構賦值

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

字串的擴充套件

字串的遍歷器介面

for…of迴圈遍歷

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

includes(), startsWith(), endsWith()

includes()：返回布林值，表示是否找到了引數字串。
startsWith()：返回布林值，表示引數字串是否在原字串的頭部。
endsWith()：返回布林值，表示引數字串是否在原字串的尾部。

repeat()

repeat方法返回一個新字串，表示將原字串重複n次

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

padStart()，padEnd()

ES2017 引入了字串補全長度的功能。如果某個字串不夠指定長度，會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

模板字串

`User ${user.name} is not authorized to do ${action}.`

數值的擴充套件

Number.isFinite()   檢查一個數值是否為有限的
Number.isNaN()      檢查一個值是否為NaN
Number.parseInt() / Number.parseFloat()
Number.isInteger()  用來判斷一個數值是否為整數
Number.isSafeInteger()  則是用來判斷一個整數是否落在這個範圍之內

Math.trunc()    用於去除一個數的小數部分，返回整數部分
Math.sign()     用來判斷一個數到底是正數、負數、還是零。對於非數值，會先將其轉換為數值
Math.cbrt()     用於計算一個數的立方根
Math.clz32()    返回一個數的 32 位無符號整數形式有多少個前導 0
Math.imul()     返回兩個數以 32 位帶符號整數形式相乘的結果，返回的也是一個 32 位的帶符號整數
Math.fround()   返回一個數的32位單精度浮點數形式
Math.hypot()    方法返回所有引數的平方和的平方根