ES 6新特性（06）

Part1 · JavaScript【深度剖析】

ES 6新特性

文章说明：本专栏内容为本人参加【拉钩大前端高新训练营】的学习笔记以及思考总结，学徒之心，仅为分享。如若有误，请在评论区支出，如果您觉得专栏内容还不错，请点赞、关注、评论。

共同进步！

上一篇：【ECMAScript概述】、【ES6概述】、【var let const】、【数组与对象的解构】

今天内容有点多，不过大多数都是API用法，只是比较细碎，慢慢嚼，多使用，在使用的过程中加深理解。

七、ES2015模板字符串

1.模板字面量

ECMAScript 6 新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同，模板字面量保留换行字符，可以跨行定义字符串：

使用键盘区域Esc下方【数字1左边】的反引号

let myMultiLineString = 'first line\nsecond line'; 
let myMultiLineTemplateLiteral = `first line 
second line`; 
console.log(myMultiLineString); 
// first line 
// second line" 
console.log(myMultiLineTemplateLiteral); 
// first line
// second line
console.log(myMultiLineString === myMultiLinetemplateLiteral); // true

所以说，当我们需要写HTML模板时，这个方法非常有用：

let pageHTML = ` 
<div> 
 <a href="#"> 
 <span>Jake</span> 
 </a> 
</div>`;

由于模板字面量会保持反引号内部的空格，因此在使用时要格外注意。格式正确的模板字符串看起来可能会缩进不当。

2.字符串插值

模板字面量最常用的一个特性是支持字符串插值，也就是可以在一个连续定义中插入一个或多个值。技术上讲，**模板字面量不是字符串，而是一种特殊的 JavaScript 句法表达式，只不过求值后得到的是字符串。**模板字面量在定义时立即求值并转换为字符串实例，任何插入的变量也会从它们最接近的作用域中取值。

字符串插值通过在${}中使用一个 JavaScript 表达式实现：

let value = 5; 
let exponent = 'second'; 
// 以前，字符串插值是这样实现的：
let interpolatedString = value + ' to the ' + exponent + ' power is ' + (value * value); 
// 现在，可以用模板字面量这样实现：
let interpolatedTemplateLiteral = `${ value } to the ${ exponent } power is ${ value * value }`; 
console.log(interpolatedString); // 5 to the second power is 25 
console.log(interpolatedTemplateLiteral); // 5 to the second power is 25
// 所有插入的值都会使用 toString()强制转型为字符串，而且任何 JavaScript 表达式都可以用于插值。

3.模板字面量标签函数

模板字面量也支持定义标签函数（tag function），而通过标签函数可以自定义插值行为。标签函数会接收被插值记号分隔后的模板和对每个表达式求值的结果。

标签函数本身是一个常规函数，通过前缀到模板字面量来应用自定义行为，如下例所示。标签函数接收到的参数依次是原始字符串数组和对每个表达式求值的结果。这个函数的返回值是对模板字面量求值得到的字符串。

这样概念解释很不清楚，通过下方的例子来加强理解：

let a = 6; 
let b = 9; 
function simpleTag(strings, ...expressions) { 
 	console.log(strings); 
 	for(const expression of expressions) { 
 		console.log(expression); 
 	} 
 	return 'foobar'; 
} 
let taggedResult = simpleTag`${ a } + ${ b } = ${ a + b }`; 
// ["", " + ", " = ", ""] 
// 6 
// 9 
// 15 
console.log(taggedResult); // "foobar"

八、ES2015参数默认值

在 ECMAScript5.1 及以前，实现默认参数的一种常用方式就是检测某个参数是否等于 undefined，如果是则意味着没有传这个参数，那就给它赋一个值：

function makeKing(name) { 
     name = (typeof name !== 'undefined') ? name : 'Henry'; 
     return `King ${name} VIII`; 
} 
console.log(makeKing()); // 'King Henry VIII' 
console.log(makeKing('Louis')); // 'King Louis VIII'

ECMAScript 6 之后就不用这么麻烦了，因为它支持显式定义默认参数了。下面就是与前面代码等价的 ES6 写法，只要在函数定义中的参数后面用=就可以为参数赋一个默认值：

function makeKing(name = 'Henry') { 
 	return `King ${name} VIII`; 
} 
console.log(makeKing('Louis')); // 'King Louis VIII' 
console.log(makeKing()); // 'King Henry VIII'

上面给参数传 undefined 相当于没有传值，不过这样可以利用多个独立的默认值：

function makeKing(name = 'Henry', numerals = 'VIII') { 
 	return `King ${name} ${numerals}`; 
} 
console.log(makeKing()); // 'King Henry VIII' 
console.log(makeKing('Louis')); // 'King Louis VIII' 
console.log(makeKing(undefined, 'VI')); // 'King Henry VI'

在使用默认参数时，arguments 对象的值不反映参数的默认值，只反映传给函数的参数。当然，跟 ES5 严格模式一样，修改命名参数也不会影响 arguments 对象，它始终以调用函数时传入的值为准：

function makeKing(name = 'Henry') { 
     name = 'Louis'; 
     return `King ${arguments[0]}`; 
} 
console.log(makeKing()); // 'King undefined' 
console.log(makeKing('Louis')); // 'King Louis'

默认参数值并不限于原始值或对象类型，也可以使用调用函数返回的值：

let romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI']; 
let ordinality = 0; 
function getNumerals() { 
     // 每次调用后递增
     return romanNumerals[ordinality++]; 
} 
function makeKing(name = 'Henry', numerals = getNumerals()) { 
     return `King ${name} ${numerals}`; 
} 
console.log(makeKing()); // 'King Henry I'
console.log(makeKing('Louis', 'XVI')); // 'King Louis XVI' 
console.log(makeKing()); // 'King Henry II' 
console.log(makeKing()); // 'King Henry III'

函数的默认参数只有在函数被调用时才会求值，不会在函数定义时求值。而且，计算默认值的函数只有在调用函数但未传相应参数时才会被调用。

箭头函数同样也可以这样使用默认参数，只不过在只有一个参数时，就必须使用括号而不能省略了：

let makeKing = (name = 'Henry') => `King ${name}`; 
console.log(makeKing()); // King Henry

九、ES2015展开数组(Spread)

在 ECMAScript5.1 及以前，我们从打印出数组中的元素很麻烦，最笨的办法是：

const arr = ['foo', 'bar', 'baz'];
console.log(
	arr[0],
	arr[1],
	arr[2]
)
// foo bar baz

但是当数组的个数不确定是，就不能使用这个方法，并且这个方法属于硬展，我们可以使用函数的apply方法，第一个参数this指向console对象，第二个参数是要传递的数组对象：

const arr = ['foo', 'bar', 'baz'];
console.log.apply(console, arr)
// foo bar baz

在ES6中，我们可以更简单的使用数组展开的方法，形式同与收集剩余参数，使用…arr展开数组，这样写起来非常方便：

const arr = ['foo', 'bar', 'baz'];
console.log(...arr)
// foo bar baz

十、ES2015箭头函数

ECMAScript 6 新增了使用胖箭头（=>）语法定义函数表达式的能力。很大程度上，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方，都可以使用箭头函数：

let arrowSum = (a, b) => { 
 	return a + b; 
}; 
let functionExpressionSum = function(a, b) { 
 	return a + b; 
}; 
console.log(arrowSum(5, 8)); // 13 
console.log(functionExpressionSum(5, 8)); // 13

如果只有一个参数，那也可以不用括号。只有没有参数，或者多个参数的情况下，才需要使用括号：

// 以下两种写法都有效
let double = (x) => { return 2 * x; }; 
let triple = x => { return 3 * x; };
// 没有参数需要括号
let getRandom = () => { return Math.random(); }; 
// 多个参数需要括号
let sum = (a, b) => { return a + b; }; 
// 无效的写法：
let multiply = a, b => { return a * b; };

箭头函数也可以不用大括号，但这样会改变函数的行为。使用大括号就说明包含“函数体”，可以在一个函数中包含多条语句，跟常规的函数一样。如果不使用大括号，那么箭头后面就只能有一行代码，比如一个赋值操作，或者一个表达式。而且，省略大括号会隐式返回这行代码的值：

// 以下两种写法都有效，而且返回相应的值
let double = (x) => { return 2 * x; }; 
let triple = (x) => 3 * x; 
// 可以赋值
let value = {}; 
let setName = (x) => x.name = "Matt"; 
setName(value); 
console.log(value.name); // "Matt" 
// 无效的写法：
let multiply = (a, b) => return a * b;

箭头函数虽然语法简洁，但也有很多场合不适用。箭头函数不能使用 arguments、super 和new.target，也不能用作构造函数。此外，箭头函数也没有 prototype 属性。

