让JavaScript代码更加精简的方法技巧


Posted in Javascript onJune 01, 2022

前言:

使用 JavaScript 对象解构来节省代码,JavaScript 对象解构赋值在项目开发中是一个常用的技能。

先来看一个 article 对象,有两个属性 title 和 description

const article = {
    title: "JavaScript对象解构赋值",
    description:
        "解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量",
};

在 ES6 之前,需要将对象的属性赋值给变量时,通常是这样做:

const title = article.title;
const description = article.description

但是 ES6 引入了对象解构语法,它提供了另一种将对象属性赋值给变量的方法:

const { title, description: desc } = article;
console.log(title); // JavaScript对象解构赋值
console.log(desc); //  解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量

上述代码将属性 title 和 description 属性赋值给变量 title 和 desc 。

语法说明: 冒号 (:) 之前的标识符是对象的属性,冒号之后的标识符是新定义的变量。

对象解构示例 {}

解构空对象

使用 OR 运算符 || 为空对象定义默认值,在对象为 null 的情况下定义一个默认值空对象 {} 。

function getArticle() {
    return null;
}
const { title, description } = getArticle() || {};

// 错误的情况
const { title, description } = getArticle() ;

嵌套对象解构

直接看下面代码:

const article = {
    id: 1001,
    detail: {
        title: "JavaScript对象解构赋值",
        description:
            "解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量",
    },
};
const {
    detail: { title, description },
    detail,
} = article;
console.log(title); // JavaScript对象解构赋值
console.log(description); // 解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量
console.log(detail); // { title: 'JavaScript对象解构赋值', description: '解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量' }

注意:对象解构默认将对象的属性分配给具有相同名称的变量。

到此这篇关于 让JavaScript代码更加精简的方法技巧的文章就介绍到这了,更多相关JS精简代码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery根据name属性查找的小例子
Nov 21 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
cypress测试本地web应用
Jun 01 #Javascript
vue实现登陆页面开发实践
May 30 #Vue.js
Echarts如何重新渲染实例详解
May 30 #Javascript
vue router 动态路由清除方式
May 25 #Vue.js
vue如何清除浏览器历史栈
May 25 #Vue.js
ant design charts 获取后端接口数据展示
May 25 #Javascript
vue3不同环境下实现配置代理
May 25 #Vue.js
You might like
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
Python算法应用实战之队列详解
2017/02/04 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
python 显示数组全部元素的方法
2018/04/19 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
Python中字符串List按照长度排序
2019/07/01 Python
python中p-value的实现方式
2019/12/16 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
开学典礼感言
2014/02/16 职场文书
情况说明书格式范文
2014/05/06 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
写给同事的离职感言
2015/08/04 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
Vue.Draggable实现交换位置
2022/04/07 Vue.js