es6相关知识点最全的那种

最新推荐文章于 2022-05-21 23:20:53 发布

SING327

最新推荐文章于 2022-05-21 23:20:53 发布

阅读量763

点赞数 1

文章标签：前端 js es6 vue.js

本文链接：https://blog.csdn.net/weixin_65859689/article/details/124323853

版权

本人最近再整理关于前端的各种知识点，目前只是把es6整理出来了，希望能够帮到各位

在es5中有严格来说有三种作用域，全局函数，eval
eval只有在严格模式下才会出现
在es6中引入了块级作用域 let const 是一个块级作用域，只能在代码块内有效
块级作用域并不是单纯的写花括号他不影响作用域链的一个效果
for循环用let声明变量的话当前变量只在本轮循环有效，所以每一次循环的都是一个新的变量
不像var一样声明的变量全局都有效所有数组的成员指向的都是同一个变量运行结果只会输出最后一个变量的值
const声明的是常量不能修改，但是用const声明了一个对象或者数组修改里面的值是不会报错的，
因为这里面涉及的是堆栈的问题，我们都知道引用类型是把值存在堆内存中，而堆内存是从下往上存储的，会生成唯一内存地址，在栈内存中
把地址赋给变量，所以可以理解为const指向的只是地址，而地址并没有发生改变所以不会报错
在es5中我们有两种声明字符串的方式单引号双引号，在es6中引入了模板字符串就是``反引号，特性是内容中可以直接出现换行符也可以用${}写变量普通字符串想实现这样的效果就需要用引引加加的方式
es6可以直接在花括号里写入变量和函数，作为对象的属性和方法
es6允许使用箭头定义函数箭头函数this是静态的，始终指向函数声明时所在作用域下this的值，不能作为构造函数使用，也不能使用arguments，可以在形参只有一个的时候省略花括号，当代码体只有一条语句的时候
可以省略花括号，就不用写return ，语句的执行结果就是返回值，
普通函数定时器的this指向window所以需要在外层函数作用域保存一下this，箭头函数的this时在声明时就确认下来了，始终指向父级作用域，箭头函数适合与this无关的回调，比如定时器，数组的方法回调
es6允许给函数参数赋初始值，具有默认值的参数一般位置要靠后可以与解构赋值结合

es6引入了rest参数，用于获取函数的实参，用来代替arguments，如果参数有多个，rest参数必须要放到最后
扩展运算符

symobol是es6引入的一种数据类型，表示独一无二的值，是一种类似于字符串的数据类型，他的特点是值是唯一的，可以用来解决命名冲突的问题，不能与其他数据进行运算比如加减乘除，symbol
定义的对象属性不能使用for in 进行循环遍历，但是可以使用reflect.ownkeys来获取对象的所有键名，可以通过symbol.for来创建symbol 成为函数对象，symbol.for访问的是一个全局的symbol表，如果有了就访问
对应对象，没有就重新创建，symbol也不可以拼接

symbol.isConcatSpreaDAble展开数组的时候有不想展开的就可以用这个办法true就是展开，false就是不展开，直接把这个数组跟你合并

es6迭代器iterrator是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署iterator接口，就可以完成便利操作
es6创造了一种新的遍历命令for-of循环，iterator接口主要提供for of消费，只要有symbol.iterator就可以用for of，
工作原理：创建一个指针对象，指向当前数据结构的起始位置，
第一次调用对象的next方法，这个symbol.iterator函数的返回值中有next方法，指针自动指向数据结构的第一个成员
接下来不断调用next，指针一直往后移动，直到数据结构的最后一个成员
每调用一次next方法返回一个包含value和done属性的对象
需要自定义遍历数据的时候，可以用到遍历器

生成器是es6提供的一种异步编程的解决方案，语法跟传统函数不一样。它多了个星号，需要next方法才能输出打印

then方法的返回结果是promise对象，对象状态由回调函数的执行结果来决定，如果回调函数中返回的结果是非promise类型的属性，状体为成功，返回值为对象的成功值

es6提供了新的数据结构set。它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用扩展运算符和for of进行遍历
集合的属性和方法
size返回集合的元素个数
add 增加一个新元素，返回当前集合
delete 删除元素，返回布尔值
has 检测集合中是否包含某个元素，返回布尔值

es6提供了map的数据结构，它类似于对象，也是键值对的组合，但是建的范围不限于字符串，各种类型的值（包括对象都可以当作建）。map也实现了iterator接口，所以可以使用扩展运算符和for of进行遍历
size:"返回map的元素个数
set 增加一个新元素，返回当前map
get：返回键名对象的键值
has 检测map中是否包含某个元素，返回布尔值
clear清空集合，返回undefind

