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 中的replace方法说明
Apr 13 Javascript
javascript插入样式实现代码
Feb 22 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 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无限分类(树形类)的深入分析
2013/06/02 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python 异常处理总结
2016/10/18 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
大学生活动策划方案
2014/02/10 职场文书
应聘护士求职信
2014/07/21 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
群众路线表态发言材料
2014/10/17 职场文书
读后感作文评语
2014/12/25 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers