Destructuring Objects and Arrays in JavaScript-JS Tutorial-php.cn

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:

const myArray = ['a', 'b', 'c'];

Copy after login

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

const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'

Copy after login

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

const [one, , three] = myArray;

// one = 'a', three = 'c'

Copy after login

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

const [one, ...two] = myArray;

// one = 'a', two = ['b', 'c']

Copy after login

Deconstructing object

Deconstruction also applies to objects:

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
// ES6 解构示例
const {one, two, three} = myObject;
// one = 'a', two = 'b', three = 'c'

Copy after login

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:

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};

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

// first = 'a', second = 'b', third = 'c'

Copy after login

Deconstruct nested objects

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

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/'
*/

Copy after login

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:

// 这会失败
{ a, b, c } = myObject;

Copy after login

You have to declare variables, for example:

// 这可以工作
const { a, b, c } = myObject;

Copy after login

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

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

Copy after login

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

// 这会失败
let a;
let { a, b, c } = myObject;

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

Copy after login

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:

// ES5
var a = 'one', b = 'two', c = 'three';

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

Copy after login

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:

var a = 1, b = 2;

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

// a = 2, b = 1

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

// a = 1, b = 2

Copy after login

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

const myArray = ['a', 'b', 'c'];

Copy after login

Default function parameters

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

const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'

Copy after login

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

const [one, , three] = myArray;

// one = 'a', three = 'c'

Copy after login

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

const [one, ...two] = myArray;

// one = 'a', two = ['b', 'c']

Copy after login

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

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
// ES6 解构示例
const {one, two, three} = myObject;
// one = 'a', two = 'b', three = 'c'

Copy after login

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:

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};

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

// first = 'a', second = 'b', third = 'c'

Copy after login

for-of loop

Consider an array of book information:

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/'
*/

Copy after login

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

// 这会失败
{ a, b, c } = myObject;

Copy after login

Deconstruction assignment provides further enhancements, such as:

// 这可以工作
const { a, b, c } = myObject;

Copy after login

regular expression processing

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

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

Copy after login

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!