做网站公司汉狮团队,如何开发自己的app,网站前置审批证书,网站建设方案 下载文章目录 一、ECMAScript简介二、ES6 (ES2015)三、ES7 (ES2016)四、ES8 (ES2017)五、ES9 (ES2018)六、ES10 (ES2019)七、ES11 (ES2020)八、ES12 (ES2021)九、拓展阅读 一、ECMAScript简介
ECMAScript是一种由Ecma国际#xff08;前身为欧洲计算机制造商协会#xff0c;Europ… 文章目录 一、ECMAScript简介二、ES6 (ES2015)三、ES7 (ES2016)四、ES8 (ES2017)五、ES9 (ES2018)六、ES10 (ES2019)七、ES11 (ES2020)八、ES12 (ES2021)九、拓展阅读 一、ECMAScript简介
ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会European Computer Manufacturers Association通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛它往往被称为JavaScript或JScript所以它可以理解为是JavaScript的一个标准但实际上后两者是ECMA-262标准的实现和扩展。
二、ES6 (ES2015) Class 模块化语法import、export 箭头函数 () {…}是函数的缩写。 函数参数默认值
function fn(x,yWorld) {console.log(x, y);
}模板字面量 之前实现中长字符串的组合是通过 号来连接的。 它的可读性很差使用模板字符串它更容易阅读。 解构赋值 允许 JavaScript 轻松地从数组和对象中获取内容。 扩展运算符 它是用三点...)表示Array是可以扩展的如果是Object会按照key-value进行扩展。 对象属性简写 如果构成对象的字段名称与前面段落中的变量相同则可以省略该值看起来更流线型。 Promise Promise 是一种异步非同步写法的解决方案比原来的回调写法更加优雅。ES8ES2017发布了更完美的asyncawait直接让异步写得像同步一样。缺点是当思路落到复杂的业务逻辑上时有时会错过await在运行时发生错误。 let, const 替换 var
let通用变量可以被覆盖。const一旦声明其内容不可修改。因为数组和对象都是指针所以它们的内容可以增加或减少, 但不改变其指针。
早期JavaScript的var作用域是全局的。也就是说var变量是在使用后声明的执行的时候会自动提到顶层后面会赋值。 更容易受到污染。
三、ES7 (ES2016)
Array.prototype.includes() 用于判断数组是否包含指定值如果是则返回true否则返回假。和之前indexOf的用法一样可以认为是返回一个布尔值语义上更加清晰。幂运算符 console.log(2**10); // 1024
四、ES8 (ES2017) async, await 异步函数是使用 async 关键字声明的函数并且允许在其中使用 await 关键字。async 和 await 关键字使异步的、基于 Promise 的行为能够以更简洁的方式编写避免了显式配置 Promise 链的需要。 Object.values() 返回对象自身属性的所有值不包括继承的值。 Object.entries() 返回可枚举键即传入对象本身的值。 字符串 padStart() padEnd() 你可以在字符串的开头或结尾添加其他内容并将其填充到指定的长度。 过去这些功能通常是通过通用的辅助工具包如 lodash引入的并将它们放在一起。 尾随逗号 允许在函数参数列表末尾使用逗号。 Object.getOwnPropertyDescriptors() 获取你自己的描述符一般的开发业务需求通常不会用到。 共享数组缓冲区 SharedArrayBuffer 是一个固定长度的原始二进制数据缓冲区类似于 ArrayBuffer。 可用于在共享内存上创建数据。与 ArrayBuffer 不同SharedArrayBuffer 不能分离。 Atomics object Atomics 对象它提供了一组静态方法来对 SharedArrayBuffer 执行原子操作。原子的所有属性和函数都是静态的。
如果一个多线程同时在同一个位置读写数据原子操作保证了正在操作的数据如预期的那样即在上一个子操作结束后执行下一个操作不中断。可以说是针对Node.Js中多线程Server的开发而加强的功能在前端开发中使用的机会相当低。chrome 已经提供了支持。
五、ES9 (ES2018)
循环等待 在异步函数中有时需要在同步 for 循环中使用异步非同步函数。
async function process(array) {for (const i of array) {await doSomething(i);}
}async function process(array) {array.forEach(async i {await doSomething(i);});
}上面的代码不会像预期的那样输出期望的结果。
for循环本身还是同步的会在循环中的异步函数完成之前执行整个for循环然后将里面的异步函数逐一执行。
ES9 增加了异步迭代器允许 await 与 for 循环一起使用逐步执行异步操作。
async function process(array) {for await (const i of array) {doSomething(i);}
}promise.finally() 无论是成功.then()还是失败.catch()Promise 后面都会执行的部分。 Rest, Spread 在 ES2015 中Rest 不定长度参数…可以转换成数组传入。 正则表达式组 RegExp 可以返回匹配的数据包
const regExpDate /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const match regExpDate.exec(2020-06-25);
const year match[1]; // 2020
const month match[2]; // 06
const day match[3]; // 25正则表达式 dotAll . 表示匹配除输入以外的任何符号添加这些标志后允许匹配输入。
/hello.world/.test(hello\nworld); // false
/hello.world/s.test(hello\nworld); // true六、ES10 (ES2019)
更友好的 JSON.stringify 如果输入是 Unicode 但超出范围则 JSON.stringify 最初会返回格式错误的 Unicode 字符串。
现在是第 3 阶段的提案使其成为有效的 Unicode 并以 UTF-8 呈现。 Array.prototype.flat() Array.prototype.flatMap() 展平阵列 String.prototype.trimStart() String.prototype.trimEnd() trimStart() 方法从字符串的开头删除空格trimLeft() 是此方法的别名。 Object.fromEntries() Object.fromEntries() 方法将键值对列表转换为对象。 String.prototype.matchAll matchAll() 方法返回将字符串与正则表达式匹配的所有结果的迭代器包括捕获组。 fixed catch 绑定 在使用catch之前不管有用与否一定要传入一个eparameter来表示接收到的错误。 如果现在不用可以省略。 BigInt新数字类型重要 BigInt 值有时也称为 BigInt是一个 bigint 原语通过将 n 附加到整数文字的末尾或通过调用 BigInt() 函数没有 new 运算符并给它一个整数值或字符串来创建值。
ES5String, Number, Boolean, Null, UndefinedES6 新增Symbol到ES6就一共有6 种类型ES10 新增BigInt就达到 7 种类型
七、ES11 (ES2020)
Promise.allSettled() Promise.allSettled() 方法返回一个在所有给定的 Promise 都已实现或拒绝后实现的 Promise并带有一组对象每个对象都描述了每个 Promise 的结果。
它通常用于当有多个不依赖于彼此成功完成的异步任务或者总是想知道每个 Promise 的结果时。
相比之下Promise.all() 返回的 Promise 可能更合适如果任务相互依赖/如果想立即拒绝其中任何一个拒绝。
可选链操作符?.
在开发中很容易遇到先判断数据是否存在判断是否写入。
const isUserExist user user.info;
if (isUserExist) { username user.info.name;
}如果返回的数据为null或者用户对象下没有相应属性则会抛出Uncaught TypeError: Cannot read property...。
导致程序无法继续执行
使用 ?.语法更简单
const username user?.info?.name;如果存在获取name的值如果不存在赋值undefined
与 || 一起使用只需一行
const username user?.name || guest;Nullish 合并运算符 ?? 在JavaScript中遇到0、null、undefined时会自动转为false。 但有时0其实是一个正常的值只能容错undefined和null但是使用??可以保持简洁。 Dynamic-import 从字面上看应该很容易理解就是在需要的时候加载相关的逻辑。 GlobalThis 全局 globalThis 属性包含全局 this 值类似于全局对象。
八、ES12 (ES2021)
Promise.any() Promise.any() 接受一个可迭代的 Promise 对象。它返回一个单一的 Promise只要 iterable 中的任何一个 Promise 完成就会返回一个 Promise并带有已完成的 Promise 的值。
如果可迭代的实现中没有任何承诺如果所有给定的承诺都被拒绝则返回的承诺会被 AggregateError 拒绝AggregateError 是 Error 的一个新子类它将单个错误组合在一起。
逻辑赋值运算符 在开发过程中可以使用 ES2020 中提出的逻辑运算符 ||、 和 ??Nullish coalescing operator来解决一些问题。
而 ES2021 会提出 || , , ?? 概念类似于
let b 2
b 1
// equal to b b 1
let a null
a || some random text // a become tosome random text
// equal a a || some random text
let c some random texts
c null // c become to null
// equal to c c null
let d null
d ?? false // d become to false
// equal to d d ?? falseWeakRef WeakRef 对象包含对对象的弱引用该对象称为其目标或引用对象。对对象的弱引用是不会阻止对象被垃圾收集器回收的引用。相反普通或强引用将对象保存在内存中当一个对象不再有任何强引用时JavaScript 引擎的垃圾收集器可能会销毁该对象并回收其内存。如果发生这种情况将无法再从弱引用中获取对象。
九、拓展阅读
《JavaScript进阶十四详解 ES6 中的 export 和 import》《JavaScript进阶十三JavaScript 空值合并运算符、可选链操作符、空值赋值运算符讲解》《JavaScript进阶十二JS 模块化编程规范-CommonJS、AMD、CMD、ES6》《JavaScript进阶十八ES6 Symbol 用法》《JavaScript进阶二十精解 ES6 Promise 用法》《JavaScript进阶二十四ES8 中 async 与 await 使用方法详解》《JavaScript进阶二十五Promise 详解》
