[javascript 实践篇]——那些你不知道的“奇淫巧技”

1. 空(null, undefined)验证

刚开始,我是比较蠢的验证(我还真是这样子验证的)

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 = ["myString1", "myString2", "myString3"];

3. if true .. else 的优化

其实就是用三元运算

let big;
if (x > 10) {
    big = true;
}
else {
    big = false;
}

可以变成这样子的啦

let big = x > 10 ? true : false;

是不是简洁了呢,三元运算可以在很多的地方用到,(vue 里面 判断组件的加载,,,是不是跑题了 )

再来一个例子

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. 变量声明

变量声明,这样子的 let x; let y;......

不妨这样像我这样子,简单又明了

let x, y, z=3;

5. 赋值语句的简化

刚开始是这样子的

x=x+1;
minusCount = minusCount - 1;
y=y*10;

摇身一变成

x++;
minusCount --;
y*=10;

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)

比起这样字的会不会好一点呢

if (likeJavaScript === true)

8.函数调用还可以更短

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)();

9. 如何优雅的表示大数字

在JavaScript中,有一个简写数字的方法,也许你忽略了。1e7表示10000000。

简化前:

for (let i = 0; i < 10000; i++) {

le7...............................................................................................(调皮啊)

for (let i = 0; i < 1e7; i++) {

你说四不四奇淫巧技嘛?

尊重我们的原文作者咔

版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/07/06/12-tricks-that-js-rocks/
时间: 2024-10-01 03:13:17

[javascript 实践篇]——那些你不知道的“奇淫巧技”的相关文章

[asp.net mvc 奇淫巧技] 06 - 也许你的项目同一个用户的请求都是同步的

一.感慨 很久前看到一篇博客中有句话大致的意思是:“asp.net 程序性能低下的主要原因是开发人员技术参差不齐”,当时看到这句话不以为然,然而时间过的越久接触的.net 开发人员越多就越认同这句话:特别最近发现非常一个成熟的项目中有些问题非常非常影响性能,最终影响的是用户体验,借此给大家分享一下关于asp.net中一个小小的点,但对项目有很大的性能提升:以前觉得自己接触的项目少小,然后接触的项目越多,越大就会越发现,同样的问题依旧存在: 二.先从最简单的asp.net mvc例子说起 1.Co

[asp.net mvc 奇淫巧技] 04 - 你真的会用Action的模型绑定吗?

在QQ群或者一些程序的交流平台,经常会有人问:我怎么传一个数组在Action中接收.我传的数组为什么Action的model中接收不到.或者我在ajax的data中设置了一些数组,为什么后台还是接收不了.还有一些怎么传送一个复杂的对象或者Action怎么接收一个复杂的对象等等这些问题.或者有些人遇到复杂的对象或者数组直接就传送个json字符串,然后在Action中把json字符串转成model对象,当然这也是一种做法,但也许不是最优的做法. 一.需求 按照如图的数据格式,传入到Action,用一

源码解析中看到的奇淫巧技

源码解析中看到的奇淫巧技 一. 数组重置 let arr = [123,123] arr.length // 2 arr.length = 0 arr // [] 当我们给数组的length 属性设置成 0 .那么数组就会被重置为空. (很神奇有木有 二. 数据类型判断 1. 判断是否为 undefined let isUndef = function(v) { return v === undefined || v === null } 2. 判断是否 不为空 let isDef = func

【C#冷知识系列】(一)那些你知道或者不知道的奇淫巧技

引子 正如我在个人介绍中所写,我是一个仍然坚持.NET的头铁高级软件工程师,研究C#,.NET已经六年多,一直坚持认为自己的能力不足以教授别人,所以一直没有想法写博客.工作几年,内容涵盖了.NET框架下的各种软件的开发,WPF,WinForm,WebForm,ASP.NET,MVC5,开发的软件几乎涵盖了.NET家族的各个成员.让我下定决心写一系列C#高级开发文章的原因并不是因为某天早上起床突如其来的兴致勃勃的决定要将自己这些年积累的经验分享给大家,而是是因为公司前端的一句"快脱坑吧,你们做WP

(转)javascript 奇淫巧技44招

1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快. [10] === 10 // is false [10] == 10 // is true '10' == 10 // is true '10' === 10 // is false [] == 0 // is true

【奇淫巧技】XSS绕过技巧

声明一下:各位大佬不要问我htmlspecialchars怎么绕过,这个函数本身就是用来防御xss攻击的,确实在某些情况下由于开发者的疏忽导致这个函数不起作用(不算绕过),这个有兴趣的可以自行百度,这里不做解释. 1.首先是弹窗函数: alert(1) prompt(1) confirm(1)eval( 2.然后是字符的编码和浏览器的解析机制: 要讲编码绕过,首先我们要理解浏览器的解析过程,浏览器在解析HTML文档时无论按照什么顺序,主要有三个过程:HTML解析.JS解析和URL解析,每个解析器

web.config的奇淫巧技

<connectionStrings configSource="db.config"/> 外部文件db.config: <connectionStrings> <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-WebApplication1-20140304225906;Inte

奇淫巧技之程序启动后在进程列表中隐藏密码等关键信息2

在上一篇总结中,在进程列表中隐藏密码是通过在main函数中做处理来隐藏的. 如下: 1 int _main(int argc, char* argv[], char** envp) { 2 3 省略中间一些代码内容 4 5 // hide password from ps output 6 7 for (int i = 0; i < (argc - 1); ++i) { 8 9 if (!strcmp(argv[i], "-p") || !strcmp(argv[i], &quo

[asp.net mvc 奇淫巧技] 02 - 巧用Razor引擎在Action内生成Html代码

在web开发中经常会遇到在内部代码中获取Html,这些Html是需要和数据进行一起渲染.并不是直接把Html代码返回给客户端.这样的做法有很多应用场景,例如分页.Ajax一次性获取几段Html片段.生成邮件发送模板.生成Html静态页面等等.比较简单的或者容易想到的做法就是直接拼接Html,当然这肯定不是最合适的做法. 应用场景 1.在分页中,有一种做法是用ajax获取table的html代码和一些分页信息的Json var json = { "table": "<ta