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

相关推荐
GocNeverGiveUp29 分钟前
vue3学习3-route
前端·javascript·学习
NoneCoder2 小时前
JavaScript系列(87)--Webpack 高级配置详解
前端·javascript·webpack
fengfeng N4 小时前
AxiosError: Network Error
前端·https·axios·跨域换源
StarPlatinum24 小时前
CSS实现一张简易的贺卡
前端·css
Stestack4 小时前
Python 给 Excel 写入数据的四种方法
前端·python·excel
SRC_BLUE_174 小时前
[Web 安全] PHP 反序列化漏洞 —— PHP 序列化 & 反序列化
前端·安全·web安全·php
念九_ysl5 小时前
前端排序算法完全指南:从理论到实践
开发语言·javascript·算法·ecmascript
IT猿手5 小时前
智能优化算法:雪橇犬优化算法(Sled Dog Optimizer,SDO)求解23个经典函数测试集,MATLAB
开发语言·前端·人工智能·算法·机器学习·matlab
windyrain5 小时前
基于 Ant Design Pro 实现表格分页与筛选参数的持久化
前端·javascript·react.js
懒人村杂货铺6 小时前
父子组件事件冒泡和捕获的顺序
前端·javascript·react.js