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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
php常用表单验证类用法实例
2015/06/18 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Python网络编程 Python套接字编程
2017/09/13 Python
Python线性方程组求解运算示例
2018/01/17 Python
python实现二维插值的三维显示
2018/12/17 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
鼓励运动员的广播稿
2014/02/08 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
行政管理专业求职信
2014/07/06 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
初中学生操行评语
2014/12/26 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
Python常遇到的错误和异常
2021/11/02 Python
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技