解构赋值
1、数组的解构
快速交换2个变量的值，不需要借助第三个变量
let x=10;
let y=8;
[x,y]=[y,x]
console.log(x,y)//8 102、对象的解构
拿到后端的数据进行解构
展开运算符（扩展运算符）
1、对字符串
1.1 把字符串转成数组
1.2 把字符串反转
let str='Iloveyou'
console.log([...str])//把字符串转成数组
console.log([...str].reverse().join(''))//把字符串反转2、对数组
2.1 数组的浅拷贝
2.2 数组的合并
2.3 把伪数组转成真数组
let arr=['a','b','c']
// 数组的浅拷贝
let arr2=[...arr]
console.log(arr2)//['a','b','c']
// 数组进行合并
let arr3=[1,2,3]
console.log([...arr,...arr3])//['a','b','c',1,2,3]
// 把伪数组转成真数组
function fn(){
console.log([...arguments])
}
fn(1,2,3)//[1,2,3]3、对对象
3.1 对象的浅拷贝
3.2 对象的合并
let user={
name:'张三',
age:20
}
// 对象的浅拷贝
let user2={...user}
console.log(user2)//{name: "张三", age: 20}
// 对象的合并
let user3={
name:'李四',
addr:'成都',
age:18
}
console.log({...user,...user3})//{name: "李四", age: 18, addr: "成都"}模板字符串
对象的简写
1、当key和value一样时可以省略只写一个
2、方法省略:function
let name='张三'
let age=18
let user={
name,
age,
eat(){
console.log('爱吃')
}
}
console.log(user)类
1、ES5创建一个类
function Animal(name,age){
this.name=name
this.age=age
}
Animal.prototype.run=function(){
console.log('动物会跑')
}2、ES6创建一个类
注意：类名称大驼峰命名规则
constructor是自动调用的，如果不写，默认添加空的constructor
class Person{
//构造器取代构造函数
constructor(name,age) {
this.name=name
this.age=age
}
//原型上的方法
eat(){
console.log('爱吃')
}
// 静态方法只能类调用，实例不能调用
static run(){
console.log('人会跑')
}
}
let p=new Person('张三',20)
console.log(p)
Person.run()3、ES6继承
子类与父类出现相同方法，用子类自己的
class Person{
money=100;
constructor(name,age) {
this.name=name
this.age=age
}
eat(){
console.log('会吃')
}
static jump(){
console.log('跳跳')
}
}
class Student extends Person{
constructor(name,age,sno) {
super(name,age)
this.sno=sno
}
}
let s=new Student('张三',18,'10001')
console.log(s)
s.eat()
Person.jump()
Student.jump()4、ES6的模块
语法一：
导出、暴露
export 要导出的内容1
export 要导出的内容2
导入
import {对象解构} from '路径/文件名称'
语法二：
导出、暴露
export default{
要导出的内容1,
要导出的内容2
}
导入
import 变量名 from '文件模块路径'
注意：<script type='module'></script>
为了保险两种方式都写上
export const dog=()=>console.log('你是狗')
export let name='张三'
export default{
dog,
name
}Promise的使用
1、同步和异步
先把同步执行完毕，然后再执行异步
2、常见的异步
定时器、事件处理函数、Ajax请求
3、什么是Promise
Promise是一个构造函数，是异步编程新的解决方案用来处理异步的顺序
4、为什么要使用Promise
——指定回调函数的方式更加灵活
——支持链式调用，解决回调地狱问题
3个状态：进行中、已成功、已失败
不可逆（凝固）
基本语法结构：
new Promise((resolve,reject)=>{
if(true){
resolve("参数")//成功
}else{
reject("参数")//失败
}
})
.then(data=>{
//data成功传递的参数
})
.catch(err=>{
//err失败传递的参数
)
Promise解决回调地狱问题eg：
先请求a.json得到id---->携带id请求b.json得到code---->携带code请求c.json得到data
new Promise(resolve=>{
axios.get('./serve/a.json')
.then(res=>{
let {id}=res.data
resolve(id)
})
})
.then(id=>{
return new Promise(resolve=>{
axios.get('./serve/b.json?id='+id)
.then(res=>{
let {code}=res.data
resolve(code)
})
})
})
.then(code=>{
return new Promise(resolve=>{
axios.get('./serve/c.json?code='+code)
.then(res=>{
let {data}=res.data
resolve(data)
})
})
})
.then(data=>console.log(data))axios解决回调地狱问题eg:
axios.get('./serve/a.json')
.then(res=>axios.get('./serve/b.json?id='+res.data.id))
.then(res=>axios.get('./serve/c.json?code='+res.data.code))
.then(res=>console.log(res.data.data))Promise的三个方法：
1、Promise.all(参数)
——所有子promise成功才成功
——如果有一个失败就返回失败的
——页面同时发多个接口时使用，增加效率
2、Promise.race(参数)
——不管成功还是失败，谁时间短谁执行
参数都为为数组，all和race偏底层，实际开发不常用
3、Promise.finally()
——无论成功失败都会执行
async和await
1、配合Promise使用
2、async只能修饰函数
3、await只能使用在async修饰的函数中
async和await解决回调地狱eg：（开发中常用的一种方式）
async function fn(){
let res1=await axios.get('./serve/a.json')
let res2=await axios.get('./serve/b.json?id='+res1.data.id)
let res3=await axios.get('./serve/c.json?code='+res2.data.code)
console.log(res3.data.data)
}
fn()