JavaScript（ES6进阶部分）

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

a.ES6泛指从2015年之后的所有ES版本，含义就是5.1版本以后JS的下一代标准
b.++ES是JS的规格，JS是ES的实现++
c.标准委员（TC39委员会）
	·批准修改语法，使其从提案变成正式标准ES6带来了许多新特性，之后要学的命令、扩展、对象、继承都是新特性，学完这些新特性我们就开始搞Vue框架。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Nodejs环境

我们写ES6是为了使其运行在浏览器上，但是ES6有一些新特性需要我们转码，把ES6代码转化成ES5代码再运行到浏览器当中。
++因为现在有些浏览器对ES6支持特性不是特别好++代码转化我们就选哟安装Nodejs环境。
1、Nodejs主攻服务器方向可以用js完成服务器代码的编写，原本JS只能写写前端，后端服务器部分需要另外的语言些，Nodejs是基于ChromeV8引擎的Javascript运行环境，Node.js出现之后，JS前后通吃了；
2、nodejs会附带一个npm命令，npm是Node的包管理工具，它的简单结构有助于Nodejs生态系统的激增，现在npm有超过一千万个自由使用的开源库包，用处特别广泛！Nodejs可以看成一个庞大的代码仓库；
3、但我们直接用npm下周比较慢，因为正版的npm的资源在国外，但我们以后用的npm命令下周改成cnpm命令就行了。
4、目前不讲node，只需要把cnpm搞出来就好了。
5、API（Application Progtamming Interface）是应用编程接口，简称接口。

二、Babel转码器：ES6->ES5

Bable是一个JavaScript编译器。主要用于将高版本的JavaScript代码转为向后兼容的JS代码，从而能让我们的代码运行在更低版本的浏览器或者其他的环境中。

安装流程
1、安装：注意要安装在项目的根目录之下，在vscode中选中文件，右键在集成终端中打开弹出的对话框就是我们的cmd终端，命令 cnpm install --save-dev @babek/core安装Babel
2、配置文件：在node_modules之下新建文件.babelrc，再加一些规则。
3、安装转码规则babel本身是不具有转码功能的，我们目前学的比较笼统。
4、再在.babelrc中添加规则
5、再tm安装命令工具

对ES6转码
1、转码结果输出到标准流程当中，这里的标准流再终端能够看到，在命令行张用npx babel example.js就可以在终端中看到转化后的ES5代码

命令

let 命令
1、用法类似预var，但是所声明的变量只在let命令代码块内有效；
a.var：函数级作用域，var所声明的变量在var所在函数内++也就是说，除非是有函数把var包围，变量值属于该函数，其他情况之下var的变量可以任意使用++；
b.let:块级作用域，范围就是块（花括号）。在for循环中很适合使用let，因为不同函数早已超过块级作用域，我们可以在每个for中都let i= 0不用去担心i会不会重复
c.var可以重复声明同一个变量，如果是var a；那么不会对原来产生任何影响，但也不会造成任何错误，如果是var a=300；那么效果就是重新赋值；
2、let不存在变量提升，不允许（在同一个花括号中）重复声明！{let a； var a；}也是错误的，let已经把a占有了，不允许重复声明。

const 命令

1、一旦声明，不可以改变！必须立刻初始化。
2、const和let作用域相同，变（常）量都不提升，不可重复声明

对象解构赋值

解构赋值是很大的概念，数组、字符串等都有，只不过应用的很少，本次我们主要讲对象的解构赋值
1、对象的解构赋值用于++频繁使用对象的成员++。相当于同时设置了许多变量，每个变量都承载着对象成员的值，使用时就不用user.name了，直接name甚至更简单，减小我们重复的代码量；
2、用法：const {name,age} = user;let也行，建议使用const，user的name``age属性没有次序，变量必须与属性同名才能取到正确的值，与变量的顺序没有任何关系；
3、这个在我们了解对象之后简直起飞，平常用到的console.log()其实就是console对象的方法，解构赋值不仅可以传值还可以传递方法，之前学的Date/Math等等都可以用；
a.但是注意，如果我们先前声明了某个变量，并且变量与被解构对象的成员或者方法重名，那么会报错。一定注意声明的变量名。
b.上述情况之下，我们把const/let去掉，在最外面加一个（）就完美解决，如此：{name，age}=user；但是很麻烦也不好看。

扩展（新增功能）

