Js实用小技巧

这是一份Js实用小技巧,也可以是一份Js挨打小技巧,下面的一系列操作虽然能够在一定程度上使代码更加简洁,但是在缺少注释的情况下会降低可读性,所以需要谨慎使用这些黑魔法。

位元算

取整

console.log(~~(11.11));     // 11
console.log(11.11 >> 0); // 11
console.log(11.11 << 0); // 11
console.log(11.11 | 0); // 11
console.log(11.11 >>> 0); // 11 // 注意 >>> 不可对负数取整

判断奇偶

console.log(7 & 1);    // 1
console.log(8 & 1) ; // 0

转换布尔值

console.log(!!7);               // true
console.log(!!0); // false
console.log(!!-1); // true
console.log(!!0.71); // true
console.log(!!""); // false
console.log(!![]); // true
console.log(!!{}); // true
console.log(!!null); // false
console.log(!!undefined); // false

移位运算

console.log(16 >> 1);      // 8
console.log(16 << 2); // 64
console.log(1 >>> 1); // 2

进行值交换

let a = 7;
let b = 1;
a ^= b;
b ^= a;
a ^= b;
console.log(a); // 1
console.log(b); // 7 // 也可以借助数组
b = [a, a = b][0]; // 当然解构赋值更简单
[a, b] = [b, a];

判断符号是否相同

let a = 1;
let b = 1;
console.log((a ^ b) >= 0); // true
console.log((a ^ -b) >= 0); // false

检查数字是否不相等

let a = 111;
if(a ^ 111) console.log("Not equal");
if(a !== 111) console.log("Not equal");
if(a ^ 11111) console.log("Not equal"); // Not equal

判断是否2的整数幂

const check = n => !(n & (n - 1));
console.log(check(7)); // false
console.log(check(8)); // true

条件语句

let bool = true;
if(bool) console.log(1); // 1
console.log(bool && console.log(1)); // 1

四舍五入取整

const round = n => n + 0.5 * (n > 0 ? 1 : -1) | 0;
console.log(round(0)); // 0
console.log(round(1.1)); // 1
console.log(round(1.6)); // 2
console.log(round(-1.1)); // -1
console.log(round(-1.6)); // -2

字符串

取随机字符串

console.log(Math.random().toString(16).slice(2)); // c21f331e6ce2b

重复字符串

const repeat = (n, str) => Array(n+1).join(str);
console.log(repeat(5, "ab")); // ababababab
console.log("ab".repeat(5)); // ababababab // ES6

创建链接

console.log("Google".link("www.google.com")); // <a href="www.google.com">Google</a>

其他

正确处理异常的方法

try {
// something
} catch (e) {
window.location.href = "http://stackoverflow.com/search?q=[js]+" + e.message;
}

优雅地证明自己NB

