网站宽屏图片怎么做,批量查询权重,网站后台上传图片做难吗?,网站建设的常见技术有哪些方面JavaScript(ES6进阶部分)
简介
ES6泛指从2015年之后的所有ES版本#xff0c;含义就是5.1版本以后JS的下一代标准ES是JS的规格#xff0c;JS是ES的实现标准委员会(TC39委员会) 批准修改语法#xff0c;使其从提案变成正式标准 %% ES6带来了许多新特性#xff0c;之后要学的…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代码从而能让我们的代码运行在更低版本的浏览器或者其他的环境中。 安装流程
安装注意要安装在项目的根目录之下在vscode中选中文件右键在集成终端中打开::弹出的对话框就是我们的cmd终端::命令cnpm install --save-dev babel/core安装Babel配置文件在node_modules之下新建文件.babelrc再加一些规则安装转码规则::Babel本身是不具有转码功能的我们目前学的比较笼统::再在.babelrc中添加规则再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的nameage属性没有次序变量必须与属性同名才能取到正确的值与变量的顺序没有任何关系这个在我们了解对象之后简直起飞平常用到的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()返回布尔值是否包含包含就返回truestartsWith()返回布尔值表示是否以参数字符串开头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]扩展运算符扩展之后是1234再加[]就又成为数组字符串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只支持一个函数或类
