菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 康利20221128JS高级05 [打印本页]

作者: 智商不在服务区 时间: 2022-11-29 08:55
标题: 康利20221128JS高级05
一、学习内容：

解构赋值
解构数组
const arr=[1,2,3];
从数组中把值取出来，放在3个变量中保存
let [变量1,变量2,变量3]=arr;
使用let一次性声明3个变量，按照顺序，把数组中的值取出来，赋值给对应的变量
解构对象
const user={
key1:value1,
key2:value2
}
let {key1,key2}=user;
注意：变量名必须是键名
结构函数参数
本质还是解构数组和解构对象
参数是数组
function fn([a,b,c]){}
fn(['a','b','c']);
参数是对象
function fn({name,age}){}
fn({name:'小白',age:12});
模板字符串
解决字符串拼接问题
`字符串${变量名，表达式}字符串`
表达式：能够算出唯一结果的一句代码
对象的简写
1.key和value相同，可以省略，
2.对象中的方法，可以省略:function
ES6的类
语法：
class 类名{
// 构造函数
constructor(形参){
      // this.挂载
}
// 原型方法
方法名(){ }
// 静态方法
static 方法名(){ }
}
// 继承
class 子类 extends 父类{
constructor(所有的参数){
      super(继承父类的参数)
}
}
自动挂载在new出来的实例对象上
这些属性最终会成为实例对象的属性，如果不需要传递参数，是写死的，就没有必要放在constructor中
ES6模块导入和导出
方式一：单个暴露
暴露-导出
export var userName='xxx';
export function show
导入--引入
import {userName,show} from '文件路径全称';
方式二：一起暴露
导出
export default {key1:value1,key2:value2,....}
导入
import 变量 from '文件路径'
ES6模块化的优势：快
同步和异步
1. 同步：代码从上到下执行，后面的代码，必须等前面代码执行完毕，才能执行
2. 异步：代码从上到下执行，遇到异步代码，异步代码会让开，等待所有同步代码执行完毕，才来执行异步代码
https://console-docs.apipost.cn/ ... 87/7071f058c9a6769a
js中的异步的情况
1. 定时器的那个回调函数
2. 事件处理函数
3. ajax的那个回调函数
控制异步顺序
在异步中嵌套异步控制出现的顺序
解决方法：一个回调函数里边再嵌套一个回调函数
缺点：可读性差，不好维护
Promise
作用：控制异步顺序，解决回调地狱
Promise 有三种状态：进行中，已成功，已失败
调用resolve 进行中---->成功--then
调用reject 进行中---->失败--catch
// 创建一个Promise的实例对象
const p = new Promise(resolve => {
// 1.发送第一个ajax
axios.get('http://121.89.216.9/list').then(res => {
      // console.log(res);
      console.log('接口1', res.data.data);
      resolve(res.data.mes);
})
})
// then：然后
p.then(data => {
return new Promise(resolve => {
      axios.get('http://121.89.216.9/show?id=26').then(res => {
         console.log('接口2', res.data.mes);
         resolve(res.data.mes);
      })
})
})
// then
.then(data => {
return new Promise(resolve => {
      axios.get('http://121.89.216.9/update?id=26&name=小花').then(res => {
         console.log('接口3', res.data.mes);
         resolve(res.data.mes);
      })
})

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)