本文根據阮一峰老師《ECMAScript 6 入門》一書記錄，只記錄常用特性，適合快速學習
一、 Babel轉碼器
- 作用:
- 將ES6代碼轉換成ES5代碼，從而方便從瀏覽器執行環境執行
- 安裝配置
- npm install babel --save-dev
- 配置文件.babelrc
presets 字段指定轉碼規則{ "presets": [ "es2015", "react", "stage-2" ], "plugins": [] }
二、 let和const命令
- let命令
- 從一個java程序員的角度理解，let命令就和java程序中的變量定義一樣，只在let命令所在的代碼塊內起作用（塊級作用域），并且不再像var 定義變量時，可以重復定義。
- 不存在變量提升，所以變量一定要在聲明后使用。
示例代碼:// var 的情況 console.log(foo); // 輸出undefined var foo = 2; // let 的情況 console.log(bar); // 報錯ReferenceError let bar = 2; - 暫時性假死：只要塊級作用域內存在let命令，它所聲明的變量就“綁定”（binding）這個區域，不再受外部的影響。
- ES6可以在塊級作用域內，定義函數；在塊級作用域內定義的函數不能在作用域外引用
- const命令
- 用來定義常量，常量值不可修改，即使重新賦值也不起作用。
- 如果該常量是對象，則該常量指向對象的地址，對象中的內容時可以改變的；如果不想對象內容改變可以用Object.freeze({});
- const命令也存在暫時性假死現象
三 、 變量的解構賦值
- 解釋：ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）；
- 示例：
let [a, b, c] = [1, 2, 3];
a //1
b //2
c //3
- 只要某種數據結構具有 Iterator 接口，都可以采用數組形式的解構賦值
- 解構賦值允許指定默認值
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
- 字符串的解構賦值
let [a,b,c,d,e] = "hello"
a //h
b //e
- 對象的解構賦值
var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
對象的解構賦值，是根據對象的屬性，將值賦給變量。
- 函數參數的解構賦值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
8.解構賦值使用場景
- 交換變量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
- 從函數返回多個值
- 函數參數的定義
- 提取JSON數據
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
