组成

描述

局部作用域【函数作用域，块级作用域】

局部作用域声明的变量外部不可用访问

在JavaScript中使用{}包裹的代码称为“代码块”，代码块内部声明的变量外部有可能无法被访问。【块级作用域，包括if块级作用域，for循环的块级作用域，{}里面包裹的代码块】

在函数内部声明的变量只能在函数内部访问，外部无法直接访问

函数内部声明的变量可以称为局部变量

全局作用域

script标签和.js文件的最外层就是全局作用域，在此声明的变量在函数内部可以被访问

在全局作用域声明的变量叫做-全局变量

省略关键字(let/const)声明的变量等同于window添加属性，也是全局【不推荐：易导致全局变量污染】

概念

使用变量时，如果在当前作用域没有，会一层一层的向上找，找到全局作用域为止，这种一层一层的关系，就是作用域链

作用

描述

提供-输出权限

保护局部变量，提供打印功能【内部函数可以访问外部函数变量，在内部函数可以打印输出该变量值】

提供-修改权限

保护局部变量，提供修改的方法【通过return返回的函数，该函数可以通过形参的形式改变外部函数变量的值，但该值只会在内部函数的内部生效，并不会污染外部函数的变量值】

保护局部变量，提供了累加的方法

特点

有length属性

索引从0开始

querySelectorAll

使用位置

描述

函数形参

//[]表示可以省略的意思，自定义参数名用于接收函数调用的所有//实参

function 函数名([参数列表],…自定义参数名)

只能写在最后一个位置。得到的是除了已有参数的剩余参数。

数组解构

//会将目标数组名中的数据保存到对应索引的变量中，剩余的数组数据 用数组保存到parm变量中

[变量1名,变量2名,…parm]=目标数组名

对象解构

//会将目标对象名的属性名和左边的变量名进行值的匹配，匹配上就将该属性对应的属性值赋值给左边的变量。parm为目标对象中的其他未匹配的属性和方法组成的对象

{变量1名,变量2名,…parm }=目标对象名

以前写法

简写

//变量名和下面的属性一样时

let 目标变量名=变量值

const person={

属性名：目标变量名

}

//变量名和下面的属性一样时

let 变量名=变量值

const person{

属性名

}

//对象中的方法

const person={

目标方法名：function(){

//方法体

}

}

//对象中的方法简写

const person={

目标方法名(){

//方法体

}

}

语法

描述

const 目标变量名 = {

属性: “属性值”

}

const 自定义变量名 = {

…目标变量名,

其他属性，

}

会将目标变量名保存的这个对象的所有属性和方法放到自定义变量名保存的这个对象中去作为自定义变量名保存的对象的属性和方法，其他属性和方法可以和目标变量名对象保存的属性和方法重复，在自定义变量名对象中，后写的属性会覆盖前面的属性。

const {变量1名,变量2名,…}=对象名

会将左边的变量名列表中的变量名去和右边对象中的属性名进行值的匹配，匹配上就将右边对象对应的属性的属性值直接赋值给左边的变量。以后该作用域中就可以直接使用该变量名来获取对象中对应的属性的属性值了。

const {变量1名,变量2名=默认值,…}=对象名

会将左边的变量名列表中的变量名去和右边对象中的属性名进行值的匹配，匹配上就将右边对象对应的属性的属性值直接赋值给左边的变量。以后该作用域中就可以直接使用该变量名来获取对象中对应的属性的属性值了。如果左边的变量列表中的变量没有匹配上，如果没有设置默认值就返回undefined，如果设置了默认值就返回默认值。【默认值会在获取不到时生效】【获取对象中不存在的属性，使用变量时返回undefined。通过设置默认值，可以避免返回值为undefined。】

const {变量1名：变量别名,变量2名,…}=对象名

会将左边的变量名列表中的原变量名去和右边对象中的属性名进行值的匹配，匹配上就将右边对象对应的属性的属性值直接赋值给左边的变量。以后该作用域中就可以直接使用变量别名来获取对象中对应的属性的属性值了【有变量别名的原变量名将会失效】。没有变量别名的就直接使用变量名获取对应对象中的属性。

语法

描述

数组名.forEach(function(参数1,参数2,参数3){

})

