• 最全的 ES 重点内容整理（上）

    ● 我们从很多年前就知道 ES6, 也就是官方发布的 ES2015

    ● 从 2015 年开始, 官方觉得大家命名太乱了, 所以决定以年份命名

    ● 但是大家还是习惯了叫做 ES6, 不过这不重要

    ● 重要的是, ES6 关注的人非常多, 大家也会主动去关注

    ● 但是从 2016 年以后, 每年官方都会出现新的语法, 那么大家又有多少关注呢

    ES2016 ( ES7 )

    ● 更新的内容并不多, 更像是在基于 ES2015( ES6 ) 的补充内容

    1.  数组方法扩展

    ● Array.prototype.includes()

    ● 语法 : Array.prototype.includes( search[, fromIndex] )

    ● 返回值 : 布尔值

    ● 基础应用 : 判断数组是否包含指定内容

    1. const arr = [ 'es6', 'es7', 'es8', 'es9' ]
    2. const r1 = arr.includes( 'es8' )
    3. console.log(r1) // => true
    4. const r2 = arr.includes( 'es5' )
    5. console.log(r2) // => false

    ● 通过第二个参数确定查询起始索引位置

    1. const arr = [ 'es6', 'es7', 'es8', 'es9' ]
    2. const r1 = arr.includes( 'es8', 1 )
    3. console.log(r1) // => 表示从索引 1 位置开始检索, 结果为 true
    4. const r2 = arr.includes( 'es8', 3 )
    5. console.log(r2) // => 表示从索引 3 位置开始检索, 结果为 false

    ● 第二个参数也可以填写负整数, 表示倒数第几个开始检索

    1. const arr = [ 'es6', 'es7', 'es8', 'es9' ]
    2. const r1 = arr.includes( 'es8', -1 )
    3. console.log(r1) // => 表示从索引 3 位置开始检索, 结果为 false
    4. const r2 = arr.includes( 'es8', -3 )
    5. console.log(r2) // => 表示从索引 1 位置开始检索, 结果为 true

    ● 冷知识 : includes 方法可以检测到 NaN 这玩意儿~~

    1. const arr = [ 'es6', 'es7', 'es8', NaN, 'es9' ]
    2. const r1 = arr.includes( NaN )
    3. console.log(r1) // => true

    2.  运算符扩展 : 幂运算符

    ● ** 符号

    ● 是一个取幂的符号, 等价于 Math.pow() 方法

    1. const r1 = 2 ** 10
    2. // 等价于 Math.pow(2, 10)
    3. console.log(r1) // => 1024

    ES2017 ( ES8 )

    ● 更新的内容也不是很多, 也是为了 ES2015( ES6 ) 做了一些补充扩展

    1.  异步解决方案的语法糖 async / await

    ● 两个关键字 async 和 await

    ● 用于对 Promise 的优化书写方案

    ● async

    ○ 书写在函数前面

    ○ 为了在该函数内可以使用 await 关键字

    ● await

    ○ 需要书写在一个有 async 关键字的函数内

    ○ 用于等待 Promise 的结果

    ○ 可以捕获到 Promise 成功的状态

    ● 例子 :

    1. function ajax() {
    2.     return Promsie(() => { /* ... */ })
    3. }
    4.  
    5. async function fn() {
    6.     const res = await ajax()
    7.     console.log(res)
    8. }
    9.  
    10. fn()

    ○ 当 fn 调用的时候, 因为 ajax 方法内封装返回的是一个 Promise 对象

    ○ 因为使用了 async / await 关键字

    ○ 所以会在这一段异步代码结束后, 把 success 的结果给到 res 以后, 再继续向后执行代码

    2.  对象扩展 : Object.values()

    ● Object.values()

    ● 用于获取到对象内的每一个 值

    ● 返回值 : 是一个数组, 包含对象内每一个值

    1. const obj = {
    2.     name: '千锋大前端',
    3.     age: 8,
    4.     desc: '扛把子'
    5. }
    6. const res = Object.values(obj)
    7. console.log(res) // => [ '千锋大前端', 8, '扛把子' ]

    3.  对象扩展 : Object.entries()

    ● Object.entries()

    ● 用于将给定对象的可枚举属性转化为一个包含键值对的数组

    ● 返回值 : 是一个二维数组, 和 for ... in 遍历出来的顺序是一样的

    1. const obj = {
    2.     name: '千锋大前端',
    3.     age: 8,
    4.     desc: '扛把子'
    5. }
    6. const res = Object.entries(obj)
    7. cosnole.log(res)
    8. /*
    9.     [
    10.         [ 'name', '千锋大前端' ],
    11.         [ 'age', 8 ],
    12.         [ 'desc', '扛把子' ]
    13.     ]
    14. */

    4.  对象扩展 : Object.getOwnPropertyDescriptors()

    ● Object.getOwnPropertyDescriptors( 对象 )

    ● 返回对象内每一个自身属性的描述详细信息

    ● 信息内可能包含的值为 configurable / enumerable / wrieable / value / get / set

    1. const obj = {
    2.     name: '千锋大前端',
    3.     age: 8,
    4.     desc: '扛把子'
    5. }
    6.  
    7. const res = Object.getOwnPropertyDescriptors( obj )
    8. /*
    9.     {
    10.         age: {
    11.             configurable: true,
    12.             enumerable: true,
    13.             value: 8,
    14.             writable: true
    15.         },
    16.         desc: {
    17.             configurable: true,
    18.             enumerable: true,
    19.             value: '扛把子',
    20.             writable: true
    21.         },
    22.         name: {
    23.             configurable: true,
    24.             enumerable: true,
    25.             value: '千锋大前端',
    26.             writable: true
    27.         }
    28.     }
    29. */

    5.  字符串方法扩展

    ● String.prototype.padStart() / String.prototype.padEnd()

    ● 用于填充字符串, 分别是在 开始位置填充 和 结束位置填充

    ● 语法 :

    ○ String.prototype.padStart( length, str )

    ○ String.prototype.padEnd( length, str )

    ● 注意 : 如果你的 length 小于字符串本身的 length, 那么不进行填充, 返回原始字符串

    ● 示例 :

    1. const str = '123456789'
    2. // 将 str 字符串填充至 length 为 15, 用 'abc' 进行填充
    3. const res = str.padStart( 15, 'abc' )
    4. console.log(res) // => 'abcabc123456789'
    1. const str = '123456789'
    2. // 将 str 字符串填充至 length 为 11, 用 'abc' 进行填充
    3. const res = str.padStart( 11, 'abc' )
    4. console.log(res) // => 'ab123456789'
    1. const str = '123456789'
    2. // 将 str 字符串填充至 length 为 8, 用 'abc' 进行填充
    3. const res = str.padStart( 8, 'abc' )
    4. console.log(res) // => '123456789'

    ● String.prototype.padEnd() 方法的语法和参数是一样的, 只不过是填充在结尾位置

    6.  尾逗号扩展

    ● 在函数定义和调用的时候, 可以在参数结尾位置添加一个逗号而不报错

    1. function fn(a, b, c,) {
    2.     console.log(a, b, c)
    3. }
    4.  
    5. fn(10, 20, 30,)

    ES2018 ( ES9 )

    1.  异步扩展 : for await of

    ● 用于遍历异步的 Iterator 接口

    1. // 封装一个异步函数
    2. function ajax() { /* ... */ }
    3.  
    4. async function fn() {
    5.     const arr = [ ajax(), ajax(), ajax() ]
    6.     for await ( let item of arr ) {
    7.         console.log(Date.now(), item)
    8.     }
    9. }
    10.  
    11. fn()

    2.  Promise 方法扩展 : Promise.prototype.finally()

    ● 表示 Promise 完成

    ● 不管一个 Promise 最终是转换到 fulfilled 或者 rejected 状态, 在执行完 then 或者 catch 回调以后, 都会执行一下 finally 回调

    1. const p = new Promise((resolve, reject) => { /* ... */ })
    2.  
    3. p
    4.     .then(res => { /* ... */ })
    5.     .catch(err => { /* ... */ })
    6.     .finally(() => { /* ... */ })

    3.  对象的扩展运算符 : ...

    ● 可以用于从一个对象内取值, 相当于将目标对象内的所有可遍历但是尚未被获取的属性, 分配到一个新的对象上, 一般用于解构赋值

    1. const obj = {
    2.     name: '千锋大前端',
    3.     age: 8,
    4.     desc: '扛把子',
    5.     score: 100
    6. }
    7.  
    8. const { name, age, ...info } = obj
    9.  
    10. /*
    11.     name         '千锋大前端'
    12.     age          8
    13.     info         { desc: '扛把子', score: 100 }
    14. */

    4.  正则扩展 : dotAll 模式

    ● 正则内的 点(.)

    我们都知道, 在正则表达式内 点(.) 是一个非常特殊的字符

    表示的是任意字符, 但是有两个例外

    1.  四个自己的 UTF-16 字符, 不过这个可以用 u 修饰符解决

    2.  终止符, 点( . ) 表示不了

    U+000A 换行符 ( \n )

    U+000D 回车符 ( \r )

    U+2028 行分隔符

    U+2029 段分隔符

    ● 现在扩展了一个 s 修饰符

    当你在书写正则表达式的时候, 如果用了 s 修饰符

    表示进入了 dotAll 模式, 既 点(.) 可以表示一切字符, 没有例外

    1. const r1 = /a.b/
    2. console.log(r1.test('a\nb')) // => false
    3.  
    4. const r2 = /a.b/s
    5. console.log(r2.test('a\nb')) // => true

    ● 配合 s 修饰符, 正则还给出了一个 dotAll 属性, 用来指出当前正则是否处在 dotAll 模式

    1. const r1 = /a.b/
    2. const r2 = /a.b/s
    3. console.log(r1.dotAll) // => false
    4. console.log(r2.dotAll) // => true

    5.  正则扩展 : 具名组匹配

    ● 在正则表达式内, 小括号 可以表示一个单独的小分组进行单独捕获

    ● 在使用 exec 方法的时候, 会把每一个 小括号 的内容单独捕获出来

    1. const str = '千锋大前端成立于 2015-05-18'
    2. const reg = /(\d{4})-(\d{2})-(\d{2})/
    3. const res = reg.exec(str)
    4. console.log( res )
    5. /*
    6.   [
    7.       0: '2015-05-18',
    8.       1: '2015',
    9.       2: '05',
    10.       3: '18',
    11.       index: 0,
    12.       input: '千锋大前端成立于 2015-05-18'
    13.       groups: undefined
    14.   ]
    15.  
    16.   [0]  捕获出来的完整字符串片段
    17.   [1] - [n] 分别表示每一个小括号单独捕获的内容
    18.   index  匹配内容的开始索引位置
    19.   input  原始字符串
    20.   groups  一个捕获组, 在没有定义命名捕获组的时候是 undefined
    21. */

    ● 这就是以前正则捕获的结果

    会发现, 可以把每一个小分组内容捕获出来, 但是我们用起来的时候不是很方便

    如果我想单独使用小分组单独捕获出来的内容

    res[0]

    res[1]

    res[2]

    ● 现在, 添加了正则内小分组命名的能力, 我们可以给每一个小分组起名字

    ● 语法 : (?<名字>正则)

    1. const str = '千锋大前端成立于 2015-05-18'
    2. const reg = /(?<year>\d{4})-(?<month>\d{2})-(?<date>\d{2})/
    3. const res = reg.exec(str)
    4. console.log( res )
    5. /*
    6.   [
    7.       0: '2015-05-18',
    8.       1: '2015',
    9.       2: '05',
    10.       3: '18',
    11.       index: 0,
    12.       input: '千锋大前端成立于 2015-05-18'
    13.       groups: {
    14.           year: '2015',
    15.           month: '05',
    16.           date: '18'
    17.       }
    18.   ]
    19. */

    ES2019 ( ES10 )

    1.  数组扩展 : Array.prototype.flat() 和 Array.prototype.flatMap()

    ● Array.prototype.flat( 数字 ) 方法用于数组扁平化

    ● 参数表示扁平化时的递归深度, 默认是 1

    1. const arr1 = [ 1, 2, [ 3, 4 ] ]
    2. console.log(arr1.flat()) // => [ 1, 2, 3, 4 ]
    3.  
    4. const arr2 = [ 1, 2, [ 3, 4, [ 5, 6, [ 7, 8 ] ] ] ]
    5. console.log(arr2.flat()) // => [ 1, 2, 3, 4, [ 5, 6, [ 7, 8 ] ] ]
    6.  
    7. const arr3 = [ 1, 2, [ 3, 4, [ 5, 6, [ 7, 8 ] ] ] ]
    8. console.log(arr3.flat(2)) // => [ 1, 2, 3, 4, 5, 6, [ 7, 8 ] ]
    9.  
    10. const arr4 = [ 1, 2, [ 3, 4, [ 5, 6, [ 7, 8 ] ] ] ]
    11. console.log(arr4.flat(Infinity)) // => [ 1, 2, 3, 4, 5, 6, 7, 8 ]

    ● Array.prototype.flatMap() 方法也是用于扁平化

    这个方就相当于是一个对组通过 map 映射, 然后通过 flat 扁平化

    但是他的扁平深度只能是 1

    arr.flatMap()

    等价于

    arr.map().flat(1)

    1. const arr = [ 1, 2, [ 3, 4, [ 5, 6 ] ] ]
    2. const res = arr.flatMap( x => x * 10 )
    3. console.log(res) // => [ 10, 20, NaN ]

    2.  对象扩展 : Object.fromEntries()

    ● 利用给定的键值对构建一个对象数据结构

    ● 它的功能刚好和 Object.entries() 是相反的

    1. const entries = new Map([
    2.     [ 'name', '千锋大前端' ],
    3.     [ 'age', 8 ],
    4.     [ 'desc', '扛把子' ]
    5. ])
    6.  
    7. const res = Object.fromEntries(entries)
    8. console.log(res)
    9. /*
    10.     {
    11.         name: '千锋大前端',
    12.         age: 8,
    13.         desc: '扛把子'
    14.     }
    15. */

    3.  字符串扩展 : String.prototype.trimStart() 和 trimEnd()

    ● 这两个方法其实以前就有过, 叫做 trimLeft() 和 trimRight()

    ● 只不过在 ES2019 中, 名称被更改为 trimStart 和 trimEnd 只是为了看起来更直观

    ● trimStart() 修剪字符串的开头空白

    ● trimEnd() 修剪字符串的结尾空白

    1. const str = '   千锋大前端, 前端培训界的扛把子    '
    2. console.log(str.trimStart())
    3. // => '千锋大前端, 前端培训界的扛把子    '
    4.  
    5. console.log(str.trimEnd())
    6. // => '   千锋大前端, 前端培训界的扛把子'

    4.  Symbol 扩展 : Symbol.prototype.description

    ● 我们在创建 Symbol 的时候, 其实是可以添加一个描述的

    ● 但是将来你如果想要取会这个描述就比较麻烦了

    以前

    我们只能利用 toString 方法, 拿到 Symbol 的字符串

    然后自己从字符串中把我们定义 Symbol 的时候添加的描述拿回来

    1. const sy = Symbol( '千锋大前端' )
    2. const origin = sy.toString()
    3. console.log(origin) // => 'Symbol(千锋大前端)'

    ○ 我们自己从 origin 内把我们需要的描述信息截取出来

    ○ 比较麻烦

    ● 在 ES2019 内, 给 Symbol 添加了一个只读属性, 叫做 description

    ● 可以直接拿到每一个 Symbol 初始化的时候填写描述信息

    1. const sy = Symbol( '千锋大前端' )
    2. console.log(sy.description) // => '千锋大前端'

    5.  可选 catch 绑定

    ● 先来看一下以前的 catch 语法

    1. try {
    2.     const data = JSON.parse(response)
    3. } catch (err) {
    4.     console.log('执行出错了, 错误信息是 : ', err)
    5. }

    ● 以前的语法迫使我们必须给 catch 绑定一个异常变量

    ● 但是其实大部分的时候, 我们是不需要用到这个变量的

    ● 但是在开发过程中, 不写又会报错, 这就使得我们每次都要写上

    ● 但是在 ES2019 的提案中, 让我们可以忽略掉这个变量

    1. try {
    2.     const data = JSON.parse(response)
    3. } catch {
    4.     console.log('执行出错了')
    5. }

    6.  JSON 扩展 : Superset 超集

    ● 并不是一个什么新的东西, 只是对 JSON 解析的能力进行了扩展

    ● 以前, JSON 在解析的时候, 如果字符串中包含有 分隔符(\u2028) 或者 段落分隔符(\u2029) 是不能被解析的, 会在解析过程中报错

    JSON.parse('"\u2028"') // => SyntabError

    ● 从 ES2019 以后, 可以解析这些内容了

    JSON.parse('"\u2028"') // => ''

    7.  JSON 扩展 : stringify 加强格式转化

    ● 也是增强了 JSON 在格式转换的时候的能力

    ● 主要是针对于 emoji 的表现

    ● 以前, emoji 和一些其他特殊字符被表示为两个代理项的组合, 如果我们用 JSON 进行格式转换的时候, 会被转换为无效字符

    JSON.stringify('😎') // => '"�"'

    ● ES2019 加强以后, 会在特有代码之前插入转义符, 结果依旧是一个可读且有效的 UTF-8 / UTF-16 的编码

    JSON.stringify('😎') // => '"\\ud83d"'

  • 相关阅读:
    AT2382-[AGC015D]A or...or B Problem
    ModStartBlog v6.1.0 界面显示优化，富文本升级
    使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 🌐
    自动驾驶 2D 单目\双目\多目视觉方法 一（Pseudo-LiDAR，Mono3D，FCOS3D，PSMNet）
    matlab | 函数：常用函数
    51单片机晶振频率与定时中断产生pwn占空比
    1462_TC275_Lite_kit上的调试器使用
    ubuntu安装Qv2ray2.7.0及配置
    一、什么是日志
    论基于架构的软件设计方法及应用
  • 原文地址：https://blog.csdn.net/sdasadasds/article/details/133785027