让JavaScript代码更加精简的方法技巧
前言:
使用 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精简代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
详解ES6 export default 和 import语句中的解构赋值
这篇文章主要介绍了详解ES6 export default 和 import语句中的解构赋值,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-05-05JavaScript 匿名函数(anonymous function)与闭包(closure)
JavaScript 匿名函数(anonymous function)与闭包(closure) ,学习js的朋友可以参考下。2011-10-10uni-app应用配置manifest.json最全最详细配置
这篇文章主要给大家介绍了关于uni-app应用配置manifest.json最全最详细配置,manifest.json文件是UniApp开发中用来配置应用信息的重要文件,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01firefox事件处理之自动查找event的函数(用于onclick=foo())
在ie中,事件对象是作为一个全局变量来保存和维护的。 所有的浏览器事件,不管是用户触发的,还是其他事件, 都会更新window.event 对象。2010-08-08
最新评论