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


Posted in Javascript onMarch 28, 2020

前言

本文主要给大家分享了javascript简写常用的12个技巧,无论你是初学者还是资深人士,都值得一读!下面话不多说了,来一起看看详细的介绍:

1. 空(null, undefined)验证

当我们创建了一个新的变量,我们通常会去验证该变量的值是否为空(null)或者未定义(undefined)。这对于JavaScript编程来说,是一个经常要考虑到的验证。

如果直接写,像下面这样:

if (variable1 !== null || variable1 !== undefined || variable1 !== ''){
 let variable2 = variable1;
}

我们可以使用一个更加简洁的版本

let variable2 = variable1 || '';

如果你不信,可以在谷歌浏览器开发者模式下的控制台中试试!

//值为null的例子
let variable1 = null;
let variable2 = variable1 || '';
console.log(variable2);
//输出: ''
//值为undefined的例子
let variable1 = undefined;
let variable2 = variable1 || '';
console.log(variable2);
//输出: ''
//正常情况
let variable1 = 'hi there';
let variable2 = variable1 || '';
console.log(variable2);
//输出: 'hi there'

在这里要注意的是,你在调试完一组代码后要刷新下页面,或者定义不同的变量,不然会报错

不过三水点靠木小编更喜欢用下面的代码

if("undefined" != typeof downlm){ 
if(downlm=="soft"){ 
document.write('成功'); 
} 
}

判断downlm是否定义

2. 数组

这个好像比较简单!

非优化代码:

let a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3";

优化代码:

let a = ["myString1", "myString2", "myString3"];

3. if true .. else 的优化

let big;
if (x > 10) {
big = true;
}
else {
big = false;
}

简化后:

let big = x > 10 ? true : false;

这是三目运算,当判断条件和结果都只有一个的时候可以使用。

极大的简化了代码量!

let big = (x > 10);
let x = 3,
big = (x > 10) ? "greater 10" : (x < 5) ? "less 5" : "between 5 and 10";
console.log(big); //"less 5"
let x = 20,
big = {true: x>10, false : x< =10};
console.log(big); //"Object {true=true, false=false}"

4. 变量声明

尽管JavaScript会自动讲变量上提(hoist),使用该方法可以讲所有的变量都在函数的头部用一行搞定。

优化钱:

let x;
let y;
let z = 3;

优化后:

let x, y, z=3;

5. 赋值语句的简化

简化前:

x=x+1;
minusCount = minusCount - 1;
y=y*10;

简化后:

x++;
minusCount --;
y*=10;

假设x=10,y=5,那么基本的算术操作可以使用如下的简写方式:

x += y // x=15
x -= y // x=5
x *= y // x=50
x /= y // x=2
x %= y // x=0

6. 避免使用RegExp对象

简化前:

var re = new RegExp("\d+(.)+\d+","igm"),
result = re.exrc("padding 01234 text text 56789 padding");
console.log(result);//"01234 text text 56789"

简化后:

var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding");
console.log(result); //"01234 text text 56789"

7. If 条件优化

简化前:

if (likeJavaScript === true)

简化后:

if (likeJavaScript)

我们再来个判断非真的例子:

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

简化后:

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

9. 函数参数优化

我个人倾向于使用获取对象元素的方式来访问函数参数,当然这个见仁见智啦!

通常使用的版本:

function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
// do something...
}
myFunction( "String", 1, [], {}, true );

我喜欢的版本:

function myFunction() {
/* 注释部分
console.log( arguments.length ); // 返回 5
for ( i = 0; i < arguments.length; i++ ) {
console.log( typeof arguments[i] ); // 返回 string, number, object, object, boolean
}
*/
}
myFunction( "String", 1, [], {}, true );

译者注:原文下方有评论表示不建议用楼主的方法,使用第一种方法函数参数的顺序是可以变动的,第二种你就要小心了。

10. charAt()的替代品

简化前:

"myString".charAt(0);

简化后:

"myString"[0];//返回'm'

译者注:我相信用第一种方法的人已经不多了吧!

11. 函数调用还可以更短

简化前:

function x() {console.log('x')};function y() {console.log('y')};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}

简化后:

function x() {console.log('x')};function y() {console.log('y')};let z = 3;
(z==3?x:y)();

12. 如何优雅的表示大数字

在JavaScript中,有一个简写数字的方法,也许你忽略了。1e7表示10000000。

简化前:

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

简化后:

for (let i = 0; i < 1e7; i++) {

总结

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

译者:Fundebug

译文:http://www.cnblogs.com/fundeb...

原文:https://hackernoon.com/12-ama...

Javascript 相关文章推荐
javascript类继承机制的原理分析
Sep 12 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
jquery常用的12个小功能
Jul 22 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 #Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 #Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 #Javascript
JS SetInterval 代码实现页面轮询
Aug 11 #Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 #Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 #Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 #Javascript
You might like
一个PHP针对数字的加密解密类
2014/03/20 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python的keyword模块用法实例分析
2015/06/30 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
python else语句在循环中的运用详解
2020/07/06 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
大队干部竞选演讲稿
2014/04/28 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
建筑工地宣传标语
2014/06/18 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
农村文化活动总结
2014/08/28 职场文书
监察建议书
2015/02/04 职场文书
黄石寨导游词
2015/02/05 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
酒店宣传语大全
2015/07/13 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL