JavaScript(ES6进阶部分)

JavaScript(ES6进阶部分)

简介

• ES6泛指从2015年之后的所有ES版本，含义就是5.1版本以后JS的下一代标准
• ++ES是JS的规格，JS是ES的实现++
• 标准委员会(TC39委员会)
  • 批准修改语法，使其从提案变成正式标准
    %% ES6带来了许多新特性，之后要学的的命令、扩展、对象、继承都是新特性，学完这些新特性咱就开始搞Vue架构了，加油！

Nodejs环境

我们写ES6是为了使其运行在浏览器上，但是ES6有一些新特性需要我们转码，把ES6代码转化成ES5代码再运行到浏览器当中

++因为现在有些浏览器对ES6支持性不是特别好++代码转化我们就需要安装Nodejs环境

• Nodejs主攻服务器方向可以用JS完成服务器代码的编写
  %% 原本JS只能写写前端，后端服务器部分需要另外的语言写，Nodejs是基于 Chrome V8 引擎的 Javascript 运行环境， Node.js 出现之后，JS 前后通吃了
• Nodejs会附带一个npm命令，npm是Node的包管理工具::它的简单结构有助于Nodejs生态系统的激增，现在npm有超过一千万个自由使用的开源库包，用处特别广泛！++Nodejs可以看成一个庞大的代码仓库++
• 但我们直接用npm下载比较慢，因为正版的npm的资源在国外，但我们的网是国内的网，所以建议使用npm镜像++已经下载好了，我们以后用的npm命令下载改成cnpm命令就行了++
• 目前咱不讲node，只需要把cnpm搞出来就好了
• API(Application Programming Interface)是应用程序编程接口，简称接口

Babel转码器：ES6->ES5

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

安装流程

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

对ES6转码

• 转码结果输出到标准流当中::这里的标准流在终端能够看到::在命令行中用npx babel example.js就可以在终端中看到转化后的ES5代码++做不出来，放弃了，反正不常用++
• 我草泥马根本转化不过来卧槽泥马勒戈壁！！！！

命令

Let命令

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

Const命令

• 一旦声明，不可改变！必须立刻初始化！！！
• Const和let作用域相同，变(常)量都不提升，不可重复声明

对象解构赋值

解构赋值是很大的概念，数组、字符串等都有，只不过应用的很少，本次我们主要讲对象的解构赋值

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

扩展(新增功能)

字符串扩展

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

字符串新增方法(提供更加优质的开发体验)

• includes()/startsWith()/endsWith()
  • includes()：返回布尔值，是否包含，包含就返回true
  • startsWith()：返回布尔值，表示是否以参数字符串开头，endsWith()同理
  • 三者都支持参2，表示开始搜索的位置。这三者就是indexOf()方法的详细版本，更有针对性
• repeat()
  • 返回一个重复好多次的新字符串++参数为字符串重复的次数，若为0则返回空字符串++
• padStart()/End()：长度补全功能
  • 参数1是设置的长度，参数2是填充的字符串。padStart()用于补全头部，另一个补全尾部
  • ::如’x’.padStart(4,‘ab’)结果就是’abax’::
• trimStart()/End()：前后去掉空格++返回的都是新字符串，不会修改原始字符串++
• at()：
  • 接受一个整数作为参数，返回参数指定位置的字符，::和STL容器中的作用是一样的::
  • 支持++负索引，从右往左开始++
  • 如果参数位置超过字符串，则返回undefined
    JS中的字符串方法是不会改变原来字符串的！

数组扩展之扩展运算符(…/spread)

• …+数组
  • 将一个数组分割成参数序列，本质是由逗号隔开，打印时由空格隔开
  • ++比如(…[1,2,3])会打印出1 2 3++
• 替代函数的apply()方法
  • 比如我们要找到数组的最大值，一用算法，二用Math.max.apply(null,arr)++这里的apply就是把Math.max这个方法借用到数组中去++
  • Math.max用法是Math.max(10,20,30);后者恰好是扩展运算符分割后的数组
• 合并数组
  • 之前的方法是arr1.concat(arr2)
  • 现在直接用[...arr1,...arr2]，也可以用前面的，::后面应该会有消耗的区别::

数组扩展之新增方法

Array.from()：将类数组转为真正的数组

类数组/伪数组：arguments、元素集合、类似数组的对象，只能使用数组的++读取方式[0/1…]和length属性，不能使用数组方法++

• arguments
  • 调用函数时我们可以在原函数没有参数的时候主动传递参数，原函数可以使用arguments读取额外传递过来的参数，形式如10,20,30
