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 <) ? "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 <; i++) {

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

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

************************************华丽的做一些补充(感谢评论区认真回答的童鞋们)**************************************************

10.

var s ="3"; //string
var v = +s;
console.log(v);//3
console.log(typeof v)//number

这里一定要注意数据的类型哦。

11.获取时间戳

获取当前时间戳

方法一:new Date()-0;
方法二:+ new Date() ;

12.清空数组

var list = [1, 2, 3, 4];list.length=0;

13.随机获取整数

例:10以内的随机数 可能的总数就是10个数,最小数就是1
Math.floor(Math.random()*10+1)

14.空字符串、空数组都等于false

console.log(""==false)
输出true
console.log([]==false)
输出true

就如我们@until-u童鞋所说:控制台输入 console,看看有哪些你不知道的函数

真是amazing啊!

 

再次感谢评论区的可爱的童鞋们。

你有什么奇淫巧技,不如分享出来,让我们amazing一下吧!

你说四不四奇淫巧技嘛?

尊重我们的原文作者咔

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

原文: 12 Amazing JavaScript Shorthand Techniques

译者: Fundebug

 

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

  1. [asp.net mvc 奇淫巧技] 05 - 扩展ScriptBundle,支持混淆加密javascript

    一.需求: 在web开发中,经常会处理javascript的一些问题,其中就包括js的压缩,合并,发布版本以及混淆加密等等问题.在asp.net 开发中我们使用ScriptBundle已经可以解决ja ...

  2. [asp.net mvc 奇淫巧技] 01 - 封装上下文 - 在View中获取自定义的上下文

    我们在asp.net 开发中已经封装了最强大的HttpContext,我们可以在HttpContext中可以获取到几乎任何想获取的东西,也可以在HttpContext写入需要返回客户端的信息.但是这些 ...

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

    在web开发中经常会遇到在内部代码中获取Html,这些Html是需要和数据进行一起渲染.并不是直接把Html代码返回给客户端.这样的做法有很多应用场景,例如分页.Ajax一次性获取几段Html片段.生 ...

  4. [asp.net mvc 奇淫巧技] 03 - 枚举特性扩展解决枚举命名问题和支持HtmlHelper

    一.需求 我们在开发中经常会遇到一些枚举,而且这些枚举类型可能会在表单中的下拉中,或者单选按钮中会用到等. 这样用是没问题的,但是用过的人都知道一个问题,就是枚举的命名问题,当然有很多人枚举直接中文命 ...

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

    在QQ群或者一些程序的交流平台,经常会有人问:我怎么传一个数组在Action中接收.我传的数组为什么Action的model中接收不到.或者我在ajax的data中设置了一些数组,为什么后台还是接收不 ...

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

    一.感慨 很久前看到一篇博客中有句话大致的意思是:“asp.net 程序性能低下的主要原因是开发人员技术参差不齐”,当时看到这句话不以为然,然而时间过的越久接触的.net 开发人员越多就越认同这句话: ...

  7. (转)javascript 奇淫巧技44招

    1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但 ...

  8. javascript 奇淫巧技44招

    1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但 ...

  9. javascript 奇淫巧技1

    1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但 ...

随机推荐

  1. 每R一点:层次聚类分析实例实战-dist、hclust、heatmap等(转)

    聚类分析:对样品或指标进行分类的一种分析方法,依据样本和指标已知特性进行分类.本节主要介绍层次聚类分析,一共包括3个部分,每个部分包括一个具体实战例子. 1.常规聚类过程: 一.首先用dist()函数 ...

  2. 关于php内存释放问题 内存溢出问题(二)

    今天抽了一上午时间,来看了看之前解决过内存问题的代码,相对来说,我对自己代码的优化程序非常不满意,一次性导入四万条数据就使代码变得如此繁琐,我想这不是根本的解决方法.通过网上检索,对问题有进一步的分析 ...

  3. Java中设计模式之单例设计模式-1

    单例作用 1 节省内存 2 可以避免多种状态导致状态冲突 单例的创建步骤 1 私有化构造方法 2 私有化声明的属性 3 getInstance 4 方法需要静态 单例分类 1.懒汉式 2.饿汉式 两种 ...

  4. Java经典编程题50道之三十三

    打印出杨辉三角形(要求打印出10行如下图)11 11 2 11 3 3 11 4 6 4 11 5 10 10 5 1 public class Example33 { public static v ...

  5. 多线程异步编程示例和实践-Thread和ThreadPool

    说到多线程异步编程,总会说起Thread.ThreadPool.Task.TPL这一系列的技术.总结整理了一版编程示例和实践,分享给大家. 先从Thread和ThreadPool说起: 1. 创建并启 ...

  6. 启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”的解决方法!

    原因:eclipse的版本与jre或者jdk版本不一致 对策:要么两者都安装64位的,要么都安装32位的,不能一个是32位一个是64位. 这种错误的原因可能性比较大,不排除其他因素

  7. Vulkan Tutorial 16 Command buffers

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 诸如绘制和内存操作相关命令,在Vulkan中不是通过函数直接调用的.我们需要在命令缓 ...

  8. eclipse 更改官方配色

    打开Eclipse,help->Install new software, 输入 http://eclipse-color-theme.github.com/update,等待就OK了. 然后w ...

  9. 一劳永逸的解决AFNetworking3.0网络请求问题(面向对象封装大法,block回调)

    AFNetworking在iOS网络请求第三方库中占据着半壁江山,前段时间将AFNetworking进行了3.0版本的迁移,运用面向对象的设计将代码进行封装整合,这篇文章主要为还在寻找AFNetwor ...

  10. redmine测试使用小结

    在尽量不影响当前项目活动的情况下,可以对测试过程作部分改进,能够支持建立项目的BUG管理过程,简述如下: 1.配置角色和权限->新建角色:测试人员 (1)主要配置问题跟踪权限 (2)提前规划好再 ...