ホームページ > 記事 > ウェブフロントエンド > JavaScript の素晴らしいガイドの詳細なグラフィックとテキストの説明
この記事は、js の見栄っ張りなスキルを紹介するための
以下のヒント、最後の 3 つは、チーム プロジェクトでは (主に読みやすさの問題を考慮して) 慎重に使用する必要があります。そうしないと、リーダーが交渉なしで実行することになります。というコンセプトに準拠しています。
Boolean
この手法はよく使われており、とても簡単です!!'foo'
+'45' +new Date
(function(arg) { // do something })(arg)
理解できない場合は、本に戻って読んでください。Zhihuに関する多くの議論もあるので、確認してください。
クロージャーの使用は、初心者にとってマスターの証にすぎません (実際はそうではありません)。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() を忘れないでください) もちろん、明らかに、これは単なる基本であり、これ以上大げさなことはありません。次のセクションを見てみましょうイベント 一般的に言えば、イベント応答フロントエンドはどうやって書くべきでしょうか?
times
が外部に配置されているのはなぜですか? 名前が競合している場合、または外部で変更された場合はどうすればよいですか? 現時点では、このようなイベント監視コードの方が素晴らしいですvar times = 0 var foo = document.querySelector('.foo') foo.addEventListener('click', function() { times++ console.log(times) }, false)
times
为什么放在外面,就用了一次放在外面,命名冲突了怎么办,或者万一在外面修改了怎么办。
这个时候这样一个事件监听代码就比较牛逼了
foo.addEventListener('click', (function() { var times = 0 return function() { times++ console.log(times) } })(), false)
怎么样,是不是立刻感觉不一样了。瞬间逼格高了起来!
通过创建一个闭包,把times
封装到里面,然后返回函数。这个用法不太常见。
高能预警
从这里开始,下面的代码谨慎写到公司代码里!
parseInt
这个函数太普通了,怎么能装逼。答案是~~
现在摁下F12
,在console里复制粘贴这样的代码:
~~3.14159 // => 3 ~~5.678 // => 5
这个技巧十分装逼,原理是~
是一个叫做按位非的操作,会返回数值的反码。是二进制操作。
原因在于JavaScript中的number都是double类型的,在位操作的时候要转化成int,两次~就还是原数。
十六进制操作。其实就是一个Array.prototype.toString(16)
的用法
看到这个词脑袋里冒出的肯定是CSS的颜色。
做到随机的话可以这样
(~~(Math.random()*(1<<24))).toString(16)
底下的原文链接非常建议去读一下,后三个技巧都是在那里学到的。
左移操作。这个操作特别叼。一般得玩 C 玩得多的,这个操作会懂一些。一般半路出家的前端码农可能不太了解(说的是我 ☹)。
这个也是二进制操作。将数值二进制左移
解释上面的1<<24
的操作。
其实是1左移24位。000000000000000000000001
左移24位,变成了1000000000000000000000000
どうですか、すぐに違いを感じますか?彼はすぐにさらに強力になりました!
クロージャを作成して、その中に times
をカプセル化し、関数を返します。この使用法はあまり一般的ではありません。
parseInt
高エネルギー警告今後、次のコードを会社コードに慎重に記述する必要があります。parseInt
この関数は普通すぎます。どうやってすごいふりをすることができますか。答えは ~~
です
F12
を押して、このコードをコピーしてコンソールに貼り付けます: parseInt('1000000000000000000000000', 2) === (1 << 24)
このテクニックはとてもクールです。原理は ~ です。 はビット単位の NOT と呼ばれる演算で、値の補数を返します。それは二項演算です。
その理由は、JavaScript の数値はすべて double 型であり、ビット演算の際に int に変換する必要があるためです。2 回使用しても、元の数値のままです。
Array.prototype.toString(16)
の使い方ですこの言葉を見たときに思い浮かんだ色はCSSカラーでしょう。 🎜🎜ランダムにしたい場合は、これを行うことができます🎜Math.pow(2,24) === (1 << 24)🎜以下の原文リンクを読むことを強くお勧めします。最後の 3 つのスキルはすべてそこで学びました。 🎜🎜«🎜🎜 左シフト操作。この操作は特に注意が必要です。一般に、C 言語をよくプレイする場合は、この操作について少しは理解できるでしょう。一般的に、修行僧になったフロントエンドコーダーにはよく理解できないかもしれません(私です☹)。 🎜🎜これも二項演算です。上記の
1 の操作を説明するために、バイナリ値を左にシフトします 🎜🎜。 🎜🎜実際には、1 は 24 ビット左にシフトされます。 <code>000000000000000000000001
は左に 24 ビットシフトされ、1000000000000000000000000
になりました🎜🎜信じられませんか? 🎜🎜次のコードをコンソールに貼り付けてみてください🎜[].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)}`)🎜二項演算なので非常に高速です。 🎜🎜ところで🎜rrreee🎜を通常の言語に翻訳すると、次のようになります🎜rrreee🎜その他🎜🎜その他、いくつかの待機者、デコレーターなど。 TypeScriptを使えば基本的に理解できることは紹介しません。 🎜🎜🎜🎜🎜🎜🎜 🎜
以上がJavaScript の素晴らしいガイドの詳細なグラフィックとテキストの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。