字符串扩展
1、Unicode：统一码，万国码、单一码，是计算机领域的一项业界标准。为每种语言设定了统一并且唯一的二进制编码，以满足跨语言、跨平台的交流，100%兼容；
2、字符串的遍历器接口
a.for…of循环遍历字符串
b.for(let i of str){console.log(i)}直接就能打印每一个字符！
3、模板字符串（template string）使用率高；
a.增强版的字符串，用反引号``标识，既可以当成普通字符串用，也可以在字符串中嵌入变量；
b.变量的嵌入用到${}，剩下不变的字符都当作模板了

字符串新增方法（提供更加优质的开发体验）
1、includes()/startsWith()/endsWith()
a.includes():返回布尔值，是否包含，包含就返回true
b.start是With（）：返回布尔值，表示是否以参数字符串开头，endsWith()同理；
2、repeat（）；
a.返回一个重复好多次的新字符串++参数为字符串重复的次数，若为0则返回空字符串；
b.参数1是设置的长度，参数2是填充的字符串。padStart（）用于补全头部，另外补全尾部；
c.如‘x’.padStart(4,‘ab’)结果就是‘abax’；
3、trimStart（）/End():前后去掉空格++返回的都是新字符串，不会修改原始字符串；
4、at()；
a.接受一个整数作为参数，返回参数指定为hi的字符，和STL容器中的作用是一样的。
b.支持负索引，从右往左开始
c.如果参数位置超过字符串，则返回undefined
数组扩展之扩展运算符（…/spread）
1、…+数组；
a.将一个数组分割成参数序列，本质是由逗号隔开，打印时由空格隔开；
b.比如（…[1,2,3]）会打印出123
2、代替函数的apply()方法；
a.比如我们要找到数组的最大值，一用算法，二用Math.max.apply(null,arr)这里的apply就是把Math.max这个方法借用到数组中去；
b.Math.max用法时Math.max(10,20,30);后者恰好时扩展运算符分割后的数组
3、合并数组
a.之前的方法时arr1concat(arr2);
b.现在直接用[…arr1,…arr2],也可以用前面的，后面应该会有消耗的区别
数组扩展之新增方法
Array.from():将类数组转为真正的数组

类数组/伪数组：arguments、元素集合、类似数组的对象，只能使用数组的读取方式[0/1…]和length属性，不能能使用数组方法；
1、arguments
a.调用函数时我们可以在原函数没有参数的时候主动传递参数，原函数可以使用arguments读取额外传递过来的参数，形式如10，20，30；
2、元素集合：NodeList之前仔细讲过；
3、类似数组的对象：
a.键的形式时‘0’，‘1’，‘2’和数组的下标很像，可以像数组一样user[‘0’]去读取；
b.因为由引号，所以没法user.‘0’，只能像数组一样读
4、Array.from(类数组名)直接变成数组，很简单也不改变原来伪数组的形式；
Array.OF():将一组值转为数组
1、参数就是10，str，30任意搭配，可以新建变量承接数组
Array():数组的构造函数
1、后面直接跟参数1，表示开辟长度为参数1的空的数组空间

对象扩展

属性简洁表示法
1、键值对：
a.如果值是已声明的变量，并且键值名相同，和后面的值就可以省略；
b.比如name：name,…可以省略为name；
2、函数：
a.不用写get:function(){}这么麻烦了，直接写成独立的函数，函数的键可以省略，但是记得取个名字；
b.比如get(){}
属性名表达式
1、允许定义对象时，用**[表达式]作为对象的属性名；
2、比如[property]：rich
扩展运算符(…)
1、拆解对象，就是去掉对象和{}，注意这时不能进行控制台打印会报错。
函数扩展：箭头函数
1、用法：
a.var fn = (参数) =>返回值函数代码只能一条返回时，注意如果返回值时对象，则应在对象的外面加一层() **否则会报错
b.Var fn = (参数) =>{全部函数体}函数体代码比较多的时候使用；
2、最常用的情况时回调函数（匿名函数）,就是一个函数没有函数名字；
3、指向：
a.前提：函数在对象里
b.箭头函数没有this，如果在箭头函数中用到this那就纯纯指向上一层的变量，指向能力比较菜，但是方法完全不影响它的指向；
c.普通函数this时指向对象，但是它一旦遇到像setTimeout（）这种指向windows的方法，它的指向也会改变，指向之外的windows中的变量（是跨国对象指引的）容易受方法指向的操控；
d.所以如果我们想在setTimeout()中用到对象中的成员，就必须使用箭头函数或者匿名函数之前var that = this;的方法；

