Destructuring Objects and Arrays in JavaScript

JavaScript deconstruction and assignment: simplify code and improve readability

JavaScript's deconstructed assignment allows you to extract individual elements from an array or object using concise syntax and assign them to variables, simplifying the code and making it clearer and easier to read.

Deconstruction and assignment are widely used, including processing API responses, functional programming, and in frameworks and libraries such as React. It can also be used for nested objects and arrays, default function parameters, variable value exchange, return multiple values ​​from a function, for-of loops, and regular expression processing.

When using deconstructed assignments, you need to pay attention to the following points: You cannot start a statement with curly braces, because it looks like a block of code. To avoid errors, either declare the variable or use brackets if the variable is declared. Also be careful to avoid mixing declared and undeclared variables.

How to use deconstruction assignment

Deconstructing array

Suppose we have an array:

<code class="language-javascript">const myArray = ['a', 'b', 'c'];</code>

Deconstruction provides an easier and less error-prone alternative to extracting each element:

<code class="language-javascript">const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'</code>

You can ignore certain values ​​by omitting the value name when assigning, for example:

<code class="language-javascript">const [one, , three] = myArray;

// one = 'a', three = 'c'</code>

Or use the rest operator (...) to extract the remaining elements:

<code class="language-javascript">const [one, ...two] = myArray;

// one = 'a', two = ['b', 'c']</code>

Deconstructing object

Deconstruction also applies to objects:

<code class="language-javascript">const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
// ES6 解构示例
const {one, two, three} = myObject;
// one = 'a', two = 'b', three = 'c'</code>

In this example, the variable names one, two, and three match the object property name. We can also assign attributes to variables of any name, for example:

<code class="language-javascript">const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};

// ES6 解构示例
const {one: first, two: second, three: third} = myObject;

// first = 'a', second = 'b', third = 'c'</code>

Deconstruct nested objects

More complex nested objects can also be referenced, for example:

<code class="language-javascript">const meta = {
  title: 'Destructuring Assignment',
  authors: [
    {
      firstname: 'Craig',
      lastname: 'Buckler'
    }
  ],
  publisher: {
    name: 'SitePoint',
    url: 'https://www.sitepoint.com/'
  }
};

const {
    title: doc,
    authors: [{ firstname: name }],
    publisher: { url: web }
  } = meta;

/*
  doc   = 'Destructuring Assignment'
  name  = 'Craig'
  web   = 'https://www.sitepoint.com/'
*/</code>

This seems a bit complicated, but remember that in all deconstructed assignments:

• The left side of the assignment is the deconstruction target - the pattern that defines the assigned variable
• To the right of the assignment is the deconstructed source - an array or object containing the extracted data

Precautions

There are some other things to note. First, you can't start the statement with curly braces, because it looks like a code block, for example:

<code class="language-javascript">// 这会失败
{ a, b, c } = myObject;</code>

You have to declare variables, for example:

<code class="language-javascript">// 这可以工作
const { a, b, c } = myObject;</code>

Or use brackets if the variable has been declared, for example:

<code class="language-javascript">// 这可以工作
({ a, b, c } = myObject);</code>

You should also be careful to avoid mixing declared and undeclared variables, such as:

<code class="language-javascript">// 这会失败
let a;
let { a, b, c } = myObject;

// 这可以工作
let a, b, c;
({ a, b, c } = myObject);</code>

The above are the basic knowledge of deconstruction. So, under what circumstances does it work? I'm glad you asked this question.

Deconstructed use cases

Simpler statement

Variables can be declared without explicitly defining each value, for example:

<code class="language-javascript">// ES5
var a = 'one', b = 'two', c = 'three';

// ES6
const [a, b, c] = ['one', 'two', 'three'];</code>

Authentic, the deconstructed version is longer. It's easier to read, although it may not be the case for more items.

Variable value exchange

Swap values ​​require a temporary third variable, but using deconstruction is much easier:

<code class="language-javascript">var a = 1, b = 2;

// 交换
let temp = a;
a = b;
b = temp;

// a = 2, b = 1

// 使用解构赋值交换
[a, b] = [b, a];

// a = 1, b = 2</code>

You are not limited to two variables; you can rearrange any number of items, such as:

<code class="language-javascript">const myArray = ['a', 'b', 'c'];</code>

Default function parameters

Suppose we have a prettyPrint() function to output our meta object:

<code class="language-javascript">const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'</code>

If there is no deconstruction, you need to parse this object to ensure that appropriate default values ​​are available, for example:

<code class="language-javascript">const [one, , three] = myArray;

// one = 'a', three = 'c'</code>

Now, we can assign default values ​​to any parameter, for example:

<code class="language-javascript">const [one, ...two] = myArray;

// one = 'a', two = ['b', 'c']</code>

But we can use deconstruction to extract values ​​and assign default values ​​if necessary: ​​

<code class="language-javascript">const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
// ES6 解构示例
const {one, two, three} = myObject;
// one = 'a', two = 'b', three = 'c'</code>

I'm not sure if this is easier to read, but it's obviously shorter.

Return multiple values ​​from function

The

function can only return one value, but this can be a complex object or a multidimensional array. Deconstructing assignment makes this more practical, for example:

<code class="language-javascript">const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};

// ES6 解构示例
const {one: first, two: second, three: third} = myObject;

// first = 'a', second = 'b', third = 'c'</code>

for-of loop

Consider an array of book information:

<code class="language-javascript">const meta = {
  title: 'Destructuring Assignment',
  authors: [
    {
      firstname: 'Craig',
      lastname: 'Buckler'
    }
  ],
  publisher: {
    name: 'SitePoint',
    url: 'https://www.sitepoint.com/'
  }
};

const {
    title: doc,
    authors: [{ firstname: name }],
    publisher: { url: web }
  } = meta;

/*
  doc   = 'Destructuring Assignment'
  name  = 'Craig'
  web   = 'https://www.sitepoint.com/'
*/</code>

ES6's for-of is similar to for-in, except that it extracts each value instead of index/key, for example:

<code class="language-javascript">// 这会失败
{ a, b, c } = myObject;</code>

Deconstruction assignment provides further enhancements, such as:

<code class="language-javascript">// 这可以工作
const { a, b, c } = myObject;</code>

regular expression processing

Regular expression functions (such as match) return an array of matches, which can constitute the source of deconstructed assignments:

<code class="language-javascript">// 这可以工作
({ a, b, c } = myObject);</code>

Further reading

• Deconstruction assignment – ​​MDN
• Is there any performance loss in deconstructing assignments using JavaScript - Reddit
• for...of statement – ​​MDN

Frequently Asked Questions about ES6 Deconstruction Assignment (FAQ)

(The FAQ part is omitted here because the length is too long and does not match the pseudo-original goal. The content of the FAQ part is highly coincidental with the original text, and direct retention will cause the pseudo-originality to be too low.)

By making statement adjustments, synonyms replacement and paragraph reorganization of the original text, pseudo-original processing of the original text is completed, and the original format and location of the picture are retained.

The above is the detailed content of Destructuring Objects and Arrays in JavaScript. For more information, please follow other related articles on the PHP Chinese website!