Object deconstruction assignment

Brief introduction

• The elements of an array are arranged in order, and the value of a variable is determined by its position; while the attributes of an object are not in order, the variables must have the same name as the attributes in order to get the correct value.
• If the deconstruction fails, the value of the variable is equal to undefined
• The rule of deconstruction assignment is that as long as the value on the right side of the equals sign is not an object or an array, it is first converted to an object. Because undefined and null cannot be converted to objects, an error will be reported when they are deconstructed and assigned.

//Assignment is done according to variable name and attribute name. Only the same name holds, unlike array. If it is not found in sequence, it returns undefined.
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

---------------------------------------------------

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

The method of assigning an object to a variable

// Assign the console.log method to the log variable so that the log can also execute the console.log method
const { log } = console;
log('hello') // hello

Attribute and variable and object deconstruction assignment of es6 extension

• The internal mechanism of object deconstruction assignment is to find the same name attribute first, and then assign the corresponding variables. It is the latter, not the former, that is really assigned.

//Find the same attribute, foo, undefined, and assign if you have it.
//Instead of foo, foo is just a matching pattern to find the same attribute name on the right.
//The assignment is baz, which is the variable. After finding the same attribute, the assignment of the variable baz="aaa" is executed.
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
//compare
let { foo: foo } = { foo: 'aaa', bar: 'bbb' };
//Equivalent to let {foo}= {foo:'aaa', bar:'bbb'};
foo // "aaa"

Traversal assignment of a variable three times

//The first assignment corresponds to {loc: loc}= {loc: {start: {line: 1, column: 5}}}
//The second variable corresponds to {start: start}= {line: 1, column: 5}
//The third variable corresponds to {line: line}= {line: 1}
//The first and second are patterns, and the third is variables.
const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

Objects have the same default value as arrays

var {x = 3} = {};
//Equivalent to var {x: x= 3}= {x = undefind};
x // 3

------------------------------------------------------

var {x, y = 5} = {x: 1};
//Equivalent to var {x: x, y: y = 5}= {x: 1, y = undefind};
x // 1
y // 5

------------------------------------------------------

var {x: y = 3} = {x: 5};
y // 5

------------------------------------------------------

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

------------------------------------------------------

var {x = 3} = {x: null};
x // null

Attention Points of Object Deconstruction Assignment

// Wrong Writing
let x;
{x} = {x: 1};
// SyntaxError: syntax error

// Correct Writing
let x;
({x} = {x: 1});

//Look at the above feeling is similar, in fact, the first kind of error will be reported.
//Because the JavaScript engine interprets {x} as a block of code, a syntax error occurs. This problem can only be solved by not writing braces at the beginning and avoiding JavaScript interpreting them as blocks of code.

Deconstruction of Object Attributes for Arrays

//You can deconstruct assignments based on index
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
//Equivalent to let {0: first, [arr. length - 1]: last}= [0:1, 1:2, 2:3];
first // 1
last // 3