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 相关文章推荐
js变换显示图片的实例
Apr 16 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
js实现开关灯效果
Mar 30 Javascript
js回调函数仿360开机
Dec 26 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
javascript实现前端分页功能
Nov 26 Javascript
js canvas实现五子棋小游戏
Jan 22 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代码
2006/12/06 PHP
附件名前加网站名
2008/03/23 PHP
PHP之数组学习
2011/05/29 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
js获取height和width的方法说明
2013/01/06 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
react路由配置方式详解
2017/08/07 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
vue二级路由设置方法
2018/02/09 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python使用Matplotlib画条形图
2020/03/25 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
const和static readonly区别
2013/05/20 面试题
面试后的英文感谢信
2014/02/01 职场文书
手工社团活动方案
2014/02/17 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
2015年公务员工作总结
2015/04/24 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang