ES6-ES12
2022-03-21 17:14:07 18 举报AI智能生成
ECMAScript(ES6-ES12)
作者其他创作
大纲/内容
定义：用来判断一个数组是否包含一个指定的值
返回值：返回Boolean，包含返回true，不包含返回false
示例：
扩展：可识别NaN，indexOf不能识别NaN
1. Array.prototype.includes()
2 ** 10 // 1024
2. 幂运算符 **
ES7
返回一个由该对象的所有value值（不含继承的所有可遍历的）组成的数组
const obj = { name: \"jimmy\
1. Object.values()
返回一个由该对象的所有key与value（不含继承的所有可遍历的）组成的数组
传入数组，则key是索引
2. Object.entries()
方法用来获取一个对象的所有自身属性的描述符，如writable，enumerable等
value: 表示当前对象的默认值
writable: 表示对象属性是否可以修改
enumerable: 表示当前这个属性是否可以出现在对象的枚举属性中
configurable: 表示当前对象的属性能否用delete删除
修改方法：可用 ES5 Object.defineProperty() 修改
3. Object.getOwnPropertyDescriptors()
把指定字符串填充到字符串头部
返回新字符串
targetLength: 填充后的字符串总长度，如果比当前字符串长度小，则返回当前字符串
padString: 填充字符串，默认值为''，从左开始
'abc'.padStart(10); // \" abc\
日期前导0填充
手机号，银行卡号 数字 替换 *
使用场景：
4. padStart
把指定字符串填充到字符串尾部
5. padEnd
允许函数的最后一个参数有尾逗号
好处：代码比对的时候，新添加一个参数时只会显示当前行的修改，而不是两行变动(第一行是上一次最后一个参数后面需加一个逗号)
6. 尾逗号
Promise 链式调用，解决回调地狱，但流程复杂的话.then变多，语义化不明显
async function foo() { return 'jimmy' // Promise.resolve('jimmy')}console.log(foo()) // Promise
添加了 async 的函数在执行后会自动返回一个Promeise对象
await 后面接 Promise 对象时会等当前Promise执行完毕才会继续往下执行
优点：解决同步的需求，逻辑更加清楚
优化方案：通过将Promise对象存储在变量中来同时开始他们，然后等它们全部执行完毕
缺点：大量的await会使代码运行变慢，因为是同步，必须一个个执行
7. async/await
ES8
将一个对象的数据添加到另一个对象中，重名则最后一个生效
Spread 扩展运算符
从一个对象中提取指定值并赋值给另一个对象
Object Rest 解构赋值
1. Object Rest & Spread
for of 不能编辑异步迭代器，所以就有了 for await of方法
编辑异步迭代器，使其同步执行
2. for await of
返回一个Promise，在Promise执行结束后，无论是任何状态，都会执行finally指定的回调函数
使用场景：loading关闭，在接口请求结束后，无论是成功还是失败，loading都需要关闭
3. Promise.prototype.finally
以前会报错，现在不合法会返回undefined
4. String 扩展: 放松对标签模板里字符串转义的限制
ES9
把一个键值对列表转换成一个对象，这个方法与Object.entries相对
案例1：Object转换操作
案例2： Map转Object
先转数组进行过滤，然后再转回来
案例3：过滤
// let url = \"https://www.baidu.com?name=jimmy&age=18&height=1.88\"// queryString 为 window.location.searchconst queryString = \"?name=jimmy&age=18&height=1.88\
案例4：url的search参数转换
1. Object.fromEntries()
该方法会移除数组中的空项
拉平，将高维数组变成低维数组，返回一个新数组
depth：指定要提取嵌套数组的结构深度，默认值为1
let newArray = arr.flat([depth])
2. Array.prototype.flat()
与float方法基本一致，只不过是先进行map方法，返回一个新数组，拉平深度为1
3. Array.prototype.flatMap()
字符串的开头删除空格，trimLeft()是此方法的别名。
let str = ' foo 'console.log(str.length) // 8str = str.trimStart() // 或str.trimLeft()console.log(str.length) // 5
4. String.prototype.trimStart()
从一个字符串的右端移除空白字符，trimRight 是此方法的别名。
let str = ' foo 'console.log(str.length) // 8str = str.trimEnd() // 或str.trimRight()console.log(str.length) // 6
5. String.prototype.trimEnd()
catch 后可以不写参数
try { // tryCode} catch (err) { // catchCode}
ES10之前
try { console.log('Foobar')} catch { console.error('Bar')}
ES10之后
6. 可选的Catch Binding
因为 JSON 都是被编码成 UTF-8，所以遇到 0xD800–0xDFFF 之内的字符会因为无法编码成 UTF-8 进而导致显示错误。在 ES10 它会用转义字符的方式来处理这部分字符而非编码的方式
修复了对于一些超出范围的 Unicode 展示错误的问题
// \\uD83D\\uDE0E emoji 多字节的一个字符console.log(JSON.stringify('\\uD83D\\uDE0E')) // 打印出笑脸// 如果我们只去其中的一部分 \\uD83D 这其实是个无效的字符串// 之前的版本 ，这些字符将替换为特殊字符，而现在将未配对的代理代码点表示为JSON转义序列console.log(JSON.stringify('\\uD83D')) // \"\\ud83d\"
7. JSON.stringify() 增强能力
返回源代码字符串
8. 修订 Function.prototype.toString()
增加 description API来读取 Symbol 的描述
9. Symbol.prototype.description
ES10
空值合并操作符（ ?? ）是一个逻辑操作符，当左侧的操作数为 null或者undefined 时，返回其右侧操作数，否则返回左侧操作数。
与 || 不同，逻辑或操作符会在左侧造作书为假值的时候返回右侧操作数，如 ''，0，false，NaN
注意：将 ?? 直接与 AND（&&）和 OR（||）操作符组合使用是不可取的。
1. ?? 空值合并运算符
功能类似于 . 链式操作符，不同之处在于，在引用为 null 或者 undefined 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。
读取多层对象的时候可以链式写法，不必每一层进行判断是否为空
可以与 空值合并符 一起操作
注意：可选链不能用于赋值
以前
现在
2. ?. 可选链
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对象
3. globalThis 全局对象
用于提供大于 2的35次方 \\- 1 的整数
const bigInt = 9007199254740993nconsole.log(bigInt)console.log(typeof bigInt) // bigint// `BigInt` 和 [`Number`]不是严格相等的，但是宽松相等的。console.log(1n == 1) // trueconsole.log(1n === 1) // false
写法一：数字后面直接加n
let number = BigInt(2);let a = number + 2n; // 4nlet b = number * 10n; // 20nlet c = number - 10n; // -8n
写法二：使用 BigInt 函数
4. BigInt
返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。
const regexp = /t(e)(st(\\d?))/g;const str = 'test1test2';const array = [...str.matchAll(regexp)];console.log(array[0]); // [\"test1\
5. String.prototype.matchAll()
Promise.all() 的优化方法，无论任意一个任务正常嚯异常，都会返回对应的状态，不会直接进入reject状态
6. Promise.allSettled()
import()可以在需要的时候，再加载某个模块。
import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块。
7. Dynamic Import（按需 import）
ES11
a 为真的时候 a=b
a &&= b （a &&(a=b)）
let a = 1; a &&= 2; // 2
&&=
a 为假的时候 a=b
a ||= b （a || (a=b)）
let a = 1; a ||= 2; // 1 let b = 0b ||= 2; // 2
||=
a 为 null或undefined 的时候 a=b
a ??= y （a ??(a=b)）
??=
注意: 三个符号不能有间隔
1. 逻辑运算符和赋值表达式（&&=，||=，??=）
注意：使用正则表达式搜索值时，它必须是全局的。
2. String.prototype.replaceAll()
可使用 _ 分割数字，增加可读性
let budget = 1_000_000_000_000;budget === 10 ** 12 // true
1. 不能放在数值的最前面（leading）或最后面（trailing）
2. 不能两个或两个以上的分隔符连在一起
3. 小数点的前后不能有分隔符
4. 科学计数法里面，表示指数的e或E前后不能有分隔符
注意点：
3. 数字分隔符 _
// 全部报错3_.1413._1411_e121e_12123__456_14643011464301_
接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。
4. Promise.any
ES12
ES7-ES2
ES7-ES12
ES6
ES6笔记
参考链接：
ES7 - ES12
0 条评论
回复 删除
下一页
