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

相关推荐
熊猫钓鱼3 分钟前
基于Trae CN与TrendsHub快速实现的热点百事通
前端·trae
LIUENG10 分钟前
Vue3 响应式原理
前端·vue.js
讨厌吃蛋黄酥13 分钟前
前端居中九种方式血泪史:面试官最爱问的送命题,我一次性整明白!
前端·css
龙在天17 分钟前
🤩 用Babel自动埋点,原来这么简单!
前端
Hierifer17 分钟前
跨端实现之网络库拦截
前端
随笔记19 分钟前
react-router里的两种路由方式有什么不同
前端·react.js
前端李二牛19 分钟前
异步任务并发控制
前端·javascript
imLix41 分钟前
RunLoop 实现原理
前端·ios
wayman_he_何大民1 小时前
初始机器学习算法 - 关联分析
前端·人工智能
飞飞飞仔1 小时前
别再瞎写提示词了!这份Claude Code优化指南让你效率提升10倍
前端·claude