Object Dstructuring.md

Object Destructuring

Object Destructuring

// before
const data = () => {
    return {
        a: 1,
        b: 2,
        c: 3
    }
}
var tmp = data();
var first = tmp.a;
var second = tmp.b;
var third = tmp.c;

// after
const data = () => {
    return {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: 5
    }
}
var tmp = data();
var {
    a: first,
    b: second,
    c: third,
    ...fourth
} = data();

Object Assignment Destructuring

const data = () => {
    return {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: 5
    }
}
var first, second;
{first, second} = data();

Object Default Assignment

说到默认值就要惊醒自己，要防止错误， 而防止错误的措施就是， 给数据源默认值

// before
const data = () => {
    return null;
}
var tmp = data() || {};
var first = tmp.a; // Throw Type Error
var second = tmp.b; // Throw Type Error
var third = tmp.c; // Throw Type Error

// after
const data = () => {
    return {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: 5
    }
}
var tmp = data();
var {
    a: first = 42,
    b: second,
    c: third,
    ...fourth
} = data() || {};

Nested Object Destructuring

// before
const data = () => {
    return {
        a: 1, 
        b: {
            c: 2,
            d: 3
        }
    };
}
var tmp = data() || {};
var first = tmp.a; 
var second = tmp.b.c;
var third = tmp.b.d;

// after
const data = () => {
    return {
        
        a: 1, 
        b: {
            c: 2,
            d: 3
        }
   }
}
var {
    a: first = 42,
    b: {
        c: second,
        d: thrid,
    },
    ...fourth
} = data() || {};

params arguments object

function data (tmp = {}) {
    var {
        a,
        b
    } = tmp;
}

function data ({
    a,
    b   
} = {})  {
}

Nested Object & Array Destructuring

var obj = {
    a: 1,
    b: {
        x: 2
    },
    c: [3, 4]
}

var {
    a,
    b,
    b: {
        x: w
    },
    c: [d, e]
} = obj;