JavaScript 装逼指南

2024年4月8日 90次阅读 来源: AnnatarHe

Summary

本文秉持着

你看不懂是你sb，我写的代码就是牛逼

的理念来引见一些js的装逼技能。

下面的技能，后三个，请郑重用于团队项目中(重要考虑到可读性的缘由)，不然，leader 能够请你品茗。

Boolean

这个技能用的许多，也异常的简朴

!!'fuck'

经由过程两个取反，能够强迫转换为Boolean范例。较为经常使用。

Number

这个也迥殊简朴，String转化为Number

+'45'
+new Date

会自动转化为number范例的。较为经常使用。

IIFE

这个实在异常有实用价值，不算是装逼。只是其他言语里没有这么玩的，给不太相识js的同砚看那可牛逼大了。

(function(arg) {
    // to do
})(arg)

实用价值在于能够防备全局污染。不过如今跟着ES2015的提高已没什么必要用这个了，我置信五年以后，这类写法就会逐步衰败。

本身干五年，在练习生眼前装逼用也是蛮不错的嘛~

Closure

闭包嘛，js 迥殊好玩的一个处所。上面的马上实行函数就是对闭包的一种应用。

不相识的归去翻翻书，知乎上也有许多议论，能够去看看。

闭包用起来对初学者来讲几乎就是大牛的标志(实在并非)。

var counter = function() {
    var count = 0
    return function() {
        return count++
    }
}

上面用到了闭包，看起来还挺装逼的吧。不过彷佛没什么实用价值。

那末如许呢？

var isType = function(type) {
    return function(obj) {
        return toString.call(obj) == '[Object ' + type + ']';
    }
}

经由过程高阶函数很轻松的完成剖断种别。(别忘了有剖断Array的Array.isArray())

固然，很明显，这只是基本，并不能更装逼一点。来看下一节

Event

事宜相应前端肯建都写烂了，平常来讲如何写一个计数器呢？

var times = 0
var fuck = document.querySelector('.fuck')
fuck.addEventListener('click', function() {
    times++
    console.log(times)
}, false)

彷佛是没什么题目哦，然则！变量times为何放在表面，就用了一次放在表面，定名争执了怎么办，或许万一在表面修改了怎么办。

这个时刻如许一个事宜监听代码就比较牛逼了

fuck.addEventListener('click', (function() {
    var times = 0
    return function() {
        times++
        console.log(times)
    }
})(), false)

怎样，是否是马上觉得不一样了。霎时逼格高了起来！

经由过程建立一个闭包，把times封装到内里，然后返回函数。这个用法不太罕见。

parseInt

高能预警

从这里最先，下面的代码郑重写到公司代码里！

parseInt这个函数太普通了，怎么能装逼。答案是~~

如今摁下F12，在console里复制粘贴如许的代码：

~~3.14159
// => 3
~~5.678
// => 5

这个技能十分装逼，道理是~是一个叫做按位非的操纵，会返回数值的反码。是二进制操纵。

Hex

十六进制操纵。实在就是一个Array.prototype.toString(16)的用法

看到这个词脑壳里冒出的肯定是CSS的色彩。

做到随机的话能够如许

(~~(Math.random()*((1<<24)-1))).toString(16)+'00000').substring(0,7)

感谢@scar订正

底下的原文链接异常发起去读一下，后三个技能都是在那里学到的。

<<

左移操纵。这个操纵迥殊叼。平常得玩 C 玩很多的，这个操纵会懂一些。平常半路出家的前端码农能够不太相识(说的是我 ☹)。

这个也是二进制操纵。将数值二进制左移

诠释上面的1<<24的操纵。

实际上是1左移24位。000000000000000000000001左移24位，变成了1000000000000000000000000

不信？

试着在console粘贴下面的代码

parseInt('1000000000000000000000000', 2) === (1 << 24)

实在另有一种更轻易明白的方法来诠释

Math.pow(2,24) === (1 << 24)

由于是二进制操纵，所以速率是很快的。

BTW

[].forEach.call($$("*"),function(a){
    a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

翻译成一般言语就是如许的

Array.prototype.forEach.call(document.querySelectorAll('*'), dom => dom.style.outline = `1px solid #${parseInt(Math.random() * Math.pow(2,24)).toString(16)}`)

Others

其他的，像是一些await, Decorators什么的。用上TypeScript基本就懂的东西我就不引见了。

祝贺人人越玩越牛逼

References

原文：JavaScript 装逼指南
趁便求Web练习

    原文作者：AnnatarHe
    原文地址: https://segmentfault.com/a/1190000004972445
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