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 操作符整理[推荐收藏]
Nov 15 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 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数组应该有多大的分析
2009/07/30 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
centos系统升级python 2.7.3
2014/07/03 Python
Python with用法实例
2015/04/14 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
幼儿园中班上学期评语
2014/04/18 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记