• ECMAScript 与 JavaScript
• ECMAScript的发展过程
• ECMAScript 2015新特性
• And more ...

ECMAScript概述

通常看做JavaScript的标准化规范，实际上JavaScript是ECMAScript的扩展语言,ECMAScript 只是提供了最基本的语法，JavaScript实现了 这种语言的标准 并且在此基础上 做了扩展。看图例解释了 几种环境当中 的 扩展构成。

web

node

Javascript 语言本身指的就是 ECMAScript。

2015年开始ES保持每年一个版本的迭代。

ES2015最为重要，迭代最大。也经常称为ES6 。

（ES6）概述

ES2015 标准https://262.ecma-international.org/6.0/

• 解决原有语法上的一些问题或不足
• 对原有语法进行增强
• 全新的对象，全新的方法，全新的功能
• 全新的数据类型和数据结构

let 与 块级作用域

ES2015之前只有 全局作用域 和 函数 作用域，对于复杂的代码应用是非常不利的，2015版本新增了 块级作用域。

let 关键词 解决了 循环嵌套的计数器重名导致的问题，不过建议不要使用重名的计数器。

let 声明不会出现变量提升的情况。

const （恒量/常量）

let的基础之上 多了一个只读的特性。

const声明的同时 必须 要赋予初始值。

const只是不允许修改 变量的内存指向。 并不是不可以修改内存数据。

最佳实践：不用var，主用const , 配合 let

数组的解构

简单概念，及应用实例

对象的解构

模板字符串

带标签的模板字符串：

字符串的扩展方法

参数默认值

剩余参数

展开数组

箭头函数

箭头函数还有一个很重要的变化，不会改变this的指向。

对象字面量增强

• 同名键值对 可以省略: 号
• 支持直接输入函数表达式
• 可以使用[] 的动态属性名

对象扩展方法

Object.assign 方法

将多个源对象中的属性复制到一个目标对象中。

Object.is 方法

用来判断两个值是否相等

Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

语法

const p = new Proxy(target, handler)

参数

target要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。handler一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

Proxy 是以非侵入的方式来监听到 对象的读写

Reflect 全新的方法

静态类，只能调用静态方法 不能 new,内部封装了一系列对象的底层操作

建议以后多熟悉这些方法。

class类

在面向对象编程中（object-oriented programming）, 一个 类 定义了一个对象（object's）的特征. 类是定义对象属性（properties (en-US)）和方法（methods）的模板, 是用来绘制具体对象实例的“蓝图”.

静态方法

ES2015中 添加静态成员关键词 static

类的继承：extends

extends关键字用于类声明或者类表达式中，以创建一个类，该类是另一个类的子类。

class ChildClass extends ParentClass { ... }

Set数据结构

集合，与数组类似，不允许成员重复。

const s = new Set()
s.add(1).add(2).add(3)

最主要的用法就是数组去重。

Map数据结构

与对象类似 本质都是键值对 集合 算是严格意义上的键值对集合。

遍历

myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
})
// 将会显示两个logs。 一个是 "0 = zero" 另一个是 "1 = one"

与对象最大的区别就是可以使用任意类型 的值 作为键。 而对象只能使用字符串作为键。

Symbol 一种全新的原始数据类型

表示独一无二的值

// const s = Symbol()
// console.log(s) // Symbol()

// const obj = {}
// obj[Symbol()] = '123'
// obj[Symbol()] = '456'
// console.log(obj)

// const obj = {
//   [Symbol()]: 123
// }
// console.log(obj)


// const name = Symbol()
// const person = {
//   [name]: 'zce',
//   say() {
//     console.log(this[name])
//   }
// }

目前最主要的作用就是为对象添加独一无二的属性值

补充：

// const s1 = Symbol.for('foo')
// const s2 = Symbol.for('foo')
// console.log(s1 === s2) // true  内部维护的是一个字符串注册表

// 内部常量
// console.log(Symbol.iterator) 
// console.log(Symbol.hasInstance)

// const obj = {
//   [Symbol.toStringTag] : 'Xobj'
// }
// console.log(obj.toString()) // [object Xobj]

// const obj = {
//   [Symbol()]: 'symbol value',
//   foo: 'normal value'
// }

// for (const key in obj) {
//   console.log(key) // Symbol 无法迭代 keys JSON.stringify(obj) 都无法迭代
// } 

for of 循环

全新的循环方式 以后作为 所有循环的统一方式。

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

//迭代Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

//迭代 Set
let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

//迭代 arguments 对象
(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3

关闭迭代器：

对于for...of的循环，可以由break, throw continue 或return终止。在这些情况下，迭代器关闭。

for...of与for...in的区别：

无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

for...in 语句以任意顺序迭代对象的枚举属性。

for...of 语句遍历可迭代对象定义要迭代的数据。

可迭代接口（iterble）：

es2015 提供了 iterble 接口 一种规格标准。

实现Iterable 接口就是 for...of 的前提。

只要这个数据结构实现了 可迭代接口 就可以 使用 for...of循环遍历

实现可迭代的接口：

实现迭代器的目的：

设计模式中的迭代器模式，

Generator

生成器对象是由一个 generator function 返回的,并且它符合可迭代协议和迭代器协议。

// 语法
function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

let g = gen();
// "Generator { }"

// 方法
// Generator.prototype.next()
// 返回一个由 yield表达式生成的值。
// Generator.prototype.return()
// 返回给定的值并结束生成器。
// Generator.prototype.throw()
// 向生成器抛出一个错误。

//一个无限迭代器
function* idMaker(){
    let index = 0;
    while(true)
        yield index++;
}

let gen = idMaker(); // "Generator { }"

console.log(gen.next().value);
// 0
console.log(gen.next().value);
// 1
console.log(gen.next().value);
// 2
// ...

ES Modules

ES2016概述

2016年的6月

小版本

两个小功能

includes

指数运算符

console.log(Math.pow(2,10))

console.log(Math.pow(2 ** 10))

ES2017概述

2018年6月

小版本

1.Async 函数也就是我们常说的Async/Await,是一种用于处理JS异步回调的语法糖，可以帮助我们摆脱回调地狱。

2.使用Object.values()遍历对象的属性值，无需使用使用属性名：

let obj = {a: 1, b: 2, c: 3}
 
Object.values(obj).forEach(value =>{ console.log(value); // 输出1, 2, 3})

3.使用Object.entries()遍历对象的属性名和属性值：

let obj = {a: 1, b: 2, c: 3}; 
Object.entries(obj).forEach(([key, value]) =>{   
 console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3
})

4.Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。

Object.create(
  Object.getPrototypeOf(obj), 
  Object.getOwnPropertyDescriptors(obj) 
);

5.padStart()方法用另一个字符串填充当前字符串（如果需要，多次），直到结果字符串达到给定长度。填充从当前字符串的开头（左侧）开始应用。

6.padEnd() 方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。