A, arrays,

  • Deconstruction: Extract values from arrays and objects and assign values to variables according to a pattern.
// Essentially "pattern matching", as long as the pattern on both sides of the equal sign is the same, the left variable will be assigned the corresponding value. let [a, b, c] = [1, 2, 3]; let [foo, [[bar], baz]] = [1, [[2], 3]] foo //1 bar //2 baz //3Copy the code
  • If the deconstruction is unsuccessful, the value of the variable is equal to undefined
let [foo] = []
foo //undefined
Copy the code
  • If the right-hand side of the equals sign is not an array (non-traversal structure), an error will be reported.
let [foo] = 1;
let [foo] = null;
let [foo] = {};
Copy the code
  • For Set structures, arrays can also be destructively assigned
let[x, y, z] = new Set(['a', 'b', 'c']);
x //'a'
Copy the code
  • Destruct assignment allows you to specify default values
let [foo = true] = [];
foo //true
Copy the code
  • ES6 internally uses the strict equality operator (===) to determine whether a position has a value. Therefore, the default value is valid only if an array member is strictly equal to undefined.
let [x=1] =[undefined]; X //1 let [x=1] = [null] x //null // ifCopy the code
let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined
Copy the code

Second, the object

  • The elements of an array are arranged in order. The value of a variable is determined by its position. The attributes of an object have no order, and variables must have the same name as the attributes to get the correct value.
let {bar, foo} = {foo:'aaa', bar:'bbb'};
foo //"aaa"
bar //"bbb"
Copy the code
  • If the variable does not have the corresponding attribute name, it will not get the value, and finally equals undefined. (Deconstructing failure)
let {baz} = {foo:"aaa"};
baz //undefined
Copy the code
  • Object deconstruction assignment, it is very convenient to assign the method of an existing object to a variable.
const {log} = console;
log('hello') //hello
Copy the code
  • If the variable name does not match the attribute name, it must be written like this:
let obj = {first:'hello', last:'world'};
let {first:f, last:l} = obj;
f //"hello"
l //"world"
Copy the code
  • Deconstruction can also be used to nest objects that are deconstructed
  • The deconstructive assignment of an object can take inherited properties
const obj1 = {};
const obj2 = {foo:'bar'};
Object.setPrototypeOf(obj1,obj2);
const {foo} = obj1;
foo //"bar"
Copy the code
  • If you want to use an already declared variable to destruct an assignment, be careful
let x; {x} = {1} x: / / an error, because the js will {x} as a code block, thus syntax error (= {x} {1} x:) / / executed correctlyCopy the code

3. String

  • The string is replaced by an array-like object, which has a length property, so you can deconstruct and assign to it.
const [a, b, c] = "hi!"
a //h
b //i
c //!

let {length:len} = "hello";
len //5
Copy the code

Values and Booleans

  • If a value and a Boolean are to the right of the equals sign, the object is converted first
let {toString: s} = 123; s === Number.prototype.toString //true let {prop:x} = undefined //TypeError let {prop:y} = null //TypeError // Undefined and null cannot be converted into objectsCopy the code

5. Function parameters

function add([x, y]){ return x + y; } add([1, 2]); // 3 [[1, 2], [3, 4]].map(([a, b]) => a + b); // [3, 7]Copy the code

6. Parentheses

  • Parentheses are not allowed for the following three deconstruction assignments
  1. Variable declaration statement
// let [(a)] = [1]; let {x: (c)} = {}; let ({x: c}) = {}; let {(x: c)} = {}; let {(x): c} = {}; let { o: ({ p: p }) } = { o: { p: 2 } };Copy the code
  1. Function parameters
Function f([(z)]) {return z; Function f([z,(x)]) {return x; }Copy the code
  1. The mode of the assignment statement
{p: a}) = {p: 42}; ([a]) = [5]; [({p: a}), {x: c}] = [{}, {}];Copy the code
  • A case where parentheses can be used

The non-pattern part of an assignment statement that can be used.

[(b)] = [3]; {p: (d)} = {}); // Correct [(parseint.prop)] = [3]; / / rightCopy the code

Seven, purpose

  • Swap the values of variables
let x = 1;
let y = 2;
[x,y]=[y,x];
Copy the code
  • Returns multiple values from a function
Function example() {return [1, 2, 3]; } let [a, b, c] = example(); Function example() {return {foo: 1, bar: 2}; } let { foo, bar } = example();Copy the code
  • Definition of function parameters
Function f([x, y, z]) {function f([x, y, z]) {... } f([1, 2, 3]); Function f({x, y, z}) {... function f({x, y, z}) {... } f({z: 3, y: 2, x: 1});Copy the code
  • Extracting JSON data
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
Copy the code
  • Default values for function arguments
jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};
Copy the code
  • Traverse the Map structure
const map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is world for (let [key] of map) {//... } for (let [,value] of map) {//... }Copy the code
  • Specifies the method of input module
const { SourceMapConsumer, SourceNode } = require("source-map");
Copy the code