首页  思维导图  详情

ES6-ES12

2022-03-21 17:14:07   18  举报





AI智能生成

ECMAScript(ES6-ES12)

ECMAScript

ES7

ES8

ES6

作者其他创作

大纲/内容

ES7

1. Array.prototype.includes()

定义：用来判断一个数组是否包含一个指定的值

返回值：返回Boolean，包含返回true，不包含返回false

使用方法：arr.includes(valueToFin：待查找值 [, fromIndex：可选，起始索引])

示例：

const arr = [1, 2, 3, 4] console.log(arr.includes(3, 2)) // true

扩展：可识别NaN，indexOf不能识别NaN

2. 幂运算符 **

Math.pow(2, 10) // 1024

2 ** 10 // 1024

ES8

1. Object.values()

返回一个由该对象的所有value值（不含继承的所有可遍历的）组成的数组

const obj = {   name: "jimmy",   age: 18,   height: 188, }; console.log(Object.values(obj)); // [ 'jimmy', 18, 188 ]

2. Object.entries()

返回一个由该对象的所有key与value（不含继承的所有可遍历的）组成的数组

传入数组，则key是索引

const obj = {   name: "jimmy",   age: 18,   height: 188, }; console.log(Object.entries(obj)); // [ [ 'name', 'jimmy' ], [ 'age', 18 ], [ 'height', 188 ] ] console.log(Object.entries([1, 2, 3])); // [ [ '0', 1 ], [ '1', 2 ], [ '2', 3 ] ]

3. Object.getOwnPropertyDescriptors()

方法用来获取一个对象的所有自身属性的描述符，如writable，enumerable等

const obj = {   name: "jimmy",   age: 18, }; const desc = Object.getOwnPropertyDescriptors(obj); console.log(desc);   // 打印结果 {   name: {     value: 'jimmy',     writable: true,     enumerable: true,     configurable: true   },   age: {     value: 18,     writable: true,    enumerable: true,     configurable: true    } }

value: 表示当前对象的默认值

writable: 表示对象属性是否可以修改

enumerable: 表示当前这个属性是否可以出现在对象的枚举属性中

configurable: 表示当前对象的属性能否用delete删除

修改方法：可用 ES5 Object.defineProperty() 修改

4. padStart

把指定字符串填充到字符串头部

返回新字符串

语法：str.padStart(targetLength [, padString])

targetLength: 填充后的字符串总长度，如果比当前字符串长度小，则返回当前字符串

padString: 填充字符串，默认值为''，从左开始

'abc'.padStart(10);         // "       abc" 'abc'.padStart(10, "foo");  // "foofoofabc" 'abc'.padStart(6,"123465"); // "123abc" 'abc'.padStart(8, "0");     // "00000abc" 'abc'.padStart(1);          // "abc

使用场景：

日期前导0填充

手机号，银行卡号数字替换 *

5. padEnd

把指定字符串填充到字符串尾部

返回新字符串

语法：str.padEnd(targetLength [, padString])

6. 尾逗号

允许函数的最后一个参数有尾逗号

好处：代码比对的时候，新添加一个参数时只会显示当前行的修改，而不是两行变动(第一行是上一次最后一个参数后面需加一个逗号)

7. async/await

Promise 链式调用，解决回调地狱，但流程复杂的话.then变多，语义化不明显

添加了 async 的函数在执行后会自动返回一个Promeise对象