另外，箭头函数中的this指向也与普通函数不同，请参考一篇文章：

十一、ES2015对象

1.对象字面量的增强

ES6中增强了对象的字面量，在之前，我们声明对象只能使用键+冒号+值的方式：

let bar = '345'
const obj = {
    name: 'leo',
    age: '26',
    bar: bar
}

而在ES6中,当我们的属性名与其值都为变量且相同时，我们可以省略冒号以及后面的值：

let bar = '345'
const obj = {
    name: 'leo',
    age: '26',
    bar
}

同样，当我们需要使用动态的属性名时，之前的做法是在对象声明过后，再对对象赋值动态属性名的值：

const obj = {
    name: 'leo',
    age: '26',
    bar
}
obj[Math.random()] = 'random'

在ES6中，我们可以直接使用方括号+表达式对对象添加动态的属性名，这种方式称之为【计算属性名】，方括号内部可以为任意表达式，表达式结果作为最终的属性名：

const obj = {
    name: 'leo',
    age: '26',
    bar,
    [Math.random()]: 'random'
}

2.Object扩展方法

• Object.assign

此方法可以将多个源对象中的属性复制到一个目标对象中，如果对象之间有相同的属性名，那么源对象中的属性就会覆盖掉目标对象中的属性。源对象与目标对象都是普通的对象，只不过用处不同

const source1 = {
      a: 123,
      b: 123
}

const source2 = {
      b: 789,
      d: 789
}

const target = {
      a: 456,
      c: 456
}

const result = Object.assign(target, source1, source2)

console.log(target)
console.log(result === target)
// { a: 123, c: 456, b: 789, d: 789 }
// true

应用场景：

function func (obj) {
      // obj.name = 'func obj'
      // console.log(obj)

      const funcObj = Object.assign({}, obj)
      funcObj.name = 'func obj'
      console.log(funcObj)
}

const obj = { name: 'global obj' }

func(obj)
console.log(obj)

assign方法多用于options对象参数设置默认值。

• Object.is

用来判断两个值是否相等，在之前我们使用和=分别判断值是否相等以及是否全等（值与类型都相等），在==中，js默认使用toString方法来进行隐式转换，而在ES6中，提供了全新的方法Object.is方法进行判断：

console.log(
  // 0 == false              // => true
  // 0 === false             // => false
  // +0 === -0               // => true
  // NaN === NaN             // => false
  // Object.is(+0, -0)       // => false
  // Object.is(NaN, NaN)     // => true
)

在实际使用中，仍然建议使用===来判断。

十二、ES2015 Proxy

在 ES6 之前，ECMAScript 中并没有类似代理的特性。由于代理是一种新的基础性语言能力，很多转译程序都不能把代理行为转换为之前的 ECMAScript 代码，因为代理的行为实际上是无可替代的。为此，代理和反射只在百分之百支持它们的平台上有用。可以检测代理是否存在，不存在则提供后备代码。不过这会导致代码冗余，因此并不推荐。

1.空代理

最简单的代理是空代理，即除了作为一个抽象的目标对象，什么也不做。默认情况下，在代理对象上执行的所有操作都会无障碍地传播到目标对象。因此，在任何可以使用目标对象的地方，都可以通过同样的方式来使用与之关联的代理对象。

如下面的代码所示，在代理对象上执行的任何操作实际上都会应用到目标对象。唯一可感知的不同就是代码中操作的是代理对象。

const target = { 
 	id: 'target' 
}; 
const handler = {}; 
const proxy = new Proxy(target, handler); 
// id 属性会访问同一个值
console.log(target.id); // target 
console.log(proxy.id); // target 
// 给目标属性赋值会反映在两个对象上
// 因为两个对象访问的是同一个值
target.id = 'foo'; 
console.log(target.id); // foo 
console.log(proxy.id); // foo 
// 给代理属性赋值会反映在两个对象上
// 因为这个赋值会转移到目标对象
proxy.id = 'bar'; 
console.log(target.id); // bar 
console.log(proxy.id); // bar 
// hasOwnProperty()方法在两个地方
// 都会应用到目标对象
console.log(target.hasOwnProperty('id')); // true 
console.log(proxy.hasOwnProperty('id')); // true 
// Proxy.prototype 是 undefined 
// 因此不能使用 instanceof 操作符
console.log(target instanceof Proxy); // TypeError: Function has non-object prototype 
'undefined' in instanceof check 
console.log(proxy instanceof Proxy); // TypeError: Function has non-object prototype 
'undefined' in instanceof check 
// 严格相等可以用来区分代理和目标
console.log(target === proxy); // false

