7 个 ES6 解构技巧让代码更简洁

今天这篇文章,我将与你一起深入学习 ES6 解构的世界,并向您展示如何使用它来编写更干净、更高效的代码。

从解构对象和数组到使用默认值和展开运算符,我们将涵盖所有内容,现在,我们将准备好掌握干净简洁的编码艺术。

1. 解构对象

使用解构的最常见方法之一是将对象的属性分配给变量。例如,而不是写:

const person = { name: 'John', age: 30 };const name = person.name;const age = person.age;

您可以使用解构使代码更简洁:

const person = { name: 'John', age: 30 };const { name, age } = person;

2. 解构数组

就像对象一样,您也可以使用解构将数组的元素分配给变量。例如,而不是写:

const numbers = [1, 2, 3];const first = numbers[0];const second = numbers[1];const third = numbers[2];

您可以使用解构使代码更简洁:

const numbers = [1, 2, 3];const [first, second, third] = numbers;

3.默认值

解构还允许您在值未定义的情况下为变量分配默认值。例如,而不是写:

const person = { name: 'John' };let age = person.age || 25;

您可以使用解构使代码更简洁:

const person = { name: 'John' };const { age = 25 } = person;

4.重命名变量

有时,您要解构的属性或变量名称与您要在代码中使用的名称不匹配。在这些情况下,您可以使用冒号 (:) 重命名变量。例如,而不是写:

const person = { firstName: 'John', lastName: 'Doe' };const first = person.firstName;const last = person.lastName;

您可以使用解构使代码更简洁和语义化:

const person = { firstName: 'John', lastName: 'Doe' };const { firstName: first, lastName: last } = person;

5. 嵌套解构

解构也可用于嵌套对象和数组。例如,而不是写:

const data = {    results: [        {            title: 'Article 1',            author: {                name: 'John',                age: 30            }        },        {            title: 'Article 2',            author: {                name: 'Jane',                age: 25            }        }    ]};const firstResultTitle = data.results[0].title;const firstAuthorName = data.results[0].author.name;const firstAuthorAge = data.results[0].author.age;

您可以使用嵌套解构来使代码更简洁:

const data = {  results: [    {      title: 'Article 1',      author: {        name: 'John',        age: 30      }    },    {      title: 'Article 2',      author: {        name: 'Jane',        age: 25      }    }  ]};const {results: [{ title: firstResultTitle, author: { name: firstAuthorName, age: firstAuthorAge } }]} = data;

6.解构函数参数

解构也可以用于函数参数。例如,而不是写:

