5. 解构赋值

解构赋值

解构赋值是对赋值运算符的一种扩展 ，它通常针对数组对象来进行操作，优点是简洁易读

数组解构赋值

es5为变量赋值，只能挨个赋值

var a = 1;
var b = 2;
var c = 3;

es6允许我们这样写

let [a,b,c] = [1,2,3];

如果解构不成功，变量和值不能一一对应，变量的值就等于undefined

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

对象解构赋值

解构可以用于对象，结构对象的赋值，是和对象中的属性一一对应的

比如从后端获取到json对象数据，这个方法可以很简洁的从json以相同的属性名获取到数据，或者说解构出数据

let node = {
    type:'identifier',
    name:'foo'
}
//es5写法
var type = node.type;
var name = node.name;
//es6对象解构写法
let {type,name} = node;
console.log(type,name)// identifier  foo

对象的解构赋值时，可以忽略不需要解构的属性，和使用剩余运算符解构

使用剩余运算符解构出来的是 对象 而不是 数组

let obj = {
    a: 'Max',
    b: [],
    c: 'hellow world'
}
// let { a } = obj;//可忽略b,c的属性进行解构
let { a, ...x } = obj;//使用剩余运算符 将a之后的属性赋值到一个新的对象中
console.log(a);// Max
console.log(x);//{b: Array(0), c: "hellow world"}
console.log(x.c);//hellow world

提取json数据

解构赋值对提取json对象中的数据尤其有用

let jsonData = {
    id: 42,
    status: 'ok',
    data: [867, 6543]
}
let { id, status } = jsonData; //{}内只需要放入需要提取的属性名
console.log(id); //42
let { data: number } = jsonData; 
//如果需要对jsonData内的属性进行重新取名只需要这样写,就可以给:后面的属性赋上该属性的值
console.log(number); //[867, 6543]

输入模块的指定方法

加载模块时，往往只需要指定输入哪些方法，解构赋值使得输入语句非常清晰

const {getJson，getBoolean} = require('xxx');

函数解构赋值

es5中函数只能返回一个值，如果要返回多个值，只能将他们放在数组或对象里返回

function fn1() {
    let a = 1, b = 2, c = 3;
    return arr = [a, b, c];
}
fn1();
console.log(arr[1]); //2
//---------------------------------------------
function fn2() {
    let x = 1, y = 2, z = 3;
    return book = {
        x: x,
        y: y,
        z: z
    }
}
fn2();
console.log(book.y);//2

es6中，有了解构赋值，就可以非常方便的单独取出这些属性以及其赋值

//函数返回一个数组，通过函数解构赋值
function fn1() {
    let a = 1, b = 2, c = 3;
    return [a, b, c];
}
let [a, b, c] = fn1();
console.log(a); //1
console.log(b); //2
console.log(c); //3
//-------------------------------------------------
//函数返回一个对象，通过函数解构赋值
function fn2() {
    let x = 1, y = 2, z = 3;
    return {
        x: x,
        y: y,
        z: z
    }
}
let { x, y, z } = fn2()
console.log(x); //1
console.log(y); //2
console.log(z); //3

解构赋值可以方便的将一个数组或对象赋值给函数

//参数是一组有次序的数组
let arr = [1, 2, 3];
let q = 3,
    w = 4;
function fn1(q, [x, y, z], w) {
    return q + x + y + z + w;
}
console.log(fn1(q, arr, w));//13

//参数是一个没有顺序的对象
let obj = {
    a: 1,
    b: 2,
    c: 3
};
let q = 3,
    w = 4;
function fn2(q, { b, a, c }, w) {
    return q + a + b + c + w;
}
console.log(fn2(q, obj, w));//13