ES6 reading notes / deconstruction assignment of variables

Deconstruction assignment of array
ES6 allows you to extract values from arrays and objects and assign values to variables according to a certain pattern, which is called deconstructing.
In essence, this writing belongs to "pattern matching". As long as the patterns on both sides of the equal sign are the same, the variables on the left will be given corresponding values. Here are some examples of using nested arrays for deconstruction.

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

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

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

In both cases, the deconstruction is unsuccessful, and the value of foo will be equal to undefined.
Incomplete deconstruction, that is, the pattern to the left of the equal sign matches only part of the array to the right of the equal sign. In this case, deconstruction can still succeed.

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

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

In fact, as long as a data structure has an Iterator interface, it can be deconstructed and assigned in the form of array.
Deconstruction assignment allows default values to be specified.
Note that ES6 uses the strict equality operator (= = =) internally to judge whether a position has a value. Therefore, the default value will take effect only when an array member is strictly equal to undefined.

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

In the above code, if an array member is null, the default value will not take effect, because null is not strictly equal to undefined.

Deconstruction assignment of object
Deconstruction can be used not only for arrays, but also for objects.

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

There is an important difference between the deconstruction of objects and arrays. The elements of the array are arranged in order, and the value of the variable is determined by its position; The attributes of the object have no order, and the variable must have the same name as the attribute in order to get the correct value.

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

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

If the variable name is inconsistent with the property name, it must be written as follows.

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

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

The deconstruction assignment of an object is short for the following form

let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };

In other words, the internal mechanism of object deconstruction assignment is to find the attribute with the same name first, and then assign it to the corresponding variable. What is really assigned is the latter, not the former.

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

In the above code, foo is the matching pattern and baz is the variable. What is really assigned is the variable baz, not the pattern foo.
Object deconstruction can also specify default values.
The default value takes effect if the property value of the object is strictly equal to undefined.

Deconstruction assignment of string
Strings can also be deconstructed and assigned. This is because at this point, 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"

Deconstruction assignment of numeric and Boolean values
When deconstructing assignment, if there are numeric and Boolean values to the right of the equal sign, it will be turned into an object first.

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

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

In the above code, both numeric and Boolean wrapper objects have toString attribute, so the variable s can get the value.

The rule of deconstruction assignment is to convert the value to the right of the equal sign into an object as long as it is not an object or array. Since undefined and null cannot be converted into objects, an error will be reported when they are deconstructed and assigned.

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

Deconstruction assignment of function parameters
Arguments to functions can also be assigned using deconstruction.

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

add([1, 2]); // 3

Purpose of variable deconstruction assignment
(1) Exchange values of variables

let x = 1;
let y = 2;

[x, y] = [y, x];

(2) Returns multiple values from a function

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

(3) Definition of function parameters
Deconstruction assignment can easily correspond a set of parameters to variable names.
(4) Extract JSON data
Deconstruction assignment is particularly useful for extracting data from JSON objects.

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

(5) Default values for function parameters
(6) Traverse Map structure
(7) Specifying method of input module

Tags: Javascript angular ECMAScript

Posted on Tue, 30 Nov 2021 02:28:40 -0500 by racerxfactor