ES6知识点汇总

最新推荐文章于 2023-08-21 10:00:00 发布

wxxuejishuangxia

最新推荐文章于 2023-08-21 10:00:00 发布

阅读量635

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wxxuejishuangxia/article/details/123051068

版权

ES6是新一代的JS语言标准，对部分JS语言核心内容做了升级优化，规范了JS使用标准，新增了JS原生方法，使JS使用更加规范、优雅，学习ES6是成为专业前端正规军的必经之路。
ES2015特指在2015年发布的新一代JS语言标准，ES6泛指下一代JS语言标准，ES5泛指上一代语言标准。
babel是一个ES6转码器，可以将ES6代码转为ES5代码，以便兼容没有支持ES6的平台。
在ES6之前，声明变量只能用var，其实是很不合理的，没有块级作用域会带来很多难以理解的问题，比如for循环var变量泄露，变量覆盖等问题，let声明的变量拥有自己的块级作用域，且修复了var声明变量带来的变量提升问题。
ES6对String字符串类型做的优化和升级：
- 新增了字符串模版，用反斜杠（`）取代以往的字符串相加的形式，能保留所有空格和换行，使字符串拼接看起来更直观优雅
- ES6在String原型上新增了includes()方法，还有startsWith()，endWith()，repeat()等方法，可方便的用于查找、补全字符串。
ES6对Array数组类型做的优化和升级：
- 数组解构赋值
- 扩展运算符
- ES6在Array原型上新增了find()方法，还有copyWith()，includes()，fill()，flat()等方法
ES6对Number数字类型做的优化和升级：
- ES6在Number原型上新增了isFinite()，isNaN()方法
- ES6在Math对象上新增了Math.cbrt()，trunc()，hypot()等较多的科学计数法运算方法，可以更全面的进行立方根、求和立方根等科学计算
ES6对Object类型做的优化和升级：
- 对象属性变量式声明
- 对象的解构赋值：let {apple,orange}={apple:’red apple’,orange:’yellow orange’}
- 对象的扩展运算符：let {apple,orange,…otherFruits}={apple:’red apple’,orange:’yellow orange’,grape:’purple grape’,peach:’sweet peach’}. otherFruits={grape:’purple grape’,peach:’sweet peach’}
- Super关键字，总是指向当前函数所在对象的原型对象，this总是指向当前函数所在的对象
- ES6在Object原型上新增了is()方法，做两个目标对象的相等比较，Object.is(NaN,NaN)为true，修复了NaN === NaN 返回false的不合理
- ES6在Object原型上新增了assign()方法，用于对象新增属性或者多个对象合并
  - const target ={a:1} const source = {b:2} Object.assign(target, source) //target={a:1,b:2}
  - assign合并的对象target只能合并source中的自身属性，并不会合并source中的继承属性，也不会合并不可枚举的属性，且无法正确复制get和set属性
- ES6在Object原型上新增了getOwnPropertyDescriptors()方法，此方法增强了ES5中getOwnPropertyDescriptor()方法，可以获取指定对象所有自身属性的描述对象。结合defineProperties()方法，可以完美复制对象，包括复制get和set属性
- ES6在Object原型上新增了getPrototypeOf()和setPrototypeOf()方法，用来获取或设置当前对象的prototype对象。ES5获取设置prototype对象是通过__proto__属性实现的，这个属性并不是Es规范明文规定的，而是浏览器个大厂商“私自”加上去的，因为适用范围广而被默认使用，在非浏览器环境中不一定可以使用。
- ES6在Object原型上新增了Object.keys()获取对象的所有键、Object.values()获取对象的所有值、Object.entries()获取对象的所有键值对数组
ES6对Function函数类型做的优化和升级：
- 箭头函数：箭头函数里面没有this，改变了以往js函数中最让人难以理解的this运行机制，主要优化点有以下
  - 箭头函数内的this指向的是函数定义时所在的对象，而不是函数执行时所在的对象
  - 箭头函数不能用作构造函数，因为它没有自己的this，无法实例化
  - 因为没有this，所以箭头函数内没有arguments对象
  - 可以实现函数默认赋值，ES6之前，函数的形参无法给默认值
  - ES6新增了双冒号运算符，用来取代以往的bind,call和apply，浏览器暂不支持，Babel已经支持转码
Symbol是ES6引入的数据类型，所有Symbol()属性生成的值都是独一无二的，可以从根本上解决对象属性太多导致属性名冲突覆盖的问题。对象中Symbol()属性不能被for…in遍历，但是也不是私有属性
Set是ES6引入的一种类似Array的新的数据结构，Set实例的成员类似于数组item成员，区别是Set实例的成员都是唯一，不重复的。这个特性可以轻松地实现数组去重。
Map是ES6引入的一种类似Object的新的数据结构，Map可以理解为Object的超集，打破了以传统键值对形式定义对象，对象的key不在局限于字符串，也可以是Object。可以更加全面的描述对象的属性
Proxy是ES6新增的一个构造函数，可以理解为JS语言的一个代理，用来改变JS默认的一些语言行为，包括拦截默认的get/set等底层方法，使得JS的使用自由度更高，可以最大限度的满足开发者的需求。
Reflect是ES6引入的一个新的对象，主要作用有两点，一是将原生的一些零散分布在Object、Function或者全局函数里的方法(如apply、delete、get、set等等)，统一整合到Reflect上，这样可以更加方便更加统一的管理一些原生API。其次就是因为Proxy可以改写默认的原生API，如果一旦原生API别改写可能就找不到了，所以Reflect也可以起到备份原生API的作用，使得即使原生API被改写了之后，也可以在被改写之后的API用上默认的API
Promise是ES6引入的一个新的对象，主要作用是用来解决JS异步机制里，回调机制产生的“回调地狱”。Promise并不是什么突破性的API，只是封装了异步回调形式，使的异步回调可以写的更加优雅，可读性更高，而且可以链式调用。
Iterator是ES6中一个很重要概念，它并不是对象，也不是任何一种数据类型。因为ES6新增了Set、Map类型，他们和Array、Object类型很像，Array、Object都是可以遍历的，但是Set、Map都不能用for循环遍历，解决这个问题有两种方案，一种是为Set、Map单独新增一个用来遍历的API，另一种是为Set、Map、Array、Object新增一个统一的遍历API，显然，第二种更好，ES6也就顺其自然的需要一种设计标准，来统一所有可遍历类型的遍历方式。Iterator正是这样一种标准。或者说是一种规范理念。就好像JavaScript是ECMAScript标准的一种具体实现一样，Iterator标准的具体实现是Iterator遍历器。Iterator标准规定，所有部署了key值为[Symbol.iterator]，且[Symbol.iterator]的value是标准的Iterator接口函数(标准的Iterator接口函数: 该函数必须返回一个对象，且对象中包含next方法，且执行next()能返回包含value/done属性的Iterator对象)的对象，都称之为可遍历对象，next()后返回的Iterator对象也就是Iterator遍历器。ES6给Set、Map、Array、String都加上了[Symbol.iterator]方法，且[Symbol.iterator]方法函数也符合标准的Iterator接口规范，所以Set、Map、Array、String默认都是可以遍历的。
for…in和for…of的区别：ES6规定，所有部署了Iterator接口的对象（可遍历对象）都可以用for…of去遍历，而for…in仅仅可以遍历对象，这就说，数组也可以用for…of遍历，方便数组的取值
Generator函数：

* 如果说javaScript是ECMAScript标准的一种具体实现、Iterator遍历器是Iterator的具体实现，那Generator函数可以说是Iterator接口的具体实现方式
* 执行Generator函数会返回一个遍历器对象，每一次Generator函数里面的yield都相当一次遍历器对象的next()方法，并且可以通过next(value)方法传入自定义的value，来改变Generator函数的行为
* Generator函数可以通过配合Thunk函数更轻松更优雅的实现异步编程和控制流管理

async函数可以理解为内置自动执行器的Generator函数语法糖，它配合ES6的Promise近乎完美的实现了异步编程解决方案。
ES6的class可以看作只是一个ES5生成实例对象的构造函数的语法糖。Class类可以通过extends实现继承。

ES6与ES5构造函数的不同点
- 类的内部定义的所有方法，都是不可枚举的
- ES6的class类必须用new命令操作，而ES5的构造函数不用new也可以执行
- ES6的class类不存在变量提升，必须先定义class之后才能实例化，不像ES5中可以讲构造函数写在实例化之后
- ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面。ES6的继承机制完全不同，实质是先将父类实例对象的属性和方法接到this上面（所以必须先调用super方法）然后再用子类的构造函数修改this

module、export、import是ES6用来统一前端模块化方案的设计思路和实现方案。export、import的出现统一了前端模块化的实现方案，整合规范了浏览器/服务端的模块化方法，用来取代传统的AMD/CMD、requireJS、seaJS、commindJS 等一系列前端模块不同的实现方案，使前端模块化更加统一规范，JS也能更加能实现大型的应用程序开发。import引入的模块是静态加载而不是动态加载，import引入export带出的接口值是动态绑定关系，即通过该接口，可以去到模块内部实时的值
ES6改进前端代码，优化：