Node.js 4.0
Node.js 4.0 ,这个版本是Node和iojs合并后发布的首个稳定版本,并且为开发者带来 了大量的ES6语言扩展。通过这边文章你可以大致了解 Node.js中包括的ES6语言扩展。本文将会为你介绍如何使用这些ES 6 新特性。
块级作用域
- 简介
Node.js 是一个基于Chrome V8
引擎的JavaScript
运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器npm
,是全球最大的开源库生态系统。
Node v4这个版本是Node
和iojs
合并后发布的首个稳定版本,并且为开发者带来了大量的ES6
语言扩展。了解Node.js
中包括的ES6语言扩展。本课将会为你介绍如何使用这些新特性。
Node.js 4.0.0 可以让您享受最尖端的技术,保持项目的先进性。其中对v8
的升级几乎做到了与Chromium / Google Chrome
同步,达到了4.5.x
,它提供了很多新的语言功能。ECMA-262
是JavaScript
语言规范的最新版本,而且好多新特性数都是开箱即用的。这些新特性包括:
- classes - 各种 ‘类’,再也无需用 CoffeeScript 的语法糖写类了
- generators - 未来的.js 代码中将有无数生成器,不学一点就看不懂 JS 代码了哦
- collections - 集合、映射、弱集合、弱映射
- arrow functions - 箭向函数
- block scoping - 使用 let 、const 作用域,块辖域
- template strings - 模板字串
- promises - 用标准化了的方法进行延迟和异步计算
- symbols - 唯一的、不可修改的数据
- 严格模式
严格模式在语义上与正常的JavaScript有一些不同。 首先,严格模式会将JavaScript陷阱直接变成明显的错误。其次,严格模式修正了一些引擎难以优化的错误:同样的代码有些时候严格模式会比非严格模式下更快。 第三,严格模式禁用了一些有可能在未来版本中定义的语法。
因为我们ECMAScript 6
中的一些特性,必须在严格模式下,才可以使用,而不报错。
严格模式可以应用到整个script
标签或某个别函数中。
为整个script
标签开启严格模式, 需要在所有语句之前放一个特定语句"use strict"
; (或'use strict'
;)
// 整个语句都开启严格模式的语法
"use strict";
let v = "Hi! I'm a strict mode script!";
同样的,要给某个函数开启严格模式,得把 "use strict"
; (或 'use strict'
; )声明一字不漏地放在函数体所有语句之前。
function strict()
{
// 函数级别严格模式语法
'use strict';
return "Hi! I'm a strict mode function!" ;
}
function notStrict() {
return "I'm not strict.";
}
练习
请我们在严格模式下声明let变量,并赋值’hello 欢迎到汇智网学习!!’。
- let
let 允许把变量的作用域限制在块级域中。与 var 不同处是:var 申明变量要么是全局的,要么是函数级的,而无法是块级的。
let vs var
let的作用域是块,而var的作用域是函数
'use strict';
var a = 5;
var b = 10;
if (a === 5) {
let a = 4; // The scope is inside the if-block
var b = 1; // The scope is inside the function
console.log(a); // 4
console.log(b); // 1
}
console.log(a); // 5
console.log(b); // 1
let在循环中
可以使用let关键字绑定变量在循环的范围而不是使用一个全局变量(使用var)定义。
'use strict';
for (let i = 0; i < 10; i++) {
console.log(i); // 0, 1, 2, 3, 4 ... 9
}
console.log(i); // i is not defined
上面报错,因为变量i不存在于for语句外的作用域中。let创建块级作用域变量的,使用var创建一个全局变量。
练习
请按照上面的例子在for循环中分别用let与var定义i变量,并在循环外打印出结果,体会let与var作用域。
- const
const这个声明创建一个常量,可以全局或局部的函数声明。
一个常量可以是全局的或者是局部的,常量遵循与变量相同的作用域规则。
一个常量不可以被重新赋值,并且不能被重复声明.所以,虽然可以在声明一个常量的时候不进行初始化,但这样做是没有意义的,因为这个常量的值永远会保持undefined。
一个常量不能和它所在作用域内的其他变量或函数拥有相同的名称。
示例
下面的例子演示了常量的行为。
const num = 10;
num =20;
console.log(num); // 10
如果我们在上面声明常量num,在声明var num,这时会报错,num已经声明。
const num = 10;
var num = 20;
console.log(num); // 'num' has already been declared
- 块级作用域
很多语言中都有块级作用域,JavaScript使用var声明变量,以function来划分作用域,大括号“{}” 却限定不了var的作用域。用var声明的变量具有变量提升(declaration hoisting)的效果。
ES6里增加了一个let,可以在{}, if, for里声明。用法同var,但作用域限定在块级,let声明的变量不存在变量提升。
'use strict';
function f1() {
var a = 1;
let n = 2;
if (true) {
var a = 20;
let n = 10;
}
console.log(n); // 2
console.log(a); // 20
}
f1();
类(Classes)
类声明和类表达式
ES6 中的类实际上就是个函数,而且正如函数的定义方式有函数声明和函数表达式两种一样,类的定义方式也有两种,分别是:类声明、类表达式。
类声明
类声明是定义类的一种方式,就像下面这样,使用 class 关键字后跟一个类名(这里是 Ploygon),就可以定义一个类。
'use strict';
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
变量提升
类声明和函数声明不同的一点是,函数声明存在变量提升现象,而类声明不会。也就是说,你必须先声明类,然后才能使用它,否则代码会抛出 ——ReferenceError 异常,像下面这样:
var p = new Polygon(); // ReferenceError
class Polygon {}
联系
请声明一个类,命名为(Person),构造函数(constructor)中定义name属性,并定义一个实例方法sayName(){…}中打印’My name is’+this.name ,new Person(‘Lily’),调用sayName()方法,看结果。
类表达式
类表达式是定义类的另外一种方式,就像函数表达式一样,在类表达式中,类名是可有可无的。如果定义了类名,则该类名只有在类体内部才能访问到。
'use strict';
// 匿名类表达式
var Polygon = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
// 命名类表达式
var Polygon = class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
构造函数
类的成员需要定义在一对花括号 {} 里,花括号里的代码和花括号本身组成了类体。类成员包括类构造器和类方法(包括静态方法和实例方法)。
class 根据 constructor 方法来创建和初始化对象。
constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类只能有一个constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。
constructor() {}
constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象。
'use strict';
class Foo {
constructor() {
return Object.create(null);
}
}
new Foo() instanceof Foo
// false
上面代码中,constructor函数返回一个全新的对象,结果导致实例对象不是Foo类的实例。
constructor 方法是一个特殊的类方法,它既不是静态方法也不是实例方法,它仅在实例化一个类的时候被调用。一个类只能拥有一个名为 constructor 的方法,否则会抛出 SyntaxError 异常。
严格模式
类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用。
静态方法
static关键字定义了一个类的静态方法。静态方法被称为无需实例化类也可当类被实例化。静态方法通常用于为应用程序创建实用函数。
示例
'use strict';
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static distance(a, b) {
const dx = a.x - b.x;
const dy = a.y - b.y;
return Math.sqrt(dx*dx + dy*dy);
}
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
console.log(Point.distance(p1, p2));
使用 extends 关键字创建子类
extends 关键字可以用来创建继承于某个类的子类。
这个例子是根据名为Animal类创建一个名为Dog的类。
'use strict';
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Dog extends Animal {
speak() {
console.log(this.name + ' barks.');
}
}
var dog = new Dog('NiNi');
dog.speak();
练习
请声明一个类,命名为(Person),构造函数(constructor)中定义name属性,并定义一个实例方法sayName(){…}中打印’My name is’+this.name ,根据名为Person类创建一个名为Tom的类。
集合
map基本用法
map对象是一个简单的键/值映射。任何值(包括对象和原始值)都可以用作一个键或一个值。
var m = new Map();
var o = {p: "Hello World"};
m.set(o, "content")
m.get(o) // "content"
上面代码使用set方法,将对象o当作m的一个键。
Map也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
var map = new Map([["name", "张三"], ["title", "Author"]]);
map.size // 2
map.get("name") // "张三"
map.get("title") // "Author"
上面代码在新建Map实例时,就指定了两个键name和title。
注意Map的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键。
- 如果使用对象作为键名,就不用担心自己的属性与原作者的属性同名。
- 如果Map的键是一个简单类型的值(数字、字符串、布尔值),则只要两个值严格相等,Map将其视为一个键,包括0和-0。
- 另外,虽然NaN不严格相等于自身,但Map将其视为同一个键。\
练习
请创建一个map对象,使用set添加键为‘keyString’=‘a string’,值为‘和键’a string’关联的值’,并用get读取此键的值。\
map实例的属性和操作方法
size属性返回Map结构的成员总数。即返回映射对象中的键/值对的数目。
**set(key, value)**方法设置key所对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。
var m = new Map();
m.set("edition", 6) // 键是字符串
m.set(262, "standard") // 键是数值
m.set(undefined, "nah") // 键是undefined
set方法返回的是Map本身,因此可以采用链式写法。
**get(key)**方法读取key对应的键值,如果找不到key,返回undefined。
**has(key)**方法返回一个布尔值,表示某个键是否在Map数据结构中。
**delete(key)**方法删除某个键,返回true。如果删除失败,返回false。
**clear()**方法清除所有成员,没有返回值。
map遍历方法
Map原生提供三个遍历器生成函数和一个遍历方法。
- **keys():**返回键名的遍历器。
- **values():**返回键值的遍历器。
- **entries():**返回所有成员的遍历器。
- **forEach():**遍历Map的所有成员。
var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var key of myMap.keys()) {
console.log(key);
}
// Will show 2 logs; first with "0" and second with "1"
for (var value of myMap.values()) {
console.log(value);
}
// Will show 2 logs; first with "zero" and second with "one"
for (var item of myMap.entries()) {
console.log(item[0] + " = " + item[1]);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
myMap.forEach(function(value, key) {
console.log(key + " = " + value);
}, myMap)
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
WeakMap
WeakMap结构与Map结构基本类似,唯一的区别是它只接受对象作为键名(null除外),不接受其他类型的值作为键名,而且键名所指向的对象,不计入垃圾回收机制。
var map = new WeakMap()
map.set(1, 2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
上面代码中,如果将1和Symbol作为WeakMap的键名,都会报错。
WeakMap的设计目的在于,键名是对象的弱引用(垃圾回收机制不将该引用考虑在内),所以其所对应的对象可能会被自动回收。当对象被回收后,WeakMap自动移除对应的键值对。
典型应用是,一个对应DOM元素的WeakMap结构,当某个DOM元素被清除,其所对应的WeakMap记录就会自动被移除。基本上,WeakMap的专用场合就是,它的键所对应的对象,可能会在将来消失。WeakMap结构有助于防止内存泄漏。
WeakMap与Map在API上的区别主要是两个,一是没有遍历操作(即没有key()、values()和entries()方法),也没有size属性;二是无法清空,即不支持clear方法。这与WeakMap的键不被计入引用、被垃圾回收机制忽略有关。
WeakMap只有四个方法可用:get()、set()、has()、delete()。
var myMap = new WeakMap();
var key = {name:"John"};
// 添加键
myMap.set(key, "this is john");
// 读取值
var info = myMap.get(key);
console.log(info); // info: this is john
Set基本用法
ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
Set本身是一个构造函数,用来生成Set数据结构。
var s = new Set();
[2,3,5,4,5,2,2].map(x => s.add(x))
for (i of s) {console.log(i)}
// 2 3 5 4
上面代码通过add方法向Set结构加入成员,结果表明Set结构不会添加重复的值。使用箭头函数形式。
向Set加入值的时候,不会发生类型转换,所以5和"5"是两个不同的值。Set内部判断两个值是否不同,使用的算法类似于精确相等运算符(===),这意味着,两个对象总是不相等的。唯一的例外是NaN等于自身(精确相等运算符认为NaN不等于自身)。
let set = new Set();
set.add({})
set.size // 1
set.add({})
set.size // 2
上面代码表示,由于两个空对象不是精确相等,所以它们被视为两个值。
练习
请创建一个Set对象,并把1添加进去,我们来判断2是否被添加进去(has()函数),并打印看结果。
Set实例的属性和方法
Set结构的实例有以下属性。
- **Set.prototype.constructor:**构造函数,默认就是Set函数。
- **Set.prototype.size:返回Set实例的成员总数。
Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。
- **add(value):**添加某个值,返回Set结构本身。
- **delete(value):**删除某个值,返回一个布尔值,表示删除是否成功。
- **has(value):**返回一个布尔值,表示该值是否为Set的成员。
- **clear():**清除所有成员,没有返回值。 上面这些属性和方法的实例如下。
var s = new Set();
s.add(1).add(2).add(2);
// 注意2被加入了两次
console.log(s.size); // 2
console.log(s.has(1)); // true
console.log(s.has(2)); // true
console.log(s.has(3)); // false
console.log(s.delete(2));
console.log(s.has(2)); // false
遍历操作
Set结构的实例有四个遍历方法,可以用于遍历成员。
- **keys():**返回一个键名的遍历器
- **values():**返回一个键值的遍历器
- **entries():**返回一个键值对的遍历器
- **forEach():**使用回调函数遍历每个成员
key方法、value方法、entries方法返回的都是遍历器对象。由于Set结构没有键名,只有键值(或者说键名和键值是同一个值),所以key方法和value方法的行为完全一致。
let set = new Set(['red', 'green', 'blue']);
for ( let item of set.keys() ){
console.log(item);
}
// red green blue
for ( let item of set.values() ){
console.log(item);
}
// red green blue
for ( let item of set.entries() ){
console.log(item);
}
// ["red", "red"] ["green", "green"] ["blue", "blue"]
上面代码中,entries方法返回的遍历器,同时包括键名和键值,所以每次输出一个数组,它的两个成员完全相等。
Set结构的实例的forEach方法,用于对每个成员执行某种操作,没有返回值。
let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
// 2 4 6
上面代码说明,forEach方法的参数就是一个处理函数。该函数的参数依次为键值、键名、集合本身(上例省略了该参数)。另外,forEach方法还可以有第二个参数,表示绑定的this对象。
WeakSet基本用法
WeakSet结构与Set类似,也是不重复的值的集合。但是,它与Set有两个区别。
- 首先,WeakSet的成员只能是对象,而不能是其他类型的值。
- 其次,WeakSet中的对象都是弱引用,即垃圾回收机制不考虑WeakSet对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于WeakSet之中。这个特点意味着,无法引用WeakSet的成员,因此WeakSet是不可遍历的。
WeakSet是一个构造函数,可以使用new命令,创建WeakSet数据结构。
作为构造函数,WeakSet可以接受一个数组或类似数组的对象作为参数。(实际上,任何具有iterable接口的对象,都可以作为WeakSet的参数。)该数组的所有成员,都会自动成为WeakSet实例对象的成员。
var a = [[1,2], [3,4]];
var ws = new WeakSet(a);
上面代码中,a是一个数组,它有两个成员,也都是数组。将a作为WeakSet构造函数的参数,a的成员会自动成为WeakSet的成员
WeakSet方法
WeakSet结构有以下三个方法。
- **WeakSet.prototype.add(value):**向WeakSet实例添加一个新成员。
- **WeakSet.prototype.delete(value):**清除WeakSet实例的指定成员。
- **WeakSet.prototype.has(value):**返回一个布尔值,表示某个值是否在WeakSet实例之中
下面是一个例子。
var ws = new WeakSet();
var obj = {};
var foo = {};
ws.add(obj);
ws.has(foo); // false
WeakSet没有size属性,没有办法遍历它的成员。
ws.size // undefined
ws.forEach // undefined
ws.forEach(function(item){ console.log('WeakSet has ' + item)})
// TypeError: undefined is not a function
上面代码试图获取size和forEach属性,结果都不能成功。
WeakSet不能遍历,是因为成员都是弱引用,随时可能消失,遍历机制无法保存成员的存在,很可能刚刚遍历结束,成员就取不到了。WeakSet的一个用处,是储存DOM节点,而不用担心这些节点从文档移除时,会引发内存泄漏。
Generator 函数
Generator简介
基本概念
Generator函数有多种理解角度。从语法上,首先可以把它理解成,Generator函数是一个状态机,封装了多个内部状态。
执行Generator函数会返回一个遍历器对象,也就是说,Generator函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历Generator函数内部的每一个状态。
形式上,Generator函数是一个普通函数,但是有两个特征。一是,function命令与函数名之间有一个星号;二是,函数体内部使用yield语句,定义不同的内部状态(yield语句在英语里的意思就是“产出”)。
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();
上面代码定义了一个Generator函数helloWorldGenerator,它内部有两个yield语句“hello”和“world”,即该函数有三个状态:hello,world和return语句(结束执行)。
然后,Generator函数的调用方法与普通函数一样,也是在函数名后面加上一对圆括号。不同的是,调用Generator函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,遍历器对象(Iterator Object)。
next方法
调用遍历器对象的next方法,使得指针移向下一个状态。也就是说,每次调用next方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield语句(或return语句)为止。换言之,Generator函数是分段执行的,yield语句是暂停执行的标记,而next方法可以恢复执行。
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
上面代码一共调用了四次next方法。
第一次调用,Generator函数开始执行,直到遇到第一个yield语句为止。next方法返回一个对象,它的value属性就是当前yield语句的值hello,done属性的值false,表示遍历还没有结束。
第二次调用,Generator函数从上次yield语句停下的地方,一直执行到下一个yield语句。next方法返回的对象的value属性就是当前yield语句的值world,done属性的值false,表示遍历还没有结束。
第三次调用,Generator函数从上次yield语句停下的地方,一直执行到return语句(如果没有return语句,就执行到函数结束)。next方法返回的对象的value属性,就是紧跟在return语句后面的表达式的值(如果没有return语句,则value属性的值为undefined),done属性的值true,表示遍历已经结束。
第四次调用,此时Generator函数已经运行完毕,next方法返回对象的value属性为undefined,done属性为true。以后再调用next方法,返回的都是这个值。
总结一下,调用Generator函数,返回一个遍历器对象,代表Generator函数的内部指针。以后,每次调用遍历器对象的next方法,就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值,是yield语句后面那个表达式的值;done属性是一个布尔值,表示是否遍历结束。
yield*语句
用来在一个Generator函数里面执行另一个Generator函数,我们需要用yield语句。
如果yield命令后面跟的是一个遍历器对象,需要在yield命令后面加上星号,表明它返回的是一个遍历器对象。这被称为yield语句。
function* anotherGenerator(i) {
yield i + 1;
yield i + 2;
yield i + 3;
}
function* generator(i){
yield i;
yield* anotherGenerator(i);
yield i + 10;
}
var gen = generator(10);
console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20
运行结果就是使用一个遍历器,遍历了多个Generator函数,有递归的效果。
Promise对象
Promise简介
所谓Promise,就是一个对象,用来传递异步操作的消息。
Promise对象有以下两个特点。
(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
基本用法
ES6规定,Promise对象是一个构造函数,用来生成Promise实例。
下面代码创造了一个Promise实例。
var promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由JavaScript引擎提供,不用自己部署。
resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从Pending变为Resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从Pending变为Rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
Promise实例生成以后,可以用then方法分别指定Resolved状态和Reject状态的回调函数。
promise.then(function(value) {
// success
}, function(value) {
// failure
});
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用,第二个回调函数是Promise对象的状态变为Reject时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
Promise.prototype.then()与catch()示意图
因为Promise.prototype.then和 Promise.prototype.catch方法返回 promises, 所以它们可以被链式调用—一种被称为 composition 的操作.
Promise.prototype.then()
then()方法返回一个Promise。它有两个参数,分别为Promise在 success 和 failure 情况下的回调函数。
p.then(onFulfilled, onRejected);
p.then(function(value) {
// 满足
}, function(reason) {
// 拒绝
});
一个Function, 当 Promise 为 fulfilled 时调用. 该函数有一个参数, 为肯定结果 value;为 rejected 时调用. 该函数有一个参数, 为否定原因 reason。
因为then方法返回一个Promise,你可以轻易地链式调用then。
var p2 = new Promise(function(resolve, reject) {
resolve(1);
});
p2.then(function(value) {
console.log(value); // 1
return value + 1;
}).then(function(value) {
console.log(value); // 2
});
练习
请按照上面示例写法创建一个Promise对象,resolve(‘Lucy’)名字,并在p.then返回(return value + ’ is a gril !’)。
Promise.prototype.catch()
catch()方法只处理Promise被拒绝的情况,并返回一个Promise。该方法的行为和调用Promise.prototype.then(undefined, onRejected)相同。
语法
p.catch(onRejected);
p.catch(function(reason) {
// 拒绝
});
onRejected当Promise被拒绝时调用的Function。该函数调用时会传入一个参数:拒绝原因。
示例:使用catch方法
var p1 = new Promise(function(resolve, reject) {
resolve("成功");
});
p1.then(function(value) {
console.log(value); // "成功!"
throw "哦,不!";
}).catch(function(e) {
console.log(e); // "哦,不!"
});
catch方法主要作用于处理promise组合。
Promise.all()
Promise.all方法用于将多个Promise实例,包装成一个新的Promise实例。
var p = Promise.all([p1,p2,p3]);
上面代码中,Promise.all方法接受一个数组作为参数,p1、p2、p3都是Promise对象的实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为Promise实例,再进一步处理。(Promise.all方法的参数不一定是数组,但是必须具有iterator接口,且返回的每个成员都是Promise实例。)
p的状态由p1、p2、p3决定,分成两种情况。
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
下面是一个具体的例子。
// 生成一个Promise对象的数组
var promise = Promise.resolve(3);
Promise.all([true, promise])
.then(values => {
console.log(values); // [true, 3]
});
Promise.race()
race 函数返回一个Promise,这个Promise根据传入的Promise中的第一个确定状态–不管是接受还是拒绝–的状态而确定状态。
Promise.race方法同样是将多个Promise实例,包装成一个新的Promise实例。
var p1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, "one");
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "two");
});
Promise.race([p1, p2]).then(function(value) {
console.log(value); // "two"
// Both resolve, but p2 is faster
});
上面代码中,只要p1、p2之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的Promise实例的返回值,就传递给p的回调函数。
Promise.reject()
Promise.reject(reason)方法也会返回一个新的Promise实例,该实例的状态为rejected。Promise.reject方法的参数reason,会被传递给实例的回调函数。
使用静态的Promise.reject()方法
Promise.reject("Testing static reject").then(function(reason) {
// 未被调用
}, function(reason) {
console.log(reason); // "测试静态拒绝"
});
Promise.reject(new Error("fail")).then(function(error) {
// 未被调用
}, function(error) {
console.log(error); // 堆栈跟踪
});
Promise.resolve()
Promise.resolve(value)方法返回一个以给定值resolve掉的Promise对象。但如果这个值是thenable的(就是说带有then方法),返回的promise会“追随”这个thenable的对象,接收它的最终状态(指resolved/rejected/pendding/settled);否则这个被返回的promise对象会以这个值被fulfilled。
语法
Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable);
value用来resolve待返回的promise对象的参数。既可以是一个Promise对象也可以是一个thenable。
静态方法 Promise.resolve返回一个Promise对象,这个Promise对象是被resolve的。
示例
使用静态方法Promise.resolve
Promise.resolve("Success").then(function(value) {
console.log(value); // "Success"
}, function(value) {
// not called
});
以一个数组进行resolve
var p = Promise.resolve([1,2,3]);
p.then(function(v) {
console.log(v[0]); // 1
});
resolve另一个Promise对象
var original = Promise.resolve(true);
var cast = Promise.resolve(original);
cast.then(function(v) {
console.log(v); // true
});
Symbol
Symbol简介
ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。它是JavaScript语言的第七种数据类型,前六种是:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。
Symbol值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的Symbol类型。凡是属性名属于Symbol类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。
let s = Symbol();
typeof s
// "symbol"
注意,Symbol函数前不能使用new命令,否则会报错。这是因为生成的Symbol是一个原始类型的值,不是对象。也就是说,由于Symbol值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型。
Symbol函数可以接受一个字符串作为参数,表示对Symbol实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。
Symbol函数的参数只是表示对当前Symbol值的描述,因此相同参数的Symbol函数的返回值是不相等的。
var s1 = Symbol("foo");
var s2 = Symbol("foo");
console.log(s1 === s2); // false
Symbol值不能与其他类型的值进行运算,会报错。
但是,Symbol值可以显式转为字符串。
练习
请按照上面的讲述,定义一个变量sym通过Symbol函数生成,参数为My symbol,并显示转换为String,打印看结果 。
作为属性名的Symbol
由于每一个Symbol值都是不相等的,这意味着Symbol值可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖。
var mySymbol = Symbol();
// 第一种写法
var a = {};
a[mySymbol] = 'Hello!';
// 第二种写法
var a = {
[mySymbol]: 'Hello!'
};
// 第三种写法
var a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
// 以上写法都得到同样结果
console.log(a[mySymbol]); // "Hello!"
上面代码通过方括号结构和Object.defineProperty,将对象的属性名指定为一个Symbol值。
Symbol值作为对象属性名时,不能用点运算符。
在对象的内部,使用Symbol值定义属性时,Symbol值必须放在方括号之中。
let s = Symbol();
let obj = {
[s](arg) { ... }
};
Symbol类型还可以用于定义一组常量,保证这组常量的值都是不相等的。
Symbol值作为属性名时,该属性还是公开属性,不是私有属性。
练习
请按照最示例上面定义一个变量mySymbol通过Symbol函数生成,在定义一个空的a对象,分别a.mySymbol = ‘Hello!’;a[mySymbol]=‘Hello!’;并打印a[mySymbol]看结果。
属性名遍历
Symbol作为属性名,该属性不会出现在for...in、for...of循环中,也不会被Object.keys()、Object.getOwnPropertyNames()返回。但是,它也不是私有属性,有一个Object.getOwnPropertySymbols方法,可以获取指定对象的所有Symbol属性名。
Object.getOwnPropertySymbols方法返回一个数组,成员是当前对象的所有用作属性名的Symbol值。
var obj = {};
var a = Symbol('a');
var b = Symbol('b');
obj[a] = 'Hello';
obj[b] = 'World';
var objectSymbols = Object.getOwnPropertySymbols(obj);
console.log(objectSymbols);
// [Symbol(a), Symbol(b)]
Symbol.for()
使用给定的key搜索现有符号,如果找到则返回符号。否则将得到一个新的使用给定的key在全局符号注册表中创建的符号。
有时,我们希望重新使用同一个Symbol值,Symbol.for方法可以做到这一点。它接受一个字符串作为参数,然后搜索有没有以该参数作为名称的Symbol值。如果有,就返回这个Symbol值,否则就新建并返回一个以该字符串为名称的Symbol值。
var s1 = Symbol.for('foo');
var s2 = Symbol.for('foo');
console.log(s1 === s2); // true
上面代码中,s1和s2都是Symbol值,但是它们都是同样参数的Symbol.for方法生成的,所以实际上是同一个值。
Symbol.for()与Symbol()这两种写法,都会生成新的Symbol。它们的区别是,前者会被登记在全局环境中供搜索,后者不会。Symbol.for()不会每次调用就返回一个新的Symbol类型的值,而是会先检查给定的key是否已经存在,如果不存在才会新建一个值。比如,如果你调用Symbol.for(“cat”) 30次,每次都会返回同一个Symbol值,但是调用Symbol(“cat”) 30次,会返回30个不同的Symbol值。
Symbol.for("bar") === Symbol.for("bar")
// true
Symbol("bar") === Symbol("bar")
// false
上面代码中,由于Symbol()写法没有登记机制,所以每次调用都会返回一个不同的值。
Symbol.keyFor()
为给定符号从全局符号注册表中检索一个共享符号键。
Symbol.keyFor方法返回一个已登记的Symbol类型值的key。
var s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"
var s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined
上面代码中,变量s2属于未登记的Symbol值,所以返回undefined。
箭头函数
基本用法
箭头函数就是个是简写形式的函数表达式,并且它拥有词法作用域的this值.箭头函数总是匿名的.
ES6允许使用“箭头”(=>)定义函数。
var f = v => v;
//等同于:
var f = function(v) {
return v;
};
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
var f = () => 5;
// 等同于
var f = function (){ return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
var sum = (num1, num2) => { return num1 + num2; }
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。
var getTempItem = id => ({ id: id, name: "Temp" });
简化回调函数
箭头函数的一个用处是简化回调函数。
// 正常函数写法
[1,2,3].map(function (x) {
return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);
另一个例子是
// 正常函数写法
var result = values.sort(function(a, b) {
return a - b;
});
// 箭头函数写法
var result = values.sort((a, b) => a - b);
如果不用箭头函数,可能就要占用多行,而且还不如现在这样写醒目。
使用注意点
箭头函数有几个使用注意点。
(1)函数体内的this对象,绑定定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。
this对象的指向是可变的,但是在箭头函数中,它是固定的。
function Timer () {
this.seconds = 0
setInterval(() => this.seconds++, 1000)
}
var timer = new Timer()
setTimeout(() => console.log(timer.seconds), 3100)
// 3
上面代码中,Timer函数内部的setInterval-调用了_this.seconds-属性,通过箭头函数将_this绑定在Timer的实例对象。否则,输出结果是0,而不是3。
模板字符串
模板字符串简介
模板字符串允许嵌入表达式,并且支持多行字符串和字符串插补特性。
模板字符串使用反引号 (
) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来,如果一个模板字符串由表达式开头,则该字符串被称为带标签的模板字符串,该表达式通常是一个函数,它会在模板字符串处理后被调用,在输出最终结果前,你都可以在通过该函数对模板字符串来进行操作处理。
语法
`string text`
`string text line 1
string text line 2`
`string text ${expression} string text`
tag `string text ${expression} string text`
多行字符串
在新行中插入的任何字符都是模板字符串中的一部分,使用普通字符串,你可以通过以下的方式获得多行字符串:
console.log("string text line 1\n\
string text line 2");
// "string text line 1
// string text line 2"
要获得同样效果的多行字符串,只需使用如下代码:
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"
练习:请练习下打印3句话要求换行。
表达式插补
在普通字符串中嵌入表达式,必须使用如下语法:
var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."
现在通过模板字符串,我们可以使用一种更优雅的方式来表示:
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
练习:请定义变量name=“汇智网”,age=1,打印出一句话"汇智网已经正式上线1年了!!"。
带标签的模板字符串
模板字符串的一种更高级的形式称为带标签的模板字符串。它允许您通过标签函数修改模板字符串的输出。标签函数的第一个参数是一个包含了字符串字面值的数组(在本例中分别为“Hello”和“world”);第二个参数,在第一个参数后的每一个参数,都是已经被处理好的替换表达式(在这里分别为“15”和“50”)。 最后,标签函数返回处理好的字符串。在后面的示例中,标签函数的名称可以为任意的合法标示符。
var a = 5;
var b = 10;
function tag(strings) {
console.log(arguments); // { '0': [ 'Hello ', ' world ', '' ], '1': 15, '2': 50 }
console.log(strings[0]); // "Hello "
console.log(strings[1]); // " world "
console.log(arguments[1]); // 15
console.log(arguments[2]); // 50
return "Hubwiz!";
}
console.log(tag`Hello ${ a + b } world ${ a * b}`);
// "Hubwiz!"
我们打印出arguments可以看到 处理的参数为
{ '0': [ 'Hello ', ' world ', '' ], '1': 15, '2': 50 }
我们已有的Hello和world参数放到一个数组中,后续处理的参数依次生成。
原始字符串
在标签函数的第一个参数中,存在一个特殊的属性raw ,我们可以通过它来访问模板字符串的原始字符串。
function tag(strings, values) {
console.log(strings.raw[0]);
// "string text line 1 \\n string text line 2"
}
tag`string text line 1 \n string text line 2`;
另外,使用String.raw() 方法创建原始字符串和使用默认模板函数和字符串连接创建是一样的。
String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"
安全性
由于模板字符串能够访问变量和函数,因此不能由不受信任的用户来构造。
"use strict"
let a = 10;
console.warn(`${a+=20}`); // "30"
console.warn(a); // 30
字符串的扩展
字符的Unicode表示法
JavaScript允许采用\uxxxx形式表示一个字符,其中“xxxx”表示字符的码点。
"\u0061" // "a"
但是,这种表示法只限于\u0000——\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表达。
"\uD842\uDFB7" // "?"
"\u20BB7" // " 7"
上面代码表示,如果直接在“\u”后面跟上超过0xFFFF的数值(比如\u20BB7),JavaScript会理解成“\u20BB+7”。由于\u20BB是一个不可打印字符,所以只会显示一个空格,后面跟着一个7。
ES6对这一点做出了改进,只要将码点放入大括号,就能正确解读该字符。
"\u{20BB7}"
// "?"
"\u{41}\u{42}\u{43}"
// "ABC"
let hello = 123;
hell\u{6F} // 123
'\u{1F680}' === '\uD83D\uDE80'
// true
上面代码中,最后一个例子表明,大括号表示法与四字节的UTF-16编码是等价的。
有了这种表示法之后,JavaScript共有6种方法可以表示一个字符。
'\z' === 'z' // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true
codePointAt()处理字节
codePointAt方法,能够正确处理4个字节储存的字符,返回一个字符的码点。
var s = "?a";
s.codePointAt(0) // 134071
s.codePointAt(1) // 57271
s.charCodeAt(2) // 97
codePointAt方法的参数,是字符在字符串中的位置(从0开始)。上面代码中,JavaScript将“?a”视为三个字符,codePointAt方法在第一个字符上,正确地识别了“?”,返回了它的十进制码点134071(即十六进制的20BB7)。在第二个字符(即“?”的后两个字节)和第三个字符“a”上,codePointAt方法的结果与charCodeAt方法相同。
总之,codePointAt方法会正确返回四字节的UTF-16字符的码点。对于那些两个字节储存的常规字符,它的返回结果与charCodeAt方法相同。
codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。
function is32Bit(c) {
return c.codePointAt(0) > 0xFFFF;
}
is32Bit("?") // true
is32Bit("a") // false
String.fromCodePoint()
ES5提供String.fromCharCode方法,用于从码点返回对应字符,但是这个方法不能识别辅助平面的字符(编号大于0xFFFF)。
String.fromCharCode(0x20BB7)
// "ஷ"
上面代码中,String.fromCharCode不能识别大于0xFFFF的码点,所以0x20BB7就发生了溢出,最高位2被舍弃了,最后返回码点U+0BB7对应的字符,而不是码点U+20BB7对应的字符。
ES6提供了String.fromCodePoint方法,可以识别0xFFFF的字符,弥补了String.fromCharCode方法的不足。在作用上,正好与codePointAt方法相反。
String.fromCodePoint(0x20BB7)
// “?”
注意,fromCodePoint方法定义在String对象上,而codePointAt方法定义在字符串的实例对象上。
includes(), startsWith(), endsWith()
传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。
ES6又提供了三种新方法。
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
var s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
这三个方法都支持第二个参数,表示开始搜索的位置。
var s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。
练习:
请定义一个变量str并赋值为‘Hello 汇智网’,He是否在源字符串的头部,网是否在尾部,智是否包含在此变量中。
repeat()重复次数
repeat方法返回一个新字符串,表示将原字符串重复n次。
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
参数如果是小数,会被取整。
'na'.repeat(2.9) // "nana"
如果repeat的参数是负数或者Infinity,会报错。
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError
但是,如果参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。0到-1之间的小数,取整以后等于-0,repeat视同为0。
'na'.repeat(-0.9) // ""
参数NaN等同于0。
'na'.repeat(NaN) // ""
如果repeat的参数是字符串,则会先转换成数字。
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"