2.定义捕获器：

使用代理的主要目的是可以定义捕获器（trap）。捕获器就是在处理程序对象中定义的“基本操作的拦截器”。每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。

例如，可以定义一个 get()捕获器，在 ECMAScript 操作以某种形式调用 get()时触发。下面的例子定义了一个 get()捕获器：

const target = { 
 	foo: 'bar' 
}; 
const handler = { 
     // 捕获器在处理程序对象中以方法名为键
     get() { 
     	return 'handler override'; 
     } 
}; 
const proxy = new Proxy(target, handler); 
console.log(target.foo); // bar 
console.log(proxy.foo); // handler override 
console.log(target['foo']); // bar 
console.log(proxy['foo']); // handler override 
console.log(Object.create(target)['foo']); // bar 
console.log(Object.create(proxy)['foo']); // handler override

捕获器可以定义get、delete、set等方法。

十三、ES2015 class类

ECMAScript 6 新引入的 class 关键字具有正式定义类的能力。类（class）是ECMAScript 中新的基础性语法糖结构，因此刚开始接触时可能会不太习惯。虽然 ECMAScript 6 类表面上看起来可以支持正式的面向对象编程，但实际上它背后使用的仍然是原型和构造函数的概念。

1.类的定义

与函数类型相似，定义类也有两种主要方式：类声明和类表达式。这两种方式都使用 class 关键字加大括号：

// 类声明
class Person {} 
// 类表达式
const Animal = class {};

类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法，但这些都不是必需的。空的类定义照样有效。默认情况下，类定义中的代码都在严格模式下执行。

与函数构造函数一样，多数编程风格都建议类名的首字母要大写，以区别于通过它创建的实例（比如，通过 class Foo {}创建实例 foo）：

// 空类定义，有效 
class Foo {} 
// 有构造函数的类，有效
class Bar { 
 	constructor() {} 
} 
// 有获取函数的类，有效
class Baz { 
 	get myBaz() {} 
} 
// 有静态方法的类，有效
class Qux { 
 	static myQux() {} 
}

2.类构造函数

constructor 关键字用于在类定义块内部创建类的构造函数。方法名 constructor 会告诉解释器在使用 new 操作符创建类的新实例时，应该调用这个函数。构造函数的定义不是必需的，不定义构造函数相当于将构造函数定义为空函数。

使用 new 操作符实例化 Person 的操作等于使用 new 调用其构造函数。唯一可感知的不同之处就是，JavaScript 解释器知道使用 new 和类意味着应该使用 constructor 函数进行实例化。

使用 new 调用类的构造函数会执行如下操作。

• 在内存中创建一个新对象。

• 这个新对象内部的[[Prototype]]指针被赋值为构造函数的 prototype 属性。

• 构造函数内部的 this 被赋值为这个新对象（即 this 指向新对象）。

• 执行构造函数内部的代码（给新对象添加属性）。

• 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象。

class Animal {} 
class Person { 
     constructor() { 
     	console.log('person ctor'); 
     } 
} 
class Vegetable { 
     constructor() { 
     	this.color = 'orange'; 
     } 
} 
let a = new Animal(); 
let p = new Person(); // person ctor 
let v = new Vegetable(); 
console.log(v.color); // orange

3.实例、原型、类成员

类的语法可以非常方便地定义应该存在于实例上的成员、应该存在于原型上的成员，以及应该存在于类本身的成员。

每次通过new调用类标识符时，都会执行类构造函数。在这个函数内部，可以为新创建的实例（this）添加“自有”属性。至于添加什么样的属性，则没有限制。另外，在构造函数执行完毕后，仍然可以给实例继续添加新成员。

每个实例都对应一个唯一的成员对象，这意味着所有成员都不会在原型上共享：

class Person { 
     constructor() { 
         // 这个例子先使用对象包装类型定义一个字符串
         // 为的是在下面测试两个对象的相等性
         this.name = new String('Jack'); 
         this.sayName = () => console.log(this.name); 
         this.nicknames = ['Jake', 'J-Dog'] 
     } 
} 
let p1 = new Person(), 
 	p2 = new Person(); 
