JavaScript中最常用的10种代码简写技巧总结

前言

本文主要给大家整理了一份10个程序员常用的代码简写技术，看懂一种是入门，全懂就是大神，你能知道几个呢？下面话不多说了，来看看详细的介绍：

一、三元操作符

当想写if…else语句时，使用三元操作符来代替。

const x = 20;let answer;if (x > 10) {

简写：

const answer = x > 10 ? 'is greater' : 'is lesser';

也可以嵌套if语句：

const big = x > 10 ? " greater 10" : x

二、短路求值简写方式

当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句。

或者可以使用短路求值方法：

const variable2 = variable1 || 'new';

三、声明变量简写方法

let x;let y;let z = 3;

简写方法：

let x, y, z=3;

四、if存在条件简写方法

if (likeJavaScript === true)

简写：

if (likeJavaScript)

只有likeJavaScript是真值时，二者语句才相等

如果判断值不是真值，则可以这样：

let a;if ( a !== true ) {// do something...}

简写：

let a;if ( !a ) {// do something...}

五、JavaScript循环简写方法

for (let i = 0; i < allImgs.length; i++)

简写：

for (let index in allImgs)

也可以使用Array.forEach：

六、短路评价

给一个变量分配的值是通过判断其值是否为null或undefined，则可以：

let dbHost;if (process.env.DB_HOST) {

简写：

const dbHost = process.env.DB_HOST || 'localhost';

七、十进制指数

当需要写数字带有很多零时（如10000000），可以采用指数（1e7）来代替这个数字：

for (let i = 0; i < 10000; i++) {}

简写：

八、对象属性简写

如果属性名与key名相同，则可以采用ES6的方法：

const obj = { x:x, y:y };

简写：

const obj = { x, y };

九、箭头函数简写

传统函数编写方法很容易让人理解和编写，但是当嵌套在另一个函数中，则这些优势就荡然无存。

function sayHello(name) { console.log('Hello', name);

简写：

sayHello = name => console.log('Hello', name);

十、隐式返回值简写

经常使用return语句来返回函数最终结果，一个单独语句的箭头函数能隐式返回其值（函数必须省略

{}为了省略return关键字）为返回多行语句（例如对象字面表达式），则需要使用()包围函数体。

简写：

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • javascript教程:关于if简写语句优化的方法

    UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法.尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作.也许有人认为if语句就那么简单,能优化到什么程度?但是看看以下的几种方式,你也许会改变看法. 一.使用常见的三元操作符 if (foo) bar(); else baz(); ==> foo?bar():baz();if (!foo) bar(); else baz(); ==> foo?baz

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

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

  • Java关系操作符简写介绍

     Java关系操作符简写介绍 eq--等于.neq--不等于.lt--小于.lte--小于等于.gt--大于.gte--大于等于.empty.null 以上这篇Java关系操作符简写介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 史上最全JavaScript常用的简写技巧（推荐）

    JavaScript 是属于网络的脚本语言!被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用.同时很容易使用,所以越来越多的开发者选择js代码来实现自己想要的效果,但开发过程中,为了更高的效率和良好的代码规范要求,我们不得不知晓js一些常用的简写技巧,如下我帮大家整理了下,一起进来看看吧~ 1. 三元运算符 当你想用一行代码来写if...else语句的时候,使用三元操作符是非常好的选择,例如: const x = 20; let answer; if (x

  • 分享19个JavaScript 有用的简写写法

    原文链接,最近很火的一篇文章 This really is a must read for any JavaScript-based developer. I have written this article as a vital source of reference for learning shorthand JavaScript coding techniques that I have picked up over the years. To help you understand

  • Javascript简写条件语句(推荐)

    经常在各处牛人的代码中看到许多简写的条件表达语句,看了一些介绍这方面的文章,觉得3 ways 2 say if这篇文章(http://www.thomasfrank.se/3_ways_2_say_if.html)还不错.在这篇文章中作者对传统的if...else....?:.&&/||三种条件表达的写法的特点及用处进行了总结归纳,简述如下: 1. if...else结构 // Set r to 0 or 1 var r= Math.floor(2*Math.random()) // Se

  • JavaScript中最常用的10种代码简写技巧总结

    JavaScript中最常用的10种代码简写技巧总结

    前言 本文主要给大家整理了一份10个程序员常用的代码简写技术,看懂一种是入门,全懂就是大神,你能知道几个呢?下面话不多说了,来看看详细的介绍: 一.三元操作符 当想写if-else语句时,使用三元操作符来代替. const x = 20;let answer;if (x > 10) { 简写: const answer = x > 10 ? 'is greater' : 'is lesser'; 也可以嵌套if语句: const big = x > 10 ? " greater

  • 分享Javascript中最常用的55个经典小技巧

    1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取.防止复制 3. onpaste="return false" 不

  • Python3中最常用的5种线程锁实例总结

    目录 前言 线程安全 锁的作用 Lock() 同步锁 基本介绍 使用方式 死锁现象 with语句 RLock() 递归锁 基本介绍 使用方式 with语句 Condition() 条件锁 基本介绍 使用方式 with语句 Event() 事件锁 基本介绍 使用方式 Semaphore() 信号量锁 使用方式 with语句 锁关系浅析 基本练习题 条件锁的应用 事件锁的应用 总结 前言 本章节将继续围绕threading模块讲解,基本上是纯理论偏多. 对于日常开发者来讲很少会使用到本章节的内容,但

  • 详解JavaScript中分解数字的三种方法

    本文基于免费代码营基本算法脚本"分解数字" 在数学中,非负整数n的阶乘可能是一个棘手的算法.在本文中,我将解释这种方法,首先使用递归函数,第二种使用而循环,第三种使用以循环. 算法挑战 返回提供的整体的阶乘. 如果整体用字母n表示,则阶乘是所有小于或等于n的正整数的乘积. 阶乘经常用简写符号n!表示! 例如:5!= 1 * 2 * 3 * 4 * 5 = 120 function factorialize(num) { return num; } factorialize(5); 提供

  • JavaScript中一些常用的正则表达式(推荐)

    正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. var validateRegExp = { decmal: "^([+-]?)\\d*\\.\\d+$", // 浮点数 decmal1: "^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*$", // 正浮点数 decmal2: "^-([1-9]\\d*.\\d*|

  • JavaScript中实现new的两种方式引发的探究

    JavaScript中实现new的两种方式引发的探究

    前言 当你 new 一个构造函数时发生了什么? "众所周知"的三步: 创建一个空对象,将它的引用赋给 this,继承函数的原型:通过 this 将属性和方法添加至这个对象:最后返回 this 指向的新对象,也就是实例. 一般来说在js中大概是这样的: function Mynew(parent,...rest){ let obj={}; obj.__proto__=parent.prototype; let res=parent.apply(obj,rest); return type

  • JavaScript中检测数据类型的四种方法

    JavaScript中检测数据类型的四种方法

    目录 1. typeof 2. instanceof 3. constructor(构造函数) 4. Object.prototype.toString.call() 前言:在介绍检测数据类型的方法之前,先说说JavaScript中数据类型有哪些吧~ JS数据类型主要分为两大类:基本数据类型和引用数据类型 基本数据类型:number.string.boolean.null.undefined.symbol(es6)引用数据类型:object(array.function.date...) 数据类

  • javascript中contains是否包含功能实现代码(扩展字符、数组、dom)

    一个小误区 JS中的contains 今天想要用JS判断集合中是否包含另一个集合. 发现,Contains并不能达到所要的效果,查找之后发现了问题 原来,js的contains方法用来查看dom元素的包含关系,并不是Java中数组的contains方法. 先看一下duyunchao同学分享的代码 $(document).ready(function() { var Arrays = ['11','22','33']; var Array ='11'; if(Arrays.indexOf(Arra

  • JavaScript中数组去重的5种方法

    正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重的方法,希望对大家有点帮助. 方法一:new Set()实现数组去重 ES6 提供了新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构.Set函数可以接受一个数组,用于初始化.根据 Set的数据特性,我们可以实现数组去重. let list = [1, 1, '

  • JavaScript中实现继承的三种方式和实例

    JavaScript中实现继承的三种方式和实例

    javascript虽然是一门面向对象的语言,但是它的继承机制从一开始设计的时候就不同于传统的其他面向对象语言,是基于原型的继承机制,但是在这种机制下,继承依然有一些不同的实现方式. 方法一:类式继承 所谓的类式继承就是指模仿传统面向对象语言的继承方式,继承与被继承的双方都是"类",代码如下: 首先定义一个父类(或超类): function Person(name){ this.name=name; } Person.prototype.getName=function(){ retu

随机推荐