想要理解虚拟dom首先要知道什么是虚拟dom？
虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。
虚拟dom是用js对象来描述真实的dom，在这个js对象里，体现了这个真实的dom节点的节点名称，属性名称以及子元素等等内容
我们在渲染页面的时候会对新的虚拟dom和旧的虚拟dom进行对比只渲染不同的地方，而不再是像之前只要发生变化，全部的真实dom都要重新渲染，所以提高了渲染的效率。

虚拟dom是相对于浏览器所渲染出来的真实dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容,只能通过遍历查询dom树的方式,找到需要修改的dom,然后修改样式行为或者结构，来达到更新视图的目的。
为什么要用虚拟DOM来描述真实的DOM呢？
创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。
Diff算法
diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。
思考
你觉得虚拟DOM的性能一定高于常规DOM吗？答案是不一定，虚拟DOM和Diff算法的出现是为了解决由命令式编程转变为函数式编程、数据驱动后所带来的性能问题的。换句话说，直接操作DOM的性能并不会低于虚拟DOM和Diff算法，甚至还会优于。
你觉得使用了虚拟DOM就真的不操作dom元素了吗？其实不是的，只是减少用户操作dom，虚拟DOM在渲染的时候其实还是会操作dom的

传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，独树一帜也可以说难以接受！

ES5中如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。
构造函数生成实例的执行过程：
1.当使用了构造函数，并且new 构造函数(),后台会隐式执行new Object()创建对象;
2.将构造函数的作用域给新对象，（即new Object()创建出的对象），而函数体内的this就代表new Object()出来的对象。
3.执行构造函数的代码。
4.返回新对象（后台直接返回）;

ES6中的类
ES6引入了class（类）这个概念，通过class关键字可以定义类。该关键字的出现使得javascript在对象写法上更加清晰，更像是一种面向对象的语言。
注意项:
1.在类中声明方法的时候，千万不要给该方法加上function关键字
2.方法之间不要用逗号分隔，否则会报错

ES5中的继承（组合继承:原型链继承 + 借用构造函数)
原型链继承：
父类的实例作为子类的原型
借用构造函数继承：
在子类内,使用call()调用父类方法,并将父类的this修改为子类的this.相当于是把父类的实例属性复制了一份放到子类的函数内.
组合继承:
既能调用父类实例属性，又能调用父类原型属性

Es6的继承
Class cat extends 父类
然后在constructor中定义super 可以设置继承父类的哪些属性

实例成员无法访问静态成员

一、原型和原型链
1. prototype
每个函数都有一个prototype属性，被称为显示原型，里面包含了这个构造函数公共的方法
2._ _proto_ _（坡头）
每个实例对象都会有_ _proto_ _属性,其被称为隐式原型
每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype
3. constructor
每个prototype原型都有一个constructor属性，指向它关联的构造函数。
5. 原型链
获取对象属性时，如果对象本身没有这个属性，那就会去他的原型_ _proto_ _上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有_ _proto_ _属性值为null。

静态成员只能通过构造函数访问，不能通过实例化对象访问

Number.EPSILON是js表示的最小精度 EPSILON属性的值接近于2.22*10的-16次方主要用于浮点数的运算，
Number.isFinite检测一个数值是否为有限数
Number.isNaN检查一个数值是否为NaN

对象方法：object.is用来判断两个值是否相等
object.assign对象的合并
object.setPrototypeof, 设置原型对象
object.getprototypeof
es6的模块化的好处
防止命名冲突’
代码复用
高维护性
es6之前的模块话规范有
commonJS=>nodejs Browserify
AMD=>requireJS
cmd =>seaJs
es6模块化是import export

用babel转化es6代码
命令：npm i babel-cli babel-preset-env browserify
转化代码命令：我用的是npx babel 要转化代码的目录 -d 要存到那个文件里
打包：npx browserify || webpack 入口文件 -o 输出到那个文件
然后浏览器就能继续识别了
es7新特性是includes方法用来检测数组中是否包含某个元素，返回布尔值还有指数操作符[**]，用来实现幂运算，功能与math.pow相同
es8的新特性，async awiat 两种语法结合可以让异步代码像同步代码一样
async函数的返回值为promise对象，
promis对象的结果由async函数执行的返回值决定只要返回的不是promise类型的对象，就是一个成功的promise 抛出错误，返回的结果是一个失败的promise
awiat必须放在async函数中
awiat表达式右侧一般是promise对象
awiat返回的promise成功的值
await的promise失败了，就会抛出异常，需要通过try...catch捕获处理
Async 和 await 是一种同步的写法，但还是异步的操作，两个内容还是必须同时去写才会生效不然的话也是不会好使
1.asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数
2.异步async函数调用，跟普通函数的使用方式一样
3.异步async函数返回一个promise对象
4.async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的

优点：
1.方便级联调用
2.同步代码编写方式
3.多个参数传递
4.同步代码和异步代码可以一起编写
5.sync/await是对Promise的优化