ES6的学习之旅

目录

一、介绍

1、ES6新特性

2、bable

3、参考文献

二、let声明变量(ES6)与var、const声明变量的区别

1、JS的var:

2、ES6的let:

3、const:

4、使用建议:

三、let作用

1、作用1:for循环是个经典的例子

2、作用2:let不会污染(影响)全局变量

四、ES6模板(拼接)字符串

1、js拼接字符串:

2、es6模板(拼接)字符串:

五、ES6的函数(js函数的增强)

1、函数的参数赋值

2、函数的参数的表达式赋值

3、函数的剩余参数

①js的写法:arguments[i]来循环参数

②剩余参数:由三个点...和一个紧跟着的具名参数指定,比如...keys来表示剩余参数,使用时用keys。

③arguments与剩余参数的区别

4、扩展运算符...

①扩展运算符和剩余运算符的区别

②案例处理数组中的最大值:

5、es6箭头函数

6、es6箭头函数没有this指向

7、使用箭头函数的注意事项

六、ES6解构赋值为{  变量  }或[  变量  ]

①解析赋值可以完全解构

②不完全解构赋值,解构赋值可采用剩余运算符:

③解析赋值可以有默认值,可以嵌套解析赋值

七、对象扩展功能

1、es6直接写入变量和函数,作为对象的属性和方法:

2、对象的组合属性和方法赋值,对象.[  表达式  ]=。。。。。。,用于随机变动的对象属性和方法

3、ES6对象的方法,is()和Object.assign()

八、ES6数据类型之Symbol,Set,Map

1、Symbol数据类型

2、Set集合数据类型

3、Map数据类型

九、ES6数组的扩展功能

1、from()将伪数组转换成真正的数组

①案例1:将arguments伪数组转换成真正的数组

②案例:用扩展运算符将伪数组转换成真正的数组(来代替from())

2、of(),将任意的数据类型转换成数组

3、copewithin(),复制到其他位置

4、find(),findIndex(),表示找出第一个符合条件的数组成员和索引

5、entries(),keys(),values()可以使用for...of进行循环遍历

6、include(),表示数组是否包含给定的值

十、迭代器Interator和生成器Generator

1、迭代器Interator的用法,迭代=遍历

2、生成器Generator的用法

①生成器Generator的用法

②next()调用,恢复当前yield()的执行传入的实参为:

3、Generator的应用场景:

①为不具备Interator接口的对象提供了遍历操作

②为异步编程提供了方案:部署ajax,实现异步代码同步化

十一、Promise

1、Promise的基本使用​编辑

2、then()方法:

3、Promise对象的其他方法:

①resolve()能将任何对象转换成promise对象,reject()类似

②all()异步并行操作

③race(),异步请求超时

十二、async使得异步操作更加方便

1、async基本操作

2、async应用案例:

十三、class类的用法

1、js造类

2、es6造类

3、类的继承extends

十四、ES6的模块化实现


一、介绍

1、ES6新特性

2、bable

3、参考文献

二、let声明变量(ES6)与var、const声明变量的区别

02 let和const命令_哔哩哔哩_bilibili

1、JS的var:

有变量提升,可以重复声明(赋值),没有块级作用域可以全局使用。

2、ES6的let:

没有变量提升,不能重复声明(赋值),是一个块级作用域(不能在块级外面进行使用该let变量)。提高了使用便利,以及更严谨了。

3、const:

①没有变量提升,不能重复声明(赋值),是一个块级作用域(不能在块级外面进行使用该let变量)。

②const声明的是常量,一旦被声明无法改变。

③const可以声明对象,不可以直接修改对象,可以修改对象中的属性中的值。

细节区分:

const与var相同:都是声明变量,但是const声明的变量为常量。

const与let相同:没有变量提升,不能重复声明(赋值),是一个块级作用域(不能在块级外面进行使用该const变量)。

const与let不同:

const声明的是常量,一旦被声明无法改变。

const可以声明对象,不可以直接修改对象,可以修改对象中的属性中的值。

4、使用建议:

默认情况下用const,而只有你知道变量值需要修改的情况下一定用let。

三、let作用

1、作用1:for循环是个经典的例子

