ES知识点全面整理

news2024/11/18 3:25:30

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

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

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

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

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

ES2016 ( ES7 )

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

1.  数组方法扩展

● Array.prototype.includes()

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

● 返回值 : 布尔值

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

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

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

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

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

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

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

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

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

● ** 符号

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

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

ES2017 ( ES8 )

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

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

● 两个关键字 async 和 await

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

● async

        ○ 书写在函数前面

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

● await

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

        ○ 用于等待 Promise 的结果

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

● 例子 :

function ajax() {
    return Promsie(() => { /* ... */ })
}

async function fn() {
    const res = await ajax()
    console.log(res)
}

fn()

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

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

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

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

● Object.values()

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

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

const obj = {
    name: '码农键盘上的梦',
    age: 8,
    desc: '扛把子'
}
const res = Object.values(obj)
console.log(res) // => [ '码农键盘上的梦', 8, '扛把子' ]

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

● Object.entries()

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

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

const obj = {
    name: '码农键盘上的梦',
    age: 8,
    desc: '扛把子'
}
const res = Object.entries(obj)
cosnole.log(res)
/*
    [ 
        [ 'name', '码农键盘上的梦' ], 
        [ 'age', 8 ], 
        [ 'desc', '扛把子' ] 
    ]
*/

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

● Object.getOwnPropertyDescriptors( 对象 )

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

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

const obj = {
    name: '码农键盘上的梦',
    age: 8,
    desc: '扛把子'
}

const res = Object.getOwnPropertyDescriptors( obj )
/*
    {
        age: {
            configurable: true,
            enumerable: true,
            value: 8,
            writable: true
        },
        desc: {
            configurable: true,
            enumerable: true,
            value: '扛把子',
            writable: true
        },
        name: {
            configurable: true,
            enumerable: true,
            value: '码农键盘上的梦',
            writable: true
        }
    }
*/

5.  字符串方法扩展

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

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

● 语法 :

        ○ String.prototype.padStart( length, str )

        ○ String.prototype.padEnd( length, str )

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

● 示例 :

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

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

6.  尾逗号扩展

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

function fn(a, b, c,) {
    console.log(a, b, c)
}

fn(10, 20, 30,)

ES2018 ( ES9 )

1.  异步扩展 : for await of

● 用于遍历异步的 Iterator 接口

// 封装一个异步函数
function ajax() { /* ... */ }

async function fn() {
    const arr = [ ajax(), ajax(), ajax() ]
    for await ( let item of arr ) {
        console.log(Date.now(), item)
    }
}

fn()

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

● 表示 Promise 完成

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

const p = new Promise((resolve, reject) => { /* ... */ })

p.then(res => { /* ... */ })
 .catch(err => { /* ... */ })
 .finally(() => { /* ... */ })

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

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

const obj = {
    name: '码农键盘上的梦',
    age: 8,
    desc: '扛把子',
    score: 100
}

const { name, age, ...info } = obj

/*
    name         '码农键盘上的梦'
    age          8
    info         { desc: '扛把子', score: 100 }
*/
        ○ 注意 : ... 运算符一定要放在最后

4.  正则扩展 : dotAll 模式

● 正则内的 点(.)

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

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

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

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

            U+000A 换行符 ( \n )

            U+000D 回车符 ( \r )

            U+2028 行分隔符

            U+2029 段分隔符

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

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

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

const r1 = /a.b/
console.log(r1.test('a\nb')) // => false

const r2 = /a.b/s
console.log(r2.test('a\nb')) // => true

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

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

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

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

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

const str = '我学前端的时间 2015-05-18'
const reg = /(\d{4})-(\d{2})-(\d{2})/
const res = reg.exec(str)
console.log( res )
/*
  [  
      0: '2015-05-18',
      1: '2015',
      2: '05',
      3: '18',
      index: 0,
      input: '我学前端的时间 2015-05-18'
      groups: undefined
  ]  

  [0]  捕获出来的完整字符串片段
  [1] - [n] 分别表示每一个小括号单独捕获的内容
  index  匹配内容的开始索引位置
  input  原始字符串
  groups  一个捕获组, 在没有定义命名捕获组的时候是 undefined
*/

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

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

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

        res[0]

        res[1]

        res[2]

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

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

