本文根据阮一峰老师《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]