async function foo() {     return 'jimmy' // Promise.resolve('jimmy') } console.log(foo()) // Promise

await 后面接 Promise 对象时会等当前Promise执行完毕才会继续往下执行

function timeout() {     return new Promise(resolve => {         setTimeout(() => {             console.log(1)             resolve()         }, 1000)     }) } // 不加async和await是2、1   加了是1、2 async function foo() {     await timeout()      console.log(2) } foo()

优点：解决同步的需求，逻辑更加清楚

缺点：大量的await会使代码运行变慢，因为是同步，必须一个个执行

优化方案：通过将Promise对象存储在变量中来同时开始他们，然后等它们全部执行完毕

ES9

1. Object Rest & Spread 

Spread 扩展运算符

将一个对象的数据添加到另一个对象中，重名则最后一个生效

const input = {   a: 1,   b: 2,   c: 3, } const output = {   ...input,   c: 4 } console.log(output) // {a: 1, b: 2, c: 4}

Object Rest 解构赋值

从一个对象中提取指定值并赋值给另一个对象

const input = {   a: 1,   b: 2,   c: 3 } let { a, ...rest } = input console.log(a, rest) // 1 {b: 2, c: 3}

2. for await of

for of 不能编辑异步迭代器，所以就有了 for await of方法

编辑异步迭代器，使其同步执行

function TimeOut(time) {     return new Promise(function(resolve, reject) {         setTimeout(function() {             resolve(time)         }, time)     }) } async function test() {     let arr = [TimeOut(2000), TimeOut(1000), TimeOut(3000)]     for await (let item of arr) {         console.log(Date.now(), item)     } } test() // 1560092345730 2000 // 1560092345730 1000 // 1560092346336 3000

3. Promise.prototype.finally

返回一个Promise，在Promise执行结束后，无论是任何状态，都会执行finally指定的回调函数

new Promise((resolve, reject) => {     setTimeout(() => {         resolve('success')         // reject('fail')     }, 1000) }).then(res => {     console.log(res) }).catch(err => {     console.log(err) }).finally(() => {     console.log('finally') })

使用场景：loading关闭，在接口请求结束后，无论是成功还是失败，loading都需要关闭

4. String 扩展: 放松对标签模板里字符串转义的限制

以前会报错，现在不合法会返回undefined

ES10

1. Object.fromEntries()

把一个键值对列表转换成一个对象，这个方法与Object.entries相对

案例1：Object转换操作

const obj = {     name: 'jimmy',     age: 18 } const entries = Object.entries(obj) console.log(entries) // [Array(2), Array(2)] // ES10 const fromEntries = Object.fromEntries(entries) console.log(fromEntries) // {name: "jimmy", age: 18}

案例2： Map转Object

const map = new Map() map.set('name', 'jimmy') map.set('age', 18) console.log(map) // {'name' => 'jimmy', 'age' => 18} const obj = Object.fromEntries(map) console.log(obj) // {name: "jimmy", age: 18}

案例3：过滤

先转数组进行过滤，然后再转回来

const course = {     math: 80,     english: 85,     chinese: 90 } const res = Object.entries(course).filter(([key, val]) => val > 80) console.log(res) // [ [ 'english', 85 ], [ 'chinese', 90 ] ] console.log(Object.fromEntries(res)) // { english: 85, chinese: 90 }

案例4：url的search参数转换

// let url = "https://www.baidu.com?name=jimmy&age=18&height=1.88" // queryString 为 window.location.search const queryString = "?name=jimmy&age=18&height=1.88"; const queryParams = new URLSearchParams(queryString); const paramObj = Object.fromEntries(queryParams); console.log(paramObj); // { name: 'jimmy', age: '18', height: '1.88' }

2. Array.prototype.flat()

拉平，将高维数组变成低维数组，返回一个新数组

该方法会移除数组中的空项

let newArray = arr.flat([depth])

depth：指定要提取嵌套数组的结构深度，默认值为1

const arr1 = [0, 1, 2, [3, 4]]; console.log(arr1.flat());  //  [0, 1, 2, 3, 4] const arr2 = [0, 1, 2, [[[3, 4]]]]; console.log(arr2.flat(2));  //  [0, 1, 2, [3, 4]] //使用 Infinity，可展开任意深度的嵌套数组 var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] // `flat()` 方法会移除数组中的空项: var arr5 = [1, 2, , 4, 5]; arr5.flat(); // [1, 2, 4, 5]

3. Array.prototype.flatMap()

与float方法基本一致，只不过是先进行map方法，返回一个新数组，拉平深度为1

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {     // 返回新数组的元素 }[, thisArg])

const numbers = [1, 2, 3] numbers.map(x => [x * 2]) // [[2], [4], [6]] numbers.flatMap(x => [x * 2]) // [2, 4, 6]

4. String.prototype.trimStart()

字符串的开头删除空格，trimLeft()是此方法的别名。

let str = '   foo  ' console.log(str.length) // 8 str = str.trimStart() // 或str.trimLeft() console.log(str.length) // 5

5. String.prototype.trimEnd()

从一个字符串的右端移除空白字符，trimRight 是此方法的别名。

let str = '   foo  ' console.log(str.length) // 8 str = str.trimEnd() // 或str.trimRight() console.log(str.length) // 6

6. 可选的Catch Binding

catch 后可以不写参数

ES10之前

try {     // tryCode } catch (err) {     // catchCode }

ES10之后

try {     console.log('Foobar') } catch {     console.error('Bar') }

7. JSON.stringify() 增强能力

修复了对于一些超出范围的 Unicode 展示错误的问题

因为 JSON 都是被编码成 UTF-8， 所以遇到 0xD800–0xDFFF 之内的字符会因为无法编码成 UTF-8 进而导致显示错误。 在 ES10 它会用转义字符的方式来处理这部分字符而非编码的方式

// \uD83D\uDE0E  emoji 多字节的一个字符 console.log(JSON.stringify('\uD83D\uDE0E')) // 打印出笑脸 // 如果我们只去其中的一部分  \uD83D 这其实是个无效的字符串 // 之前的版本 ，这些字符将替换为特殊字符，而现在将未配对的代理代码点表示为JSON转义序列 console.log(JSON.stringify('\uD83D')) // "\ud83d"

8. 修订 Function.prototype.toString()

返回源代码字符串

以前函数的toString方法来自Object.prototype.toString(), 现在的 Function.prototype.toString() 方法返回一个表示当前函数源代码的字符串。 以前只会返回这个函数，不包含注释、空格等。

9. Symbol.prototype.description

增加 description API来读取 Symbol 的描述

ES11

1. ?? 空值合并运算符

空值合并操作符（ ?? ）是一个逻辑操作符，当左侧的操作数为 null或者undefined 时，返回其右侧操作数，否则返回左侧操作数。

与 || 不同，逻辑或操作符会在左侧造作书为假值的时候返回右侧操作数，如 ''，0，false，NaN

注意：将 ?? 直接与 AND（&&）和 OR（||）操作符组合使用是不可取的。

2.  ?. 可选链

读取多层对象的时候可以链式写法，不必每一层进行判断是否为空

功能类似于 . 链式操作符，不同之处在于， 在引用为 null 或者 undefined 的情况下不会引起错误，该表达式短路返回值是 undefined。 与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

可以与空值合并符一起操作

注意：可选链不能用于赋值

const user = {     address: {         street: 'xx街道',         getNum() {             return '80号'         }     } }

以前

const street = user && user.address && user.address.street const num = user && user.address && user.address.getNum && user.address.getNum() console.log(street, num)

现在

const street2 = user?.address?.street const num2 = user?.address?.getNum?.() console.log(street2, num2)

3. globalThis 全局对象

可获得不同环境下的全局对象

web 的 window和self

node 的 global

以前兼容写法

const getGlobal = () => {     if (typeof self !== 'undefined') {         return self     }     if (typeof window !== 'undefined') {         return window     }     if (typeof global !== 'undefined') {         return global     }     throw new Error('无法找到全局对象') } const globals = getGlobal() console.log(globals)

现在可以直接用 globalThis对象

4. BigInt

用于提供大于 2的35次方 \- 1 的整数

写法一：数字后面直接加n

const bigInt = 9007199254740993n console.log(bigInt) console.log(typeof bigInt) // bigint // `BigInt` 和 [`Number`]不是严格相等的，但是宽松相等的。 console.log(1n == 1) // true console.log(1n === 1) // false

写法二：使用 BigInt 函数

let number = BigInt(2); let a = number + 2n; // 4n let b = number * 10n; // 20n let c = number - 10n; // -8n

5. String.prototype.matchAll()

返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

const regexp = /t(e)(st(\d?))/g; const str = 'test1test2'; const array = [...str.matchAll(regexp)]; console.log(array[0]);  // ["test1", "e", "st1", "1"] console.log(array[1]); // ["test2", "e", "st2", "2"]

6. Promise.allSettled()

Promise.all() 的优化方法，无论任意一个任务正常嚯异常，都会返回对应的状态，不会直接进入reject状态

7. Dynamic Import（按需 import）

import()可以在需要的时候，再加载某个模块。

import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块。

ES12

1. 逻辑运算符和赋值表达式（&&=，||=，??=）

&&=

a &&= b （a &&(a=b)）

a 为真的时候 a=b

let a = 1;  a &&= 2; // 2

||=

a ||= b  （a || (a=b)）

a 为假的时候 a=b

let a = 1;  a ||= 2; // 1  let b = 0 b ||= 2; // 2

??=

a ??= y  （a ??(a=b)）

a 为 null或undefined 的时候 a=b

注意: 三个符号不能有间隔

2. String.prototype.replaceAll()

把所有满足条件的部分全部替换掉, 返回一个新字符串

示例：'aabbcc'.replaceAll('b', '.'); // 'aa..c

注意：使用正则表达式搜索值时，它必须是全局的。

'aabbcc'.replaceAll(/b/, '.'); TypeError: replaceAll must be called with a global RegExp

3. 数字分隔符 _

可使用  _ 分割数字，增加可读性

let budget = 1_000_000_000_000; budget === 10 ** 12 // true

注意点：

1. 不能放在数值的最前面（leading）或最后面（trailing）

2. 不能两个或两个以上的分隔符连在一起

3. 小数点的前后不能有分隔符

4. 科学计数法里面，表示指数的e或E前后不能有分隔符

4. Promise.any

接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。

Promise.any([promise1(), promise2(), promise3()])   .then((first) => {     // 只要有一个请求成功 就会返回第一个请求成功的     console.log(first); // 会返回promise2   })   .catch((error) => {     // 所有三个全部请求失败 才会来到这里     console.log("error", error);   });

参考链接：

ES7-ES12

ES6笔记