console.log(([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]);

可以替代undefined的操作

console.log(void 0);   // undefined
console.log(""._); // undefined
console.log(1.._); // undefined
console.log(0[0]); // undefined

替代Infinity

console.log([-1/0, 1/0]); // [-Infinity, Infinity]

清空数组

let arr = [1];
arr.length = 0;
console.log(arr); // []

快速判断IE8以下的浏览器

var isIE8 = !+"1";
console.log(isIE8); // false // Chrome 87

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://zhuanlan.zhihu.com/p/150556186
https://zhuanlan.zhihu.com/p/262533240
https://github.com/jed/140bytes/wiki/Byte-saving-techniques

Js实用小技巧的更多相关文章

  1. js 实用小技巧

    https://blog.csdn.net/www93111/article/details/76176771

  2. JS处理事件小技巧

    今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...

  3. PHP 常用函数库和一些实用小技巧

    PHP 常用函数库和一些实用小技巧 作者: 字体:[增加 减小] 类型:转载   包括文件读取函式,文件写入函式,静态页面生成函式,目录删除函式等   文件读取函式 //文件读取函式 function ...

  4. Vim实用小技巧

    Vim实用小技巧 一些网络上质量较高的Vim资料 从我07年接触Vim以来,已经过去了8个年头,期间看过很多的Vim文章,我自己觉得非常不错,而且创作时间也比较近的文章有如下这些. Vim入门 目前为 ...

  5. svn checkout 实用小技巧

    svn checkout 实用小技巧 by:授客 QQ:1033553122   问题描述: 用svn小乌龟软件,进行update,commit之前,先要把svn工作目录checkout到本地,那么问 ...

  6. 实用小技巧(一):UIScrollView中上下左右滚动方向的判断

    https://www.jianshu.com/p/93e8459b6dae 2017.06.01 01:13* 字数 674 阅读 1201评论 0喜欢 1 2017.06.01 01:13* 字数 ...

  7. VC6.0实用小技巧

    VC6.0的若干实用小技巧 .检测程序中的括号是否匹配 把光标移动到需要检测的括号(如大括号{}.方括号[].圆括号()和尖括号<>)前面,键入快捷键 “Ctrl+]”.如果括号匹配正确, ...

  8. 必看!macOS进阶不得不知的实用小技巧

    不知道大家对使用苹果电脑的体验如何?您充分利用您的mac了吗?其实macOS上存在着许多快捷方式和技巧可以帮助简化我们的工作流程,提高效率,但是在日常生活中经常被人们忽略或者遗忘.以下是macdown ...

  9. 实用小技巧:Notepad++直接连接Linux

    实用小技巧:Notepad++直接连接Linux 前言 号称编辑器之神的Vim对于只会用几个基础操作的本人而言,在编辑一些大型文本有那么些力不从心: 平时都是通过Xftp拖到本地,修改完后再覆盖回去: ...

  10. Visual Studio实用小技巧

    有一个有关微软Office的笑话,说的是它的特性太多: 当你觉得自己发现了一个Office的新特性时,它已经存在很多年了. 本文将介绍一些在Visual Studio(免费下载)中很实用却被忽略的小技 ...

随机推荐

  1. CSS - 工具类 tool.css

    /* flex */ .flex{     display: flex; } .f1{     flex:1 } .flex-center{     align-items: center;      ...

  2. Blazor SSR/WASM IDS/OIDC 单点登录授权实例5 - Winform 端授权

    目录: OpenID 与 OAuth2 基础知识 Blazor wasm Google 登录 Blazor wasm Gitee 码云登录 Blazor SSR/WASM IDS/OIDC 单点登录授 ...

  3. [转帖]Zookeeper集群搭建(3个节点为例)

    Zookeeper集群搭建 1.说明 本文用的linux版本:centos6,准备3台centos6虚拟机,给他们安装zookeeper,每一台的安装过程相同,你也可以安装一台,然后克隆出另外两台.主 ...

  4. [转帖]Kubernetes-18:Dashboard安装及使用

    https://www.cnblogs.com/v-fan/p/13950268.html Helm安装Dashboard 简介 Dashboard 是 kubernetes 的图形化管理工具,可直观 ...

  5. 【转帖】什么是RLHF

    什么是RLHF? **字面翻译:**RLHF (Reinforcement Learning from Human Feedback) ,即以强化学习方式依据人类反馈优化语言模型. 强化学习从人类反馈 ...

  6. [转帖]nginx性能和软中断

    https://plantegg.github.io/2022/11/04/nginx%E6%80%A7%E8%83%BD%E5%92%8C%E8%BD%AF%E4%B8%AD%E6%96%AD/ n ...

  7. [转帖]Linux系统中的Page cache和Buffer cache

    Free命令显示内存 首先,我们来了解下内存的使用情况: Mem:表示物理内存统计 total:表示物理内存总量(total = used + free) used:表示总计分配给缓存(包含buffe ...

  8. 定位解析一个因脚本劫持导致webpack动态加载异常的问题

    问题描述 项目现场的前端项目在点击顶部的导航栏切换不同的模块时,会有小概率出现模块加载报错的情况: 我们的前端项目里是有基于react-loadable做的懒加载的,上图的12.be789340.ch ...

  9. 多模态 GPT-V 出世!36 种场景分析 ChatGPT Vision 能力,LMM 将全面替代大语言模型?

    LMM将会全面替代大语言模型?人工智能新里程碑GPT-V美国预先公测,医疗领域/OCR实践+166页GPT-V试用报告首发解读 ChatGPT Vision,亦被广泛称为GPT-V或GPT-4V,代表 ...

  10. 【dp,建模】AGC032D Rotation Sort

    Problem Link 有一个长为 \(n\) 的排列 \(p\),给定 \(A,B\),你每次可以做以下两种操作之一: 选取 \(l,r\),将 \(p[l:r]\) 循环右移,代价为 \(A\) ...