第一个参数为遍历数组时的每一项

第二个参数为遍历到该项时的索引

第三个参数为遍历的数组值

三个参数都可以省略

返回值为undefined

推荐使用箭头函数写法

let 新数组名=数组名.map(function(参数1,参数2,参数3){

return 表达式

})

第一个参数为遍历数组时的每一项

第二个参数为遍历到该项时的索引

第三个参数为遍历的数组值

三个参数都可以省略

返回值为新数组【可以理解为每次循环依次往该新数组中追加return后面表达式返回值的结果】

基于一个数组->生成一个新数组【新数组的每一项，为map中每次循环return后面的返回值】

推荐使用箭头函数来写

该方法会在内存中开辟一个空间,相比forEach方法会消耗性能一点,所以能用forEach方法的就不要用map方法

数组名.join(“分隔符”)

将数组转为字符串，数组中的各个数据用分隔符隔开。

//普通写法

let 新数组 = 数组名.filter(function(参数1，参数2，参数3){

//函数体

return 参数相关条件判定

})

//箭头函数写法

let 新数组 = 数组名.filter( (参数1，参数2，参数3)=>{

//函数体

return 参数相关条件判定

})

//箭头函数写法【只有一个参数且函数体只有return一行语句】

let 新数组 = 数组名.filter(参数=>

参数相关条件判定)

第一个参数为遍历数组时的每一项

第二个参数为遍历到该项时的索引

第三个参数为遍历的数组值

三个参数都可以省略

返回值为新数组【可以理解为每次循环根据return后面的参数相关条件判定 判断本次循环是否满足条件判定，满足条件就将原数组中的数据追加到新数组中】【return 后面的条件判定返回值为true就追加到新数组中，返回值为false就过滤掉】

这个方法是一个实例方法【后面会讲什么是实例方法】【回调函数执行】

推荐使用箭头函数来写

如果一个都筛选不出来，返回值为空数组

const 变量名 = 数组名.find((参数1，参数2，参数3)=>{

//函数体

return 参数相关条件判定

})

第一个参数为遍历数组时的每一项

第二个参数为遍历到该项时的索引

第三个参数为遍历的数组值

三个参数都可以省略

返回值是满足条件判定的第一个原数组中的元素，没有满足条件的元素就返回undefined。

数组名.includes(目标元素)

看目标元素是数组中的数据返回值为true；目标元素不是数组的数据返回值false

let 变量名=数组名.sort(function(参数1,参数2){

return 参数1和2相关表达式

})

参数1为数组的前一项，参数2为数组的下一项，当return后面的表达式大于0按参数的比较属性或其本身正序排列数组项，否则倒序。

返回值为一个排序好的新数组【不会改变原数组】

//如果没有参数1的初始值，默认参数//1的初始值为数组的第一项，这时参//数2将会重数组的第二项算起

const 变量名=数组名.reduce(function(参数1,参数2,参数3,参数4){

return 参数相关条件表达式

},参数1的初始值)

回调函数中的参数：

参数1为上一次回调函数的返回值

参数2为遍历数组时的每一项

参数3为遍历到该项时的索引

参数4为遍历的数组

返回值为最后一次return 后面表达式的返回值【我们常用该方法来获取数组中所有对象的属性之间的计算结果：包括累加】【计算总价】

const 变量名=数组名.every(function(参数1,参数2,参数3,参数4){

return 参数相关条件判定

})

参数1是数组的每一项

参数2是每一项的索引

参数3是调用该方法的数组

返回值为布尔值【数组中所有数据都满足条件判定，返回值为true，数组中有一项不满足条件判定就返回false】

循环次数为找到不满足的条件为止

语法

描述

[…arr1,…arr2]

将数组1和数组2所有数据合并成一个新的数组

…arr1

去掉数组字面量，只留数据列表【逗号分隔的数据】

作用

把数组展开

可以便捷的实现多个数组的合并

简化部分函数的传参

输出的是对象【不展开获取的是原来的值】

输出的是 内存地址

点开他【展开对象】 输出的是堆中的值

应用场景

代码案例

函数形参和实参解构匹配

let obj={

msg:’城市信息’,

list:[‘北京’,’上海’]

}

