一、ES5/ES6和babel
ECMAScript5,即ES5,是ECMAScript的第五次修订,于2009年完成标准化,现在的浏览器已经相当于完全实现了这个标准。
ECMAScript6,即ES6,也称ES2015,是ECMAScript的第六次修订,于2015年完成,并且运用的范围逐渐开始扩大,因为其相对于ES5更加简洁,提高了开发速率,开发者也都在陆续进行使用,但是由于ES6还存在一些支持的问题,所以一般即使是使用ES6开发的工程,也需要使用Babel进行转换。
Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这一过程叫做“源码到源码”编译, 也被称为转换编译。
一般来说Babel作为依赖包被引入ES6工程中,此处不再介绍以cli方式使用的ES6,如果你需要以编程的方式来使用 Babel,可以使用 babel-core 这个包。babel-core 的作用是把 js 代码分析成 ast ,方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的,如箭头函数,rest 参数,函数默认值等,这种语言层面的不兼容只能通过将代码转为 ast,分析其语法后再转为低版本 js。babel的使用过程如下:
1. 首先安装 babel-core。
$ npm install babel-core
2. 在文件开头引入babel:
var babel = require("babel-core");
3. 文件转换
字符串形式的 JavaScript 代码可以直接使用 babel.transform 来编译。
-
babel.transform( "code();", options);
-
// => { code, map, ast }
-
babel.transformFile( "filename.js", options, function(err, result) {
-
result; // => { code, map, ast }
-
});
-
babel.transformFileSync( "filename.js", options);
-
// => { code, map, ast }
1. 添加依赖
在Node.js工程package.json包中添加如下依赖:
-
"devDependencies": {
-
"babel-cli": "^6.26.0",
-
"babel-eslint": "^8.0.1",
-
"babel-plugin-transform-flow-strip-types": "^6.22.0",
-
"babel-preset-es2015": "^6.24.1",
-
"babel-register": "^6.26.0",
-
...
-
}
-
"scripts": {
-
"serve-dev": "NODE_ENV=development nodemon ./src/index.js --exec babel-node",
-
},
二、let, const
这两个的用途与var类似,都是用来声明变量的,但在实际运用中他俩都有各自的特殊用途。首先来看下面这个例子:
-
var name = 'zach'
-
-
while ( true) {
-
var name = 'obama'
-
console.log(name) //obama
-
break
-
}
-
-
console.log(name) //obama
-
let name = 'zach'
-
-
while ( true) {
-
let name = 'obama'
-
console.log(name) //obama
-
break
-
}
-
-
console.log(name) //zach
-
var a = [];
-
for ( var i = 0; i < 10; i++) {
-
a[i] = function () {
-
console.log(i);
-
};
-
}
-
a[ 6](); // 10
-
var a = [];
-
for ( let i = 0; i < 10; i++) {
-
a[i] = function () {
-
console.log(i);
-
};
-
}
-
a[ 6](); // 6
-
const PI = Math.PI
-
-
PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only
三、解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
-
let [a, b, c] = [ 1, 2, 3];
-
let [foo, [[bar], baz]] = [ 1, [[ 2], 3]];
-
foo // 1
-
bar // 2
-
baz // 3
-
let [ , , third] = [ "foo", "bar", "baz"];
-
third // "baz"
-
let [head, ...tail] = [ 1, 2, 3, 4];
-
head // 1
-
tail // [2, 3, 4]
-
let [x, y, ...z] = [ 'a'];
-
x // "a"
-
y // undefined
-
z // []
-
let [x, y] = [ 1, 2, 3];
-
x // 1
-
y // 2
-
-
let [a, [b], d] = [ 1, [ 2, 3], 4];
-
a // 1
-
b // 2
-
d // 4
-
let [x = 1] = [ undefined];
-
x // 1
-
-
let [x = 1] = [ null];
-
x // null
-
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
-
baz // "aaa"
-
-
let obj = { first: 'hello', last: 'world' };
-
let { first: f, last: l } = obj;
-
f // 'hello'
-
l // 'world'
-
-
let arr = [ 1, 2, 3];
-
let { 0 : first, [arr.length - 1] : last} = arr; //属性名表达式
-
first // 1
-
last // 3
-
-
function add([x, y]){
-
return x + y;
-
}
-
-
add([ 1, 2]); // 3 //函数入参也可进行解构
-
-
// 返回一个数组
-
-
function example() {
-
return [ 1, 2, 3];
-
}
-
let [a, b, c] = example();
-
-
let jsonData = {
-
id: 42,
-
status: "OK",
-
data: [ 867, 5309]
-
};
-
-
let { id, status, data: number } = jsonData;
-
-
// 获取键名
-
for ( let [key] of map) {
-
// ...
-
}
-
-
// 获取键值
-
for ( let [,value] of map) {
-
// ...
-
}
如下两种函数的定义方法在解构赋值时具备不同的返回值:
-
function m1({x = 0, y = 0} = {}) {
-
return [x, y];
-
}
-
-
// 写法二
-
function m2({x, y} = { x: 0, y: 0 }) {
-
return [x, y];
-
}
-
// x 有值,y 无值的情况
-
m1({ x: 3}) // [3, 0]
-
m2({ x: 3}) // [3, undefined]
-
-
// x 和 y 都无值的情况
-
m1({}) // [0, 0];
-
m2({}) // [undefined, undefined]
-
-
m1({ z: 3}) // [0, 0]
-
m2({ z: 3}) // [undefined, undefined]
四、模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
-
// 普通字符串
-
`In JavaScript '\n' is a line-feed.`
-
-
// 多行字符串
-
`In JavaScript this is
-
not legal.`
-
-
console.log( `string text line 1
-
string text line 2`);
-
-
// 字符串中嵌入变量
-
let name = "Bob", time = "today";
-
`Hello ${name}, how are you ${time}?`
let greeting = `\`Yo\` World!`;
大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。
标签模板
模板字符串它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。
-
let a = 5;
-
let b = 10;
-
-
tag `Hello ${ a + b } world ${ a * b }`;
-
// 等同于
-
tag([ 'Hello ', ' world ', ''], 15, 50);
-
function tag(stringArr, value1, value2){
-
// ...
-
}
-
// 等同于
-
function tag(stringArr, ...values){
-
// ...
-
}
tag(['Hello ', ' world ', ''], 15, 50)
五、rest参数
ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
-
// arguments变量的写法
-
function sortNumbers() {
-
return Array.prototype.slice.call( arguments).sort();
-
}
-
-
// rest参数的写法
-
const sortNumbers = (...numbers) => numbers.sort();
扩展运算符
rest函数的实现也是基于扩展运算符,扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
-
console.log( 1, ...[ 2, 3, 4], 5)
-
// 1 2 3 4 5
-
const a1 = [ 1, 2];
-
// 写法一
-
const a2 = [...a1];
-
// 写法二
-
const [...a2] = a1;
-
// ES5
-
[ 1, 2].concat(more)
-
// ES6
-
[ 1, 2, ...more]
-
-
var arr1 = [ 'a', 'b'];
-
var arr2 = [ 'c'];
-
var arr3 = [ 'd', 'e'];
-
-
// ES5的合并数组
-
arr1.concat(arr2, arr3);
-
// [ 'a', 'b', 'c', 'd', 'e' ]
-
-
// ES6的合并数组
-
[...arr1, ...arr2, ...arr3]
-
// [ 'a', 'b', 'c', 'd', 'e' ]
六、箭头函数
ES6 允许使用“箭头”(=>)定义函数。
-
var f = v => v;
-
//上面的箭头函数等同于:
-
var f = function(v) {
-
return v;
-
};
-
var f = () => 5;
-
// 等同于
-
var f = function () { return 5 };
-
// 报错
-
let getTempItem = id => { id: id, name: "Temp" };
-
-
// 不报错
-
let getTempItem = id => ({ id: id, name: "Temp" });
-
const full = ({ first, last }) => first + ' ' + last;
-
// 等同于
-
function full(person) {
-
return person.first + ' ' + person.last;
-
}
-
// 正常函数写法
-
[ 1, 2, 3].map( function (x) {
-
return x * x;
-
});
-
-
// 箭头函数写法
-
[ 1, 2, 3].map( x => x * x);
(1)函数体内的 this对象 ,就是定义时所在的对象,而 不是使用时所在的对象 。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用 arguments对象 ,该对象在函数体内不存在。如果要用,可以用 rest 参数 代替。
(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
上面四点中,第一点尤其值得注意。this对象的指向是可变的,但是在箭头函数中,它是固定的。
-
function foo() {
-
setTimeout( () => {
-
console.log( 'id:', this.id);
-
}, 100);
-
}
-
-
var id = 21;
-
-
foo.call({ id: 42 });
七、ES6对象
ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
-
const foo = 'bar';
-
const baz = {foo};
-
baz // {foo: "bar"}
ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。下面是另一个例子。
-
function f(x, y) {
-
return {x, y};
-
}
-
-
// 等同于
-
-
function f(x, y) {
-
return { x: x, y: y};
-
}
-
-
f( 1, 2) // Object {x: 1, y: 2}
-
const person = {
-
sayName() {
-
console.log( 'hello!');
-
},
-
};
-
-
person.sayName.name // "sayName"
-
class Animal {
-
constructor(){
-
this.type = 'animal'
-
}
-
says(say){
-
console.log( this.type + ' says ' + say)
-
}
-
}
-
-
let animal = new Animal()
-
animal.says( 'hello') //animal says hello
-
-
class Cat extends Animal {
-
constructor(){
-
super()
-
this.type = 'cat'
-
}
-
}
-
-
let cat = new Cat()
-
cat.says( 'hello') //cat says hello
Class之间可以通过 extends 关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。
super关键字,它指代 父类的实例 (即 父类的this对象 )。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
ES6的继承机制,实质是 先创造父类的实例对象this (所以必须先调用super方法),然后再 用子类的构造函数修改this 。
八、遍历方法
ES6 一共有 5 种方法可以遍历对象的属性。(1)for...in
for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。
(2)Object.keys(obj)
Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。
(3)Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。
(4)Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性的键名。
(5)Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。
以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。
- 首先遍历所有数值键,按照数值升序排列。
- 其次遍历所有字符串键,按照加入时间升序排列。
- 最后遍历所有 Symbol 键,按照加入时间升序排列。
九、Symbol
ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。
Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。
-
let s1 = Symbol( 'foo');
-
let s2 = Symbol( 'bar');
-
-
s1 // Symbol(foo)
-
s2 // Symbol(bar)
-
-
s1.toString() // "Symbol(foo)"
-
s2.toString() // "Symbol(bar)"
-
let mySymbol = Symbol();
-
-
// 第一种写法
-
let a = {};
-
a[mySymbol] = 'Hello!';
-
-
// 第二种写法
-
let a = {
-
[mySymbol]: 'Hello!'
-
};
-
-
// 第三种写法
-
let a = {};
-
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
-
-
// 以上写法都得到同样结果
-
a[mySymbol] // "Hello!"
-
const obj = {};
-
let a = Symbol( 'a');
-
let b = Symbol( 'b');
-
-
obj[a] = 'Hello';
-
obj[b] = 'World';
-
-
const objectSymbols = Object.getOwnPropertySymbols(obj);
-
-
objectSymbols
-
// [Symbol(a), Symbol(b)]
-
// mod.js
-
const FOO_KEY = Symbol.for( 'foo');
-
-
function A() {
-
this.foo = 'hello';
-
}
-
-
if (!global[FOO_KEY]) {
-
global[FOO_KEY] = new A();
-
}
-
-
module.exports = global[FOO_KEY];
十、Set和Map
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。
-
const s = new Set();
-
-
[ 2, 3, 5, 4, 5, 2, 2].forEach( x => s.add(x));
-
-
for ( let i of s) {
-
console.log(i);
-
}
-
// 2 3 5 4
-
// 例一
-
const set = new Set([ 1, 2, 3, 4, 4]);
-
[...set]
-
// [1, 2, 3, 4]
-
-
// 例二
-
const items = new Set([ 1, 2, 3, 4, 5, 5, 5, 5]);
-
items.size // 5
keys方法、values方法、entries方法返回的都是遍历器对象,由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。
ES6 提供了 Map 数据结构 。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“ 字符串—值 ”的对应,Map 结构提供了“ 值—值 ”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。
-
const map = new Map([
-
[ 'name', '张三'],
-
[ 'title', 'Author']
-
]);
-
-
map.size // 2
-
map.has( 'name') // true
-
map.get( 'name') // "张三"
-
map.has( 'title') // true
-
map.get( 'title') // "Author"
(1)Map 转为数组
前面已经提过,Map 转为数组最方便的方法,就是使用 扩展运算符(...) 。
-
const myMap = new Map()
-
.set( true, 7)
-
.set({ foo: 3}, [ 'abc']);
-
[...myMap]
-
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
将数组传入 Map 构造函数,就可以转为 Map。
-
new Map([
-
[ true, 7],
-
[{ foo: 3}, [ 'abc']]
-
])
-
// Map {
-
// true => 7,
-
// Object {foo: 3} => ['abc']
-
// }
如果所有 Map 的键都是字符串,它可以转为对象。
-
function strMapToObj(strMap) {
-
let obj = Object.create( null);
-
for ( let [k,v] of strMap) {
-
obj[k] = v;
-
}
-
return obj;
-
}
-
-
const myMap = new Map()
-
.set( 'yes', true)
-
.set( 'no', false);
-
strMapToObj(myMap)
-
// { yes: true, no: false }
-
function objToStrMap(obj) {
-
let strMap = new Map();
-
for ( let k of Object.keys(obj)) {
-
strMap.set(k, obj[k]);
-
}
-
return strMap;
-
}
-
-
objToStrMap({ yes: true, no: false})
-
// Map {"yes" => true, "no" => false}
Map 转为 JSON 要区分两种情况。一种情况是,Map 的键名都是字符串,这时可以选择转为对象 JSON。
-
function strMapToJson(strMap) {
-
return JSON.stringify(strMapToObj(strMap));
-
}
-
-
let myMap = new Map().set( 'yes', true).set( 'no', false);
-
strMapToJson(myMap)
-
// '{"yes":true,"no":false}'
-
function mapToArrayJson(map) {
-
return JSON.stringify([...map]);
-
}
-
-
let myMap = new Map().set( true, 7).set({ foo: 3}, [ 'abc']);
-
mapToArrayJson(myMap)
-
// '[[true,7],[{"foo":3},["abc"]]]'
JSON 转为 Map,正常情况下,所有键名都是字符串。
-
function jsonToStrMap(jsonStr) {
-
return objToStrMap( JSON.parse(jsonStr));
-
}
-
-
jsonToStrMap( '{"yes": true, "no": false}')
-
// Map {'yes' => true, 'no' => false}
十一、模块(module)体系
ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。
-
// ES6模块
-
import { stat, exists, readFile } from 'fs';
由于 ES6 模块是编译时加载,使得 静态分析 成为可能。有了它,就能进一步拓宽 JavaScript 的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。
除了静态加载带来的各种好处,ES6 模块还有以下好处。
- 不再需要UMD模块格式了,将来服务器和浏览器都会支持 ES6 模块格式。目前,通过各种工具库,其实已经做到了这一点。
- 将来浏览器的新 API 就能用模块格式提供,不再必须做成全局变量或者navigator对象的属性。
- 不再需要对象作为命名空间(比如Math对象),未来这些功能可以通过模块提供。
- 变量必须声明后再使用
- 函数的参数不能有同名属性,否则报错
- 不能使用with语句
- 不能对只读属性赋值,否则报错
- 不能使用前缀 0 表示八进制数,否则报错
- 不能删除不可删除的属性,否则报错
- 不能删除变量delete prop,会报错,只能删除属性delete global[prop]
- eval不会在它的外层作用域引入变量
- eval和arguments不能被重新赋值
- arguments不会自动反映函数参数的变化
- 不能使用arguments.callee
- 不能使用arguments.caller
- 禁止this指向全局对象
- 不能使用fn.caller和fn.arguments获取函数调用的堆栈
- 增加了保留字(比如protected、static和interface)
模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量。
-
// profile.js
-
export var firstName = 'Michael';
-
export var lastName = 'Jackson';
-
export var year = 1958;
-
// profile.js
-
var firstName = 'Michael';
-
var lastName = 'Jackson';
-
var year = 1958;
-
-
export {firstName, lastName, year};
-
function v1() { ... }
-
function v2() { ... }
-
-
export {
-
v1 as streamV1,
-
v2 as streamV2,
-
v2 as streamLatestVersion
-
};
export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错,下一节的import命令也是如此。这是因为处于条件代码块之中,就没法做静态优化了,违背了 ES6 模块的设计初衷。
-
// 报错
-
var m = 1;
-
export m;
-
-
// 写法一
-
export var m = 1;
-
-
// 写法二
-
var m = 1;
-
export {m};
import 命令
使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。
-
// main.js
-
import {firstName, lastName, year} from './profile.js';
-
-
function setName(element) {
-
element.textContent = firstName + ' ' + lastName;
-
}
import { lastName as surname } from './profile.js';
import命令具有提升效果,会提升到整个模块的头部,首先执行。
export default 命令
使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。
-
// export-default.js
-
export default function () {
-
console.log( 'foo');
-
}
-
// import-default.js
-
import customName from './export-default';
-
customName(); // 'foo'
export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能唯一对应export default命令。本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。
export 与 import 的复合写法
如果在一个模块之中,先输入后输出同一个模块,import语句可以与export语句写在一起。
-
export { foo, bar } from 'my_module';
-
-
// 等同于
-
import { foo, bar } from 'my_module';
-
export { foo, bar };
import和require的区别
引擎处理import语句是在编译时,这时不会去分析或执行if语句,所以import语句放在if代码块之中毫无意义,因此会报句法错误,而不是执行时错误。也就是说,import和export命令只能在模块的顶层,不能在代码块之中(比如,在if代码块之中,或在函数之中)。这样的设计,固然有利于编译器提高效率,但也导致无法在运行时加载模块。在语法上,条件加载就不可能实现。如果import命令要取代 Node 的require方法,这就形成了一个障碍。因为require是运行时加载模块,import命令无法取代require的动态加载功能。
-
const path = './' + fileName;
-
const myModual = require(path);
import()加载模块成功以后,这个模块会作为一个对象, 当作then方法的参数 。因此,可以使用对象解构赋值的语法,获取输出接口。
-
import( './myModule.js')
-
.then( ({export1, export2}) => {
-
// ...·
-
});