const str = '我学前端的时间 2015-05-18'
const reg = /(?<year>\d{4})-(?<month>\d{2})-(?<date>\d{2})/
const res = reg.exec(str)
console.log( res )
/*
  [  
      0: '2015-05-18',
      1: '2015',
      2: '05',
      3: '18',
      index: 0,
      input: '我学前端的时间 2015-05-18'
      groups: {
          year: '2015',
          month: '05',
          date: '18'
      }
  ]  
*/

ES2019 ( ES10 )

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

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

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

const arr1 = [ 1, 2, [ 3, 4 ] ]
console.log(arr1.flat()) // => [ 1, 2, 3, 4 ]

const arr2 = [ 1, 2, [ 3, 4, [ 5, 6, [ 7, 8 ] ] ] ]
console.log(arr2.flat()) // => [ 1, 2, 3, 4, [ 5, 6, [ 7, 8 ] ] ]

const arr3 = [ 1, 2, [ 3, 4, [ 5, 6, [ 7, 8 ] ] ] ]
console.log(arr3.flat(2)) // => [ 1, 2, 3, 4, 5, 6, [ 7, 8 ] ]

const arr4 = [ 1, 2, [ 3, 4, [ 5, 6, [ 7, 8 ] ] ] ]
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)

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

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

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

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

const entries = new Map([
    [ 'name', '码农键盘上的梦' ],
    [ 'age', 8 ],
    [ 'desc', '扛把子' ]
])

const res = Object.fromEntries(entries)
console.log(res)
/*
    {
        name: '码农键盘上的梦',
        age: 8,
        desc: '扛把子'
    }
*/

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

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

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

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

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

const str = '   码农键盘上的梦    '
console.log(str.trimStart()) 
// => '码农键盘上的梦    '

console.log(str.trimEnd())
// => '   码农键盘上的梦'

4.  Symbol 扩展 : Symbol.prototype.description

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

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

        以前

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

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

const sy = Symbol( '码农键盘上的梦' )
const origin = sy.toString()
console.log(origin) // => 'Symbol(码农键盘上的梦)'

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

        ○ 比较麻烦

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

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

const sy = Symbol( '码农键盘上的梦' )
console.log(sy.description) // => '码农键盘上的梦'

5.  可选 catch 绑定

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

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

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

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

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

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

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

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"'

(篇幅问题，我们下篇见)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1077401.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Mac电脑交互式原型设计 Axure RP 8汉化最新 for mac

Mac电脑交互式原型设计 Axure RP 8汉化最新 for mac

Axure RP 8是一款专业且快速的原型设计工具&#xff0c;主要用于定义需求、规格、设计功能和界面。这款工具主要适用于用户体验设计师、交互设计师、业务分析师、信息架构师、可用性专家和产品经理等职业。 Axure RP 8的主要特性包括能够快速设计出应用软件或Web网站的线框图、…
阅读更多...
linux_三剑客（grep,sed,awk)

linux_三剑客（grep,sed,awk)

前言&#xff1a; Bash:是一个命令处理器&#xff0c;运行在文本窗口中&#xff0c;并能执行用户直接输入的命令。 Bash还能从文件中读取Linux命令&#xff0c;称之为脚本。 Bash支持通配符&#xff0c;管道&#xff0c;命令替换&#xff0c;条件判断等逻辑控制语句。 快捷…
阅读更多...
使用gpio子系统实现按键驱动（二）

使用gpio子系统实现按键驱动（二）

