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命令

  • 一旦声明,不可改变!必须立刻初始化!!!
  • Constlet作用域相同,变(常)量都不提升,不可重复声明

对象解构赋值

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

  • 对象的解构赋值用于++频繁使用对象的成员++,相当于同时设置了许多变量 ,每个变量都承载着对象成员的值,使用时就不用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只支持一个函数或类!
相关推荐
sinat_3842410914 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
小牛itbull37 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
GIS瞧葩菜1 小时前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520312 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
前端拾光者2 小时前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
木子02043 小时前
前端VUE项目启动方式
前端·javascript·vue.js
endingCode3 小时前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript