ES6

ECMAScript6.0 简介
ECMAScript 6.0简介
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，在 2015 年 6 月正式发布。它的目标，是使得
JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMAScript 和 JavaScript 的关系
1996 年 11 月，Netscape（ JavaScript 的创造者，网景公司），决定将其提交给国际标准化组织 ECMA，希望将Javascript成为国际标准。
1997年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，其版本为1.0。为了解决商标问题和体现ECMA组织为制定者，且保证语言的开放性和中立性，更名为
ECMAScript。
ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。
01 ECMAScript6.0 简介
ES6与ES5的关系
ES6是ES5的语法糖，即ES6是在ES5的基础上进行封装，多数代码都可以用ES5实现的，方便使用。
ES6与ES7的关系
与ES6相比ES7增强了关键词async的功能，并且可以使用await,轻松直接调用函数来实现异步调用同步化。
02 ES5.0 严格模式回顾
设立严格模式的原因：
● 消除JavaScript语法的一些不合理、不严谨之处，减少一些怪异行为;
● 消除代码运行的一些不安全之处，保证代码运行的安全；
● 提高编译器效率，增加运行速度；
● 为新版本的JavaScript做好铺垫。
严格模式的关键词：'use strict'
严格模式的特例：
1、 变量使用前必须要先声明
2、 禁止函数中的this指向全局变量
3、 eval函数存在作用域
案例 严格模式的特例

02 ES5.0 JSON对象回顾
JSON对象通常用于与服务端交换数据。
JSON对象的常用方法：
▪ JSON.parse()：将类似数组或对象格式的字符串转化为JSON格式的对象。
▪ json.stringfy()：将对象或数组转换为字符串。

02 ES5.0 Object扩展：回顾
● Object.create(原对象, [{新属性}])
作用: 以指定对象为原型创建新的对象，并为新的对象指定新的属性, 并对属性进行描述
value : 指定值
writable : 标识当前属性值是否是可修改的, 默认为false
enumerable： 标识当前属性是否能以对象的形式枚举显示，枚举即可以使用for in 枚举，默认为false。
configurable: 标识当前属性是否可以被删除 默认为false
● Object.defineProperties(原对象, 扩展属性)
作用: 为指定对象定义扩展多个属性
get ：用来获取当前属性值得回调函数
set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值
案例 Object扩展

案例 Object扩展

02 ES5.0 回顾
Array 扩展：
● 引用名.forEach((item,index)=>{}) : 遍历当前数组
let arr = [1,2,3,4,5,] ;
arr.forEach( (item,index)=>{ console.log(item,index); });
● 引用名.map((item, index) =>{}) : 遍历数组，并返回一个新的数组。
let arr = [1,2,3,4,5,] ;
arr.forEach( (item,index)=>{ console.log(item,index); });
● 引用名.filter((item, index) =>{}) : 遍历过滤，并生成一个新的数组，回调函数体内必须返回Boolean类型

02 ES5.0 回顾
函数扩展：
● 函数名. bind (obj) :将函数内的this 绑定为obj, 并将函数返回

03 let 语句块和 const 表现形式：{ 语句块 }

在浏览器环境，顶层对象指的是window对象和_self，在Node中，顶层对象指的是global对象。ES2020在语言标准的层面，引入globalThis作为顶层对象，在任何环境下，globalThis都是存在的，都可以从它拿到顶层对象，指向全局环境下的this。
03 let 和 const
let
定义变量。
Const
定义常量。，声明变量的同时需要立即初始化。当数据类型为数值、字符串、布尔值、类型时，其值是不可改变的，但是为对象或数组的时候，其值是可以改变，因为声明的变量相当于指向的那个内存地址。注：如果想将对象冻结，可以使用方法：Object.freeze（）。
let和const的特性
● 块级作用域
● 不存在变量提升：暂时性死区(Temporal Dead Zone，TDZ)：本质，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
● 同一作用域，不能重复声明同一变量
例 Let与const特性

例 作用域案例

例 作用域案例二

