12个必备的JavaScript装逼技巧
译者按: 无论你是初学者还是资深人士,都值得一读!
原文: 12 Amazing JavaScript Shorthand Techniques
译者: Fundebug
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

在这里我把使用多年的奇淫技巧给大家分享出来,教大家写出更加简洁的代码。
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'
|
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.exec("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的全栈BUG监控交流群: 622902485。
版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/07/06/12-tricks-that-js-rocks/
12个必备的JavaScript装逼技巧的更多相关文章
- JavaScript装逼指南
如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...
- JavaScript 装逼指南
Summary 本文秉承着 你看不懂是你sb,我写的代码就要牛逼 的理念来介绍一些js的装逼技巧. 下面的技巧,后三个,请谨慎用于团队项目中(主要考虑到可读性的问题),不然,leader 干你没商量. ...
- 12个实用的 Javascript 奇淫技巧
这里分享12个实用的 Javascript 奇淫技巧.JavaScript自1995年诞生以来已过去了16个年头,如今全世界无数的网页在依靠她完成各种关键任务,JavaScript曾在Tiobe发布的 ...
- Word公式装逼技巧,你绝对不会!
Word论文排版是非常有技术含量的.只是纯文本格式时都有很多技巧,累倒一群人,更不用说还加上有数学公式了.有数学公式也就算了,问题是公式排版更是难上加难.想要在人前装逼一把?没有这些技巧你是绝对不行的 ...
- 12个常用的JavaScript技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
- 教你如何塑造JavaScript牛逼形象
如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...
- [转载]教你如何塑造JavaScript牛逼形象
http://www.html5cn.org/article-6571-1.html 如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待 ...
- 一行能装逼的JavaScript代码
一行能装逼的JavaScript代码 2016-06-28 野狗 一行神奇的JS代码,当时我就震 惊了,这不就是传说中的ZB神奇么… … 哈哈. 写本篇文章的缘由是之前看到了一段js代码,如下: (! ...
- 一行能装逼的JavaScript代码的延伸
前段就是坑,入坑水真深. 先看看一个黑科技, 纳尼,这是什么东西. (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+ ...
随机推荐
- 利用WindowsServiceWrapper(WinSW)将nginx包装为系统服务
1.WindowsServiceWrapper(WinSW) Github:https://github.com/kohsuke/winsw/ 下载地址:http://repo.jenkins-ci. ...
- python写的计算器
import tkinter #导入tkinter模块 root = tkinter.Tk()root.minsize(280,500)root.title('xx的计算器') #1.界面布局#显示面 ...
- Python的基础语法(二)
0. 前言 接着上一篇博客的内容,我将继续介绍Python相关的语法.部分篇章可能不只是简单的语法,但是对初学者很有帮助,也建议读懂. 1. 表达式 由数字.符号.括号.变量等组成的组合. 算术表达式 ...
- Mysql学习笔记整理手册
目录 (1) str_to_date (2) 递归查询 (3) 排序问题 (4) 条件函数 (5) 列转行函数 (6) find_int_set (7) 类型转换函数 (8) 合并更新 继上一篇博客& ...
- Springboot 前后端数据传输 常见误区
一 content-Type代表的是,传输数据的编码方式 当ajax,JS向后台发起请求的时候,常常会设置content-type,告知服务器前台传输的数据是什么编码方式 1 application/ ...
- AccessTokenValidation3 源码分析 jwttoken验证流程图
processon分享地址:https://www.processon.com/view/link/5c6a0b59e4b08a7683c40fc5
- Apache Pulsar简介
Apache Pulsar What is Pulsar "Pulsar is a distributed pub-sub messaging platform with a very fl ...
- AOP切面实现原理以及多个切面切同一个地方时的优先级讲解
此博文的编写,源于前段时间的惨痛面试经历.刚好近几天尘埃落定.手头事少,遂总结一二,与各位道友分享,欢迎吐槽指正.今年年初的这段面试经历,已于之前的博文中 整理发出(https://www.cnblo ...
- java发送http get请求的两种方式
长话短说,废话不说 一.第一种方式,通过HttpClient方式,代码如下: public static String httpGet(String url, String charset) thro ...
- Unicode 是不是只有两个字节,为什么能表示超过 65536 个字符
Unicode 目前规划的总空间是17个平面(平面0至16),0x0000 至 0x10FFFF.每个平面有 65536 个码点.你只是大致知道平面0(「Basic Multilingual Pl ...