[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 <) ? "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 实践篇]——那些你不知道的“奇淫巧技”的更多相关文章
- [asp.net mvc 奇淫巧技] 05 - 扩展ScriptBundle,支持混淆加密javascript
一.需求: 在web开发中,经常会处理javascript的一些问题,其中就包括js的压缩,合并,发布版本以及混淆加密等等问题.在asp.net 开发中我们使用ScriptBundle已经可以解决ja ...
- [asp.net mvc 奇淫巧技] 01 - 封装上下文 - 在View中获取自定义的上下文
我们在asp.net 开发中已经封装了最强大的HttpContext,我们可以在HttpContext中可以获取到几乎任何想获取的东西,也可以在HttpContext写入需要返回客户端的信息.但是这些 ...
- [asp.net mvc 奇淫巧技] 02 - 巧用Razor引擎在Action内生成Html代码
在web开发中经常会遇到在内部代码中获取Html,这些Html是需要和数据进行一起渲染.并不是直接把Html代码返回给客户端.这样的做法有很多应用场景,例如分页.Ajax一次性获取几段Html片段.生 ...
- [asp.net mvc 奇淫巧技] 03 - 枚举特性扩展解决枚举命名问题和支持HtmlHelper
一.需求 我们在开发中经常会遇到一些枚举,而且这些枚举类型可能会在表单中的下拉中,或者单选按钮中会用到等. 这样用是没问题的,但是用过的人都知道一个问题,就是枚举的命名问题,当然有很多人枚举直接中文命 ...
- [asp.net mvc 奇淫巧技] 04 - 你真的会用Action的模型绑定吗?
在QQ群或者一些程序的交流平台,经常会有人问:我怎么传一个数组在Action中接收.我传的数组为什么Action的model中接收不到.或者我在ajax的data中设置了一些数组,为什么后台还是接收不 ...
- [asp.net mvc 奇淫巧技] 06 - 也许你的项目同一个用户的请求都是同步的
一.感慨 很久前看到一篇博客中有句话大致的意思是:“asp.net 程序性能低下的主要原因是开发人员技术参差不齐”,当时看到这句话不以为然,然而时间过的越久接触的.net 开发人员越多就越认同这句话: ...
- (转)javascript 奇淫巧技44招
1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但 ...
- javascript 奇淫巧技44招
1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但 ...
- javascript 奇淫巧技1
1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但 ...
随机推荐
- Easy machine learning pipelines with pipelearner: intro and call for contributors
@drsimonj here to introduce pipelearner – a package I'm developing to make it easy to create machine ...
- Java经典编程题50道之一
有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? public class Example01 { publi ...
- C/C++遍历目录下的所有文件(Windows/Linux篇,超详细)
本文可转载,转载请注明出处:http://www.cnblogs.com/collectionne/p/6815924.html. 前面的一篇文章我们讲了用Windows API遍历一个目录下的所有文 ...
- 移动端H5通用表单验证插件
将表单验证的通用部分提炼出来,做成一个简易插件,方便调用. 已将源码放到GitHub上,名字叫zValidate. 手机可扫描下图查看示例,PC端可点击此处查看: 一.原理 1)需要引入zepto.j ...
- LinkedList集合
LinkedList集合特点: 1,有序,允许重复(有序指与添加顺序一致) 2,有下标,可以通过下标获取元素,以及将元素插入指定位置 3,底层使用的数据结构是链表以及堆栈结构,线程不安全 4,链表内存 ...
- cpp(第十七章)
1.baseic_ostream<charT,traits>& write(const char_type *s,streamsize n),cout.write()第一个参数提供 ...
- 《Python编程从入门到实践》_第四章_操作列表
for循环遍历整个列表 pizzas = ['pizzahut','dicos','KFC'] for pizza in pizzas: print ("I like "+ piz ...
- grid表格选择模式
selModel: { // type: 'checkboxmodel', type: 'cellmodel', // mode: 'SIMPLE', mode: 'SINGLE', checkOnl ...
- textarea的中文输入判断与搜狗输入法的特殊行为
虽然要讲解的知识点是通用的,但是还是要介绍下我的应用场景和测试环境. 0.1 应用场景和测试环境 我的应用是一块使用Html Canvas开发的黑板,在黑板上实现简单的文字编辑功能. 操作系统:win ...
- none 和 host 网络的适用场景 - 每天5分钟玩转 Docker 容器技术(31)
本章开始讨论 Docker 网络. 我们会首先学习 Docker 提供的几种原生网络,以及如何创建自定义网络.然后探讨容器之间如何通信,以及容器与外界如何交互. Docker 网络从覆盖范围可分为单个 ...