ES6新语法|解构赋值

什么叫解构赋值？

解构赋值简单来说：就是从数组（字符串当成数组解构）和对象提取值，对变量进行赋值。 tip：解构赋值重点是在赋值，赋值的元素是要拷贝出来赋值给变量，赋值的元素本身是不会被改变的

数组解构赋值

//旧语法
let arr=[1,2,3]
let a=arr[0]
let b=arr[1]
let c=arr[2]

*关键：模式的匹配 右边什么结构,左边就写成什么结构

//数组解构赋值
let [a,b,c]=[1,2,3]
console.log(a,b,c)// 1 2 3

let [a,b,[c,d]]=[1,2,[3,4]]
console.log(a,b,c,d)//1 2 3 4

let [a,b,[c]]=[1,2,[3,4]]
console.log(a,b,c)//1 2 3

let [a,b,c]=[1,2,[3,4]]
console.log(a,b,c)//1,2,[3,4]

let [a,b,c,d]=[1,2,[3,4]]
console.log(a,b,c,d)//1,2,[3,4],undefined

//解构赋值具有"惰性",如果右边传了值就用右边传的值6,否则用默认值d=5
let [a,b,c,d=5]=[1,2,[3,4],6]
console.log(a,b,c,d)//1,2,[3,4],6

对象解构赋值

//旧语法
let user={
    name:'wdl',
    age:21
}
let name=user.name
let age=user.age
console.log(name,age)//wdl 21

//对象解构赋值
let user={
    name:'wdl',
    age:21
}
let{name,age}=user
//let{age,name}=user//打印结果相同 对象通过key值对应 数组通过顺序对应
console.log(name,age)//wdl 21

//对象解构赋值遇上重命名
let user={
    name:'wdl',
    age:21
}
let{name:uname,age:uage}=user
console.log(uname,uage)//wdl 21

字符串解构赋值

//字符串解构 字符串的形式即数组的形式
let str='imooc'
let [a,b,c,d,e]=str
console.log(a,b,c,d,e)//i m o o c

应用

默认值

//例一
let [a,b,c,d=8]=[4,5,6]
console.log(a,b,c,d)//4 5 6 8

//例二
let {name,age=18}={
    name:'wdl'
}
console.log(name,age)//wdl 18

//例三
function foo(){
    console.log(123)
}
let[a=foo()]=[1]//不会打印出123
console.log(a)//1

对函数参数解构

//例一
function foo([a,b,c]){
    console.log(a,b,c)
}
let arr=[3,4,5]
foo(arr)//3 4 5

//例二
function foo({name,age,school='immoc'}){
    console.log(name,age,school)
}
let obj={
    name:'wdl',
    age:18,
    school:'xxx'
}
foo(obj)//wdl 18 xxx

对返回值解构

function foo(){
    let obj={
       name:'wdl',
       age:18,
       school:'xxx'
    }
    return obj
}
let{name,age}=foo()
console.log(name,age)//wdl 18

提取json数据（json即js的对象表示法）

let json='{"a":"hello","b":"world"}'
let{a,b}=JSON.parse(json)//JSON.parse() 将字符串转换成json数据
console.log(a,b)//hello world