04 变量的解构赋值和默认值
解构赋值的概念
ES6 允许按照一定模式（即规则），从数组和对象中提取值，对变量进行赋值，这被称为解构赋值（Destructuring）。
let [a, b, c] = [1, 2, 3]; 
04 变量的解构赋值和默认值
数组的解构赋值
语法：
let [a, b, c] = [1, 2, 3];
用法：
1、 完全解构
2、 不完全解构
3、 嵌套解构
4、 扩展运算符解构
5、 Set类型解构
6、 数据类型的解构
例 数组解构练习一

例 数组解构练习二


04
数组的解构赋值
语法：
let [a, b, c] = [1, 2, 3];
默认值：
1、 默认值
2、 默认值+解构
3、 默认值+解构中的undefined
4、 默认值+解构中的null
5、 默认值函数+解构值
6、 默认值是变量
7、 默认值是变量+部分解构覆盖
8、 默认值是变量+解构覆盖
9、 默认值暂时性死区
例 数组默认值练习一

04
对象的解构赋值语法：
let { foo, bar } = { foo: 'aaa', bar: 'bbb’ }; let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
注：对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
用法：
1、 完全解构
2、 不完全解构
3、 属性的解构
例 对象解构练习

04
对象的解构赋值
语法：
let { foo, bar } = { foo: 'aaa', bar: 'bbb’ }; let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
默认值：
1、 默认值
2、 默认值+解构
3、 默认值+引用解构
4、 默认值+解构中的undefined
5、 默认值+解构中的null
6、 代码块默认值
7、 空对象赋值
8、 默认值解构数组下标
例 对象默认值练习一


例 对象默认值练习二

function move({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
move({x: 3, y: 8}); move({x: 3});
move({});//[ undefined, undefined ]
04
函数参数的解构赋值语法：
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); //[3,8] move({x: 3}); //[3,0] move({}); //[0,0]
04
字符串的解构赋值
语法：
const [a, b, c, d, e] = 'hello’; let {length : len} = 'hello’; 
04
解构赋值的作用
1、 交换变量的值

2、 获取函数返回的部分值
04
解构赋值的作用
3、 函数参数的定义

4、 提取Json数据

05 模板字符串语法：
`字符内容${变量输出}字符内容`，反引号
注：${ }中的值：
1.变量
2.任意javascript表达式
3.获取对象的属性
4.调用函数
06
对象的简写：
●对象中属性名的简写

06
对象的简写：
●对象中方法的简写

06
对象中变量
●变量做属性名

06
对象中变量
●变量做方法名


07 箭头函数语法：
ES6允许用箭头（=>）声明函数。()=>{}等价于function (){}，用箭头声明的函数称之为箭头函数。
参数：
●无参数：变量名 = ()=>{函数体}
let f =()=>{ console.log("10"); };

●两个及以上参数：变量名=(参数1，参数2)=>{函数体}
var fu = (n,m=10)=>{ return n*m; }
07 箭头函数返回值：变量名 = (参数)=>{return 返回值}
特殊函数体：
● 函数体内是一条语句。
let f =n=> console.log(n);
● 函数体内是一条语句并且是return关键词。
let f1 =(n,m)=> n*m; //省略return
07 箭头函数
箭头函数中this的使用规则：
●全局函数中的this

●事件处理函数中的this

07 箭头函数
箭头函数中this的使用规则：
●对象方法中的this

07 箭头函数
箭头函数的使用注意事项
●函数体内的this对象，指向定义时的对象

07 箭头函数
箭头函数的使用注意事项
●不可以当作构造函数，即，不可以使用new命令，否则会抛出错误

07 箭头函数
箭头函数的使用注意事项
●不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest运算符代替。

案例 第一类

案列 第二类

07 箭头函数
箭头函数与普通函数的区别及特性
1、 箭头函数是匿名函数，不绑定自己的this,arguments,super,new.target
2、 箭头函数会捕获其所在上下文的this值，作为自己的this值，在使用call/apply绑定时，会改变this指向。
3、 箭头函数不绑定arguments，取而代之用rest参数运算符解决
4、 箭头函数当方法使用的时候，没有定义this绑定
5、 箭头函数不能作为构造函数，和 new 一起用就会抛出错误
6、 箭头函数没有原型属性
7、 不能简单返回对象字面量
作业
[[1, 2], [3, 4]].map(([a, b]) => a + b);
请简述上述代码块的输出结果，若报错误或输出undefine，请说明理由
08 ES6中的运算符
rest 剩余参数运算符：将以“，”隔开的参数转换为数组。通常使用在形参中。
语法：…变量名注：rest参数运算符只能放在形参的最后位置。

08 ES6中的运算符
spread 扩展运算符：将一个数组转为用“，”的参数序列，可以理解为rest 参数运算符逆运算，通常使用在实参的传递中。
语法：(…)

spread 扩展运算符的应用场景：
1、 复制、合并数组或对象
2、 将类似数组或转为真正的数组。
注：扩展运算符对数组和对象操作，都属于深拷贝，即只是将当前变量指向已存在的值。
例 扩展运算符应用场景


09
JavaScript六种数据类型：
undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）历史：
在ES5中对象的属性名都为字符串，容易产生冲突，为解决这一问题在ES6中引入Symbol运算符，它是JS的第七种类型。
机制：
Symbol 值通过Symbol函数生成。凡是Symbol函数生成的Symbol类型，都是独一无二的。
09 symbol使用
●无参数

●有参数

09 symbol使用
●作为属性名

●模拟私有方法

09 Symbol运算符
symbol使用
●模拟私有方法

09 Symbol运算符
symbol的for方法

注：for生成的symbol 如果描述相同，返回的值是相同的。
10 Set和Map数据结构
Set数据结构：类似数组，与数组的区别在于其内部成员是唯一的(即没有重复元素)。
语法：
let set = new Set(数组);//注：参数可以省略
常用属性：
size：获取set结构内元素的数量。
常用方法：
add(value)：添加某个值，返回 Set 结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。
forEach：遍历Set结构内的元素。
10 SetMap和数据结构Map：数据结构类似对象，区别在于对象只接受字符串作为键名，而
Map的键名可以是任意类型。
语法：
let set = new Map(初始化的值);//注：参数可以省略
常用属性：
size：获取Map结构内元素的数量。
常用方法：
set(key,value)：添加一个键值数据。
get(key)：根据key获取value。
has(key)：返回一个布尔值，表示map集合是否包含当前key的成员。
delete(key)：根据指定的key删除数据。
clear()：清除所有成员，没有返回值。 forEach：遍历Map集合使用forEach。
11 IteratorES6中的四种数据结构：遍历器
数组（Array）、对象（Object），Map、Set 概念：
Iterator，它是一种接口，也可称之为一种机制，所有数据结构只要部署了该接口，都可以进行遍历。
作用：
1） 为各种数据结构，提供一个统一的、简便的访问接口；
2） 使数据结构的成员能够按某种次序排列；
3） 为for…of提供服务。
默认Iterator 接口：
ES6中，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性。Symbol.iterator属性本身是一个函数，当该函数被执行，就会返回一个遍历器。
原生具备 Iterator 接口的数据结构：
Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象
11 Iterator遍历器遍历过程流程图：

遍历过程代码：

11 Iterator遍历器
实现机理：
注：
1、 必须具备一个next属性方法
2、 next属性方法中必须返回{value:’’,done:false/true}格式的数据对象实现遍历器接口：
注：
1、 默认的iterator接口应该部署在数据结构的Symbol.iterator属性上；否则无法使用for...of遍历
2、 遍历器想要遍历的内容是自己定义的逻辑，没有统一的实现机制，它只提供了规范，所以需要实现做iterator接口（即Symbol.iterator）。
12 Generator简介： 函数
Generator 函数是 ES6 提供的一种异步编程解决方案。语法上，可以把它理解成一个状态机，封装了多个内部状态。
在Generator 函数执行时会返回一个遍历器对象，可以一次遍历函数内的每一个状态。
Generator 函数两大特性：
1) function关键字与函数名之间有一个*；
2) 函数体内部使用yield表达式，定义不同的内部状态。

12 Generatoryield表达式： 函数
Generator 函数返回的遍历器对象，当调用next方法才会遍历下一个内部状态，所以其提供了一种可以暂停执行的函数。yield表达式就是暂停标志。因此yield表达式为 JS 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。
next()的参数：
yield表达式本身没有返回值，next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

案例 Generator用同步写法解决异步问题

13 Promisecallback回顾：对象
callback，回调函数。
同步和异步概念：
同步：主任务在执行多任务队列时，由上到下，由左到右依次执行。且下一个任务需要等待上一个任务执行结束后得到执行结果，再继续执行，即阻塞模式。
异步：主任务在执行多任务队列时，不需要等待上一个任务的执行结果，就可以执行下一个任务，当上一个任务执行完成后，会以状态、通知和回调来通知调用者。即非阻塞模式。
callback的应用场景：
调用函数或方法时，可以异步执行分支语句(即分支任务)。
callback数据传递：
callback回调的地狱展示:
接口 回调地狱问题

13 Promise概念： 对象
Promise对象，异步编程的一种解决方案。也称之为一个容器，里面保存着某个未来才会结束的事件（异步操作）的结果。在语法上，其从它可以获取异步操作的消息。
特点：
1） 对象的状态不受外界影响。
2） 一旦状态改变，就不会再变。
状态：
pending（进行中）、fulfilled（已成功）和rejected（已失败）缺点：
1） 无法取消Promise。
2） 不设置回调函数，内部抛出的错误不会反应到外部。
3） pending状态，无法确定进度。
例 Promise基本语法

例 延时案例

13 Promise对象的实例方法对象
Promise.实例.then()
then方法接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个回调函数可以省略。
then方法也有返回值，返回是一个新的Promise对象，因此可以采用链式操作，即then方法后面调用另一个then方法。
Promise.实例. catch()
用于捕获异常或发生错误时的回调函数。
Promise.实例. finally()
用于书写无论是否成功或失败都会被执行的代码。
例 Promise的方法

13 Promise对象的实例方法对象
Promise.实例.all()
用于将多个 Promise 实例，包装成一个新的 Promise 实例。
注：
1）参数实例中必须全部都是fulfilled时，Promise.all()的状态才是fulfilled，否则状态就是rejected； 2）参数实例中如果使用catch捕获的错误或者异常，则不会触发Promise.all()的catch方法。
Promise.实例. race()
用于将多个 Promise 实例，包装成一个新的 Promise 实例。与all(),的区别在于有一个实例率先改变状态， Promise.race()的状态就跟着改变，并将状态返回。
案例 回调地狱问题的解决

作业 下面代码运行结果

14 async简介： 函数
async函数，本质就是Generator函数的语法糖。
async函数是将 Generator函数的星号（*）替换成async，将yield替换成await。
async函数返回一个Promise对象，可以使用then方法添加回调函数。
当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

14 asyncasync函数中的函数return关键词的使用和Promise对象的两个方法的使用
async函数返回一个Promise对象。async函数内部return语句返回的值，会成为then方法回调函数的参数。resolve函数传递的参数返回值给await。


14 方法一

14 方法二

14 方法三，优雅处理错误。


15
面向对象编程：
面向对象编程其本质是以，建立模型体现出来的抽象思维过程和面向对象的一些方法。模型是用来反映现实世界中事物特征。方法就是模型所需要的行为动作。
在面向对象编程中，最常见的表现就是基于类(Class)来表现的，每一个对象实例都有具体的类，即对象的类型。
面向对象特点：封装，继承，多态。
面向对象特点：封装，继承，多态。
15 类的定义：
关键词：class 类的实例化：
关键词：new
类的构造方法：
关键词：constructor
构造方法，通过new命令生成对象实例时，自动调用该方法。
类的属性：使用this关键词，即可赋值。
类中的方法：不需要function关键词
15
静态方法和属性：
关键词：static
类的继承：
关键词：extends 类中的 super 和 this ：

作业代码输出结果为：1元7角1分 1元7角1分 1元7角1分
16 深度克隆
JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数类型。
深度拷贝原理：
深拷贝，是在不改变原有结构的基础上，重新生成一个新的结构，且与原有结构一致，即深拷贝，拷贝的是值，而浅拷贝，拷贝的是地址。