ES6
ECMAScript 6.0,简称ES6是JavaScript语言的下一代标准,在2015年6月发布。目的是让JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
Babel转码器
Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
Babel的配置文件是.babelrc
,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。
Babel提供babel-cli
工具,用于命令行转码。
babel-cli工具自带一个
babel-node
命令,提供一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能,而且可以直接运行ES6代码。它不用单独安装,而是随babel-cli一起安装。
$ npm install --save-dev babel-cli
babel-register
模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。
$ npm install --save-dev babel-register
如果某些代码需要调用Babel的API进行转码,就要使用
babel-core
模块。
$ npm install babel-core --save
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用
babel-polyfill
,为当前环境提供一个垫片。
$ npm install --save babel-polyfill
let和const命令
let 和 const只在当前块级作用域下声明才有效
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not define.
b // 1
for (let i = 0; i < 10; i++) {}
console.log(i); // ReferenceError: i is not defined
for 循环计数器,适合用let命令声明
// var 声明
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
}
}
a[0](); // 10
// let 声明
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
}
}
a[0](); // 0
console.log(i);
// ReferenceError: i is not defined
不存在变量提升 - let命令声明的变量必须先声明后赋值,在let命令声明变量之前,该变量不可用。
// var情况
console.log(foo); // undefined
var foo = 2;
// let情况
console.log(bar); // ReferenceError
let bar = 2;
// y没有声明之前,不能赋值给x
function bar(x = y, y = 2) {
return [x, y];
}
bar(); // error
function bar(x = 2, y = x) {
return [x, y];
}
bar(); // [2, 2]
暂时性死区 - 块级作用域存在let命令,这个区域被所声明的let绑定
var temp = 1;
if (true) {
// TDZ开始
temp = 2; // ReferenceError
let temp;
// TDZ结束
}
let不允许在相同作用域内,重复声明同一个变量。
let a;
let a;
console.log(a); // 报错
const 声明一个只读的常量。一旦声明,常量的值就不能改变。const只能保证所声明当前变量的地址不变,不能保证指向的数据结构是不是可变的。
// const声明的基本数据类型不能改变
const a = 1;
a = 2; // error
// const声明的引用数据类型中的属性值可被重新赋值
const obj = {};
obj.attr = value;
obj.attr; // value;
ES6声明变量的六种方法:
var、function、let、const、import、class
变量的解构赋值
- 数组的解构赋值
let [a, b, c] = [1, 2, 3]; // a = 1; b = 2; c = 3;
let [a, b, c = 3] = [1,2]; // a = 1; b = 2; c = 3;
let [a, [b, c], d] = [1, [2, 3], 4]; // a = 1; b = 2; c = 3; d = 4;
// 解构不成功为undefined
let [x, y, ...z] = ['a']; // x = 'a'; y = undefined; z = [];
// 可以设置默认值
let [x, y = 'b'] = ['a', undefined]; // x = 'a'; y = 'b';
// ES6通过严格运算符(===),判断一个位置是否有值,只有一个数组成员严格等于undefined,默认值才会生效
let [x = 1] = [undefined]; x // 1
let [x = 1] = [null]; x // null
- 对象的解构赋值
// 变量名和属性名一致
let { foo, bar } = { foo: "aaa", bar: "bbb" };
<===>
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
foo // aaa
var // bbb
let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
// 如果变量名与属性名不一致
let { foo: a } = { foo: "aaa", bar: "bbb" };
a // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
// 解构可以用于嵌套结构的对象
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [ x, { y }] } = obj;
x // 'Hello'
y // 'World'
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc // { start: Object }
start // { line: 1, column: 5 }
- 字符串的解构赋值
const [a,b,c,d,e] = 'hello';
a // 'h'
b // 'e'
c // 'l'
d // 'l'
o // 'o'
let { length: len } = 'hello';
len // 5
- 数值和布尔值的解构赋值
// 解构赋值时,如果等号右边是数值和布尔值,则先转化为对象
let { toString: s } = 123;
s === Number.prototype.toString // true
let { toString: s } = true;
s === Boolean.prototype.toString // true
- 函数参数的解构赋值
// 函数的参数可以使用解构赋值
funtion add([x, y]) {
return x + y;
}
add([1,2]); // 3
[[1, 2], [3, 4]].map(([a, b]) => a + b); // [3, 7]
// 函数move的参数是一个对象,通过对这个对象解构,得到x和y;解构失败,x和y为默认值
function move({x = 0, y = 0} = {}) {
return [x, y];
}
<===>
function move({x = 0, y = 0}) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
// 为函数参数指定默认值,而不是为变量x和y指定默认值
function move({x, y} = {x: 0, y: 0}) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]
用途
- 交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
- 从函数返回多个值
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
- 函数参数的定义
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
- 提取JSON数据
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
- 函数参数的默认值
JQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true
} = {}) {
// do stuff
};
- 遍历Map结构
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world
// 获取键名
for (let [key] of map) {
// ...
}
// 获取键值
for (let [,value] of map) {
// ...
}