JS高级进阶（五）

ES6参考文献：

五、ES6新语法

5.1 let和const命令

5.1.1 let关键字

在es6中可以使用let声明变量，用法类似于var，但是有三个特点：

• let声明变量没有和var一样有变量提升
  （var a=2在输出后面也可以通过变量提升输出a为undefined）
  
• let是一个块作用域
  在if里面声明变量用var，如果在外面输出可以输出变量，但是用let会报错
  
• let不能重复声明同一个变量
  var 重复声明后面会覆盖前面但是let会报错
  

5.1.2 const关键字

const特点与let的三个特点完全一致，自己还有一个特点就是一般声明常量，一旦被声明无法修改

const不能直接修改常量对象，但是可以修改对象里面的属性

输出结果不是我们所想的等于5，而是10，因为变量提升，for循环结束后在数组中存下10个函数，循环结束时i变成10，再去执行函数时，retrun的i就是10，使用let声明变量时i的值只在当前块作用域有效，就会保存每一次循环当前的变量，所以使用第几个函数时就会输出第几个数字，输出5

let还有一个作用就是不会污染全局变量，例如下图独立声明的RegExp不会影响到window对象中的全局变量，这个变量是一个函数，第一个输出10

let和const使用场景，在默认情况下使用const声明变量，当知道变量需要被修改的时候一定要用let

5.2 模板字符串

传统模板字符串追加结构时，比较繁琐

es6在div中追加结构时可以把结构完全写进去，然后哪里是变量再用${}包裹起来就行

5.3 ES6之函数导读

5.3.1 函数参数默认值

上下两种写法都表示，如果调用时不传入参数，a和b默认等于10和20

默认的表达式也可以是一个函数（输出20）

5.3.2 剩余参数

es5中用arguments接收传递的参数，arguments为伪数组，arguments作为伪数组接收传过来所有实参，从1开始遍历是因为第一个参数obj为对象后面开始才是属性，Object.create创建一个空对象，把obj属性赋值给result对象

es6方法:剩余参数由三个点…和一个具名参数组成…keys，完美替代了arguments

…keys包含了obj所有属性，创建的keys是一个数组

剩余参数…keys输出后是一个数组，输出keys为下图

5.3.3 拓展运算符

剩余运算符是把多个独立的参数合并到一个数组中；拓展运算符允许将一个数组分割并将各个项作为分离的参数传给这个函数
es中使用apply遍历数组求出最大值，es6中使用**…arr**拓展运算符将数组分割成一个个参数传给函数进行比较得出最大值（因为max函数不能直接在数组中比较最大值）

5.3.4 箭头函数

使用=>来定义函数==function(){}==等于()=>{}

传递的参数写在箭头前的括号里，只有一个参数时小括号可以不写，执行语句只有一句return时可把大括号省略

上图返回的是·一个id为1的对象，有简便写法，就是去掉return，但是要加上小括号，因为多句函数指令需要加小括号

5.3.5 箭头函数this指向问题

es5中this指向取决于调用函数的上下文对象，箭头函数没有明确的this指向，箭头函数内部的this值只能通过查找作用域链来获取。只要知道剪头函数指向他的父级就行，没有父级就是默认指向window全局

可以；理解为一旦使用箭头函数，这个函数就没有作用域链了，就是以下红区域没有作用域，就网上找init的作用域，然后这个init函数指向PageHandle，所以箭头函数指向PageHandle；如果把init函数也改成了箭头函数，则this指向定义PageHandle对象的作用域链即整个window

使用箭头函数的注意事项

• 使用箭头函数，内部没有arguments
• 箭头函数不能使用new关键字来实例化对象，function函数其实就是一个对象，但是箭头函数不是对象，可以把他看做一个语法糖

5.4 解构赋值

解构赋值是对赋值运算符的一种拓展，是针对es6数组或者对象进行操作
图中将对象中属性值赋值给定义的常量 ，es6更简便
对对象解构

解构赋值分完全解构和不完全解构，不完全解构就是只解构一个属性，如下图

默认值解构，a取20，b取默认值30

对数组解构

5.5 拓展的对象功能

es6中直接写入变量和函数，作为对象的属性和方法。
在对象外定义好对象属性，定义对象后直接把属性写进去，不用再name：name，方法也不用再==sayName：function(){}==而是直接像下图一样

