[フロントエンド辞書] 4つの便利で興味深いJS機能

序文

最近勉強しているうちに、今まで理解できなかった機能を発見し、とても面白くて、問題に対処するときに新しいアイデアが浮かびます。

ここでは、これらの機能を皆さんに紹介します。

4つの興味深いJS機能

タグを使用してURLを解析します

URLからドメイン名、クエリキーワード、可変パラメータ値などを抽出する必要がある場合があります。通常、これらのコンテンツを取得するには、URLを自分で解析します。しかし、もっと簡単な方法があることを知らないかもしれません。

つまり、タグを作成し、解析するURLをのhref属性に割り当てると、コンテンツを簡単に取得できます。コードは次のように表示されます。

function parseURL(url) {

    var a =  document.createElement('a');

    a.href = url;

    return {

        host: a.hostname,

        port: a.port,

        query: a.search,

        params: (function(){

            var ret = {},

                seg = a.search.replace(/^\?/,'').split('&'),

                len = seg.length, i = 0, s;

            for (;i<len;i++) {

                if (!seg[i]) { continue; }

                s = seg[i].split('=');

                ret[s[0]] = s[1];

            }

            return ret;

        })(),

        hash: a.hash.replace('#','')

    };

}

ラベル

データ処理を行うためにdoubleforループを作成する場合もあれば、条件が満たされたときにループから直接ジャンプしたい場合もあります。不要なリソースを無駄にしないように。

現時点では、ラベルを使用して、一緒に続行/中断できます。

firstLoop: 

for (let i = 0; i < 3; i++) { 

   for (let j = 0; j < 3; j++) {

      if (i === j) {

         continue firstLoop; // 继续 firstLoop 循环

         // break firstLoop; // 中止 firstLoop 循环

      }

      console.log(`i = ${i}, j = ${j}`);

   }

}

// 输出

i = 1, j = 0

i = 2, j = 0

i = 2, j = 1

for (let i = 0; i < 3; i++) { 

   for (let j = 0; j < 3; j++) {

      if (i === j) {

         continue 

      }

      console.log(`i = ${i}, j = ${j}`);

   }

}

// 输出

i = 0, j = 1

i = 0, j = 2

i = 1, j = 0

i = 1, j = 2

i = 2, j = 0

i = 2, j = 1

上記の2つのコードの出力から、マークされたステートメントを理解できると思います。

ボイド演算子

void演算子は、指定された式を評価し、undefinedを返します。

voidはオペランドの値を無視するため、オペランドに副作用がある場合はvoidを使用する方が合理的です。

voidを使用して未定義を置き換えます

undefinedはJavaScriptキーワードではないため、変数をundefinedに割り当てると、予期しない結果が生じる可能性があります。

function t(){

    var undefined = 10;

    console.log(undefined);

}

console.log(t()); // 所有浏览器下都是10

上記のコードでは、値をundefinedに割り当てたい場合がありますが、説明できない状況である10が発生します。したがって、voidを使用して未定義を置き換えることができます。

これが、多くのソースコードで未定義ではなくvoidの使用を確認できる理由です。

IntersectionObserverとは何ですか？

IntersectionObserverを使用すると、この判断を行うための頻繁な計算を行わなくても、要素がデバイスの視覚領域に入るのかどうかを監視できます。

したがって、getBoundingClientRect（）。topを使用してよりコストのかかる方法で処理する代わりに、この機能を使用して露出の埋め込みポイントを処理できます。

もちろん、このAPIを使用してスクロールの上限を最適化することもできます。コードは次のとおりです。

IntersectionObserverFun: function() {

    let self = this;

    let ele = self.$refs.pride_tab_fixed;

    if( !IntersectionObserver ){

        let observer = new IntersectionObserver(function(){

            let offsetTop = ele.getBoundingClientRect().top;

            self.titleFixed = offsetTop < 0;

        }, {

            threshold: [1]

        });

        observer.observe(document.getElementsByClassName('title_box')[0]);

    } else {

        window.addEventListener('scroll', _.throttle(function(){

            let offsetTop = ele.getBoundingClientRect().top;

            self.titleFixed = offsetTop < 0;

        }, 50));

    }

}, 

これらの4つの機能がお役に立てば幸いです。次に、[いいね]をクリックして移動します。

やっと

[大きなフロントエンド交換グループ]に参加したい場合は、公式アカウントをフォローし、[通信とグループの追加]をクリックしてロボットを追加し、自動的にグループに参加させます。できるだけ早く最新の乾物を受け取るように注意してください。