ES6学习

原创已于 2022-10-08 20:12:29 修改 · 344 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#es6 #学习 #前端

于 2022-08-19 23:06:56 首次发布

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

1.使用let声明变量

let 之间互不影响，使用 for 循环for(let i=0;i<arr.length;i++){}会生成多个 let 给多个作用域使用，互不影响。
在这里插入图片描述

2.const声明变量

在这里插入图片描述

3.解构赋值

在这里插入图片描述

4.模板字符串

在这里插入图片描述

5.对象

在这里插入图片描述

6.箭头函数

在这里插入图片描述

使用箭头函数简化代码

7.允许给函数参数赋初始值

在这里插入图片描述

8.引入rest获取实参

ES5使用arguments获取实参，是一个对象，而ES6的rest获取实参是一个数组，可以使用数组的方法。
在这里插入图片描述

9.扩展运算符

在这里插入图片描述
应用

10.Symbol

在这里插入图片描述

10.1.对象中添加Symbol

在这里插入图片描述

10.2.内置Symbol值

博客
在这里插入图片描述

11.向对象中添加方法

在这里插入图片描述

12.迭代器 yield

在这里插入图片描述

在这里插入图片描述
应用：使用Symbol按照需求遍历对象。

13.生成器gen，异步编程

生成器是一个函数，必须使用 next() 来调用。yield 将函数代码分块，每次调用 next() 执行一块。
在这里插入图片描述
next()的返回结果是一个对象，里面的value是yield后表达式的值，done 表示是否遍历完成。

遍历gen，可以得到每个yield后表达式的值。

13.1.生成器传参数

next()传入的参数将作为上一个 yield 的返回值。
在这里插入图片描述

13.2.异步编程

回调地狱
在这里插入图片描述
使用生成器进行异步编程。
实例1

实例2

14.promise

p执行的结果将存在data或err中。
在p里面调用resolve表示成功，then那里将调用第一个回调，reject表示失败，会调用第二个回调。
在这里插入图片描述
实例：读取文件

14.1封装Ajax

在这里插入图片描述

14.2箭头函数写法

在这里插入图片描述

14.3链式调用

promise的then返回的还是一个promise。
在这里插入图片描述

在这里插入图片描述
then的回调可以只写一个成功的

14.4catch指定失败回调

在这里插入图片描述

15.set

在这里插入图片描述
集合会自动去除重复元素

15.1使用集合对数组进行去重、交、并、差

在这里插入图片描述

16.map

map是对象的升级版，键可以是各种类型。
在这里插入图片描述

17.class类

在这里插入图片描述
constructor是构造函数，写法是固定的。

17.1.静态属性

普通函数对象，下面代码中的name属性和change函数都属于Phone构造函数对象，而不属于新创建的 nokia 。
在这里插入图片描述
以下代码中的size属性添加到了Phone的原型对象上，nokia通过原型链能得到size。

class类对象，有static修饰的是静态属性，属于类（Phone）而不属于实例对象（nokia）。
在这里插入图片描述

17.2.类的继承

使用ES5实现的继承演示
在这里插入图片描述

ES6类的继承
父类

子类，使用super引入父类的属性，当子类调用call函数时，将沿着原型链 子类 -> 父类 -> Object 的顺序往上找，知道找到或走到尽头，此处在父类找到了call函数。
super只能在constructor中调用。
在这里插入图片描述

17.3.子类重写父类的方法

在子类写一个和父类方法重名的方法，将覆盖从父类继承而来的这个方法。

18.get和set

在这里插入图片描述

19.数值扩展

在这里插入图片描述

20.对象扩展

在这里插入图片描述
NaN和任何数比较，除了不等于，其他结果都是false，两个NaN比较也一样。

Object.assign合并对象，如果有同名属性，后者将覆盖前者。

21.模块化

在这里插入图片描述

在一个单独文件引入模块

再在页面使用script标签引入这个文件，type要设置为module。

22.ES7的新特性

在这里插入图片描述

在这里插入图片描述

23.ES8的新特性

23.1.async函数

23.2.await函数

await返回p成功的值，此处是用户数据，如果p失败，则需要try-catch来捕获。
在这里插入图片描述

23.3.两者结合案例

在这里插入图片描述

23.4.封装Ajax请求

在这里插入图片描述

23.5.Object.values 和 Object.entries

在这里插入图片描述
第一个获得键，第二个获得值，第三个获得键和值。

利用Map构造函数，使用Object.entries传入键值对，可以方便地填充到map里面
在这里插入图片描述

23.6.Object.getOwnPropertyDescriptors

在这里插入图片描述

对象里面有对象的详细信息，可以进行深层次的克隆。

24.ES9的新特性

24.1.对象扩展

在这里插入图片描述

24.2.正则表达式

24.2.1.命名捕获组

捕获组没有命名的写法：
在这里插入图片描述
捕获组命名的写法：
前后为/，中间穿插?<name>这样的内容来捕获

24.2.2.断言

在这里插入图片描述

24.2.3.dotAll

正则表达式的其他匹配模式。
在这里插入图片描述

在这里插入图片描述

25.ES10的新特性

25.1.Object.fromEntries

用于创建一个新对象
在这里插入图片描述

25.2.Object.entries

将对象转化为二维数组。每个数组里面第一个元素是键，第二个是值。
在这里插入图片描述

25.3.清除字符串左右空白

trimStart 和 trimEnd
在这里插入图片描述

25.4.Array.prototype.flat 与 flatMap

flat将高维数组展开为低维数组，参数默认为1，即展开一层。
在这里插入图片描述
参数为2，展开两层。

flatMap相当于 map 和 flat 的结合，先进行map，再flat 降低数组维度（如果map返回值是一个多维数组）。

25.5.Symbol.prototype.description

获得Symbol的描述字符串。
在这里插入图片描述

26.ES11的新特性

26.1.类的私有属性

声明方法，在属性名前加#。
只能由对象内部的方法使用，外部不能引用。
在这里插入图片描述

26.2.Promise.allSettled和Promise.all

Promise.allSettled(promises)可以并行地运行 promise，并将状态（fulfilled 或reject）收集到一个聚合数组中。
在这里插入图片描述

在这里插入图片描述
Promise.all

26.3.String.prototype.matchAll

展开为一个二维数组，
在这里插入图片描述

26.4.可选链操作符

在这里插入图片描述

26.5.动态import

在这里插入图片描述

26.6.大整型

用于大数值的运算。
在这里插入图片描述

26.7.globalThis 对象

指向全局对象。
在语言标准的层面，引入globalThis作为顶层对象。也就是说，任何环境下，globalThis都是存在的，都可以从它拿到顶层对象，指向全局环境下的this。

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。