ES6新特性学习提要笔记

2021SC@SDUSC

hippy支持vue框架，而学习vue相关的内容，需要es6的知识。
以下是对es6新特性学习的提要笔记。

1.let，cosnt

1.没有变量提升
2.块作用域
3.不可重复声明

2.模板字符串

用反引号包裹，内部引用变量可以用${变量名}

3.剩余参数（剩余运算符）：

…keys，keys就成了一个剩余参数的数组，合成参数为一个数组

4.扩展运算符：

分割数组为分离参数

5.箭头函数

箭头函数的括号，只有一句return可以不加大括号，如果返回对象（对象由大括号表示），外部再加一个括号表示返回的是一个整体（多变量对象）。
箭头函数没有内部this指向，会按照作用域链去查找。
箭头函数没有作用域！
注意事项：
1.内部没有arguments变量
2.不能通过new来实例化，箭头函数不是一个对象，可以看做一个表达式/函数的语法糖

6.解构赋值

是赋值运算符的扩展，针对数组和对象来进行操作，代码书写简洁易读。
完全解构/不完全解构。
可用剩余运算符来解构。
有默认值的解构。
嵌套解构。

7.扩展对象功能

可以简单地声明对象里面的变量及函数。
简易声明键值对：键值一样时只输入键/值即代表键值对。
对象的is方法比较两个值是否严格相等，assign方法把对象内变量合并到目标对象中并返回（浅copy）。

8.Symbol

原始数据类型，表示独一无二的值（内存地址不同）。
最大用途：声明对象的私有变量，用中括号取值。
然并卵，实战中很少用。
Object的一个Own…方法和Reflect的ownKeys方法能获取Symbol声明的对象的属性名，Object.key方法获得不到，获得的是一个空数组。意味着有些方法取不到Symbol声明的属性名，实用性可能不是很大。

9.Set

集合：！无重复值！的有序列表。
Set转数组，用扩展运算符分割成数组作为数组的参数。
Arr = […set]
Set中对象的引用无法被释放（new Set（）无法释放）。

/*了解一下
let set = new WeakSet() set.add(obj)可以释放obj。
但是WeakSet：
不能传入非对象参数
不能迭代
没有foreach等方法
没有size属性
*/

10.Map

键值对的有序列表，键和值是任意类型。

11.数组扩展

数组Array的方法：
Array.form（）：
将伪数组转换为真正的数组（[扩展运算符]也是一种转换为真正数组的方式）。
Form方法还接收第二个参数，用来对每个元素进行处理。

//lis是一个NodeList，这里直接log（通过扩展运算符转换为数组），最后通过from转换并对每一个元素提取他的textContent。

Array.of（）：
将全部参数（一组任意数据类型）转换成数组。

Array.Copywithin（）：
数组内部指定位置的元素复制到其他位置，然后返回当前数组。

Array.find（）:
找出第一个符合条件的数组成员。

Array.findIndex（）：
找出第一个符合条件的数组成员的索引。

entries（）、keys（），values（）返回遍历器，可以用for…of循环进行遍历取值
遍历

includes（）返回一个布尔值，直接用于判断数组是否包含includes方法的参数的值

12.迭代器Iterator

13.生成器Generator

为异步编程提供了方案

调用generator函数返回一个遍历器，实际上调用func（）并没有进入到func（）内部，调用遍历器的next方法才会执行到一个yield及此yield之前的代码。

相当于generator函数是分段执行的，yield是暂停执行，next是恢复执行。

Generator传值：（这里比较难懂，第二个next的20传给了x…，最后一个next恢复return的返回值）

Generator使用场景：
为不具备Iterator接口的对象提供了遍历操作（相当于提供了一个Iterator接口）

最大作用：异步编程
略，可见b站教学视频
https://www.bilibili.com/video/BV1ay4y1r78B?p=16

14.Promise

ES6中提供了三种异步编程方式，promise是其中一种（还有generator，async与await的组合）
略，可见
https://www.bilibili.com/video/BV1ay4y1r78B?p=17

15.async

异步操作更加方便，略
https://www.bilibili.com/video/BV1ay4y1r78B?p=20

16.class类

前言：
虽然es6增加了class关键字，但是JavaScript中还是没有类的概念！依然是基于面向对象，而不是真正的面向对象，基于原型链来模型实现class，机理和普通函数定义的类是一样的

ES5中对“类”的写法可能会引起其他面向对象语言开发者的疑惑。
下图（ES5）中，大写开头字母的函数是构造器。
然后在Person的原型中增加方法属性。
/（？Prototype是指构造出来的对象的可用的所有对象（可以理解为类本身），可以向prototype增加函数以给“类”的对象增加方法属性。__proto__指向构造出这个对象的函数的prototype？）/

ES6中增加class关键字

在Person的原型Prototype中，有constructor（）、sayName（）、sayAge（）、proto。
P1的__proto__指向Person的Prototype。
另一种写法（向类中一次性加入所有函数）：

（assign函数可见7.，把对象内变量（两个say函数）复制到目标对象（第一个参数）中）。

17.类的继承

ES5继承：

ES6类继承：
Constructor中可以使用super（…）调用父类构造函数。
Super是父类的prototype。

其他和java继承知识有类似之处。也支持重写等。

18.模块化

Js两种规范：
CommonJS和AMD。
前者的一个实现是NodeJS，可以写服务端，后者应用在浏览器。
ES5之前模块化可以通过src来导入，是同步的。

ES6模块功能主要有两个命令：export和import。
Export：规定模块的对外接口
Import：输入其他模块提供的功能

//浏览器中import引入需要加上type=’module’，{}那里是类似于解构赋值。

Export单独变量/统一export
Export default只能有一次。Import时可以把default的改名。

到此ES6的主要代码学习就结束了，下一步可以立即开始学习Vue或NodeJS。