Go deep into the details of deconstruction and assignment of several data types in JS

Deconstruct assignment

What is deconstruction assignment

• deconstruction
  ： Can be separated from the values in an array or object

• assignment
  ： Assign values to variables based on the deconstructed data

stay ES5 Common variable assignment methods in ：

var a = 1;
var b = 2;


stay ES6 The method of deconstruction and assignment in , In a word, the process of deconstructing the assignment method is mirroring , The two sides mirror each other , The same position variables and values correspond to each other

let [a,b] = [1,2] //  Equivalent to the above


Using the deconstruction assignment method can make the assignment flexible , The deconstruction assignment will be explained below

An array of deconstruction

Nested deconstruction

js Allow members of arrays and objects to be arrays or objects , When the array is a nested array , The array can still be deconstructed and assigned

let [a,[b],c] = [1,[1,2],3]
console.log(a,b,c) // 1 1 3


The extension operator deconstructs

You can use in deconstruction

...

Extension operator

let [a,...b] = [1,2,3,4]
console.log(a,b)
// a = 1 b = [2,3,4]


Incomplete deconstruction

The two sides don't necessarily match , According to the actual needs , Deconstruct and assign values to it

let [, , a] = [1,2,3]
console.log(a) // 3


Unsuccessful deconstruction

When the target of deconstruction is other types, deconstruction is unsuccessful

let [a] = 1
console.log(a) // TypeError: 1 is not iterable


Or when the target assignment variable does not match the right deconstruction target , As follows ,

b

The value of is undefined, So deconstruction is also unsuccessful

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


About

interator

In an unsuccessful deconstruction, if the target of the deconstruction is a value , Then the error thrown is

1 is not iterable

, Translate ：

1 Is not repeatable

, Let's take a look at

interator

That is, the relationship between iterators and deconstruction assignment .

js There are built-in data structures that represent collections, such as ：Array,Object, Both contain

interator

, and

undefined

,

null

,

NaN

Etc. does not include

interator

Of , Deconstruction assignment cannot be applied to an object that does not contain

interator

Data structure of , And all contain

interator

All data deconstructions can be assigned by deconstruction

Deconstruction assignment with default values

Mismatches are included in unsuccessful deconstructions , In this case, you can use

The default value is

To solve , No matter what type of deconstruction assignment, variables can be assigned in advance , Avoid mismatches that cause unsuccessful deconstruction .

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


About

undefined

The problem of

When a variable is assigned a default value , The deconstruction target array contains only one undefined Under the circumstances , The variable will eventually be assigned the default value , But if it is

NaN

,

null

What would it be like in the case of .

let [c = 1] = [NaN]
console.log(c) // NaN
let [c = 1] = [null]
console.log(c) // null


The reason for this is that in ES6 Is used in

===

To determine whether a position contains a value , It's caused

NaN

,

null

Not strictly equal to

undefined

The situation of .

Object to deconstruct

Different from array deconstruction

Because arrays have subscripts , But the object does not , Objects can only depend on property names , So when the object is deconstructed and assigned , The variable name should be consistent with the target attribute name in the deconstruction object

let {name} = {name:" Pig ruffian bully "}
console.log(name) //  Pig ruffian bully


Variable name does not match property name

When refactoring older code, you will encounter irreversible situations , So we can use it

:

To solve this irreversible problem

let {name:difname} = {name:" Pig ruffian bully "}
console.log(difname) //  Pig ruffian bully


In fact, this is based on the essence of the deconstruction pattern, that is

Pattern matching

To achieve , Use

name

To match the attributes in the object to complete the change of variable name

Deconstruction assignment of multi-level nested objects

let people = {
 name:" Pig ruffian bully ",
 like:{
 community:"juejin",
 code:"js"
 }
}
let {name,like:{code}} = people
console.log(name,code) //  Pig ruffian bully  js


Objects are nested at multiple levels , You can deconstruct the required attributes according to the matching layer by layer , For example, the top wants to get

code

, So first match to

like

object , Right again

like

Object is deconstructed and assigned

code

Pattern problem

Through the above example, the deconstruction method of multi-layer objects is clear , Get the next layer of attributes or objects through pattern matching , So the pattern here is

like

It is not worth getting , If we print it, it will appear

like is not defined

The problem of , This is something we should pay attention to .

String deconstruction

As mentioned above, data types that can be deconstructed and assigned include array, object and other data types with iterators , And strings can be deconstructed just like the first two , It's because during the deconstruction assignment , The string is converted to

An array like object

, What would an array like object be , So let's see .

let str = " Pig ruffian bully "
let {1:first} = str
console.log(first) //  Ruffian


This is a very interesting phenomenon , Through pattern matching , Use 1 Get the ruffian , This place can roughly understand why it is called

An array like object

In addition, you can also use the array form of deconstruction

let str = " Pig ruffian bully "
let [a] = str
console.log(a) //  The pig


We can also get the properties of strings through object deconstruction , For example, the length of a string

let str = " Pig ruffian bully "
let {length} = str
console.log(length) // 4


Numeric and Boolean deconstruction

The reason that numeric and Boolean values can be assigned by deconstruction is that they can be converted into objects before deconstruction

let { toFixed:a} = 123
console.log(a) // toFixed() { [native code] }


Some methods and attributes of numerical values can be directly deconstructed, such as the above deconstructed

toFixed

Method

Use prototype chain to judge

The above deconstructs

toFixed

Method , Here we can judge the similarities and differences between the two through the prototype chain

console.log(a === Number.prototype.toFixed) // true


Obvious , The two are equivalent , This shows that before deconstruction, the value will be transformed into an object form , Contains its properties and methods derived from the prototype

Boolean value deconstruction is the same as numerical value deconstruction

Deconstruction of function parameters

Function parameter deconstruction is actually a combination of function and previous deconstruction , At least that's what I think

function add([x,y]) {
 return x+y
}
add([1,2]) // 3


But what is the practical use of this way of deconstruction , What's the difference with ordinary variable parameters , Please see the following example

let arr = [[1,2],[2,3]]
arr.map((item) => item[0]+item[1])


We use map Traverse a nested array , Then add the members in each member array , This is achieved using the normal parameter method , So let's use deconstruction assignment to see .

let arr = [[1,2],[2,3]]
arr.map(([a,b]) => a+b)


This is very comfortable , No complex subscripts are required to locate array members , Directly use the deconstruction assignment to split .

Deconstructive ambiguity

The process of deconstruction and assignment requires judgment

Pattern

And

expression

, You can't know in advance , Must pass

===

To make a strict judgment in order to get what is the next operation

reference

• ES6 Introduction to standards, Third Edition