一&#xff0c;gpio_keys.c介绍 Linux内核下的drivers/input/keyboard/gpio_keys.c实现了一个体系无关的GPIO按键驱动&#xff0c;使用此按键驱动&#xff0c;只需要在设备树gpio-key节点添加需要的按键子节点即可&#xff0c;适合于实现独立式按键驱动。 gpio-keys是基于inp…
阅读更多...
gma 2 教程（三）坐标参考系统：1.坐标系和坐标参考系统模块简介

gma 2 教程（三）坐标参考系统：1.坐标系和坐标参考系统模块简介

安装 gma&#xff1a;pip install gma 坐标参考系统是地理空间数据表示和位置定位的基础&#xff0c;它是一种用于描述和测量地球表面位置的标准化框架。其定义了坐标系统、基准面和坐标单位等要素&#xff0c;以确保地球上不同地方的位置可以一致、准确地表示和比较。 本章以g…
阅读更多...
开源协议介绍

开源协议介绍

文章目录 一、简介二、常见开源协议介绍2.1 BSD &#xff08;Berkeley Software Distribution license&#xff09;2.2 MIT&#xff08;Massachusetts Institute of Technology&#xff09;2.3 Apache Licence 2.02.4 GPL&#xff08;General Public License&#xff09;2.5 LG…
阅读更多...
微电网单台并网逆变器PQ控制matlab仿真模型

微电网单台并网逆变器PQ控制matlab仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 微电网运行在并网模式下且公共电网供应正常时&#xff0c;因为公共电网给定了电 压和频率的参考值&#xff0c;所有的逆变器可以使用PQ控制方式。 当系统频率为额定频率f0时&#xff0c;系统稳定在A点&#x…
阅读更多...
【C语言进阶（13）】文件操作

【C语言进阶（13）】文件操作

文章目录 Ⅰ 什么是文件1. 文件分类2. 文件名 Ⅱ 文本文件和二进制文件Ⅲ 文件缓冲区Ⅳ 文件的打开和关闭1. 文件指针2. 文件的打开和关闭3. 文件打开方式 Ⅴ 文件的顺序读写1. fputc 写入一个字符2. fgetc 读取一个字符3. fputs 覆盖并写入一行数据4. fgets 读取指定长度的数据…
阅读更多...
CTR特征建模：ContextNet MaskNet(Twitter在用的排序模型)

CTR特征建模：ContextNet MaskNet(Twitter在用的排序模型)

在之前的文章中 FiBiNet&FiBiNet模型&#xff0c;阐述了微博在CTR特征(Embedding)重要性建模方面的一些实践方向&#xff0c;今天再来学习下这个方面的两个相关研究&#xff1a;致力于特征和特征交互精炼(refine)的ContextNet和MaskNet&#xff0c;其中MaskNet也是Twitter(…
阅读更多...
STM32 PA15/JTDI 用作普通IO，烧录口不能使用问题解决

STM32 PA15/JTDI 用作普通IO，烧录口不能使用问题解决

我们一般用SW调试接口 所以DEBUG选择Serial Wire 这样PA15可以用作普通IO使用。 工程中默认加上&#xff1a; PA13(JTMS/SWDIO).ModeSerial_Wire PA13(JTMS/SWDIO).SignalDEBUG_JTMS-SWDIO PA14(JTCK/SWCLK).ModeSerial_Wire PA14(JTCK/SWCLK).SignalDEBUG_JTCK-SWCLK
阅读更多...
Apple 推出全球开发者资源 —— 人人能编程

Apple 推出全球开发者资源 —— 人人能编程

近日&#xff0c;Apple 宣布推出 Meet with Apple Experts 开发者资源&#xff0c;帮助全球 Apple 开发者社区发现并参与课程、研讨会、实验室、一对一咨询等体验。 Meet with Apple Experts 初期提供超过 50 个课程、研讨会和咨询项目&#xff0c;并将持续提供线上和线下活动&…
阅读更多...
深入理解强化学习——强化学习的例子

深入理解强化学习——强化学习的例子