• 元素集合：NodeList之前仔细讲过
• 类似数组的对象：
  • 键的形式是::‘0’,‘1’,‘2’…::和数组的下标很像，可以像数组一样user['0']去读取
  • ++因为有引号，所以没法user.‘0’，只能像数组一样读++
• Array.from(类数组名)直接变成数组，很简单::也不改变原来伪数组的形式::

Array.of()：将一组值转为数组

• 参数就是10,str,30任意搭配，可以新建变量承接数组

Array()：数组的构造函数

• 后面直接跟参数1，表示开辟长度为参数1的空的数组空间

对象扩展

属性简洁表示法

• 键值对：
  • 如果值是已声明的变量，并且键值名相同，:和后面的值就可以省略
  • 比如name:name,...可以省略为name,
• 函数：
  • 不用写get:function(){}这么麻烦了，直接写成独立的函数，函数的键可以省略::但是记得取个名字::
  • 比如get(){}

属性名表达式

• 允许定义对象时，用**[ 表达式 ]**作为对象的属性名
• 比如[property]:rich

扩展运算符(…)

• 拆解对象，就是去掉对象和{ }，注意这时不能进行控制台打印会报错

函数扩展：箭头函数

• 用法：
  • var fn = (参数) => 返回值++函数代码只有一条返回时++注意，如果**返回值是对象，则应在对象的外面加一层（）**否则会报错
  • var fn = (参数) =>{全部函数体}++函数体代码比较多的时候使用++
• 最常用的情况是回调函数(匿名函数)，就是一个函数没有名字
• 指向：
  • 前提：++函数在对象里++
  • 箭头函数没有this，如果在箭头函数中用到this那就纯纯指向上一层的变量::指向能力比较菜，但是方法完全不影响它的指向::
  • 普通函数this是指向对象，但是它**一旦遇到像setTimeout()这种指向windows**的方法，它的指向也会改变，指向之外的windows中的变量(是跨过对象指引的)::容易受方法指向的操控::
  • 所以如果我们想在setTimeout()中用到对象中的成员，就必须用箭头函数或者*函数之前var that = this;的方法

Set数据结构

属性

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

方法

• add()：添加成员
• delete()：删除成员
• has()：返回布尔值，判断参数的内容是否在集合中
• clear()：清除所有的成员，没有返回值，没有参数

Promise对象（异步/网络请求）

基本概念

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

基本用法

Async（异步）函数

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

++这个函数的作用就是：让异步操作不要脱离大队，所有操作都要等待异步操作完成之后再继续进行，保证了执行顺序就是实际效果的顺序++用法：
async function asyncPrint(time,value){ await timeout(time);
console.log(value); }

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

Class类

基本语法

• 和传统语言的类很像！是class Person{ }而且内部函数之间不用写,
• constructor(){}是类的默认构造函数，一个类必须要有constructor++如果没有显示定义，则填补默认构造函数+
• 类的实例生成一定要通过new方法
• 不存在类的提升！！！必须先定义后使用！！！

属性与方法：分为实例(局部)和静态

• 实例方法：通过new出来的实例对象调用的方法
• 实例属性：类的实例对象可调用的属性
• 静态
  • 和之前的一样，前面加static。唯一不同的一点是，我们之前调用静态函数都是::，这里直接用类名.静态方法的形式
  • 如果静态方法出现this，那么它指向的就是整个类

继承

• extends替换原来的:public
• 构造函数有变动
  • ++因为我们之前学的构造函数是有独特的名字，所以系统支持一些东西，但ES6有些不支持++
  • 还是写成constructor(){}，参数(包括父类)都要写上，并且在构造函数中加**super(父类构造函数的参数);**表明父类的初始化变量才行

Module（模块）

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

• 通过export::导出::和import::导入::命令完成模块
  • export var year = 2022;/export function(){}在一个文件中导出
  • export定义了模块的对外接口后，其他的JS文件就可以通过import命令加载这个模块
  • import{year,...}from 文件名：导入别的文件
    • 如果想在别的文件中修改变量的名字，可以在{ }中用MySQL的方式value as val使用as关键字
    • 也可以用星号全部调用，但只能以对象的形式import * as 对象名 from 文件名，调用成员时和对象一样使用就好
• export default:
  • 使用前两个命令的时候，我们必须清除变量或者函数的名字，但是，用户懒得记而且用的少，我们可以使用export default命令
  • 该命令用于函数和类，我们不用在乎我们导出的这俩叫什么名字，在import中可以任意起一个名字接着用
  • 注意，export default只支持一个函数或类！