January 11, 2018

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

By Gideon Javascript /Jquery / React / Bootstrap / Web 0 Comments

代码精炼是每个有追求的程序所向往的，本文总结了19个JavaScript的简写技术，其中包括三元操作符、短路求值简写方式、声明变量简写方法等等，希望对你有帮助。

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

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写：

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

也可以嵌套if语句：

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

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

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

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

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

3.声明变量简写方法

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

4.if存在条件简写方法

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写：

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

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

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

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

5.JavaScript循环简写方法

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

也可以使用Array.forEach：

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

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

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

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

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

8.对象属性简写如果属性名与key名相同，则可以采用ES6的方法：

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

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

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

10.隐式返回值简写经常使用return语句来返回函数最终结果，一个单独语句的箭头函数能隐式返回其值（函数必须省略{}为了省略return关键字）为返回多行语句（例如对象字面表达式），则需要使用()包围函数体。

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

11.默认参数值为了给函数中参数传递默认值，通常使用if语句来编写，但是使用ES6定义默认值，则会很简洁：

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

12.模板字符串传统的JavaScript语言，输出模板通常是这样写的。

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

ES6可以使用反引号和${}简写：

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

13.解构赋值简写方法在web框架中，经常需要从组件和API之间来回传递数组或对象字面形式的数据，然后需要解构它

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

也可以分配变量名：

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

14.多行字符串简写需要输出多行字符串，需要使用+来拼接：

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

使用反引号，则可以达到简写作用：

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

15.扩展运算符简写扩展运算符有几种用例让JavaScript代码更加有效使用，可以用来代替某个数组函数。

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

不像concat()函数，可以使用扩展运算符来在一个数组中任意处插入另一个数组。

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

也可以使用扩展运算符解构：

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

16.强制参数简写JavaScript中如果没有向函数参数传递值，则参数为undefined。为了增强参数赋值，可以使用if语句来抛出异常，或使用强制参数简写方法。

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简介

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

17.Array.find简写想从数组中查找某个值，则需要循环。在ES6中，find()函数能实现同样效果。

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

18.Object[key]简写考虑一个验证函数

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

假设当需要不同域和规则来验证，能否编写一个通用函数在运行时确认？

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

现在可以有适用于各种情况的验证函数，不需要为了每个而编写自定义验证函数了

19.双重非位运算简写有一个有效用例用于双重非运算操作符。可以用来代替Math.floor()，其优势在于运行更快，可以阅读此文章了解更多位运算。

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

简写

Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

本文：Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！

Related Posts

JavaScript 语言基础知识点总结（思维导图）
目录[-] （1）javascript 数组（2）函数基础（3）运算符（4）流程语句（5）正则表达式（6）字符串函数（7）数据类型…
Bootstrap 字体图标 Bootstrap Glyphicon Components
基本用法： <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p> <p>Search icon: <span…
移动前端工作的那些事---前端制作篇之框架篇
为了更好的提升用户体验，移动端逐渐出了许多的移动端的框架，比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点，不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点：一、Sencha Touch框架是一个重量级的框架、它上手较难，代码复杂，并且需要较强的程序基础才能学习，最开始的时候因为一个项目，想使用Sencha Touch框架，后来工期实在太紧张，根本没时间学习它并使用。所以最后转投其他框架。这个框架兼容性很高，运行起来的速度一般，需要长时间的学习且需要水平较高的程序基础才行。所以不太适合前端制作人员的使用。我会在以后的机会单开一篇关于它的使用demo。二、JQTouch是一个轻量级框架、纯jquery写法，上手比较容易，代码容易理解，加载速度也很快，缺点是配合的移动端效果插件较少，需要很多外部的插件相结合，另外，个别插件还需要解决与框架之间的兼容问题。它的最大的一个弊端就是可利用和变通的布局较少。三、Jquery-moblie也是一个轻量级框架、纯jquery写法，上手容易，代码容易理解，但由于其绑定的前端效果插件过多，且代码结构有些臃肿，造成加载速度很慢。尤其是在android系统上测试，速度很慢。用户体验效果不太好，它比较适合开发IPAD或是IOS系统的高端机型。四、jqMobi也是一个轻量级框架、它的语言基于jquery语言。并对其进行了简化，更有利于在移动设备上进行应用，并且速度很流畅。上手也比较容…

Tags:javascript, Javascript: 程序员装X必备—19个JS简写技巧，让你写代码速度翻倍！！, 程序员装X必备, 简写技巧

About Author

Gideon

Add a Comment