我总结的都是一些基础的知识点,我们可以通过阮一峰的网站上有更具体的知识点和语法,这是阮一峰写的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字符串方法
- includes 查找包含,返回布尔
- startsWith 匹配字符串第一个字母是否包含
- endsWith
- repeat 复制字符串n次 一般浏览器支持最大重复次数在1000万
- trimStart 去除头部空格
- trimEnd 去除尾部空格
- padStart 在头部填充,第2个参数是用来被填充的内容,第1个参数是目标字符串的指定长度
- padEnd 在尾部填充
- matchAll
----------------------------es5里的字符串方法
- trim 去除掉字符串首尾空格
数字
- 1_000_000_000_000_000_00 对于较长的数字使用下划线分割
- 四舍五入 round
- 随机数 random 默认0-9随机数
- 向上取整 ceil
- 向下取整 floor
- 转整数 parseInt
- 转小数 parseFloat
- 取小数位 toFixed
map 和 set 数据类型
set 只能对储基本数据类型的值保证必须是唯一的,有去重的功能,如果是引用数据类型则不会去重。
- set类型转数组
- Array.from
- [...setData]
- 自带方法
- get 获取
- add 添加
- delete 删除
- clear 清空
- has 查询
- values 序列化值
- forEach 遍历
- 使用场景最多的时候
- 数组去重
map
- 语法:
new Map([['key',value],[key, value]])
- 自带方法和set一样
Symbol 唯一的数据类型,即便使用它初始值相同,返回的值也是不同的
proxy 代理方法,它可以监听一切数据类型的值
reflect 代理方法,比proxy要弱一点
promise 异步解决方法
- 目的是把异步操作变成了同步执行
- 解决了回调地狱
特点
- 如果接口请求成功调用resolve,否则调用reject
- 状态一旦使用,则不能修改
- promise一旦执行不能终止
同源策略
http://baidu.com:8080
- http:// 协议
- baidu.com 域名
- 8080 http 80默认端口,https 443默认端口
- 协议、域名、端口必须一致叫同源,有一个不一致叫跨域
- 同源策略是一种保护机制,保证网站内容不容易被轻易窃取
module 模块化语法
- es6使用import 导入模块
- es6使用export 导出模块
- 解释:模块化就是让每一个js文件作为独立的模块使用,它拥有自己的独立的作用域,不回污染全局环境.
- 在原生的html中的script标签上使用type=‘module’即可以使当前script标签变成模块化.
使用方法
- 每个模块只能有一个export default
// 导出
export default {}
// 导入
import name from "./moduleName"
- 可以使用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"
orimport { name as newName } from "./xxx"
async和await 是promise的语法糖
定义:用于函数,把异步函数变成了同步执行,比promise更加的直观.
综合
同源策略
1.同源策略:当发起一个http请求的时候,我们当前的网址和被请求的网址=>
协议、域名、端口必须保持一致,如果有一个不同就产生了非同源策略,也就是跨域了
2.同源策略的目的就是为了保护站点资源的安全性
3.同源策略只有浏览器有,其他的软件,系统没有的。
如果产生了非同源策略【跨域】,如何解决
1.jsonp
原理:创建一个script标签,使用他的src属性请求,因为这个标签不受浏览器同源策略的限制,所以可以跨域请求
其他的:
1.img
2.link
3.iframe
2.借助后端语言完成请求代理
java
php
nodejs
3.Vue项目中使用vue.config.js里配置跨域
vue.config.js是Vue脚手架的配置文件
vue@cli 创建Vue项目
Vue脚手架底层是基于webpack封装的
webpack不是给浏览器用的,必须使用nodejs来执行
nodejs是吧浏览器的内核抽离出来,安装到了电脑的全局环境中,让任何位置都可以允许js文件。nodejs是后端语言
代理请求的过程:Vue.config.js=>webpack=nodejs[后端程序代理请求]
4.cors跨域
后端做了请求的白名单处理
只要前端的流量器支持cors跨域就可以
封装自己的axios
axios
目前是最火的前端请求库-工具,他是基于ajax和promise封装的,他强大的地方在与可以运行在浏览器端,也可以运行在nodeJs端
安装使用和封装
安装:npm i axios
axios上传文件
截流和防抖
目的:性能优化
实现:闭包
截流
固定的时间内必须执行一次
一个程序事件在持续的触发当中,我们使用截流保证在固定的时间段内执行一次
防抖
永远保持执行最后一次
事件如果持续触发,防抖就一直等待,等到事件触发完毕后才会执行最后一次
场景:搜索框