p1.sayName(); // Jack 
p2.sayName(); // Jack 
console.log(p1.name === p2.name); // false 
console.log(p1.sayName === p2.sayName); // false 
console.log(p1.nicknames === p2.nicknames); // false 
p1.name = p1.nicknames[0]; 
p2.name = p2.nicknames[1]; 
p1.sayName(); // Jake 
p2.sayName(); // J-Dog

静态类成员在类定义中使用 static 关键字作为前缀。在静态成员中，this 引用类自身。其他所有约定跟原型成员一样：

class Person { 
     constructor() { 
         // 添加到 this 的所有内容都会存在于不同的实例上
         this.locate = () => console.log('instance', this); 
     } 
     // 定义在类的原型对象上
     locate() { 
        console.log('prototype', this); 
     } 
 	// 定义在类本身上
     static locate() { 
        console.log('class', this); 
     } 
} 
let p = new Person(); 
p.locate(); // instance, Person {} 
Person.prototype.locate(); // prototype, {constructor: ... } 
Person.locate(); // class, class Person {}

4.继承

ES6 类支持单继承。使用 extends 关键字，就可以继承任何拥有[[Construct]]和原型的对象。很大程度上，这意味着不仅可以继承一个类，也可以继承普通的构造函数（保持向后兼容）：

class Vehicle {} 
// 继承类
class Bus extends Vehicle {} 
let b = new Bus(); 
console.log(b instanceof Bus); // true 
console.log(b instanceof Vehicle); // true 
function Person() {} 
// 继承普通构造函数
class Engineer extends Person {} 
let e = new Engineer(); 
console.log(e instanceof Engineer); // true 
console.log(e instanceof Person); // true

十四、ES2015 Set数据结构

ECMAScript 6 新增的 Set 是一种新集合类型，为这门语言带来集合数据结构。Set 在很多方面都像是加强的 Map，这是因为它们的大多数 API 和行为都是共有的。

使用 new 关键字和 Set 构造函数可以创建一个空集合：

const m = new Set();

// 使用数组初始化集合 
const s1 = new Set(["val1", "val2", "val3"]); 
alert(s1.size); // 3 
// 使用自定义迭代器初始化集合
const s2 = new Set({ 
     [Symbol.iterator]: function*() { 
         yield "val1"; 
         yield "val2"; 
         yield "val3"; 
     } 
}); 
alert(s2.size); // 3

初始化之后，可以使用 add()增加值，使用 has()查询，通过 size 取得元素数量，以及使用 delete()和 clear()删除元素：

const s = new Set(); 
alert(s.has("Matt")); // false 
alert(s.size); // 0 
s.add("Matt") 
 .add("Frisbie"); // add函数返回的依然是set对象，所以可以使用链式调用
alert(s.has("Matt")); // true 
alert(s.size); // 2 
s.delete("Matt"); 
alert(s.has("Matt")); // false 
alert(s.has("Frisbie")); // true 
alert(s.size); // 1 
s.clear(); // 销毁集合实例中的所有值
alert(s.has("Matt")); // false 
alert(s.has("Frisbie")); // false 
alert(s.size); // 0

十五、ES2015 Map数据结构

作为 ECMAScript 6 的新增特性，Map 是一种新的集合类型，为这门语言带来了真正的键/值存储机制。Map 的大多数特性都可以通过 Object 类型实现，但二者之间还是存在一些细微的差异。具体实践中使用哪一个，还是值得细细甄别。

使用 new 关键字和 Map 构造函数可以创建一个空映射：

const m = new Map();

如果想在创建的同时初始化实例，可以给 Map 构造函数传入一个可迭代对象，需要包含键/值对数组。可迭代对象中的每个键/值对都会按照迭代顺序插入到新映射实例中：

// 使用嵌套数组初始化映射
const m1 = new Map([ 
     ["key1", "val1"], 
     ["key2", "val2"], 
     ["key3", "val3"] 
]); 
alert(m1.size); // 3 

// 映射期待的键/值对，无论是否提供
const m3 = new Map([[]]); 
alert(m3.has(undefined)); // true 
alert(m3.get(undefined)); // undefined

const m = new Map()

const tom = { name: 'tom' }

m.set(tom, 90)

console.log(m)

console.log(m.get(tom))

// 输出
// Map { { name: 'tom' } => 90 }
// 90
// 90 { name: 'tom' }

同样，map也有has()、delete()、clear()方法。