function func({msg,list}){

console.log(‘msg:’,msg)

}

func(obj)

用一个变量保存，获取过来的对象中的数组数据

let obj={

message:{},

data:[保存的对象列表]

}

{message,data}=obj

步骤

过程

1

在控制台打印Object.keys(目标对象).join(“”)获取属性对应的变量列表

2

const {粘贴第1步控制台输出的变量列表}=目标对象

应用场景

案例

多个数组连接

[…数组1,…数组2]

保存对象剩余属性和方法，得到新对象

{属性1名,属性2名,.…parm}=对象名

保存数组剩余数据，得到新数组

[变量1，变量2，…parm]=数组名

步骤

代码示例

1.用map方法遍历数组数据，将原数组的每一项更改为具有标签结构的模板字符串,返回值给到新数组中的每一项【将存放单个对象所有数据的html结构拿过来，里面放我们的对象数据】

let str=’’

let newArr = data.map(function(item){

return `

<开始标签>${item.属性1}</结束标签>

<开始标签>${item.属性2}</结束标签>

<开始标签>${item.属性3}</结束标签>

<开始标签>${item.属性4}</结束标签>

`

})

2.新数组通过join方法拼接为具有html结构的字符串

let str=newArr.join(‘’)

3.获取需要渲染到某个元素内部的标签

const dom=document.querySelectorAll(‘选择器’)

4.渲染到页面上

dom.innerHTML=str

语法

描述

let 对象名 = {

属性1名：属性1值,

属性1名：属性1值,

…

}

花括号的对象字面量里面添加属性和方法的方式赋值给变量保存的方式叫叫字面量创建对象。

语法

描述

let 自定义对象名 = new Object()

自定义对象名.属性1名=属性1值,

自定义对象名.属性2名=属性2值,

…

通过new Object()构造函数的方式创建实例对象，通过实例对象.点的方式设置属性和方法

语法

描述

function 自定义构造函数名(){

this.自定义属性1名=自定义1形参,

this.自定义属性2名=自定义2形参,

…

this.自定义方法1名=function(){

//方法体里面的this指向还是创建出来的实例对象

}

}

let 自定义对象名=new 自定义构造函数名(实参列表)

通过自定义构造函数的方式创建对象，创建对象，只需new 自定义构造函数名调用即可。

专门用来创建对象的函数

通过构造函数可以快速创建同一类型的对象

语法

描述

function 构造函数名(参数1,参数2,…){

this.实例属性名=形参【自己选】,

this.方法名=方法体

}

构造函数名.静态属性名=静态属性值;

let 实例对象=new 构造函数名()

构造函数函数体中设置的属性和方法为实例属性和方法，直接给构造函数设置的属性和方法为静态方法。

示例

描述

function Dog(name,food) {

this.name=name,

this.food=food

}

语法

描述

构造函数名.属性名=属性值

设置的时候这样设置，使用的时候也需要用构造函数名.点的方式来使用【实例对象点的方式不行】

语法

描述

let 数组名 = new Array()

通过内置构造函数Array创建数组

语法

描述

let 对象名= new Object()

通过内置构造函数Object创建对象

语法

描述

Object.keys(目标对象名)

返回值为目标对象中所有属性名组成的数组

Object.values(目标对象名)

返回值为目标对象中所有属性值组成的数组，可以获取方法。

语法

描述

字符串名.length

获取字符串中字符的个数

语法

描述

字符串名.split(‘分隔符’)

将字符串按照分隔符切割为数组的每一项

字符串名.indexOf(‘检测字符或字符串’)

检测字符串中是否由参数字符或字符串，有就返回该字符或字符串在字符串中的索引，没有就返回-1【只能检测第一个满足条件的索引】

字符串名.includes(‘检测字符’)

检测字符【或字符串整体】【第一个参数的保存值】在字符串中是否存在，存在就返回true，否则返回值为false

str.replace(reg,’替换文本’)

在字符串str中找是否有满足正则的字符，有就替换为替换文本

面向对象

面向过程

三大特性：封装、继承、多态

实现逻辑的过程【1. 逻辑语句； 2. 表达式；3 函数】

