JavaScript の素晴らしいガイドの詳細なグラフィックとテキストの説明-jsチュートリアル-php.cn

JavaScript の素晴らしいガイドの詳細なグラフィックとテキストの説明

黄舟

リリース： 2017-03-08 14:23:07

オリジナル

1624 人が閲覧しました

この記事は、js の見栄っ張りなスキルを紹介するための

というコンセプトに準拠しています。

以下のヒント、最後の 3 つは、チームプロジェクトでは (主に読みやすさの問題を考慮して) 慎重に使用する必要があります。そうしないと、リーダーが交渉なしで実行することになります。

Boolean

この手法はよく使われており、とても簡単です

!!&#39;foo&#39;

ログイン後にコピー

2を否定することで強制的にBoolean型に変換することができます。より一般的に使用されます。

数値

これも非常に簡単です。文字列を数値に変換

+&#39;45&#39;
+new Date

ログイン後にコピー

すると、自動的に数値型に変換されます。より一般的に使用されます。

IIFE

これは実際には非常に実用的であり、大げさだとは考えられていません。他の言語ではそのようなことはありませんが、JS についてあまり知らない学生にとっては非常に素晴らしいことです。

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

ログイン後にコピー

実際的な価値は、地球規模の汚染を防ぐことにあります。しかし、ES2015が普及した現在では、これを使う必要はなくなり、5年もすればこの書き方は徐々に減っていくと思います。

5年間働いてきたので、インターンの前で自慢するのはかなり良いです〜

閉店

そうですね、jsは特に楽しい場所です。上記の即時実行機能はクロージャの応用です。

理解できない場合は、本に戻って読んでください。Zhihuに関する多くの議論もあるので、確認してください。

クロージャーの使用は、初心者にとってマスターの証にすぎません (実際はそうではありません)。

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

ログイン後にコピー

クロージャーは上で使用されており、かなりクールに見えます。しかし、実用的な価値はないようです。

それで、これはどうですか？

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

ログイン後にコピー

高階関数を使用してカテゴリを決定するのは簡単です。 (Array を決定するために Array.isArray() を忘れないでください)

もちろん、明らかに、これは単なる基本であり、これ以上大げさなことはありません。次のセクションを見てみましょう

イベント

一般的に言えば、イベント応答フロントエンドはどうやって書くべきでしょうか?

rreee

何も問題ないようですが！変数 times が外部に配置されているのはなぜですか? 名前が競合している場合、または外部で変更された場合はどうすればよいですか?

現時点では、このようなイベント監視コードの方が素晴らしいです

var times = 0
var foo = document.querySelector(&#39;.foo&#39;)
foo.addEventListener(&#39;click&#39;, function() {
    times++
    console.log(times)
}, false)

ログイン後にコピー

times为什么放在外面，就用了一次放在外面，命名冲突了怎么办，或者万一在外面修改了怎么办。

这个时候这样一个事件监听代码就比较牛逼了

foo.addEventListener(&#39;click&#39;, (function() {
    var times = 0
    return function() {
        times++
        console.log(times)
    }
})(), false)

ログイン後にコピー

怎么样，是不是立刻感觉不一样了。瞬间逼格高了起来！

通过创建一个闭包，把times封装到里面，然后返回函数。这个用法不太常见。

parseInt

高能预警
从这里开始，下面的代码谨慎写到公司代码里！

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

现在摁下F12，在console里复制粘贴这样的代码：

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

ログイン後にコピー

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

原因在于JavaScript中的number都是double类型的，在位操作的时候要转化成int，两次~就还是原数。

Hex

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

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

做到随机的话可以这样

(~~(Math.random()*(1<<24))).toString(16)

ログイン後にコピー

底下的原文链接非常建议去读一下，后三个技巧都是在那里学到的。

«

左移操作。这个操作特别叼。一般得玩 C 玩得多的，这个操作会懂一些。一般半路出家的前端码农可能不太了解(说的是我 ☹)。

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

解释上面的1<<24的操作。

其实是1左移24位。000000000000000000000001左移24位，变成了1000000000000000000000000どうですか、すぐに違いを感じますか？彼はすぐにさらに強力になりました！

クロージャを作成して、その中に times をカプセル化し、関数を返します。この使用法はあまり一般的ではありません。

parseInt

高エネルギー警告

今後、次のコードを会社コードに慎重に記述する必要があります。

parseInt この関数は普通すぎます。どうやってすごいふりをすることができますか。答えは ~~ です

次に、`F12` を押して、このコードをコピーしてコンソールに貼り付けます:

parseInt(&#39;1000000000000000000000000&#39;, 2) === (1 << 24)

ログイン後にコピー

このテクニックはとてもクールです。原理は ~ です。 < /code> はビット単位の NOT と呼ばれる演算で、値の補数を返します。それは二項演算です。 </p><p>その理由は、JavaScript の数値はすべて double 型であり、ビット演算の際に int に変換する必要があるためです。2 回使用しても、元の数値のままです。 <br/></p>Hex<div></div>16 進数の演算。実は、<code>Array.prototype.toString(16)の使い方です

この言葉を見たときに思い浮かんだ色はCSSカラーでしょう。 🎜🎜ランダムにしたい場合は、これを行うことができます🎜

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

ログイン後にコピー

🎜以下の原文リンクを読むことを強くお勧めします。最後の 3 つのスキルはすべてそこで学びました。 🎜🎜«🎜🎜 左シフト操作。この操作は特に注意が必要です。一般に、C 言語をよくプレイする場合は、この操作について少しは理解できるでしょう。一般的に、修行僧になったフロントエンドコーダーにはよく理解できないかもしれません（私です☹）。 🎜🎜これも二項演算です。上記の 1<<24 の操作を説明するために、バイナリ値を左にシフトします 🎜🎜。 🎜🎜実際には、1 は 24 ビット左にシフトされます。 000000000000000000000001 は左に 24 ビットシフトされ、1000000000000000000000000 になりました🎜🎜信じられませんか? 🎜🎜次のコードをコンソールに貼り付けてみてください🎜

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

ログイン後にコピー

🎜実は、もっとわかりやすい説明方法があります🎜

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

ログイン後にコピー

🎜二項演算なので非常に高速です。 🎜🎜ところで🎜rrreee🎜を通常の言語に翻訳すると、次のようになります🎜rrreee🎜その他🎜🎜その他、いくつかの待機者、デコレーターなど。 TypeScriptを使えば基本的に理解できることは紹介しません。 🎜🎜🎜🎜🎜🎜🎜 🎜

以上がJavaScript の素晴らしいガイドの詳細なグラフィックとテキストの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。