分类目录&#xff1a;《深入理解强化学习》总目录 为什么我们关注强化学习&#xff0c;其中非常重要的一个原因就是强化学习得到的模型可以有超人类的表现。 有监督学习获取的监督数据&#xff0c;其实是人来标注的&#xff0c;比如ImageNet的图片的标签都是人类标注的。因此我…
阅读更多...
JavaScript入门——（6）对象

JavaScript入门——（6）对象

1、什么是对象 对象&#xff08;object&#xff09;&#xff1a;JavaScript里的一种数据类型 可以理解为是一种无序的数据集合&#xff0c;注意数组是有序的数据集合 用来详细的描述某个事物&#xff0c;例如描述一个人 人有姓名、年龄、性别等信息、还有 吃饭睡觉打代码等…
阅读更多...
Tomcat项目启动报错

Tomcat项目启动报错

java.io.IOException: java.lang.ClassCastException: Cannot cast org.springframework.web.SpringServletContainerInitializer to javax.servlet.ServletContainerInitializer解决办法&#xff1a;可能Tomcat版本不对&#xff0c;使用7.0.90版本启动报错&#xff0c;使用8.0…
阅读更多...
关于hive的时间戳

关于hive的时间戳

unix_timestamp&#xff08;&#xff09;和 from_unixtime&#xff08;&#xff09;的2个都是格林威治时间 北京时间 格林威治时间8 from_unixtme 是可以进行自动时区转换的 (4.0新特性) 4.0之前可以通过from_utc_timestamp进行查询 如果时间戳为小数&#xff0c;是秒&#…
阅读更多...
IODAY2

IODAY2

阅读更多...
Python接口自动化搭建过程，含request请求封装！

Python接口自动化搭建过程，含request请求封装！

开篇碎碎念 接口测试自动化好处 显而易见的好处就是解放双手&#x1f600;。 可以在短时间内自动执行大量的测试用例通过参数化和数据驱动的方式进行测试数据的变化&#xff0c;提高测试覆盖范围快速反馈测试执行结果和报告支持持续集成和持续交付的流程 使用Requestspytes…
阅读更多...
移动 联通 电信 运营商大数据是如何采集访客信息的？什么是截流？

移动 联通 电信 运营商大数据是如何采集访客信息的？什么是截流？

今天我们来谈手机采集获取流量&#xff0c;离开了持续不断的客户流量进来&#xff0c;再历害的转化手法也白搭。网络项目做生意&#xff0c;PC时代流量加转化&#xff0c;互联时代也一样不变。手机采集引流要么上量不精准&#xff0c;要么就是精准不上量的&#xff0c;我们不必…
阅读更多...
AlmaLinux （兼容centos）安装Geant4与ROOT

AlmaLinux （兼容centos）安装Geant4与ROOT

AlmaLinux 介绍 AlmaLinux OS 是一个开源、社区驱动的 Linux 操作系统&#xff0c;它填补了因 CentOS 稳定版本停止维护而留下的空白&#xff0c;同时更加强大。 安装 AlmaLinux 这个我用的是 windows 子系统进行安装 首先打开微软商店&#xff0c;然后搜索AlmaLinux&#…
阅读更多...
利用MobaXterm连接服务器的全程配置

利用MobaXterm连接服务器的全程配置

一、服务器上的操作 1.1 保证openssh的安装 openssh安装命令如下 apt-get update apt install openssh-server1.2 保证SSH服务没有在相应端口上侦听连接 1确保本地 SSH 服务正在运行 可以尝试使用以下命令检查 SSH 服务的状态&#xff08;在大多数 Linux 系统上&#xff0…
阅读更多...
信息系统项目管理师第四版学习笔记——项目立项管理

信息系统项目管理师第四版学习笔记——项目立项管理

项目建议与立项申请 立项申请又称为项目建议书&#xff0c;是项目建设单位向上级主管部门提交项目申请时所必须的文件&#xff0c;项目建议书是项目发展周期的初始阶段&#xff0c;是国家或上级主管部门选择项目的依据&#xff0c;也是可行性研究的依据。 项目建议书应该包括…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023