封装：【1. 创建一个对象，保存某一类的属性和功能；2. 更加利于维护和复用；3. 之后使用功能属性的时候，找对象：3.1 自己封装；3.2 别人封装好的】

封装的最高级别到function

多态：同一个函数在不同情况下表现出的不同的状态【函数的重载，字类替换父类】

JavaScript无法实现多态

语法

描述

JSON.stringify(目标对象或目标数组)

将目标对象或目标数组转为JSON格式的字符串【会丢失undefined值和方法。】【序列化】

JSON.parse(JSON格式字符串)

将JSON格式的字符串转回对象或数组。【返回新对象】【反序列化】

语法

描述

let 对象名={…原对象名}

只拷贝第一层

语法1

描述

let 变量1=JSON.stringify(原对象名obj)

let 新对象名=JSON.parse(变量1)

第一行代码：将原对象转为JSON格式的字符串

第二行代码：将转换过来得JSON格式字符串重新转为对象,返回给新对象保存【这个时候新对象里面的所有属性修改都不会影响原对象了,因为不存在有某个复杂数据保存的内存地址一样的问题。】【但是新对象里面不会有原对象中保存undefined的属性和保存方法的属性】

语法2

描述

function deepClone(oldObj) {

const newObj = {};

for (let key in oldObj) {

if (typeof oldObj[key] === "object") {

newObj[key]=deepClone(oldObj[key]);

} else {

newObj[key] = oldObj[key];

}

}

return newObj;

}

1. 创建新对象newObj克隆原对象oldObj数据

2. for in循环遍历老对象，给新对象添加老对象的属性时同时给老对象属性添加值newObj[key] = oldObj[key];

3. 如果老对象的属性值为对象，我们需要重新遍历一次

利用lodash语法

描述

<!-- 引入lodash.min.js文件 -->

<script src="./lodash.min.js"></script>

const 新对象名=_.cloneDeep(原对象名)

Lodash,一个流行的JavaScript工具库，提供了很多封装好的方法，可以直接调用，简化开发【都可以拷贝下来】

使用步骤：

1.导入函数库

2.调用_.deepClone()函数传入对象

3.获取拷贝的新对象

4.测试一下是否实现了深拷贝

语法

描述

function 目标函数名(){

操作数

if(条件判定){

目标函数名()

}

}

语法

描述

throw ‘异常信息’

throw new Error(‘错误信息’)

更常用

语法

描述

try{

//可能出错的代码

}catch(error){

//出错后执行的代码

}finally{

//一定会执行

}

Ajax中会用到。

普通函数this指向

箭头函数this指向

谁调用，this就指向谁，看不到调用者就指向window

箭头函数内部的this指向上一个作用域中的this【对象不是作用域】

语法

描述

目标函数名.call(this指向,参数2,参数3…)

会先调用一次目标函数并将目标函数的this指向设置为第一个参数。

第二个参数开始，依次将后面的参数列表作为目标函数名的形参

Object.prototype.toString.call(变量名)

返回值为[Object 数据类型]字符串可以根据该方法的返回值得到数据类型的字符串。

语法

描述

Object.prototype.toString.apply(变量名)

返回值为[Object 数据类型]字符串可以根据该方法的返回值得到数据类型的字符串。

语法

描述

let 自定义函数名=目标函数名.bind(目标函数名this指向)

自定义函数名保存的是目标函数，不过改变了目标函数的this指向。但并不会改变目标函数，只是自定义函数名调用的时候，目标函数内部的this才会发生变化。

this这个学编程的初期，困扰了我很久，一直不明所以，之后花了不少时间研究，终于搞明白了

普通函数：最为简单，谁调用就是谁，看不到谁调用就是window

箭头函数：上一级作用域中的this，能够创建作用域的有if、for、{}【对象的花括号不行】、function

call、apply都可以通过函数点出来

1.作用：调用函数并传入具体的this

2.call传递给函数的参数从第二个开始

3.apply传递给函数的参数，第二个参数，参数以数组的形式传入。可以简化Math.max的传参

4. 学了ES6之后，可以用…【扩展运算符可以简化Math.max的传参】

bind

call和apply不一样，返回一个绑定了this的新函数

不过我在开发中没咋用过，用新技术挺好。

