es6的知识点

我总结的都是一些基础的知识点，我们可以通过阮一峰的网站上有更具体的知识点和语法，这是阮一峰写的es6的网站 ---  https://www.bookstack.cn/read/es6-3rd/sidebar.md

在es6中常遇到的问题：

1.es5和es6继承的区别：

ES5的继承是通过原型或构造函数机制实现的；它先创建子类，再实例化父类并添加到子类this中。 ES6先创建父类，再实例化子集中通过调用super方法访问父级后，再通过修改this实现继承。

2.、ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能

基本的字符串格式化。
将表达式嵌入字符串中进行拼接。
用${}来界定在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。
ES6反引号(``)就能解决类模板字符串的功能

3.介绍下 Set、Map的区别？

应用场景Set用于数据重组，Map用于数据储存Set：　
（1）成员不能重复
（2）只有键值没有键名，类似数组
（3）可以遍历，方法有add, delete,has
Map:
（1）本质上是健值对的集合，类似集合
（2）可以遍历，可以跟各种数据格式转换

4.Promise 中reject 和 catch 处理上有什么区别

reject 是用来抛出异常，catch 是用来处理异常
reject 是 Promise 的方法，而 catch 是 Promise 实例的方法
reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
网络异常（比如断网），会直接进入catch而不会进入then的第二个回调

5.说一下你对promise的理解？

promise有三种状态:pending/reslove/reject 。pending就是未决,resolve可以理解为成功,reject可以理解为拒绝
promise构造函数是同步执行的，then方法是异步执行的

可以用 promise.then()，promise.catch() 和 promise.finally()这些方法将进一步的操作与一个变为已敲定状态的 promise 关联起来，.then返回的数据永远是promis可一直.then。

6.asyn和awit函数

async async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。 await await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。 await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行； 如果不是Promise对象：把这个非promise的东西当做await表达式的结果。

7.es6中async/awit和.then的区别

async/await实际是建立在promise之上的。因此不能把它和回调函数搭配使用。

async/await可以使异步代码在形式上更接近于同步代码。这是它最大的价值。

 async是让请求接口的顺序按自己想要的顺序执行。一个等一个。

基础知识点:

一.let，const，var的区别

let  
用来声明变量的，不可以重复声明，可以重复的赋值
const  
是用来声明常量的，常量称为 只读数据。
一旦声明必须赋值，且不可再改，使用const声明的常量不可以重复声明更不可以重复赋值
var
用来声明变量的，可以重复的赋值，可以重复的声明
a.相同点 
都是声明的关键字

b.不同点

(1).变量提升只有 var
(2).作用域： var 声明的变量存在于 window 顶级对象中，let和const的变量存在于独立的块级作用域中
(3).let可以重新赋值，const不可以重新赋值

二.es6的经典题：暂时性死区？

let和const的块级作用域的特性。
当let 或 const放在{}里的时候，这个{}就会变成块级作用域，被let 或const声明的变量锁死 --- 暂时性死区
在er5 时代，作用域只有全局的 window 和 局部的作用域，受条件限制，for 循环，it 和 switch 里的变量汇污染全局，现在有了let 和const之后，凡是有{}的在吗块里面使用了let或const则{}机会变成块级作用域-----------暂时性死区===块级作用域

三.三者的使用场景（let，const，var）

1.let适合在for循环中的定时器使用，作为强类型语法限制的变量

2.const适合作为一次性赋值的常量，多用于数据版本号或id

3.var适合兼容老的ie浏览器，对于很旧的项目使用的比较多，目前推荐使用let代替

四.模板字符串/超级字符串

1.可以换行，并且原格式输出，自动添加制表符
2.可以使用‘${}’的形式插入表达式或变量值

五.es6里的解构赋值

a.对象
1.使用{}去解构，不光解构自身的属性，还会解构原型上的属性
2.对于对象自身没有找到的属性，解构除了的变量的值是undefined

b.数组
1.使用【】去解构，按顺序解构
2.对于不存在的，得到的值也是undefined

六.解构赋值中的对象和数组的区别是？

1.对象解构按属性名解构
2.数据解构按位置解构

七.解构赋值中的默认值
·var [2=1]=[1]·如果目标数据中么有对应的项，则使用默认值

八.function（普通函数） 和箭头函数

相同点
1.都是函数
2.都有局部作用域
不同点
1.语法不同
2.this指向不同
   1.function指向调用它的对象
   2.箭头指向上一层作用域里的对象
3.不定参伪数组
   1.function 函数中有arguments
   2.箭头函数没有arguments，但是可以使用...扩展运算符得到类似的形参集合
4.箭头函数不可以作为构造函数使用，不可以使用new调用
5.箭头函数没有原型对象
6.箭头函数只能是匿名函数
7.箭头函数不能改变this指向

九.函数重载

一个函数根据传入的不同的参数，执行不同的业务，实现不同的效果，这就叫函数重载

十.函数尾部调用

一个函数返回的是另一个函数的返回值，
目的是两个：数据的传递和加工，为了节省内存的开关释放

十一.函数的链式调用

