删除对象键值_JavaScript的解构技巧：排除对象属性、避免命名冲突、交换……...

全文共1583字，预计学习时长7分钟

图源：unsplash

解构是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 值。可以通过设置一个默认值来避免这种情况，如下所示：

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

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

在解构中使用计算属性

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

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

也可以创建属性数组，如下所示：

访问数组元素

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

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

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

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

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

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;

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

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

使用Rest语法省略属性

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

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

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

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

留言点赞关注

我们一起分享AI学习与发展的干货

编译组：李云、苏韫琦

相关链接：https://medium.com/better-programming/6-amazing-javascript-destructuring-tricks-d47da9a0047f

如转载，请私信小芯，遵守转载规范

删除对象键值_JavaScript的解构技巧：排除对象属性、避免命名冲突、交换……...相关推荐

ES6-4/5 解构赋值、函数默认值、数组解构、对象解构
ES-4 解构赋值.函数默认值.数组解构.对象解构 ES-5 隐式转换.函数参数解构.解构本质.()用法一解构赋值 1 虚值含义:在Boolean转换结果为假的值falsy 2 函数默认值 ES ...
JS对比两个对象键值全等
比较两个对象的键值是否全等,说的就是字面上的相等,也就是看起来的一模一样的,举个栗子 let o1 = { let o2 = {name: 'joe', name: 'joe' isOld: fals ...
ES6：解构赋值及对象方法
解构赋值对象解构起别名:通过:来进行取名 //对象解构赋值 var obj = { uname: "张三", age: 21, sex: "男" } // ...
ES6 对象的新功能与解构赋值介绍
ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始 ...
变量的解构赋值（对象）
阮一峰ES6入门对象的解构赋值 let { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa ...
php根据键值去除数组中的某个元素_php数组删除元素删除指定键值元素
这个属于PHP操作数组的基本应用,但是小应用有大用途,而且一不留心操作错了,还可能给你造出意想不到的bug. 最近写程序的时候要拼装一个检索数组,要求每个栏目的检索条件还不一样,于是乎将获取到的检索条 ...
stream流去除对象的值_I/O流(过滤流、对象序列化、字符流)
过滤流基础 Data Stream 首先我们来介绍一对过滤流:DataInputStream 和 DataOutputStream.这两个类有什么作用呢?首先来思考下面的需求:假设,要把一个 doub ...
数组中的键值对去重_javascript利用对象键值对中键的唯一性实现数组去重
/p> "http://www.w3.org/TR/html4/loose.dtd"> var arr = [1,2,3,2,3,4,5,6,7,8,9,8,5]; / ...
05-ES6语法：解构赋值
本文我们介绍ES6中解构赋值.ES6的解构赋值语法是一种JS表达式.解构赋值语法是一种JS表达式,通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量. 下面我们具体来看看解构赋值是什么?以 ...

删除对象键值_JavaScript的解构技巧：排除对象属性、避免命名冲突、交换……...

删除对象键值_JavaScript的解构技巧：排除对象属性、避免命名冲突、交换……...相关推荐

最新文章

热门文章