【ECMAScript6】

【ECMAScript6】

  • [01. ES6介绍](#01. ES6介绍)
  • [02. let和const命令](#02. let和const命令)
  • [03. 模板字符串](#03. 模板字符串)
  • [04. 函数之默认值、剩余参数](#04. 函数之默认值、剩余参数)
  • [05. 函数之扩展运算符、箭头函数](#05. 函数之扩展运算符、箭头函数)
  • [06. 箭头函数this指向和注意事项](#06. 箭头函数this指向和注意事项)
  • [07. 解构赋值](#07. 解构赋值)
  • [08. 扩展的对象的功能(简写)](#08. 扩展的对象的功能(简写))
  • [09. Symbol类型](#09. Symbol类型)
  • [10. Set集合数据类型](#10. Set集合数据类型)
  • [11. Map数据类型](#11. Map数据类型)
  • [12. 数组的扩展方法一](#12. 数组的扩展方法一)
  • [13. 数组的扩展方法二](#13. 数组的扩展方法二)
  • [14. 迭代器Interator的用法](#14. 迭代器Interator的用法)
  • [15. 生成器Generator的用法](#15. 生成器Generator的用法)
  • [16. Generator的应用](#16. Generator的应用)
  • [17. Promise的基本使用](#17. Promise的基本使用)
  • [18. 使用Promise封装ajax](#18. 使用Promise封装ajax)
  • [19. Promise对象的其他方法](#19. Promise对象的其他方法)
  • [20. async的用法](#20. async的用法)
  • [21. class类的用法](#21. class类的用法)
  • [22. 类的继承](#22. 类的继承)
  • [23. ES6的模块化实现](#23. ES6的模块化实现)

01. ES6介绍

ES6新特性

ES5内部提供的变量提升、内置对象的一些方法、数组、对象不是那么灵活,模块化实现没有那么完善
ps:变量提升 (Variable Hoisting)是 JavaScript 中的一种行为,指的是在代码执行之前,JavaScript 引擎会将变量和函数的声明提升到其所在作用域的顶部 ,意味着可以在声明变量或函数之前使用它们,而不会导致错误
ES5 中造一个 使用的是构造函数

ES6 中用class(类似Java)
在前端中还有一门后端语言Node. js。

Node.js中就使用大量的一些ES6的语法



针对于10%的ES6的新特性对各大浏览器不支持,甚至90%里面可能针对于某些浏览器也是不支持的。那么我们需要前端的某些工具来对它进行一个转移。


02. let和const命令


03. 模板字符串

04. 函数之默认值、剩余参数

一、带参数默认值的函数

二、默认的表达式也可以是一个函数
三、不具名参数的一个函数

ES6的写法:

05. 函数之扩展运算符、箭头函数

一、扩展运算符

二、箭头函数

实现闭包:

06. 箭头函数this指向和注意事项

一、this指向




二、注意事项

07. 解构赋值

解构赋值 的做法是:

还可以使用剩余运算符

还可以使用默认值

接下来,我们来对数组 解构:

还可以嵌套使用 (不过要结构对应):

08. 扩展的对象的功能(简写)

简写:

用之于取值器和设置器

属性表达式:

09. Symbol类型

10. Set集合数据类型

集合:

方法:

遍历集合没有什么意义:

将集合转换为数组:

11. Map数据类型


其他用法与set类似

12. 数组的扩展方法一

一、from()



二、of()

三、within()

四、find()、findIndex()

13. 数组的扩展方法二

五、遍历器的一些方法

六、includes()

14. 迭代器Interator的用法



15. 生成器Generator的用法

具体实现:

(不使用next的时候,函数的不会走的,它只是生成了一个生成器函数)

传参:

应用:

实操:

16. Generator的应用

为异步编程提供便利,进行部署ajax操作,让异步代码同步化。

所以,我们使用Generator去解决异步编程回调地狱问题。

这个过程实现了异步代码同步化:

走next,先执行request请求,alert显示;

再走请求函数里的next,走打印部分。

实现了主函数的同步化,即按顺序执行,

而不会先执行同步代码,然后执行异步代码。

再举一个例子:

但是执行结果却是如下:

更改如下:

17. Promise的基本使用

在ES6中,对于异步编程提供了三种方法:

①Generator生成器

②Promise

③Async/Await组合

异步编程传统的解决方案基本上都是使用回调函数和事件,所以显得当前的Promise更加地合理和强大。



我们先来打印一下Promise:

then里面接收回调函数:

18. 使用Promise封装ajax

本节目标是自己通过Promise对象来封装自己的一个API库

相当于

19. Promise对象的其他方法




20. async的用法

一、用法:

二、错误:

三、应用:

21. class类的用法



22. 类的继承

23. ES6的模块化实现

一直以来,js都是没有模块系统的,无法将一个大程序拆分成我们互相依赖的一些小小的文件以进行相互依赖的。

导出:

引入

(插件Live Server)和鼠标右键点击Open with Live Server,要用服务器运行起来,会传入一个ip地址(端口号),要不然静态文件访问是访问不到的。

多个导出引入:

导出:

引入:

导出的多种写法:

(注意script要改一下)

相关推荐
麦麦鸡腿堡5 分钟前
JavaWeb_请求参数,设置响应数据,分层解耦
java·开发语言·前端
Dxy12393102161 小时前
CSS常用样式详解:从基础到进阶的全面指南
前端·css
IT_陈寒1 小时前
SpringBoot自动配置揭秘:5个让开发效率翻倍的隐藏技巧
前端·人工智能·后端
Moment1 小时前
前端工程化 + AI 赋能,从需求到运维一条龙怎么搭 ❓❓❓
前端·javascript·面试
Joker Zxc1 小时前
【前端基础(Javascript部分)】6、用JavaScript的递归函数和for循环,计算斐波那契数列的第 n 项值
开发语言·前端·javascript
Highcharts.js2 小时前
React 图表如何实现下钻(Drilldown)效果
开发语言·前端·javascript·react.js·前端框架·数据可视化·highcharts
橙露2 小时前
Webpack/Vite 打包优化:打包体积减半、速度翻倍
前端·webpack·node.js
chushiyunen2 小时前
python中的魔术方法(双下划线)
前端·javascript·python
楠木6852 小时前
从零实现一个 Vite 自动路由插件
前端
终端鹿2 小时前
Vue2 迁移 Vue3 避坑指南
前端·javascript·vue.js