教你如何用 JS 强行装逼,有些想都想不到

论坛 期权论坛 期权     
前端你别闹   2019-6-9 21:29   1216   0

文/北妈

阅读本文需要 3.5分钟



今天北妈来点收藏干货,以下代码部分来自网络总结,我们总追求简短有效的方式,有时候一行代码的奇技淫巧能带来很多代码篇幅减少单行简洁的代码很难维护(有时甚至难以理解),但这并不能阻止广大攻城狮们脑洞,在编写简洁的代码后获得一定的满足感。
当然有的代码除了看起来装逼,并没有什么用,还增加了阅读难度。
原文: 12 Amazing JavaScript Shorthand Techniques
[h2]1. 空(null, undefined)验证[/h2]当我们创建了一个新的变量,我们通常会去验证该变量的值是否为空(null)或则未定义(undefined)。这对于 JavaScript 编程来说,是一个经常要考虑到的验证。
如果直接写,那么像下面这样:
if (variable1 !== null || variable1 !== undefined || variable1 !== "") {    let variable2 = variable1;}
我们可以使用一个更加简洁的版本:
let variable2 = variable1 || "";
如果你不信,在谷歌浏览器开发者面板的控制台下试试!
[h2]2. 如何优雅的表示大数字[/h2]在 JavaScript 中,有一个简写数字的方法,也许你忽略了。
  1. 1e7
复制代码
表示 10000000。
简化前:
for (let i = 0; i < 10000; i++) {
简化后:
for (let i = 0; i < 1e7; i++) {
[h2]3. 函数调用还可以更短[/h2]简化前:
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)();
你说四不四很短?
3.1. 另外一种undefined
var data = void 0; // undefined
4.论如何优雅的向下取整
  1. [/code][list=1][*]var a = ~~2.33 //这种方法还可以将字符串转换成数字类型
  2. [*]var b= 2.33 | 0
  3. [*]var c= 2.33 >> 0
  4. [/list][b]5.如何装逼用代码骂别人SB[/b]
  5. (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]
  6. [b]6.如何用代码优雅的证明自己NB[/b]
  7. ([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]
  8. 二以下我最近的一些收藏 [code]javascript
复制代码
精简代码集合。它们都可以在你的开发控制台中运行,你可以从控制台中查看运行结果。
作者:megatron
https://juejin.im/post/5cc55eb5e51d456e577f93f0
[h2]1.日历[/h2]创建过去七天的数组,如果将代码中的减号换成加号,你将得到未来7天的数组集合
    1. [...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));
    复制代码
[h2]2.生成随机ID[/h2]在原型设计时经常使用的创建ID功能。但是我在实际项目中看到有人使用它。其实这并不安全
    1. Math.random().toString(36).substring(2);
    复制代码
[h2]3.获取URL的查询参数[/h2]这个获取URL的查询参数代码,是我见过最精简的
  1. QAQ
复制代码
  1. ?foo=bar&baz=bing => {foo: bar, baz: bing}
复制代码
    1. q={};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);q;
    复制代码
[h2]4.本地时间[/h2]通过一堆HTML,您可以创建一个本地时间,其中包含您可以一口气读出的源代码,它每秒都会用当前时间更新页面
    1. [/code]
    2. [/list][h2]5.数组混淆[/h2]随机更改数组元素顺序,混淆数组
    3. [list=1][*][code](arr) => arr.slice().sort(() => Math.random() - 0.5)
    复制代码
[h2]6.生成随机十六进制代码(生成随机颜色)[/h2]使用JavaScript简洁代码生成随机十六进制代码
    1. '#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');
    复制代码
[h2]7.一个面试题[/h2]这是一个臭名昭著的面试题,让你写出他的运行结果,受不了~
  • [code]for(i=0;++i[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:5
帖子:1
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP