ES 6 Series 2: Deconstructed assignment of variables

“Code Tailor “provides technology related information and a series of basic articles for front-end developers. Follow the wechat public account” Rookie of Xiaohe Mountain “to get the latest articles.

preface

Before we begin, we would like to inform you that this article is a summary of the chapter “Deconstruction and Assignment of Variables” in ECMAScript6 introduction by Yifong Nguyen. If you already know the following items, you can skip this part and go directly to the topic exercises

• What is deconstruction assignment?
• Destruct assignment of arrays, objects, and strings
• Deconstructive assignment of values, bools, and function parameters

If you are a little bit forgotten about some parts, 👇🏻 is ready for you!

Learning links

Variable deconstruction assignment of learning

Summary to summarize

Deconstruction assignment

The destruct assignment syntax is a Javascript expression. By deconstructing assignments, attributes (values) can be taken from objects (arrays) and assigned to other variables.

Destruct assignment of arrays

• Basic usage

// ES5, to assign a value to a variable, the value can only be specified directly
let a = 1
let b = 2
let c = 3

//ES6 allows this
let [a, b, c] = [1.2.3] // The value can be extracted from the array and assigned to the variable according to the corresponding position.
Copy the code

Essentially, this is “pattern matching,” in which the variable on the left is assigned a corresponding value as long as the pattern on both sides of the equal sign is the same.

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

let [foo] = []
let [bar, foo] = [1]
Copy the code

• Incomplete deconstruction (pattern to the left of equals, matching only part of array to the right of equals)

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

let [a, [b], d] = [1[2.3].4]
a / / 1
b / / 2
d / / 4
Copy the code

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

/ / an error
let [foo] = 1
let [foo] = false
let [foo] = NaN
let [foo] = undefined
let [foo] = null
let [foo] = {}
Copy the code

In fact, any data structure that has an Iterator interface can be destructively assigned in the form of an array.

Object destructuring assignment

The elements of an array are arranged in order, and 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.

• Basic usage

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

let { baz } = { foo: 'aaa'.bar: 'bbb' }
baz // undefined
Copy the code

The order of the two variables to the left of the equals sign is different from the order of the two properties with the same name to the right of the equals sign, but it has no effect on the value at all. In the second example, the variable has no corresponding property of the same name, so it cannot get a value and finally equals undefined.

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

let { foo } = { bar: 'baz' }
foo // undefined
Copy the code

• Like arrays, deconstruction can also be used to nest deconstructed objects

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

Destruct assignment of a string

Strings can also deconstruct assignments. This is because at this point, the string is converted to an array-like object.

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

Array-like objects have a length attribute, so you can also deconstruct and assign to this attribute.

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

Deconstructive assignment of values and Bores

When deconstructing an assignment, if the value and Boolean are to the right of the equals sign, the object is converted first.

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

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

Destruct assignment of function arguments

• functionaddThe argument to is ostensibly an array, but the moment the argument is passed in, the array argument is resolved to form a variablexandy

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

add([1.2]) / / 3
Copy the code

• You can also use the default values

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]
Copy the code

The title self-test

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

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

Ii. The following program deconstructs the value of each variable after assignment as ()

const [a, b, c, d, e] = [1.2.'a'.'c']
Copy the code

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

The output 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}})Copy the code

'big', {x:0.y:0},25'small', {a: 1}, {b:1}
Copy the code

ES 6 series variable deconstruction assignment, we end here, thank you for your support to the author! Your attention and praise will be the strongest motivation for us to move forward! Thank you!