function createPerson(options) {const name = options.name;const age = options.age;// ...}createPerson({ name: 'John', age: 30 });

您可以使用解构使代码更简洁和语义化:

function createPerson({ name, age }) {// ...}createPerson({ name: 'John', age: 30 });

7. 解构和扩散运算符

您还可以将扩展运算符 (...) 与解构结合使用,以将数组的剩余元素或对象的剩余属性分配给变量。例如,而不是写:

const numbers = [1, 2, 3, 4, 5];const [first, second, ...others] = numbers;console.log(others); // [3, 4, 5]

您可以将扩展运算符和解构一起使用,使代码更简洁:

const numbers = [1, 2, 3, 4, 5];const [first, second, ...others] = numbers;console.log(others); // [3, 4, 5]

总之,ES6 解构是一个强大的工具,可以帮助您编写更清晰、更易读的代码。借助本文概述的技巧和技术,您将能够解构对象和数组、使用默认值、重命名变量,甚至可以将解构与扩展运算符结合起来。

下次写 JavaScript 的时候,试试这些解构技巧,看看它们如何改进代码!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/177874.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

干货分享 | TSMaster采样点配置方法与消除错误帧流程

当通讯节点间采样点参数和波特率参数不匹配造成一些错误帧时,我们如何在TSMaster中设置以及调整波特率参数和采样点参数,来减少以及消除总线上出现的错误帧,进一步提高通信质量。本文着重讲解讲解如何借用TSmaster更加便捷地获取相应的采样点…

php、js:前后端使用警示框展示后端数据

一、js中显示php的变量 // 使用 JSON 编码将 PHP 变量传递给 JavaScript var rootPath <?php echo json_encode($RootPath); ?>; // 在 JavaScript 中使用该变量 alert(rootPath); 二、在php中运行js的方法展示php的变量 echo "<script>alert(".$s…

SpringBoot 入门学习

开发环境配置 JDK 1.8、Maven 3.8.8、 IDEA CE 2023.2 框架介绍 Spring Boot 是由 Pivotal 团队提供的全新框架&#xff0c;其设计目的是用来简化 Spring 应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置…

05.模板和泛型编程

模板和泛型编程 条款41&#xff1a;了解隐式接口和编译期多态 理解条款41的关键点如下&#xff1a; 隐式接口&#xff1a;隐式接口是指一个类或对象所提供的所有可用的成员函数和非成员函数&#xff0c;包括非虚函数、虚函数和重载函数。通过这些函数&#xff0c;对象向外部提…

QT QComBox实现模糊查询

一、概述 在Qt中&#xff0c;可以通过QComboBox和QLineEdit实现模糊查询的功能。模糊查询是指根据用户输入的文本&#xff0c;在下拉框的选项中进行模糊匹配&#xff0c;并动态地显示匹配的选项。 二、基础知识 1、QCompleter (1)QCompleter 是 Qt 框架中提供的一个用于自动…

hadoop集群环境搭建和常用命令

搭建过程 1.集群配置 cat /etc/hosts 2.步骤安装 Java是否安装 which java 或者 echo $JAVA_HOME 3.解压安装包 tar -zxvf 4.修改配置文件 cd $HADOOP_HOME/etc/hadoop/ 下面是需要修改的配置文件 hadoop-env.sh yarn-env.sh hdfs-site.xml core-site.xml mapred-site.xml yar…

洛谷 P1981 [NOIP2013 普及组] 表达式求值

文章目录 [NOIP2013 普及组] 表达式求值题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 样例 #3样例输入 #3样例输出 #3 提示 题意解析思路解析CODE注意 [NOIP2013 普及组] 表达式求值 题目链接&#xff1a;https://www.luogu.com.cn/…

JOSEF 漏电继电器JHOK-ZBL1 DH-50L 系统1140V 电源AC220V

系列型号&#xff1a; JHOK-ZBL多档切换式漏电&#xff08;剩余&#xff09;继电器 JHOK-ZBL1多档切换式漏电&#xff08;剩余&#xff09;继电器 JHOK-ZBL2多档切换式漏电&#xff08;剩余&#xff09;继电器 JHOK-ZBM多档切换式漏电&#xff08;剩余&#xff09;继电器 …

Java面向对象第三天:

精华笔记&#xff1a; 引用类型数组&#xff1a; 给引用类型数组的元素赋值&#xff0c;需要new一下 若想访问对象的属性或调用方法&#xff0c;需要通过数组元素去打点 继承&#xff1a; 作用&#xff1a;代码复用 通过extends来实现继承 超类/父类&#xff1a;共有的属性…

【Java Spring】SpringBoot 五大类注解

文章目录 Spring Boot 注解简介1、五大类注解的作用2、五大类注解的关系3、通过注解获取对象4、获取Bean对象名规则解析 Spring Boot 注解简介 Spring Boot的核心就是注解。Spring Boot通过各种组合注解&#xff0c;极大地简化了Spring项目的搭建和开发。五大类注解是Spring B…

老师怎样处理校园欺凌

校园欺凌是一个让人痛心又不可忽视的问题。作为老师&#xff0c;该如何处理这种问题&#xff0c;既能够保护受欺凌的学生&#xff0c;又能够让施暴者得到应有的教训呢&#xff1f; 及时发现并介入 经常关注学生的动态&#xff0c;一旦发现有校园欺凌的苗头&#xff0c;就要及时…

pytorch读取tiny-imagenet-200的验证集(val)

ori_train torchvision.datasets.ImageFolder(root args.datadir /tiny-imagenet-200/train/, transformtransform)#可以获取class_idx的映射class_idx ori_train.class_to_idx val_annotations.txt中存储着每个图片对应的类别 获取验证集的标签 test_target []#读取val_…

python项目报错

解决办法&#xff1a;不要用配置的镜像脚本&#xff0c;直接用此命令 pip install pandas -i http://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.com

Java第二十章多线程

线程简介 在 Java 中&#xff0c;并发机制非常重要。在以往的程序设计中&#xff0c;我们都是一个任务完成后再进行下一个任务&#xff0c;这样下一个任务的开始必须等待前一个任务的结束。Java 语言提供了并发机制&#xff0c;程序员可以在程序中执行多个线程&#xff0c;每一…

SimpleDateFormat在多线程下的安全问题

目录 情景重现 SimpleDateFormat解析 解决方案 局部变量 加锁 使用线程变量 使用DateTimeFormatter 情景重现 SimpleDateFormat类是Java开发中的一个日期时间的转化类。它可以满足绝大多数的开发场景&#xff0c;但是在高并发下会出现并发问题。接下来查看下文中的案例。…

Python中的datetime库

1. datetime datetime是Python中用于处理日期和时间的类&#xff0c;它包含在datetime模块中。使用datetime类&#xff0c;我们可以创建表示特定日期和时间的对象&#xff0c;以及进行日期和时间的计算和操作。 from datetime import datetime, timedelta# 获取当前日期和时间…

为什么请求会发送两次-预检请求(OPTIONS)

当我们在发送跨域的POST请求时&#xff0c;浏览器会先发送一次OPTIONS请求&#xff0c;这是由于浏览器的同源策略所导致的。这个预检请求&#xff08;pre-flight request&#xff09;是CORS&#xff08;跨源资源共享&#xff09;机制的一部分。 预检请求的目的在于确保实际请求…

VSCode:修改左侧窗口字体大小

参考文章 https://blog.csdn.net/zhizhengguan/article/details/121361372

爬虫如何确定HTTP代理IP是否符合自己业务需求?

HTTP代理在许多业务场景中发挥着关键作用&#xff0c;但要确保其能够满足业务需求&#xff0c;需要考虑多个方面的因素。今天我们一起看看&#xff0c;要如何判断HTTP代理是否适合自己的业务&#xff0c;以及在选择HTTP代理时需要考虑的综合因素。 1. 稳定性 稳定性是HTTP代理…

使用Moment.js中获取上周的开始日期和结束日期(可自定义)

前言 有时候需求是这样的&#xff0c;想要获取上周的开始日期和结束日期&#xff0c;或者前几周的时间范围 比如今天是2023.11.28号&#xff0c;我想获取上周的周一到周日&#xff0c;也就是&#xff0c;上周的开始日期: 2023-11-20&#xff0c;上周的结束日期: 2023-11-26 1.…