可以用字符串组合得到属性名，对象输出属性为abc：123；fa(){}

拓展对象的方法
①is（）等价于===
用于比较两个值是否严格相等
上一个输出false，第二个true。因为严格来讲nan不等于包括自身的所有值，但是is方法解决了三等号的特殊性

②assign()
可以对象合并，target为目标对象，obj1是要合并的第一对象，后面以此类推，最后输出o对象包含a和b属性，返回合并后的新对象，这种方法属于浅拷贝

5.6 拓展的数据类型

5.6.1 Symbol类型

他表示独一无二的值，用Symbol定义变量值的时候，就算变量值一样，这两个字也不等价

最大Z作用是用来定义对象的私有变量

5.6.2 Set集合数据类型

表示一个无重复值有序列表
New创建一个新集合set，然后可以调用里面的各种方法例如add（）和delete（），添加两次4时只会在集合里面显示一个，has方法下图输出true

将set转化为数组
输出是一个去重后的数组

Set函数可以接受一个数组作为参数，用来初始化。

5.6.3 Map数据类型

Map数值是键值对的有序列表，键和值可以是任意的类型

上面代码使用 Map 结构的set方法，将对象o当作m的一个键，然后又使用get方法读取这个键，接着使用delete方法删除了这个键。把值给map列表的时候，是以键值对形式，一个key一个value

还有一种写法如下，输出也是键值对形式存在列表里

5.7 数组的拓展方法

5.7.1 from()方法

将伪数组转化成真正的数组

5.7.2 of()方法

将一组任意数据类型值转化成数组

5.7.3 copywhinin()方法

将数组内部指定位置的元素复制到其他位置，返回当前数组

5.7.3 find()和findIndex()方法

find()返回满足条件的第一个数组成员，findIndex()方法返回满足条件的第一个数组成员的索引号
分别输出-10和2

5.7.4 数组遍历器用法

entries(),keys(),value()方法可以返回一个遍历器，可以使用for…of进行循环遍历

第一个输出索引号，第二个输出a和b，第三个输出0 “a”; 1 “b”

5.7.5 include()方法

include方法返回一个布尔值，表示某个数组是否包含给定的值
第一个输出true，第二个输出false，这个方法与之前的indexOf类似，
indexOf如果包含返回当前索引号如果没有返回-1

5.8 Interator迭代器的用法

是一种新的遍历机制，Symbol.iterator是数组里面的迭代器（是一个对象），next方法是迭代器中的一种方法输出值如下下图，value：“one”表示第一次遍历的值是第一个one，done为false时表示数组还未遍历完成，第三次仍是可以遍历最后一个值所以还是false，最后一次为true
有两个核心：

• 是一个接口，能很快捷地访问数据，通过Symbol.iterator来创建迭代器，通过next（）方法来获取迭代之后的结果
• 可以把迭代器看成是遍历数据结构的指针（相当于数据库的游标）
  
  

5.9 generator生成器的用法

generator函数可以通过yield关键字 将函数挂起，为了改变执行流提供了可能性，同时为了做异步编程也提供了方案

他和普通函数有区别：

• function后面函数名之前有个*
• 只能在函数内部使用yield，让这个函数挂起
  

调用func函数时不会进入到函数内部执行，而是会返回一个遍历器对象，里面也会有next方法，当第一次调用next方法的时候恢复执行，会进入函数内部遍历，卡在第一个yield关键字那行，指针指向那一行，所以会输出start然后返回下图value：2，再次调用next指针指向第二个yield输出one还有value：3

总结：generator函数是分段执行的，yield关键字是暂停执行，而next方法是恢复执行

当第二次调用next时，传入的实参给yield‘2’进行赋值，x等于20，所以输出one：20，第三次调用next时，找到了return，在这前一个的yield变成30所以y=30，returnx+y就为50返回输出最后一句

注意：x可真不是yield‘2的返回值’，他是next方法调用恢复当前yield（理解为上一个yield的变量）的执行传入的实参

使用场景：为不具备Iterator接口的对象提供了遍历操作

5.10 class类的用法和类的继承

es5造类（同之前JS进阶面向对象的笔记）

5.11 ES6模块化的实现

module模块的使用：

一定要用服务器live serve打开

内容或有些许不全，日后再补充，在此致歉