JavaScript的解构技巧:排除对象属性、避免命名冲突、交换……

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

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

[[333599]]

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

JavaScript的解构技巧:排除对象属性、避免命名冲突、交换……

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

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

通过解构别名进行重命名

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

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

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

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

使用解构表达式交换变量

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

  1. let a = 1
  2. let b = 2
  3. let temp; 
  4.  
  5. temp = a
  6. a = b
  7. b = temp

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

  1. [a, b] = [b, a]; 

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

  1. [a, b, c] = [b, c, a] 

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

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

  1. const person = { 
  2.   name: 'Fred', 
  3.   age: 26, 
  4.   work: { 
  5.     job: 'Blogger' 
  6.   } 
  7. };const {work: {job} } = person; 
  8. console.log(job); //prints: Blogger 

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

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

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

JavaScript的解构技巧:排除对象属性、避免命名冲突、交换……

现在考虑一下work 的属性是否完全不可用。在这种情况下,需要用以下方式来书写上面的解构表达式:

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

在解构中使用计算属性

到目前为止,都在利用静态键值进行解构。但是对于具有动态键值的对象,需要使用计算属性。计算属性用方括号指定,如下所示:

  1. const person = { 
  2.   name: 'Fred', 
  3.   work: { 
  4.     job: 'Blogger' 
  5.   } 
  6. };let name = 'name'const { [name] : username } = person; 
  7. console.log(username); //Fred 

也可以创建属性数组,如下所示:

JavaScript的解构技巧:排除对象属性、避免命名冲突、交换……

访问数组元素

就像对象解构一样,数组解构也可以通过语法实现,如下所示:

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

可以在=后面为每个解构变量设置默认值。如果有不想分配给局部变量的项目,也可以选择跳过。可以通过逗号操作符来实现:

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

对一个大数组使用逗号操作符可能是一项乏味的任务,我们可以使用类似语法的对象解构——通过索引访问元素,如下所示:

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

上一条语句中定义了一个默认值,以防数组没有索引。也可以用访问对象的方式来访问嵌套数组元素:

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

使用Rest语法省略属性

Rest语法用于挑选多个元素并将它们设置为一个新元素,这有助于解构时省略某个属性。

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

上述表达式也可以用于克隆数组。可以使用相同的逻辑来检索或删除嵌套对象:

JavaScript的解构技巧:排除对象属性、避免命名冲突、交换……

解构可能看起来有些棘手,但一旦适应了,就可以利用它创建特定的模式,快速获取所需要的东西。尽快掌握它吧!

 

责任编辑:赵宁宁 来源: 今日头条
相关推荐

2023-07-06 07:55:15

Redis内存数据库

2021-04-01 17:04:34

Javascript语法数组

2013-08-26 14:18:12

SELinux

2010-04-01 18:22:36

无线交换机故障

2024-06-18 10:28:46

2021-07-26 05:20:47

JavaScript解构赋值数组解构

2024-07-17 11:35:31

JavaScript解构赋值

2024-09-10 15:34:18

JavaScript解构赋值

2021-05-10 08:45:34

JavaScript开发对象

2020-06-09 09:13:12

JavaScript重构对象

2023-10-16 07:55:15

JavaScript对象技巧

2010-01-06 10:58:06

建立JavaScrip

2015-03-10 13:50:42

smartycss语法

2019-12-03 19:09:19

JavaScriptNumbers阿里云计算

2021-03-26 23:41:19

JavaScript对象开发

2023-08-23 10:19:25

数据MySQL

2012-03-29 09:57:06

jQuery

2023-07-24 07:11:43

2022-07-15 08:22:42

对象符串键Symbol

2023-06-02 15:42:51

JavaScript数据结构对象
点赞
收藏

51CTO技术栈公众号