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

相关推荐
光影少年8 小时前
webpack和vite优化方案都有哪些
前端·webpack·node.js
给月亮点灯|8 小时前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js
kk不中嘞8 小时前
Webpack 核心原理剖析
前端·webpack·node.js
Yvonne爱编码8 小时前
简述ajax、node.js、webpack、git
前端·git·ajax·webpack·node.js·visual studio
周小码8 小时前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
哆啦A梦15888 小时前
Element-Plus
前端·vue.js·ts
IT_陈寒9 小时前
🔥3分钟掌握JavaScript性能优化:从V8引擎原理到5个实战提速技巧
前端·人工智能·后端
前端小巷子9 小时前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia9 小时前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.9 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios