ES6 Series 2: Deconstruction and Assignment of Variables

"Code tailor" provides technical-related information and a series of basic articles for front-end developers. Follow the "Novices of Xiaohe Mountain" public account on WeChat to get the latest articles in time.

Preface

Before starting to learn, what we want to tell you is that this article is "Variable Deconstruction Assignment" book "Introduction to ECMAScript6" by Ruan Yifeng. If you have mastered the following knowledge items, you can skip it This link directly enters the exercise

• What is destructuring assignment?
• Destructuring and Assignment of Arrays, Objects, and Strings
• Deconstruction and assignment of numeric values, boolean values, and function parameters

If you have forgotten some parts, 👇🏻 is ready for you!

Learning link

Variable deconstruction assignment learning

Summary

Destructuring assignment

The destructuring assignment syntax is a Javascript expression. By destructuring and assigning values, attributes (values) can be taken out of objects (arrays) and assigned to other variables.

Destructuring and Assignment of Array

• Basic usage

// ES5，为变量赋值，只能直接指定值
let a = 1
let b = 2
let c = 3

//ES6，允许这样
let [a, b, c] = [1, 2, 3] //表示可以从数组中提取值，按照对应位置，对变量赋值。

Essentially, this type of writing belongs to "pattern matching", as long as the patterns on both sides of the equal sign are the same, the variable on the left will be assigned the corresponding value.

• If the deconstruction is unsuccessful, the value of the variable is equal to undefined

let [foo] = []
let [bar, foo] = [1]

• Incomplete deconstruction (the pattern on the left side of the equal sign only matches a part of the array on the right side of the equal sign)

let [x, y] = [1, 2, 3]
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4]
a // 1
b // 2
d // 4

• If the right side of the equal sign is not an array (or strictly speaking, not a traversable structure), then an error will be reported.

// 报错
let [foo] = 1
let [foo] = false
let [foo] = NaN
let [foo] = undefined
let [foo] = null
let [foo] = {}

In fact, as long as a certain data structure has an Iterator interface, it can be deconstructed and assigned in the form of an array.

Object destructuring assignment

The elements of the array are arranged in order, and the value of the variable is determined by its position; and the properties of the object have no order, and the variable must have the same name as the property in order to get the correct value.

• Basic usage

let { bar, foo } = { foo: 'aaa', bar: 'bbb' }
foo // "aaa"
bar // "bbb"

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

The order of the two variables on the left side of the equal sign is inconsistent with the order of the two attributes with the same name on the right side of the equal sign, but it has no effect on the value. The variable in the second example does not have a corresponding attribute with the same name, resulting in not getting a value, and finally equal to undefined.

• If the destructuring fails, the value of the variable is equal to undefined.

let { foo } = { bar: 'baz' }
foo // undefined

• Like arrays, destructuring can also be used for nested destructured objects

let obj = {
  p: ['Hello', { y: 'World' }],
}

let {
  p: [x, { y }],
} = obj
x // "Hello"
y // "World"

Destructuring and Assignment of String

Strings can also be deconstructed and assigned. This is because at this time, the string is converted into an array-like object.

const [a, b, c, d, e] = 'hello'
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

Objects like arrays have a length property, so this property can also be deconstructed and assigned.

let { length: len } = 'hello'
len // 5

Destructuring and Assignment of Numerical and Boolean Values

When destructuring assignment, if the right side of the equal sign is a numeric value and a boolean value, it will be converted to an object first.

let { toString: s } = 123
s === Number.prototype.toString // true

let { toString: s } = true
s === Boolean.prototype.toString // true

Destructuring assignment of function parameters

• The parameter of function add is an array on the surface, but the moment the parameter is passed in, the array parameter is decomposed into variables x and y

function add([x, y]) {
  return x + y
}

add([1, 2]) // 3

• You can also use the default value

function move({ x = 0, y = 0 } = {}) {
  return [x, y]
}

move({ x: 3, y: 8 }) // [3, 8]
move({ x: 3 }) // [3, 0]
move({}) // [0, 0]
move() // [0, 0]

Self-test

One: The output of the following code is ()

let obj = { a: 1, b: 2, c: { d: { e: 5 } } }
let {
  a,
  b,
  c: { d },
} = obj
console.log(d) // ?

Answer: {e: 5}

Objects are expanded by deconstruction and assignment, where multiple levels of nesting of object deconstruction and assignment are used, so the deconstruction corresponding to c is {d: {e: 5}} in the obj object, and the deconstruction corresponding to d contained in the c object should be The d in c in obj is {e: 5}.

---

2: The value of each variable after deconstruction and assignment in the following program is ()

const [a, b, c, d, e] = [1, 2, 'a', 'c']

Answer：

console.log(a) //1
console.log(b) //2
console.log(c) //'a'
console.log(d) //'c'
console.log(e) //undefined

• The analysis is based on the deconstruction principle of the array, and the left and right correspond one to one. When the number on the left is greater than the right, the value is assigned undefined

---

3: The output result of the following code is ()

function drawES2015Chart({ size = 'big', cords = { x: 0, y: 0 }, radius = 25 } = {}) {
  console.log(size, cords, radius)
}

drawES2015Chart()
drawES2015Chart({ size: 'small', cords: { a: 1 }, radius: { b: 1 } })

Answer：

'big',{x:0, y:0},25

‘small', {a: 1}, {b:1}

drawES2015Chart() : drawES2015Chart() not pass parameters, it uses the default values in the function size default value is 'big' ，cords default values are X {: 0, Y: 0}, radius default value is 25 drawES2015Chart({size: 'small', cords: {a: 1}, radius: {b: 1}}): drawES2015Chart ({size: ' small', cords: {a: 1}, radius: {b: 1}}) is passed in the value, so the default value is not used, the value of size is replaced by'small', and the value of cords becomes {a: 1 }, The value of radius becomes {b: 1}