Destruct assignment of arrays

Basic usage

ES6 allows you to extract values from arrays and objects and assign values to variables in a pattern called structure.

Before ES6, if you wanted to assign a value to a variable, you could only specify its value as follows:

let a = 1;
let b = 2
Copy the code

In ES6 it could be written like this:

Let [a,b] = [1,2] // a = 1, b = 2Copy the code

Note that the values of both sides of the equation must be equal, so that the variables on the left are assigned the corresponding values on the right. If they are not equal, the values on the left will be undefined, as follows:

Let [foo,[[bar],baz]] = [1,[[2],3] foo // 1 bar // 2 baz // 3 note: only the left and right sides must be equal, the quantity can not be equal. Let [a, b, c] = [1, 2] a = 1, b = 2, c = undefined let [a, c] = [1, 2, 3] a = 1, c = 3 let [a, b]... = [1, 2, 3] a = 1, B = [2, 3] let [a] = [] let [b, a] = [1] a = is undefinedCopy the code

Another case where the left side of the equals sign is an array, but the right side of the equals sign is another value, will result in an error. As follows:

let [a] = 1; let [a] = false; let [a] = NaN; let [a] = undefined; let [a] = null; let [a] = {}; All the above errors will be reportedCopy the code

But if the left side is an array and the right side is a string, the first index of the string is taken

let [a] = '121321'  a = '1'
let [a] = 'adgasg'  a = 'a'
Copy the code

For Set structures, we can also use array destructuring assignments.

Let (x, y, z) = new Set ([1, 2, 3]) x = 1, y = 2, z = 3Copy the code

The default value

Destruct assignment allows you to specify default values

Let [a = 3] = [] / / a: 3 let [= 3, b] = [4] / / a: 3 b: 4 let [= 3, b] = [5, 4] / / a: 5 b: 4Copy the code

special

let [a = 3] = [undefined]   // a:3
let [a = 3] = [null]        // a:null
Copy the code

Tips: In ES6, the strict equality operator is used. In structural assignments, if default values are required, the default value should be used only when the value of equal is undefined, otherwise the assignment should be used. Null above is not exactly equal to undefined++

If the default assignment is an expression, the value of the expression will be taken only if the assignment to the right of the equals sign does not have a value of undefined, as follows:

function demo(){
    console.log('demo')
}

let [a = demo()] = []   // a: demo
let [a = demo()] = [1]  // a : 1
Copy the code

Object destructuring assignment

The difference with arrays is that the array elements must be in the same position as the assigned element in order to correctly assign, while object deconstruction assignment is that the variables and attributes on both sides of the equal sign have the same name, which means that the correct value is obtained. Otherwise, the value is undefined

Let {a, b} = {a: '23' b: '3'} let {a, b} = {b: '3'. A: '23'} / / both the value of the above is a: b: 3 let {a, b} = {a: '3', c: 'd'} / / a: 3 b: undefinedCopy the code

Object destructuring assignment also includes assigning a method of an existing object to a new variable, as follows:

Let {sine,cos} = Math // The sine cos method in Math assigns the variable sine cos let {log} = console // log(2) === console.log(2)Copy the code

If the variable name to the left of the equal sign cannot be the same as the attribute name of the object to the right of the equal sign, it must be written in the following format:

Let {a:b} = {a:'ss'} // b: ss //a is the attribute name, b is the actual assigned variable nameCopy the code

Object destructions can also be nested, as follows:

The first: the let obj = {p: [' Hello '{y:' world '}]} let {p: [x, {} y]} = obj / / x: Hello, y: Const a = {loc: const a = {loc: const a = {loc: const a = {loc: const a = {loc: const a = {loc: const let {p,:[x,{y}]} = obj {t: 1, b: {c: 1, d: 2}}} let {loc: {t, b: {c, d}}} = a or let {loc, loc: {t, b, b: {c, d}}} = aCopy the code
Nested assignment
let o = {}, arr = []

({foo:o.prop,bar: arr[0]} = {foo:123,bar:true})
//o: 123, arr = [true]
Copy the code

If the destruct pattern is a nested object, an error will be reported if the parent property of the child object does not exist, as follows:

Let {foo:{bar}} = {baz:'baz'Copy the code

The default value

let {x = 3} = {} // x: 3 let {x,y = 5} = {x : 1} // x: 1, y: 5 let {x: y = 5} = {} // y = 5 let {x: y = 5} = {x : Let {x = 5} = {x: 0} //y = 1 let {x: 0} = {x: 0} //y = 1 let {x: 0} = {x: 0} //y = 1 5 let {x = 4} = {x: null} // x: null is strictly equal to the default value only if the right side is undefinedCopy the code
Note:

1) You cannot use a declared variable to destruct an assignment because it is already a code block.

Destruct assignment of a string

If the assignment object is an array, the string is split into array formats that correspond to the assignment

Let [a,b] = 'ha' // a = h,b = a; let {length:len} = '12121' // len = 5Copy the code

Deconstructive assignment of values and Bores

If there’s a number or a Boolean on the right hand side of the equals sign, it’s converted to an object or everything else is converted to an object except for arrays and objects, null and undefined. As follows:

let {t:s} = 123
let {t: s} = true
Copy the code

Destruct assignment of function arguments

The function add ((x, y)) {return x + y} the add ([3, 5)) / / 8 [[3, 5], [6, 7]]. The map (((a, b)) = > a + b) / / 8, 13 function m ({x = 3, Y = {}) = 4} {return} [x, y] m (8} {x: 33, y:) / / [8] 33 m (32} {x:) / / / 32, 4 m ({}) / / [3, 4] m () / / [3, 4] the function m (= {x, y} {x = 0, y = 0} {return} [x, y] m (8} {x: 33, y:) / / [33] / / instead of the right of the x: 0. ({x:32}) // [32,undefined] // {x:32}} Because you didn't assign undefined m({}) // [undefined,undefined] // take the default values of left x and y, because you didn't assign undefined m() // [0,0] // didn't pass the value, use its own assignment is 0Copy the code

other

A case where parentheses cannot be used

  1. Variable declaration statement
  2. Function parameters
  3. The mode of the assignment statement

A case where parentheses can be used

  1. Parentheses can be used for the non-pattern part of an assignment statement

Deconstruct the purpose of assignment

  1. Swap the values of variables
  2. Returns multiple values from a function
  3. Definition of function parameters
  4. Extract JOSN data
  5. Default values for function arguments
  6. Traverse the Map structure
  7. Specifies the method of input module

Welcome to pay attention to the public account [Xiaoyao students]

ES6 Introduction series

ES6 Introduction to let and cont