让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精简代码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 比较精简的Javascript拖动效果函数代码

    拖动效果函数演示 by Longbill.cn body { font-size:12px; color:#333333; border : 0px solid blue; } div { position : absolute; background-color : #c3d9ff; margin : 0px; padding : 5px; border : 0px; width : 100px; height:100px; } function drag(o,s) { if (typeof

  • 利用JScript中运算符"||"和"&&"的特殊特性实现代码精简第1/2页

    利用JScript中运算符"||"和"&&"的特殊特性实现代码精简第1/2页

    在JScript的众多运算符里,提供了三个逻辑运算符&&.||和!,噢?! 是高级语言都提供的.按我们对逻辑运算的正常认识,逻辑运算的结果因该是ture或者false.但是JScript的逻辑运算却不完全是这么定义的,这里只有!运算符总是返回true|false,而||和&&运算比较的好玩. JScript对于逻辑运算的true|false是这么定义的: 所有对象都被认为是 true. 字符串当且仅当为空(""或'')时才被认为是 false. null

  • JS短路原理的应用示例 精简代码的途径

    在js逻辑运算中,0."".null.false.undefined.NaN都会判为false,其他都为true. ||先计算第一个运算数,如果可以被转换成true,则返回左边这个表达式的值,否则计算第二个运算数.即使||运算符的运算数不是布尔值,任然可以将它看作布尔OR运算,因为无论它返回的值是什么类型,都可以被转换为布尔值. 利用它对非布尔型的值会将其返回的特性:对非布尔型的运算数使用||,用于选取一组备选值中的第一个定义了的并且非空的值(第一个为非false的值) 例: var

  • JS实现超精简的链接列表在固定区域内滚动效果代码

    JS实现超精简的链接列表在固定区域内滚动效果代码

    本文实例讲述了JS实现超精简的链接列表在固定区域内滚动效果代码.分享给大家供大家参考,具体如下: 这款超精简版的链接列表文字滚动代码,可在指定的区域内滚动,当然,区域大小可以自己设置的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-link-list-scroll-style-codes/ 具体代码如下: <html> <HEAD> <TITLE>文字链接列表滚动</TITLE> <META

  • javascript 短路法代码精简

    碰到一段代码如下 if(n>win) { p=dArry.length-win; } else if(n<0){ p=0; } else { p=n; } 类似的代码挺多,继续简化,其实很简单,变成这样 p=((n>win)&&(dArry.length-win))||((n<0)&&0)||n 总结一句话:&&取最后值,||取第一满足的值,高效,但请灵活使用

  • JS实现超精简响应鼠标显示二级菜单代码

    JS实现超精简响应鼠标显示二级菜单代码

    本文实例讲述了JS实现超精简响应鼠标显示二级菜单代码.分享给大家供大家参考.具体如下: 这是一款精简版的二级导航菜单,响应鼠标的动作,鼠标放上即显示出菜单,常见的一种菜单样式.喜欢的朋友拿去修改一下,再美化一番,就够用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-mouse-show-menu-codes/ 具体代码如下: <html> <head> <title>二级菜单,响应鼠标</

  • JS、CSS文字切换，定时交替，代码精简

    你可以把它看作像写一般的CSS列表一样,只用增加两三行代码就能完成切换效果. 文本定时变动代码 #newslist{ background:#f8f8f8;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:288px; } #contain{ font-size:12px;overflow:hidden;list-style:none;width:288px;height:20px;margin:0px;

  • 代码精简的可以实现元素圆角的js函数

    上次在blueidea上看到一个元素圆角的实现方法,但是那个太复杂了.于是就自己写了一个函数,可以将元素自动圆角.  演示地址:http://longbill.cn/down/sample/roundcorner.htm  不要用在有 padding 值得元素上,最好是在外面套一层.详情见演示地址.  代码:  function RoundCorner(obj,style)  {  /********  网页元素圆角函数!!  作者: Longbill  主页: www.longbill.cn 

  • 一个精简的JS DIV层tab切换代码

    DIV层切换 function ChangeDiv(divId,divName,zDivCount) { for(i=0;i 内容一 内容二 内容三 内容部分第一区 内容部分第二区 内容部分第三区 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

    目录 前言: 对象解构示例 {} 解构空对象 嵌套对象解构 前言: 使用 JavaScript 对象解构来节省代码,JavaScript 对象解构赋值在项目开发中是一个常用的技能. 先来看一个 article 对象,有两个属性 title 和 description. const article = { title: "JavaScript对象解构赋值", description: "解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量", }; 在 ES

  • javascript代码加载优化方法

    下面我们通过这个例子介绍1个更简单的方法: 我们用将统计代码保存到1个文件:文件路径:/config/counter.conf 统计代码如下: 复制代码 代码如下: <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-18744406-1']); _gaq.push(['_trackPageview']); (function() { var ga = do

  • 超实用的JavaScript代码段 附使用方法

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 本文为大家整理了5段实用JavaScript代码,便于大家进行开发. 1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.JQuery也有一些第三方库

  • 2019 年编写现代 JavaScript 代码的5个小技巧(小结)

    内容基本是今年从其他大神的文章学习到的东西.分享给大家: 1 Array.includes 与条件判断 一般我们判断或用 || // condition function test(fruit) { if (fruit == "apple" || fruit == "strawberry") { console.log("red"); } } 如果我们有更多水果 function test(fruit) { const redFruits = [

  • 24行JavaScript代码实现Redux的方法实例

    24行JavaScript代码实现Redux的方法实例

    前言 Redux是迄今为止创建的最重要的JavaScript库之一,灵感来源于以前的艺术比如Flux和Elm,Redux通过引入一个包含三个简单要点的可伸缩体系结构,使得JavaScript函数式编程成为可能.如果你是初次接触Redux,可以考虑先阅读官方文档. 1. Redux大多是规约 考虑如下这个使用了Redux架构的简单的计数器应用.如果你想跳过的话可以直接查看Github Repo. 1.1 State存储在一棵树中 该应用程序的状态看起来如下: const initialState

  • C#执行Javascript代码的几种方法总结

    一.开源项目 Javascript .NET 地址:http://javascriptdotnet.codeplex.com/ 它是Google Chrome V8引擎在.NET上的封装,功能完善,性能相对较高,推荐使用! (缺点就是asp.net web应用上,好象会报错) 示例代码: 复制代码 代码如下: using Noesis.Javascript; using System; using System.Collections.Generic; namespace JsCSharp {

  • iOS中使用JSPatch框架使Objective-C与JavaScript代码交互

    JSPatch是GitHub上一个开源的框架,其可以通过Objective-C的run-time机制动态的使用JavaScript调用与替换项目中的Objective-C属性与方法.其框架小巧,代码简洁,并且通过系统的JavaScriptCore框架与Objective-C进行交互,这使其在安全性和审核风险上都有很强的优势.Git源码地址:https://github.com/bang590/JSPatch. 一.从一个官方的小demo看起 通过cocoapods将JSPath集成进一个Xcod

  • JavaScript获取伪元素(Pseudo-Element)属性的方法技巧

    CSS伪元素(pseudo-elements)非常的有用--你可以用它制作出CSS三角形,用在提示框上面,还可以用它完成很多简单的任务,而不需要多余的HTML元素.以前,伪元素的CSS属性是无法用JavaScript获取的,但现在,有了一个新的JavaScript方法可以访问它们! 假设你的CSS代码是这样的: 复制代码 代码如下: .element:before {  content: 'NEW';  color: rgb(255, 0, 0); } 为了获取.element:before里的

  • JavaScript避免代码的重复执行经验技巧分享

    我喜欢到一些大型网站上去翻阅它们的原代码,期望能找到一些可以应用到自己的代码中的模式,或发现一些之前从未听说过的工具和技巧.可是,在我查看这些大型网站的源代码时,经常会发现一个问题,那就是重复的代码执行,重复的功能应用.下面就是一些在查看它们的源代码时发现一些问题,把这些分享给大家,希望能让你们更加简洁高效的写出JavaScript代码. 重复的收集元素 我在他们的JavaScript代码里看到的最常见的问题是重复的收集元素.虽然jQuery选择器引擎或querySelectorAll的执行速度

  • javascript简写常用的12个技巧（可以大大减少你的js代码量）

    前言 本文主要给大家分享了javascript简写常用的12个技巧,无论你是初学者还是资深人士,都值得一读!下面话不多说了,来一起看看详细的介绍: 1. 空(null, undefined)验证 当我们创建了一个新的变量,我们通常会去验证该变量的值是否为空(null)或者未定义(undefined).这对于JavaScript编程来说,是一个经常要考虑到的验证. 如果直接写,像下面这样: if (variable1 !== null || variable1 !== undefined || v

随机推荐