JS ES new feature of variable decoupling assignment

1. Decoupled assignment of arrays

1.1 What is array decoupling assignment?

ECMAScript 2015 allows values ​​to be extracted from arrays and objects and assigned to variables according to a certain pattern, which is called decoupled assignment.

Prior to ECMAScript 2015, assigning values ​​to variables was done as follows:

let a = 1;
let b = 2;
let c = 3;

ECMAScript 2015 allows the following.

let [a, b, c] = [1, 2, 3];

ECMAScript 2015 's decoupled assignment is essentially pattern matching. The pattern on both sides of the assignment operator is the same, and the variable on the left will be assigned the value of the corresponding position.

1.2 Array decoupling assignment failed

If the decoupled assignment fails, the value of the variable is equal to undefined. The sample code is as follows:

// If the variable at a certain index value in the array does not have a corresponding index value in the array on the right side of the = operator, the decoupling assignment fails and its value is undefined
let [v] = []
let [a, b] = [1]
console.log(v, a, b); // undefined 1, undefined

If you want to solve the problem of decoupled assignment failure, you need to keep the number on the left and right sides of the assignment operator consistent.

1.3 Incomplete Decoupling Assignment

The so-called incomplete decoupled assignment means that the number in the right array of the assignment operator is greater than the number in the left array, causing some variables in the right array to become invalid, but in this case the decoupled assignment will still succeed.

The sample code is as follows:

// The number of variables on the left side of the assignment operator is less than the number of values ​​on the right side let [a, b, c] = [1, 2, 3, 4] // The decoupled assignment is still successful console.log(a, b, c); // 1 2 3

1.4 Default Values

Decoupling assignments allows for specifying default values. The sample code is as follows:

/* 
 * Decoupled assignment allows specifying default values* The syntax is as follows* let [var1 = value1, var2 = value2 ,...] = [val1, val2,...]
   var1, var2 represent variable names value1, value2 represent default values ​​val1, val2, represent specified values*/
let [a = 1, b = 2] = [100]
console.log(a, b); // 100 2

One thing worth noting when using default values ​​is that ECMAScript6 uses the === operator to determine whether the value at the specified position is equal to undefined . Only when they are all equal to undefined, the default value will take effect.

The test code is as follows:

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

When we use the null value, although null also means empty, null !== undefined . So our default value will not take effect.

The test code is as follows:

let [a = 1, b = 2] = [100, null]
console.log(a, b); // 100 null

1.5 Complex situations of array decoupling assignment

Since JavaScript is a weakly typed language, any type is allowed on the right side of the assignment operator, which results in the following special cases:

Case 1: The right side of the operator is a function. The sample code is as follows

// 1. The right side of the operator is a function let [a, b] = [1, function () {
  return 10;
}]
console.log(b()); // 10

Case 2: The right side of the operator is an object. The sample code is as follows

// 2. The right side of the operator is an object let [a, b] = [1, {
  name: 'Fox Demon Little Matchmaker'
}]
console.log(b); // { name: 'Fox Demon Little Matchmaker' }

Case 3: Function array on the right side of the operator, the sample code is as follows

// 3. The right side of the operator contains an array let [a, b] = [1, [2, 3]]
console.log(b); // [ 2, 3 ]

Case 4: Both sides of the operator contain arrays. The sample code is as follows

// 4. The operator contains arrays on both sides. The sample code is as follows: let [a, [b, c]] = [1, [2, 3]]
console.log(b); // 2

2. Decoupling assignment of objects

The decoupled assignment of objects is achieved by achieving a one-to-one correspondence between the variable name and the object's attribute name. The sample code is as follows:

/*
  * Decoupled assignment of objects - extract values ​​from objects and assign values ​​to variables! The variable names must correspond one-to-one with the property names of the object, otherwise it will fail.
*/
let {
  x,
  y
} = {
  x: 10,
  y: 20
}
console.log(x, y); //10 20

It is worth noting that the format on both sides of the assignment operator needs to be consistent.

2.1 Special Cases of Object Decoupling Assignment

Since JavaScript is a weakly typed language, any type is allowed on the right side of the assignment operator, which results in the following special cases :

Case 1: The right side of the operator is a function. The sample code is as follows

// 1. The right side of the operator is a function let { a, b } = {
  a: 1,
  b: function () {
    return 10;
  }
}
console.log(b()); // 10

Case 2: The right side of the operator is an object. The sample code is as follows

// 2. The right side of the operator is an object let {a, b} = {
  a: 1,
  b: {
    name: 'ywanzhou'
  }
}
console.log(b); // { name: 'ywanzhou' }

Case 3: Function array on the right side of the operator, the sample code is as follows

// 3. The right side of the operator contains an array let {a, b} = {
  a: 1,
  b: [1, 2]
}
console.log(b); //[ 1, 2 ]

Case 4: There are objects on both sides of the operator. The sample code is as follows

// 4. Both sides of the operator contain objects let {
  m: {
    name,
    age
  },
  n
} = {
  m: {
    name: 'test',
    age: 20
  },
  n: 20
}
console.log(name, age); // test 20

2.2 Decoupling assignment failure

If the decoupled assignment fails, the value of the variable is equal to undefined. The sample code is as follows:

// Decoupling assignment failed let {
  a,
  b
} = {
  a: 10
}
console.log(b);

2.3 Incomplete Decoupling Assignment

