ES6-----解构赋值

简介

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

以前的时候，提取某对象里面的属性必须这样做

const obj = {
    name: '张三',
    age: 22,
    gender: '男',
    doing: {
        morning: '111'
    }
}

let name = obj.name
let age = obj.age
let gender = obj.gender
let morning = obj.doing.morning
console.log(name, age, gender, morning) // 张三 22 男 111

而ES6新增了结构赋值以后可以这样写

const obj = {
    name: '张三',
    age: 22,
    gender: '男',
    doing: {
        morning: '111'
    }
}
let {name,age,gender} = obj
console.log(name,age,gender) //张三  22  男
//解构重命名(类似MySQL中as语法)
let {name:nname} = obj
console.log(nname) //张三
//嵌套解构
let {doing:{moring}} = obj
console.log(moring) //111

1. 数组解构

数组中使用嵌套解构赋值

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

变量与值一一对应的时候，就会赋值，如果有变量，但是没值的时候，就会出现下面的情况

不完全解构

let [a,b] = [1]
console.log(a) //1
console.log(b) //undefined

上面的情况，左边的值与右边没有一一对应的时候，就会出现赋值不成功，也就是类似其中的b，undefined，这种情况就是解构不成功，变量的值是undefined，相当于只声明了变量b，但是没赋值

允许设定默认值

let [a,b=2] = [1]
console.log(a) //1
console.log(b) //2
//如果带默认值，但是右边有值对应，这时会覆盖默认值
let [a,b=2] = [1，3]
console.log(a) //1
console.log(b) //3

2. 对象解构

示例

let {a,b,c}={a:1,b:2,c:3}
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

let {a,b,c}={a:1,c:2,b:3}
console.log(a); // 1
console.log(b); // 3
console.log(c); // 2

此时我们会发现，无论右边的数据顺序怎么调换，都不会影响赋值结果，可见对象赋值和数组是不一样的，对象赋值的依据是变量名
如果变量找不到与名字相同的属性，会赋值不成功

var { a } = {"b":2};
console.log(a);//undefined

对象解构赋值也可以嵌套/添加默认值，写法类似数组

var {a:{b}} = {"a":{"b":1}};
console.log(b);//1

var {a,b=2} = {"a":1};
console.log(b);//2

字符串解构赋值

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

用途

1.交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];

2.从函数返回多个值

function a(){
	return {a:'aaa',b:'bbb'}
}
let {a,b} = a()
a// 'aaa'
b//'bbb'

3. 定义函数参数

function a({a,b}){
	console.log(a,b) //aaa, bbb
}
a({a:'aaa', b:'bbb', c:'ccc'})

4. 函数入参默认值

function a({a=‘aaa’}){
	console.log(a)  //aaa
}