自己写案例

描述

lodash节流语法

描述

 <!-- 引入lodash.min.js文件 -->

<script src="./lodash.min.js"></script>

元素名.addEventListener(‘事件类型’,_throttle(函数表达式或函数名,等待时间)

等待时间间隔内事件只会触发一次

lodash节流案例

描述

<button>你好</button>

document.querySelector("button").onclick = _.throttle(function () {

        console.log("别点了");

      }, 2000);

每两秒内只允许被点击一次

自己写案例

描述

// 清除定时器

clearTimeout(timer)

 // 重新设置定时器

 const timer = setTimeout(() => {

 //对输入框的相关事件处理

}, 300)

主要用于输入框input事件中，为了防止事件在输入内容的时候频繁触发，我们需要共享同一个定时器变量，事件处理逻辑写在定时器中，而每次在开启定时器前都需要删掉定时器。

Lodash防抖语法

描述

<!-- 引入lodash.min.js文件 -->

<script src="./lodash.min.js"></script>

元素名.addEventListener(‘事件类型’,_debounce(函数表达式或函数名,等待时间)

元素在事件类型的触发下，只要在等待时间间隔之间事件类型没有被再次触发，就会执行该事件

场景

描述

输入框中按下键盘enter键触发事件

给输入框注册keyup鼠标抬起事件，如果e.keyCode==13执行事件处理函数

下拉框select中的option【只有手动点击切换才会触发onchange事件，js修改不会触发】

当获取select元素的value值在option选项中存在时，select会自动切换到对应的option选项

步骤

过程

1

浏览器：输入URL地址-->请求

2

服务器：接收请求并返回对应的资源-->响应

3

浏览器：接收并解析响应内容

4

可以在浏览器开发者界面的network分类查看

语法1

语法2

//params属性的本质也是将参数拼接 //到url的末尾

axios.get(‘资源路径【url地址】’,{

params: {

请求参数1:请求参数值1,

请求参数2=请求参数值2,

…

}

}).then(function(形参){

//请求成功函数体【形参为成功数据】

}).catch(fucntion(error){

//处理请求失败的错误情况

})

axios.get('资源路径【url地址】?资源路径?请求参数1=请求参数值1&请求参数2=请求参数值2&…').then(function(形参){

//请求成功函数体【形参为成功数据】

}).catch(fucntion(error){

//处理错误情况

})

推荐写法axios-config模式get请求

推荐写法axios-config模式post请求

axios.({

url:'资源路径 ',

method:’get’,//默认值，可以不写

params:{//参数根据接口文档来写

参数1：参数值1,

参数2：参数值2,…

}

}).then(function(形参){

//请求成功函数体【形参为成功数据】

}).catch(fucntion(error){

//处理错误情况})

axios.({

url:'资源路径 ',

method:’post’,

data:{//参数根据接口文档来写

参数1：参数值1,

参数2：参数值2,…

}

}).then(function(形参){

//请求成功函数体【形参为成功数据】

}).catch(fucntion(error){

//处理错误情况})

  axios

          .get("http://ajax-api.itheima.net/api/news", {

            // params 固定的 get请求传递参数 一定写在params

            params: {

              // pname 接口文档查到的

              // 湖南省 使用接口 传递的具体的值

              // pname: '湖南省'

              pname: "大连市",

            },

          })

          .then(function (response) {

            // 请求成功 执行 then中的逻辑

            console.log("response:", response);

            let arr = response.data.data;

          })

          .catch(function (err) {

            // 请求失败 执行 catch中的逻辑

            console.log("err执行啦");

            console.log(err);

          });

序号

请求方式

描述

1

POST

向服务器新增数据（传递）

2

GET

从服务器获取数据

3

DELETE

删除服务器上的数据

4

PUT

更新服务器上的数据【侧重于完整更新：例如更新用户的完整信息】

5

PATCH

更新服务器上的数据【侧重于部分更新：例如只更新用户的手机号】

语法格式

描述

//？后面那一坨也叫查询字符串

axios.get(‘url?key1=value1 & key2=value2’)

参数拼接在url末尾，参数之间用&隔开，参数与url之间用？隔开

axios.get(‘url’,{

params:{

key1:value1,

key2:value2

}

})

参数写在第二个配置对象中，配置属性为params;配置好后，参数会自动拼接到url后面

推荐写法axios-config模式get请求

描述

axios.({

url:'资源路径 ',

method:’get’,//默认值，可以不写

params:{//参数根据接口文档来写

参数1：参数值1,

参数2：参数值2,…

}

}).then(function(形参){

//请求成功函数体【形参为成功数据】

}).catch(fucntion(error){

//处理错误情况

})

该方式写法为推荐写法

参数写在params配置属性中

语法格式

描述

axios.post(‘url?key1=value1 & key2=value2’)

参数拼接在url末尾，参数之间用&隔开，参数与url之间用？隔开

axios.post(‘url’,{

key1:value1,

key2:value2

}

})

参数写在第二个对象中，参数会自动拼接到url后面

推荐写法axios-config模式post请求

描述

axios.({

url:'资源路径 ',

method:’post’,

data:{//参数根据接口文档来写

参数1：参数值1,

参数2：参数值2,…

}

}).then(function(形参){

//请求成功函数体【形参为成功数据】

}).catch(fucntion(error){

//处理错误情况

})

推荐写法

参数写在data属性配置中

请求参数位置

书写位置

path

请求参数写在params配置里面或者写在url路径后面

query

请求参数只能写在params配置里面

语法

描述

<!-- 引入 lib 目录下的 bootstrap 和 axios -->

<script src="./lib/axios.js"></script>

<!—设置基地址：完整地址的公共部分-->

axios.defaults.baseURL="公共部分url";

axios({

   url: "完整地址剩余部分url",

method:’get’,

params:{

参数1名:参数1值,

参数2名:参数2值,

…

}

}).then(function(){

//获取的数据操作

})

1.先引入axios请求库

2.设置基地址：axios.defaults.baseURL=’公共部分url’

3.调用axios实现数据交互

请求状态

表现

请求成功

绿色的成功 状态行

请求失败

http错误状态码 状态行红色；浏览器红色的错误提示

状态码

状态码描述

说明

200

Ok

请求成功

201

Created

资源在服务器端已成功创建

304

Not Modified

资源在客服端被缓存，响应体中不包含任何资源内容

400

Bad Request

客户端的请求方式、或请求参数有误导致的请求失败

401

Unauthorized

客户端得用户身份认证未通过【未登录】，导致得此次请求失败

404

Not Found

客户端请求得资源地址错误，导致服务器无法找到资源

500

Internal Sever Error

服务器内部错误，导致得本次请求失败！

请求

响应

什么时候发请求

什么时候接数据

是否需要携带数据

接收到数据之后有什么逻辑

有没有额外的逻辑

响应状态码

业务状态码

在状态行中包含的状态码

在响应体中的数据中所包含的状态码

响应状态码只能表示这次请求的成功与否

业务状态码用来表示这次业务处理的成功与否

响应状态码由http协议规定，具有通用性，不同的状态码都有其标准的含义，不能乱用

业务状态码是后端程序员自定义的，不具有通用性

基本使用

描述

创建团队

创建项目

调整地址，请求方法

根据接口文档的请求参数栏的数据结构给apifox的请求参数栏的params设置对应的参数名和参数类型

根据接口文档的请求参数在apifox的给body设置请求参数栏设置对应的请求参数类型以及示例值。

示例值即为发送请求的数据

点击发送

会将示例值发送，响应回对应的数据

语法

描述

//通过FormData实例化对象

let 自定义实例对象名=new FormData()

//给自定义实例对象名添加属性

自定义实例对象名.append("添加属性名", "添加属性值");

//获取自定义实例对象的添加属性【数据不存在得到的是null】

自定义实例对象名.get("添加属性名")

通过new关键字实例化

.append(key,value)添加数据

.get(key)获取key对应的值

可以保存文件【file类型表单】

能够结合Ajax进行数据提交(上传文件)

get方法的返回值为属性名保存的值

语法1【阻止按钮的默认行为】

描述

form元素中的button元素.onclick=function(e){

e.preventDefault()

}

form元素中的button元素点击后默认有提交跳转页面功能

语法2【阻止表单的提交事件】

描述

目标form表单元素.addEventListener(“submit”,function(e){

e.preventDefault()

})

form表单注册onsubmit事件后，在点击内部的submit按钮时触发onsubmit事件，如果事件处理中第一行代码e.preventDefault()表单就不会有默认的方式提交数据，内部的点击事件在onsubmit事件触发前是无效的。

步骤

过程

1

引入form-serialize.js插件:<script src=’form-serialize.js路径’></script>

2

使用变量保存数据：可以获取目标表单元素内部所有具有name属性的属性值，并将该属性值作为新对象的属性名；具有name属性的表单元素的用户填入数据会作为新对象对应属性名的属性值

const 自定义变量名=serialize(目标form表单元素,{hash:true})

3

自定义变量名保存的是对象，对象的属性名为具有name属性的表单元素的name标签属性对应的属性值；属性值为该name标签所在表单元素的value值。

步骤

过程

1

//引入axios库

<script src="axios.min.js路径"></script>

2

//创建一个FormData实例对象

const 自定义formdata实例对象=new FormData()

3

//给formdata数据类型添加接口文档对应的参数

自定义formdata实例对象.append(‘接口文档中的参数名’,文件元素.files[0])//文件元素可以使用e.target.files[0]或dom.files[0]获取

4

//使用axios库发出请求,以新增为例

axios({

 url: "请求地址",

 method: "post",

 data: 自定义formdata实例对象,

}).then(function (e) {

    //成功获取到形参e响应数据的逻辑

});

语法

描述

目标元素.click()

会自动触发目标元素的点击事件

接口文档中body参数描述

格式

multipart/form-data

new FormData()

application/json

写成对象-->axios会帮我们转为JSON

application/x-www-form-urlencoded

key=value&key2=value2

属性值

应用场景

application/x-www-form-urlencoded

表单中不包含文件上传的场景，适用于普通数据的提交【查询字符串，在url后面，格式为key1=value1&key2=value2】

multipart/form-data

表单中包含上传文件的场景

application/json

上传json格式数据【文本类】

步骤

过程

1

// 1.实例化 异步对象 (小黄人 XHR)【不刷新页面发送请求】

const xhr = new XMLHttpRequest()

2

// 2.设置请求的 地址 和方法

xhr.open('请求方法','请求地址')

3

// 3.注册回调函数 服务器响应内容回来之后触发

xhr.addEventListener('load',function(){

console.log(xhr.response)

})

4

// 4.发送请求

xhr.send()

步骤

过程

1

// 1.实例化 异步对象 (小黄人 XHR)

const xhr = new XMLHttpRequest();

2

// 2.设置请求的 地址 和方法

xhr.open("get", "http://ajax-api.itheima.net/api/login");

3

// 3.注册回调函数 服务器响应内容回来之后触发

xhr.addEventListener("load", function () {

console.log(JSON.parse(xhr.response));

});

4

const data = { username: "admin", password: "123455" };

5

//4.发送请求

//将数据传递给服务器

xhr.send(JSON.stringify(data));

步骤

过程

1

open()方法之后通过xhr.setRequestHeader(key,value)的形式设置数据格式

2

send()方法中传递具体的数据，需要和格式一致

步骤

过程

1

// 1.实例化 异步对象 (小黄人 XHR)

const xhr = new XMLHttpRequest();

2

// 2.设置请求的 地址 和方法

xhr.open("get", "http://ajax-api.itheima.net/api/login");

3

// 3.注册回调函数 服务器响应内容回来之后触发

xhr.addEventListener("load", function () {

console.log(JSON.parse(xhr.response));

});

4

//请求体中携带数据 需要设置content-type请求头

//set设置 Request 请求Header头

//通过接口文档知道传递的参数是什么格式，通过设置请求头的//content-type告诉服务器数据的格式

xhr.setRequestHeader("content-type", "application/json");

5

const data = { username: "admin", password: "123455" };

6

//4.发送请求

//将数据传递给服务器

xhr.send(JSON.stringify(data));

语法

描述

var promise实例对象变量= new Promise(function(resolve,reject){

if(条件表达式){

resolve(成功的状态值)

}else{

reject(失败的状态值)

}

})

promise 实例对象变量保存的对象状态【尖括号括起来的是promise对象状态】和状态值以及报错信息

状态

描述

<pending>

表示进行中

<fulfilled>

表示已成功【resolve(成功的状态值)已执行】

调用then方法，then方法内部的形参为调用该then的promise对象中的成功的状态值

<rejected>

表示已失败【reject(失败的状态值)已执行】

调用catch方法，catch方法内部的形参在catch的回调函数内部表示调用该catch的promise对象中的失败的状态值

形参

描述

第一个形参

成功状态函数名，该函数名调用后 该构造函数创建的实例对象会得到该函数参数的状态值

第二个形参

失败状态函数名，该函数名调用后 该构造函数创建的实例对象会得到该函数参数的状态值

理解

描述

第一层

多个异步的逻辑，彼此依赖【接口2需要等待接口1，接口3需要等待接口2】

可能会出现的回调函数嵌套

如果嵌套的较多，也可以成为回调地狱

使用Promise之后，编码的风格变为-->链式编程,一路.then,.catch

第二层

基本用法：实例化Promise对象，内部执行异步的逻辑，根据成功/失败调用resolve或reject，这两个方法的本质是修改Promise对象的状态。

状态成功调用then方法，状态失败调用then的第二个回调函数或.catch方法

Promise.all([pro对象1,pro对象2,…]).then(res=>)res为Promise数组中为每一个对象的成功结果

Promise.race([pro对象1,pro对象2,…])等待第一个，但没有结合具体的业务场景，可以请教一下吗

第三层

自己手写一个promise

语法

描述

Promise.all([promise参数列表])

Promise.all方法的参数为数组，且数组的每一项都为promise对象

参数列表的所有promise对象都为成功状态，则返回值为成功状态的promise对象，状态值为所有参数列表的promise对象的成功状态值组成的数组集合

Promise.race([promise参数列表])

Promise.race方法的参数为数组，且数组的每一项都为promise对象

返回值为第一个执行且状态为成功的promise对象

方法

使用场景

Promise.all([promise参数列表])

页面中的数据来源于多个接口，需要等待多个接口都获取到结果之后才可以渲染

Promise.all([接口1，接口2，…])

Promise.race([promise参数列表])

某个功能需要调用接口，多个服务器都有这个接口，考虑网速，服务器稳定性的问题，多个接口都可以实现功能一样，我们可以通过该方法获取速度最快的接口数据。

优先级

异步函数

1

setTimeout

2

setInterval

3

原生ajax

步骤

顺序

1

先执行主线程代码

2

执行本次产生的微任务

3

执行宏任务【宏任务在 主线程和微任务中的 优先级是一样的，有时间间隔的先看时间间隔，没有时间间隔的看代码书写顺序】

4

然后执行该宏任务产生的微任务

5

若微任务的执行过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后

6

再回到宏任务中进行下一轮循环

语法

描述

async function 目标异步函数名(){

await promise实例对象

return 返回值

}

调用目标异步函数名时，会将return的返回值 不是promise对象就会包装为一个成功状态的Promise对象【返回值是promise对象就是得到这个promise对象】

且await后面的promise会执行完then中的异步代码后才会继续执行后续的同步代码【必须让await后面的promise对象执行完毕才会执行后面的同步代码】

语法

try {

//可能报错的代码

}catch(err){

//如果try中的代码有错就会执行这里的代码，参数err是报错信息

}

自定义属性

作用

data-bs-toggle=”modal”

切换modal弹框

data-bs-target=”#id名”

控制哪个元素弹框【点击该元素，对应id名的元素模态框会弹出来】

创建目标模态框语法

描述

var 自定义创建的模态框名 = new bootstrap

.Modal(document.querySelector('选择器'))

通过选择器创建一个和选中元素一样【元素和子孙后代完全一样】的模态框

显示模态框语法

描述

自定义创建的模态框名.show()

显示模态框【需要写在事件内部】

隐藏模态框的语法

描述

自定义创建的模态框名.hide()

隐藏模态框【需要写在事件内部】

语法

描述

for (let key in object) {

    document.querySelector(`[name=${key}]`).value = object[key];

}

object为遍历的数据对象

语法

描述

进度day03

15