列子：`$(#box).css('color'.'red').hide().show()`
核心概念：每一个被调用的函数都会返回一个值，链式调用中的返回值一般都是操作的目标元素的this

十二.es6新增的方法

es6新增方法

数组的
实例上的方法
1.map   遍历数组并返回一个新的数组
2.filter  过滤数组，从数组中过滤出需要的值，返回一个新的值
3.fill     填充，如果数组中有空的值，则可以使用它来填充值
4.reduce   累计计算，执行顺序从左到右
   接受两个参数，第一个参数表示上一次的返回值，如果是第一次遍历，第一个参数使用的数组的第一个值，如果我们给了默认值的话则会使用默认值
  最后它会返回一个累计的值
  多用于购物车的总价格结算
5.reduceRight  累计计算，执行顺序从右到左
6.find    查找符合项，找到后返回当前项，找不到返回undefined,只返回找到的第一个
7.includes  匹配是否包含，如果有返回true,没有返回false
8.findindex 查找包含项的下标，找回返回下标，找不到返回-1，只返回找到的第一个
原型方法
9.isArray(value) 检测值是不是数组
10.flat  降维：把多维数组降维，传入一个维度数字即可
11.form  转成数组【伪数组、对象、set和map】
12.of  数组转换，将序列转为数组
13.entries()  把数组的下标和值结构成新的数组，这个三个方法都是把数组变成可迭代的可枚举对象使用，返回值使用next方法调用
14.keys() 把数组的下标解构成数组
15.values() 把数组的值结构成数组

对象的
1.entries  把对象的键值转成数组
2.keys   把对象的转成数组
3.values  吧对象的值转换成数组
4.is  判断两个对象是不是同一个引用，返回值是布尔值
5.assign  合并对象，将多个对象合并为一个，返回一个新对象，会修改目标对象

es6字符串方法

1. includes 查找包含，返回布尔

2. startsWith 匹配字符串第一个字母是否包含

3. endsWith 匹配字符串最后一个字母是否包含

4. repeat 复制字符串n次 一般浏览器支持最大重复次数在1000万

5. trimStart 去除头部空格

6. trimEnd 去除尾部空格

7. padStart 在头部填充，第2个参数是用来被填充的内容，第1个参数是目标字符串的指定长度

8. padEnd 在尾部填充

9. matchAll 返回正则匹配出来的所有内容，是一个迭代器

----------------------------es5里的字符串方法

1. trim 去除掉字符串首尾空格

数字

1. 1_000_000_000_000_000_00 对于较长的数字使用下划线分割

2. 四舍五入 round

3. 随机数 random 默认0-9随机数

4. 向上取整 ceil

5. 向下取整 floor

6. 转整数 parseInt

7. 转小数 parseFloat

8. 取小数位 toFixed

map 和 set 数据类型

set 只能对储基本数据类型的值保证必须是唯一的，有去重的功能，如果是引用数据类型则不会去重。

1. set类型转数组

• Array.from

• [...setData]

1. 自带方法

• get 获取

• add 添加

• delete 删除

• clear 清空

• has 查询

• values 序列化值

• forEach 遍历

1. 使用场景最多的时候

• 数组去重

map

1. 语法：new Map([['key',value],[key, value]])

2. 自带方法和set一样

Symbol 唯一的数据类型，即便使用它初始值相同，返回的值也是不同的

proxy 代理方法，它可以监听一切数据类型的值

reflect 代理方法，比proxy要弱一点

promise 异步解决方法

• 目的是把异步操作变成了同步执行

• 解决了回调地狱

特点

• 如果接口请求成功调用resolve，否则调用reject

• 状态一旦使用，则不能修改

• promise一旦执行不能终止

同源策略

http://baidu.com:8080

• http:// 协议

• baidu.com 域名

• 8080 http 80默认端口,https 443默认端口

1. 协议、域名、端口必须一致叫同源,有一个不一致叫跨域

2. 同源策略是一种保护机制,保证网站内容不容易被轻易窃取

module 模块化语法

1. es6使用import 导入模块

2. es6使用export 导出模块

3. 解释:模块化就是让每一个js文件作为独立的模块使用,它拥有自己的独立的作用域,不回污染全局环境.

4. 在原生的html中的script标签上使用type=‘module’即可以使当前script标签变成模块化.

使用方法

1. 每个模块只能有一个export default 叫默认导出模块,上游导入的时候,直接使用变量名接收.

// 导出
export default {}
// 导入
import name from "./moduleName"

1. 可以使用export直接导出功能,一个模块可以无限次使用export直接导出,上游导入的时候需要使用解构的方式获取

// 导出
export let name = '123'
export const obj = {}
export let arr = []
​
// 导入
import { name, obj, arr } from "./moduleName"

别名设置

如果导入的模块名称和当前作用域的变量名有冲突,我们可以给导入的模块取一个别名,避免这种命名冲突问题

• as import name as newName from "./xx" or import { name as newName } from "./xxx"

async和await 是promise的语法糖

定义:用于函数,把异步函数变成了同步执行,比promise更加的直观.