The so-called incomplete decoupled assignment means that the number of attributes in the object on the right side of the assignment operator is greater than the number of attributes in the object on the left side, resulting in some variables of the attributes in the object on the right side becoming invalid, but in this case the decoupled assignment will still succeed.

// Incomplete decoupling assignment let {
  a
} = {
  a: 10,
  b: 20
}
console.log(a);

2.4 Default Values

Decoupling assignments allows for specifying default values. The sample code is as follows:

// default value let {
  a,
  b = 100
} = {
  a: 10,
  b: 20
}
console.log(b);

3. Decoupled assignment of strings, numbers, and Boolean values

3.1 String decoupling assignment

Strings can also be destructured. This is because at this point, the string is converted into an array-like object.

let [h1, y, x] = "A bowl of Zhou"
console.log(h1, y, x, h2); // A bowl of Zhou

3.2 Decoupled assignment of numeric and Boolean values

If you directly perform decoupled assignment on numeric values/Boolean values, an exception will be thrown. When operating on numeric values ​​and Boolean values, if the right side of the assignment operator is a numeric value or Boolean value, it will be converted into an object first.

// let [a] = 100; // Throws an exception with the description TypeError: 100 is not iterable
// console.log(a);
// To decouple the assignment of Boolean or numerical values, you need to change them to object types.
let {
  toString: b
} = 1;
console.log(b === Number.prototype.toString); // true

let {
  toString: c
} = true;
console.log(c === Boolean.prototype.toString); // true

The rule of destructuring assignment is that as long as the value on the right side of the equal sign is not an object or an array, it is first converted to an object. Since undefined and null cannot be converted into objects, deconstructing and assigning them will result in errors.

4. Decoupling assignment of functions

Function parameters can also be assigned using destructuring. The sample code is as follows:

// Using array function f([a, b]) {
  console.log(a, b);  
}
f([10, 20]) // 10 20
//Use object function fn({
  a,
  b
}) {
  console.log(a, b);
}
fn({
  a: 10,
  b: 20
}) // 10 20

5. The problem of parentheses

Although decoupled assignment is convenient, it is not easy to parse. For the compiler, there is no way to know from the beginning whether a formula is a pattern or an expression. It must be parsed to (or not parsed to) the equal sign to find out.

The resulting problem is how to handle parentheses that appear in the pattern. ECMAScript 2015 rule is that parentheses must not be used whenever there is a possibility of destructuring ambiguity.

However, this rule is actually not that easy to identify and is quite troublesome to deal with. Therefore, it is recommended that you avoid placing parentheses in patterns whenever possible.

5.1 Cases where parentheses cannot be used

Parentheses cannot be used in the following three situations

Case 1: Variable declaration statement, the sample code is as follows

// The following situations will all result in errors let [(a)] = [1];

let {x: (c)} = {};
let ({x: c}) = {};
let {(x: c)} = {};
let {(x): c} = {};

let { o: ({ p: p }) } = { o: { p: 2 } };

The above six statements will all report errors because they are all variable declaration statements and parentheses cannot be used in patterns.

Case 2: As a function parameter

Function parameters are also considered variable declarations and therefore cannot have parentheses.

// Error function f([(z)]) { return z; }
// Error function f([z,(x)]) { return x; }

Case 3: Pattern of assignment statement

// All errors ({ p: a }) = { p: 42 };
([a]) = [5];

The above code puts the entire pattern in parentheses, resulting in an error.

// Error [({ p: a }), { x: c }] = [{}, {}];

The above code puts part of the pattern in parentheses, resulting in an error.

5.2 When parentheses can be used

There is only one situation where parentheses can be used: in the non-pattern part of an assignment statement.

[(b)] = [3]; // Correct({ p: (d) } = {}); // Correct[(parseInt.prop)] = [3]; // Correct

The above three lines of statements can all be executed correctly because, firstly, they are assignment statements, not declaration statements; secondly, their parentheses are not part of the pattern. In the first line of statements, the pattern is to take the first member of the array, regardless of the parentheses; in the second line of statements, the pattern is p, not d; the third line of statements has the same nature as the first line of statements.

6. The usefulness of variable decoupling assignment

There are many uses for decoupling variable assignments. Here are a few common examples.

6.1 Swapping variable values

If there is no decoupling assignment, the exchange variable needs to be completed with the help of a third variable. The sample code is as follows:

var a = 10,
  b = 20;

var c = a;
a = b
b = c
c = null /// Release variables console.log(a, b); // 20 10

This is done with the help of variable decoupling assignment. The sample code is as follows:

let a = 10,
  b = 20;
[a, b] = [b, a]
console.log(a, b); // 20 10

Using this approach is not only concise, but also easy to read and has clear semantics.

6.2 Returning multiple values ​​from a function

A function can only return one value. If you want to return multiple values, you can only return them in an array or object. With destructuring assignment, it is very convenient to extract these values.

The sample code is as follows:

// Return an array function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

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

6.3 Definition of function parameters

Destructuring assignment makes it easy to associate a set of parameters with variable names.

// The parameters are an ordered set of values ​​function f([x, y, z]) {
  console.log(x, y, z);
}
f([1, 2, 3]); // 1 2 3

// The parameters are an unordered set of values ​​function fn({x, y, z}) {
  console.log(x, y, z);
}
fn({
  z: 3,
  y: 2,
  x: 1
}); // 1 2 3

6.4 Extracting JSON Data

Destructuring assignment is particularly useful for extracting data from JSON objects.

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

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

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

This is the end of this article about the new feature of JS ES: decoupled variable assignment. For more information about decoupled ES variables, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!