set数据结构

属性
1、类似于数组，但是成员的值必须是唯一的，不允许重复当然，如果我们给set重复的值，它不会报错，自动去重；
2、创建：
a.set本身就可以用作构造函数，像数组的Array()一样
b.创建集合：搭配new关键字，const s = new set()；创建的形式是唯一的；
3、参数：
a.数组：const s = new Set([1,2,3,4]);也支持[…set]扩展运算符，扩展之后是1，2，3，4再加[]就又成为数组；
b.字符串：new set(‘abcd’)
4、去重（去掉重复的元素）:
a.数组：[…new set(arr)]先把数组的值给集合，再让集合自动去重，此时因set集合不是数组所以要不set扩展再形成数组；
b.字符串：[…new set(‘abbcde’)].join是把数组转换成字符串
5、向set加入值得时候，不会发生类型转换，所以5和‘5’属于两个不同的值；
6、size属性：返回集合中的成员个数

方法
1、add():添加成员;
2、delete():删除成员;
3、has（）:返回布尔值，判断参数的内容是否在集合中；
4、clear():清除所有的成员，没有返回值，没有参数；

Promise对象(异步/网络请求)

基本概念
1、Promise是异步编程的解决方案；
2、从语法上讲，Promise是一个对象，我们可以从中获取异步操作的消息；
3、Promise提供统一的API
4、简单来说Promise就是一个容器，保存着某个未来才会借宿的事件（通常是异步操作）的结果；异步操作，在前端往往变成网络请求。什么是未来结束？就是说这件事比较消耗时间，为了不耽误其余工作，我们让它自己执行，执行好了再告诉我们一声，Promise就是能更好的告诉我们一声；
5、Promise对象我i们就可以将异步操作的流程表达出来，避免了之前传统的层层嵌套的回调函数；
基本用法
Async(异步)函数

async可以将异步操作变成同步操作，比较常见的异步操作就是setTimeout()定时器，遇到定时器不管有没有成都，结果我不管，继续往下执行；

这个函数的作用就是：让异步操作不要脱离大队，所有操作都要等待异步操作完成之后再继续进行，保证了执行顺序就是实际效果的顺序用法：

async function asyncProint(time,value){
	await timeout(time);
	console.log(vaule);
}

1、与普通函数的区别就是最前面加了async，后面加了await；
2、这里的timeout（）是带有定时器的异步操作，我们哟啊子啊异步操作前加await关键字很形象，所有财政必须要等待它；
3、网络请求之间有依赖关系，很多接口可能要以来遇上一个接口的数据才能执行，所以Async具有很大的应用场景；

Class类

基本语法
1、和传统语言的类很像！是class person{}而且内部函数之间不用写,；
2、constructor(){}是类的默认构造函数，一个类必须要有constructor++如果没有显示定义，则填补默认构造函数；
3、类的实例生成一定要通过new方法；
4、不存在类的提升！！！必须先定义后使用；
属性与方法：分为实例（局部）和静态
1、实例方法：通过new出来的实例对象调用的方法；
2、实例属性：类的实例对象可调用的属性；
3、静态：
a.和之前的一样，前面加static。唯一不同的一点是，我们之前调用静态函数都是，这里直接用类名.静态方法的形式；
b.如果静态方法出现this，那么它指向的就是整个类；

继承
1、extends 替换原来的：public；
2、构造函数有变动；
a.因为我i们之前学的构造函数时有独特的名字，所以系统支持一些东西，但es6有些不支持；
b.还是写成constructor(){},参数（包括父类）都要写上，并且在构造函数中加**super(父类构造函数的参数);**表明父类初始化变量才行；

Module（模块）

Module：帮助我们管理js中文件与文件之间的关系JS需要模块体系把一个大程序拆分成相互依赖的小文件，再用简单的方法拼装起来；

1、通过export导出和import导入命令模块；
a.export var year = 2022;/ export function(){}在一个文件中导出；
b.export定义了模块的对外接口后，其他的js文件就可以通过import命令加载这个模块；
c.import {year，…} from 文件名：导入的文件
2、export default：
a.使用前两个命令的时候，我们必须清楚变量或者函数的名字，但是，用户懒得记而且用的少，我们可以使用export default命令；
b.该命令用于函数和类，我们不用在乎我们到处的这俩叫什么名字，在import中可以任意取名字接着用；
c.注意，export default只支持一个函数或者类；