【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要改一下)

相关推荐
斯~内克2 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
数据知道3 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
dr李四维3 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久3 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain3 小时前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏3 小时前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js
GISer_Jing4 小时前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ4 小时前
React(九)React Hooks
前端·react.js
朴拙数科4 小时前
技术长期主义:用本分思维重构JavaScript逆向知识体系(一)Babel、AST、ES6+、ES5、浏览器环境、Node.js环境的关系和处理流程
javascript·重构·es6