Shulou(Shulou.com)06/03 Report--

本篇文章给大家分享的是有关JavaScript的解构用法有哪些，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

解构是JavaScript中的一个强大工具。它可以从数组和对象中提取出有意义的变量，并用解构来处理JSON数据、嵌套对象或数组非常方便。

下面的示例展示了创建解构赋值表达式的最简单的方法之一：

如果左侧的解构表达式中传递的变量名与对象属性不匹配，则将该值作为undefined进行分配。虽然这个例子看起来非常简单，但它还可以通过解构语法实现更多可能。

一起去探索一些解构用例吧。

通过解构别名进行重命名

无论是在顶级对象中，还是在需要导入库时，别名都有助于防止重名，在import语句中解构别名与解构对象不同：

import { some-func1, some-func2 } from 'some-library';//use aliasing import { some-func1 as newFunc } from 'some-library'; newFunc();import { * as some-library } from 'some-library'

要提供一个与属性名不同的解构变量，需要使用冒号语法来指定它，如下所示：

const { work: {job : profession} } = person; console.log(profession) // Blogger

使用解构表达式交换变量

通常会使用一个临时变量进行交换，示例如下(也可以通过一个数学公式和XOR运算符来做)：

let a = 1; let b = 2; let temp; temp = a; a = b; b = temp;

通过解构，可以在单个表达式中轻松地交换变量，如下所示：

[a, b] = [b, a];

更有趣的一点是，解构能够交换n个变量：

[a, b, c] = [b, c, a]

访问嵌套属性并设置默认值

解构也适用于嵌套对象，并有助于避免长链列表。示例如下：

const person = { name: 'Fred', age: 26, work: { job: 'Blogger' } };const {work: {job} } = person; console.log(job); //prints: Blogger

注意，在上面的代码中，work 引用没有被解构，只有最后一个嵌套属性被分配给变量-job。为了使work 也得到嵌套属性，我们需要

const {work, work: {job} } = person;

如果被解构对象中不存在键值，则会得到undefined 值。可以通过设置一个默认值来避免这种情况，如下所示：

Now consider whether the properties of work are completely unavailable. In this case, you need to write the deconstruction expression above as follows:

const { work: { job = 'NA', salary = 'NA'} = {} } = person;

Using computed attributes in deconstruction

So far, static keys have been used for deconstruction. But for objects with dynamic key values, you need to use computed attributes. Calculated attributes are specified in square brackets as follows:

const person = { name: 'Fred', work: { job: 'Blogger' } };let name = 'name'const { [name] : username } = person; console.log(username); //Fred

You can also create attribute arrays, as follows:

Access array elements

Just like object deconstruction, array deconstruction can also be syntactically implemented as follows:

const arr = [1,2,3]; const [a, b] = arr; //a = 1, b = 2

Default values can be set for each deconstructing variable after =. If there are items you do not want to assign to local variables, you can also choose to skip them. This can be done with the comma operator:

//skips the 2nd element const [first,,third] = arr;

While using the comma operator on a large array can be a tedious task, we can use syntax-like object deconstruction--accessing elements by index--as follows:

const arr = ['a','b','c','d'];const {0: first, 3: fourth} = arr; console.log(fourth) //d const {0: first, 3: fourth, 9: tenth = 'z'} = arr;

The previous statement defines a default value in case the array has no index. Nested array elements can also be accessed in the same way as objects:

const arr = ['a', [1, 2, 3] const [first, [one, two, three]] = arr;

Omit attributes using Rest syntax

The Rest syntax is used to pick up multiple elements and set them as a new element, which helps to omit an attribute when deconstructing.

const arr = ["Hello", "How" , "are","you"];var [hello,... remaining] = arr; console.log(remaining) // ["How" , "are", "you"]

The above expression can also be used to clone arrays. The same logic can be used to retrieve or delete nested objects:

Deconstruction may seem tricky, but once adapted, you can use it to create specific patterns and quickly get what you need. Master it as soon as possible!

The above is what the deconstruction of JavaScript uses, Xiaobian believes that some of the knowledge points may be seen or used in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.