ES6~ES12的特性有哪些

这篇文章主要讲解了“ES6~ES12的特性有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“ES6~ES12的特性有哪些”吧！ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。也可以说是JavaScript的一个标准在程序员的世界只有两个版本：ES5 和 ES6,说是ES6，实际上是2015年发布的，也是大前端时代正式开始的时间，也就是说以2015年为界限，2015年之前叫 ES5 ，2016年之后则统称ES6let、const 和 var 之间的区别：var 声明的变量存在变量提升，而 let、const 不存在变量提升的问题。变量提升：变量是否可在声明前调用var 不存在块级作用域，let 和 const 存在块级作用域var 可以重复声明变量，let 和 const 在一个作用域内不允许重复声明，并且 const 声明的是一个 只读 的变量，并且一定要赋值另外，当const声明了一个对象，对象能的属性可以改变，因为：const声明的obj只保存着其对象的引用地址，只要地址不变，便不会出错按次序排列可以从数组中提取值，按照对应位置，对变量赋值,这种写法属于模式匹配可以使用 ...进行解构，代表剩余全部如果原数组没有，则在对应值上可设置默认值，如果不设置，则为undefined无次序行，只需变量与属性名同名即可如果变量和对象的属性名没有重复，则会导致变量的值为undefined注意:,他相当于别名字符串也可以进行解构，它相当于转化为类似数组的对象自带一个 length 属性，代表个数解构的只要不死对象或数组，都会先将其转化为对象，所以数字类型和布尔类型也换转化为对象函数的参数可以进行解构，也可以带有默认值undefined 可以触发默认值注意两种指定默认值的方法，一种是对变量指定，一种是对参数指定，会得到不同的答案正则其实是一个非常难懂的知识点，要是有人能完全掌握，那真的是非常厉害，在这里就简单的说下首先分为两种风格：JS分格 和 perl 分格JS分格: RegExp()perl风格： / 规则 /选项,且可以跟多个，不分顺序这里介绍一个正则表达式在线测试（附有常见的正则表达式）：正则在线测试Unicode： 大括号包含表示Unicode字符codePointAt(): 返回字符对应码点，与fromCharCode()对应String.fromCharCode(): 将对对应的码点返回为字符，与codePointAt()对应String.raw()：返回把字符串所有变量替换且对斜杠进行转义的结果startsWith(): 返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。repeat()：方法返回一个新字符串，表示将原字符串重复n次遍历：for-ofincludes()：返回布尔值，表示是否找到了参数字符串。trimStart()： 方法从字符串的开头删除空格。trimLeft() 是此方法的别名。trimEnd()： 方法从一个字符串的末端移除空白字符。trimRight() 是这个方法的别名。Array.of(): 将一组值转化为数组，返回一个新数组，并且不考虑参数的数量或类型。copyWithin()：把指定位置的成员复制到其他位置，返回原数组find(): 返回第一个符合条件的值findIndex()： 返回第一个符合条件的索引keys()：对键名的遍历，返回一个遍历器对象，可用for-of循环，values()：与 keys() 用法一样，不过是对 键值 的遍历entries()：与 keys() 用法一样，不过是对 键值对 的遍历Array.from(): 从一个类似数组或可迭代对象中创建一个新的数组实例。fill(): 使用制定的元素填充数组，返回原数组includes()：判断是否包含某一元素，返回布尔值，对 NaN 也有效，但不能进行定位Object.getPrototypeOf()：返回对象的原型对象Object.setPrototypeOf()：设置对象的原型对象proto：返回或设置对象的原型对象Object.getOwnPropertyNames(): 返回对象自身非Symbol属性键组成的数组Object.getOwnPropertySymbols(): 返回对象自身非Symbol属性键组成的数组Reflect.ownKeys(): 返回对象自身全部属性键组成的数组Object.is()：判断两个对象是否相等，数组指向的地址不同，所以只要是数组比较，必定为 false遍历：for-inObject.keys()：返回属性名Object.assign()： 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，返回目标对象,此时的目标对象也会改变在ES9中增加了许多额外的功能，如合并、转义字符串等操作二进制：0b 或 0B 开头，表示二进制八进制：00 或 0O 开头，表示二进制Number.isFinite(): 用来检查一个数值是否有限的，返回布尔值Number.isNaN(): 用来检查一个数值是否是 NaN，返回布尔值Number.isInteger(): 用来检查一个数值是否是整数，返回布尔值Number.isSafeInteger(): 用来检查一个数值是否是“安全整数”（safe integer），返回布尔值Math.cbrt(): 返回立方跟Math.abrt()(): 返回立方跟Math.cbrt(): 返回立方跟Math.clz32(): 返回数值的32位无符号整数形式Math.imul(): 返回两个数值相乘Math.fround(): 返回数值的32位单精度浮点数形式Math.hypot(): 返回所有数值平方和的平方根Math.expm1(): 返回e^n – 1Math.log1p(): 返回1 + n的自然对数(Math.log(1 + n))Math.log10(): 返回以10为底的n的对数Math.log2(): 返回以2为底的n的对数Math.trunc(): 将数字的小数部分去掉，只保留整数部分Math.sign(): 返回数值类型 正数为1、负数为-1、正零 0、负零 -0、NaNMath.abrt(): 返回立方根Math.sinh(): 返回双曲正弦Math.cosh(): 返回双曲余弦Math.tanh(): 返回双曲正切Math.asinh(): 返回反双曲正弦Math.acosh(): 返回反双曲余弦Math.atanh(): 返回反双曲正切Number.parseInt(): 返回值的整数部分，此方法等价于 parseIntNumber.parseFloat(): 返回值得浮点数部分，此方法等价于 parseFloat函数参数尾逗号：允许函数最后一个参数有尾逗号参数默认赋值具体的数值以 => 定义函数箭头函数与普通函数的区别箭头函数和普通函数的样式不同，箭头函数语法更加简洁、清晰，箭头函数是 =>定义函数,普通函数是 function定义函数。Set 没有键只有值，可以认为 键和值 都一样箭头函数其实是没有 this 的，箭头函数中的 this 只取决包裹箭头函数的第一个普通函数的 this。箭头函数没有自己的arguments。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。call、apply、bind 并不会影响其 this 的指向。箭头函数的this指向上下文 ，而 普通函数的this并非指向上下文，需要时加入 bind(this)Set 是ES6中新的数据结构，是类似数组，但成员的值是唯一的，没有重复的值声明：const set = new Set()属性：size：返回 Set 对象中值的个数方法：add(): 在Set对象尾部添加一个元素。返回该Set对象delete(): 移除Set的中与这个值相等的元素，有则返回true,无则返回falseclear(): 清楚Set的所有元素has(): 是否存在这个值，如果存在为 true，否则为falsekeys()：以属性值遍历器的对象values()：以属性值遍历器的对象entries()：以属性值和属性值遍历器的对象forEach()：遍历每个元素特别注意：遍历器的为iterator对象，按插入顺序，为 [Key, Value] 形式加入 Set 的值不会发生类型转化，所以1和”1“是两个不同的值在Set内部是通过 === 来判断，也就是说，两个对象永远不可能相同，原因是地址不同唯一的区别是 NaN应用：需要注意一点的是 new Set 无法去除对象定义： 和Set的结构，但成员值只能为对象声明： const set = new WeakSet()方法：add(): 在WeakSet对象尾部添加一个元素。返回该实例delete(): 移除WeakSet的中与这个值相等的元素，has(): 是否存在这个值，如果存在为 true，否则为false注意：WeakSet 成员的对象都是弱引用，即垃圾回收机制不考虑该对象的应用。简单地说WebSet 的对象无法遍历好处是，再删除实例的时候，不会出现内存泄露推荐指数： ⭐️⭐️Map 是ES6中新的数据结构，是类似对象，成员键是任何类型的值声明：const map = new Map()属性：constructor: 构造函数，返回Mapsize：返回 Map 实例中值的个数方法：set(): 添加Map后的一个键值对，返回实例get(): 返回键值对delete(): 移除Map的中与这个值相等的元素，有则返回true,无则返回falseclear(): 清楚Map的所有元素has(): 是否存在这个值，如果存在为 true，否则为falsekeys()：以属性键遍历器的对象values()：以属性值遍历器的对象entries()：以属性键和属性值遍历器的对象forEach()：遍历每个元素特别注意：对同一个对象的引用，被视为一个键相同的键，会进行覆盖定义： 和Map的结构，但成员值只能为对象声明： const set = new WeakMap()方法：set(): 添加键值对，返回实例get(): 返回键值对delete(): 删除键值对，如果存在为 true，否则为falsehas(): 是否存在这个值，如果存在为 true，否则为falseSymbol 是ES6中引入的原始数据类型，代表着独一无二的声明：const sy = Stmbol()参数： string(可选）方法：Symbol.for(): 免费云主机、域名创建以参数作为描述的Symbol值，如存在此参数则返回原有的Symbol值(先搜索后创建，登记在全局环境)Symbol.keyFor()：返回已登记的Symbol值的描述(只能返回Symbol.for()的key)Object.getOwnPropertySymbols() ：返回对象中所有用作属性名的Symbol值的数组Proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程可以这样理解，Proxy就是在目标对象之前设置的一层拦截,外界想要访问都要经过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 在这里可以理解为代理器声明： const proxy = new Proxy(target, handler)target: 拦截的对象handler: 定义拦截的方法方法：get(): 拦截对象属性的读取set(): 拦截对象设置属性,返回一个布尔值has(): 拦截 propKey in proxy 的操作，返回一个布尔值ownKeys(): 拦截对象属性遍历，返回一个数组deleteProperty()：拦截 delete proxy[propKey] 的操作，返回一个布尔值()apply()：拦截函数的调用，call 和 apply 操作construct()：拦截 new 命令，返回一个对象: 拦截 new 命令，返回一个对象Reflect 与 Proxy 类似，只是保持Object的默认行为将 Object 对象的一些明显属于语言内部的方法（比如 Object.defineProperty），放到 Reflect 对象上。现阶段，某些方法同时在 Object 和 Reflect 对象上部署，未来的新方法将只部署在 Reflect 对象上修改某些 Object 方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而 Reflect.defineProperty(obj, name, desc)则会返回 false让Object 操作变成函数行为Reflect 的方法与 Proxy 的方法一一对应，这里就不进行介绍了Class: 对一类具有共同特征的事物的抽象(构造函数语法糖)这个两个方法比较重要，常常用来封装APIget 和 set 是属性，而不是方法静态方法，不能在类的实例上调用静态方法，而应该通过类本身调用Promise 就是为了解决“回调地狱”问题的，它可以将异步操作的处理变得很优雅。Promise 可以支持多个并发的请求，获取并发请求中的数据这个 Promise 可以解决异步的问题，本身不能说 Promise 是异步的定义： 包含异步操作结果的对象状态：pending：[待定]初始状态fulfilled：[实现]操作成功rejected： [被否决]操作失败注意：Promise 会根据状态来确定执行哪个方法Promise 实例化时状态默认为 pending 的，如异步状态异常rejected，反之fulfilled状态转化是单向的，不可逆转，已经确定的状态（fulfilled/rejected）无法转回初始状态（pending），而且只能是从 pending 到 fulfilled 或者 rejectedPromise.all(arr)用于将多个promise实例，包装成一个新的Promise实例，返回的实例就是普通的promise它接收一个数组作为参数数组里可以是Promise对象，也可以是别的值，只有Promise会等待状态改变当所有的子Promise都完成，该Promise完成，返回值是全部值得数组有任何一个失败，该Promise失败，返回值是第一个失败的子Promise结果race 与 all相似，只不过只要有一个执行完就会执行一旦执行，无法中途取消，链式调用多个then中间不能随便跳出来错误无法在外部被捕捉到，只能在内部进行预判处理，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部Promise内部如何执行，监测起来很难，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）Generator: 是可以用来控制迭代器的函数，也是封装多个内部状态的异步编程解决方案，也叫生成器函数参数说明yield 来控制程序内部的执行的 “暂停”，并返回一个对象，这个对象包括两个属性：value 和 done其中 value 代表值， done返回布尔(如果为false，代表后续还有，为true则已完成）next 来恢复程序执行Generator 函数的定义不能使用箭头函数，否则会触发 SyntaxError 错误Iterator是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator的作用：一是为各种数据结构，提供一个统一的、简便的访问接口使得数据结构的成员能够按某种次序排列ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费for-in遍历顺序：不同的引擎已就如何迭代属性达成一致，从而使行为标准化 ES11注意：在ES6中，有些数据结构原生具备Iterator接口（比如数组），即不用任何处理，就可以被for…of循环遍历，有些就不行（比如对象）在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、Set和Map结构。一个为对象添加Iterator接口的例子。使用@符号,用来扩展，修改类的行为使用的时候需要引入第三方库 如： core-decorators在早期，使用立即执行函数实现模块化是常见的手段，通过函数作用域解决了命名冲突、污染全局作用域的问题使用模块化的好处：解决命名冲突提供复用性提高代码可维护性方案：CommonJS：用于服务器(动态化依赖)AMD：用于浏览器(动态化依赖，使用的很少)CMD：用于浏览器(动态化依赖，使用的很少)UMD：用于浏览器和服务器(动态化依赖)ESM：用于浏览器和服务器(静态化依赖)默认导出： export default Index单独导出： `export const name = ‘domesy’按需导出（推荐）： `export { name, value, id }’改名导出：export { name as newName }默认导入（推荐）： import Index from './Index'整体导入： import * as Index from './Index'按需导入（推荐）： import { name, value, id } from './Index'改名导入： import { name as newName } from './Index'自执导入： import './Index'符合导入（推荐）： import Index, { name, value, id } from './Index'export命令和import命令结合在一起写成一行，变量实质没有被导入当前模块，相当于对外转发接口，导致当前模块无法直接使用其导入变量，适用于 全部子模块导出默认导入导出： `export { default } from ‘./Index’整体导入导出： `export * from ‘./Index’按需导入导出： `export { name, value, id } from ‘./Index’默认改具名导入导出： `export { default as name } from ‘./Index’includes(): 在ES6 的基础上增加了一个索引，代表是从哪寻找ES7幂运算符：用 ** 代表 Math.pow()padStart()：用于头部补全padEnd()：用于尾部补全。Object.values()：返回属性值Object.entries()：返回属性名和属性值的数组作用： 将异步函数改为同步函数，（Generator的语法糖）特别注意：Async 函数 返回 Promise对象，因此可以使用 thenawit 命令， 只能用在 async 函数下，否则会报错数组的 forEach() 执行 async/await会失效，可以使用 for-of 和 Promise.all()代替无法处理 promise 返回的 reject 对象，需要使用 try catch 来捕捉这里分为两种情况： 是否为 promise 对象如果不是promise , await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，把这个非promise的东西，作为 await表达式的结果。如果它等到的是一个 promise 对象，await 也会暂停async后面的代码，先执行async外面的同步代码，等着 Promise 对象 fulfilled，然后把 resolve 的参数作为 await 表达式的运算结果。优点：它做到了真正的串行的同步写法，代码阅读相对容易对于条件语句和其他流程语句比较友好，可以直接写到判断条件里面处理复杂流程时，在代码清晰度方面有优势缺点：用 await 可能会导致性能问题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。放松对标签模板里字符串转义的限制：遇到不合法的字符串转义返回undefined,并且从raw上可获取原字符串。Promise.finally()不管最后状态如何都会执行的回调函数for-await-of： 异步迭代器，循环等待每个Promise对象变为resolved状态才进入下一步JSON.stringify(): 可返回不符合UTF-8标准的字符串(直接输入U+2028和U+2029可输入)flatMap(): 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。(注：它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。)flat: 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。默认为1.(应用：数组扁平化(当输入 Infinity 自动解到最底层))返回键和值组成的对象，相当于Object.entries()的逆操作可以做一些数据类型的转化toString()改造：返回函数原始代码(与编码一致)在 ES10 中，try catch 可忽略 catch的参数新的原始数据类型：BigInt，表示一个任意精度的整数，可以表示超长数据，可以超出2的53次方js 中 Number类型只能安全的表示-(2^53-1)至 2^53-1 范的值特别注意：Number类型的数字有精度限制，数值的精度只能到 53 个二进制位（相当于 16 个十进制位, 正负9007199254740992），大于这个范围的整数，就无法精确表示了。Bigint没有位数的限制，任何位数的整数都可以精确表示。但是其只能用于表示整数，且为了与Number进行区分，BigInt 类型的数据必须添加后缀n。BigInt 可以使用负号，但是不能使用正号number类型的数字和Bigint类型的数字不能混合计算在ES6中一共有7种，分别是：srting、number、boolean、object、null、undefined、symbol其中 object 包含： Array、Function、Date、RegExp而在ES11后新增一中，为 8中 分别是：srting、number、boolean、object、null、undefined、symbol、BigIntPromise.allSettled():将多个实例包装成一个新实例，返回全部实例状态变更后的状态数组(齐变更再返回)无论结果是 fulfilled 还是 rejected, 无需 catch相当于增强了 Promise.all()按需获取的动态 import. 该类函数格式（并非继承 Function.prototype）返回 promise 函数与require的区别是：require()是同步加载，import()是异步加载全局this，无论是什么环境（浏览器，node等），始终指向全局对象符号 ？代表是否存在TypeScript 在 3.7 版本已实现了此功能处理默认值的便捷运算符与 || 相比，空值合并运算符 ?? 只会在左边的值严格等于 null 或 undefined 时起作用。replaceAll()replace() 方法仅替换一个字符串中某模式（pattern）的首个实例replaceAll() 会返回一个新字符串，该字符串中用一个替换项替换了原字符串中所有匹配了某模式的部分。模式可以是一个字符串或一个正则表达式，而替换项可以是一个字符串或一个应用于每个匹配项的函数。replaceAll() 相当于增强了 replace() 的特性，全量替换Promise.any()其区别于 Promise.race(), 尽管某个 promise 的 reject 早于另一个 promise 的 resolve，Promise.any() 仍将返回那个首先 resolve 的 promise。允许创建对象的弱引用。这样就能够在跟踪现有对象时不会阻止对其进行垃圾回收。对于缓存和对象映射非常有用必须用 new关键字创建新的 WeakRefderef() 读取引用的对象正确使用 WeakRef 对象需要仔细的考虑，最好尽量避免使用。避免依赖于规范没有保证的任何特定行为也是十分重要的。何时、如何以及是否发生垃圾回收取决于任何给定 JavaScript 引擎的实现。空值合并运算符 ?? 只会在左边的值严格等于 null 或 undefined 时起作用感谢各位的阅读，以上就是“ES6~ES12的特性有哪些”的内容了，经过本文的学习后，相信大家对ES6~ES12的特性有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云技术，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: react如何增加echarts饼图

这篇“react如何增加echarts饼图”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“react如何增加echarts饼图”文章吧。 reac…