//此结果应该为5;若把const、let用var声明,则会变量提升,最后var i=i++=10,最后输出结果为10,就不对了。

2、作用2:let不会污染(影响)全局变量

即若用let声明一个与window本来的东西,不会影响window本来的东西。

四、ES6模板(拼接)字符串

1、js拼接字符串:

2、es6模板(拼接)字符串:

用tab键上面的反引号``框所需拼接的内容,若该内容中有变量需要用${变量}来插入变量

五、ES6的函数(js函数的增强)

1、函数的参数赋值

2、函数的参数的表达式赋值

3、函数的剩余参数

①js的写法:arguments[i]来循环参数

剩余参数:由三个点...和一个紧跟着的具名参数指定,比如...keys来表示剩余参数,使用时用keys。

③arguments与剩余参数的区别

剩余参数解决的最大的问题就是arguments的问题。

输出结果:

4、扩展运算符...

①扩展运算符和剩余运算符的区别

②案例处理数组中的最大值:

5、es6箭头函数

闭包函数:

6、es6箭头函数没有this指向

js函数中有this绑定,一般会出现this找不好的情况,es6解决了这个问题。

注意:函数不可以为箭头函数,否则向上查找作用域链只能找到this为window,不可以。

注意:一旦使用箭头函数,当前就不存在作用域链,只能往上面的作用域链找this。

7、使用箭头函数的注意事项

注意:箭头函数不是一个对象,它就是一个语法糖,不能使用new关键字来实例化对象。

注意:function函数是一个对象,可以使用new关键字来实例化对象。

六、ES6解构赋值为{  变量  }或[  变量  ]

解构赋值是赋值运算符的一种扩展。它针对数组和对象来进行操作。代码书写上简洁易读。

①解析赋值可以完全解构

②不完全解构赋值,解构赋值可采用剩余运算符:

③解析赋值可以有默认值,可以嵌套解析赋值

七、对象扩展功能

1、es6直接写入变量和函数,作为对象的属性和方法:

2、对象的组合属性和方法赋值,对象.[  表达式  ]=。。。。。。,用于随机变动的对象属性和方法

上下两个效果一样

3、ES6对象的方法,is()和Object.assign()

//is()  判断两个值严格相等

//Object.assign()   对象的合并

八、ES6数据类型之Symbol,Set,Map

1、Symbol数据类型

了解:

2、Set集合数据类型

用扩展运算符...把set转换成数组:

3、Map数据类型

九、ES6数组的扩展功能

1、from()将伪数组转换成真正的数组

①案例1:将arguments伪数组转换成真正的数组

②案例:用扩展运算符将伪数组转换成真正的数组(来代替from())

from()可以接收第二个参数,用来对每个元素进行处理:

2、of(),将任意的数据类型转换成数组

3、copewithin(),复制到其他位置

4、find(),findIndex(),表示找出第一个符合条件的数组成员和索引

5、entries(),keys(),values()可以使用for...of进行循环遍历

6、include(),表示数组是否包含给定的值

十、迭代器Interator和生成器Generator

1、迭代器Interator的用法,迭代=遍历

2、生成器Generator的用法

①生成器Generator的用法

②next()调用,恢复当前yield()的执行传入的实参为:

3、Generator的应用场景:

①为不具备Interator接口的对象提供了遍历操作
②为异步编程提供了方案:部署ajax,实现异步代码同步化

异步编程:数据请求ajax

案例:从加载页面、数据加载完成、到页面加载完毕的过程如下:

其中生成器、迭代器的作用:为防止数据还没加载完成,就loading关闭了。

注意:自己理解:第二次才完成yield传入的值

十一、Promise

Promise:异步编程的解决方案。

1、Promise的基本使用

2、then()方法:

3、Promise对象的其他方法:

①resolve()能将任何对象转换成promise对象,reject()类似

②all()异步并行操作

③race(),异步请求超时

十二、async使得异步操作更加方便

1、async基本操作

操作失败:

2、async应用案例:

十三、class类的用法

1、js造类

2、es6造类

3、类的继承extends

十四、ES6的模块化实现

插件:有这个才能执行模块化代码。

模块化的基本使用:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值