[Front-end словарь] 4 полезных и интересных функции JS

Предисловие

Недавно в процессе изучения я обнаружил некоторые особенности, которые раньше не понимал, и нашел некоторые из них очень интересными и которые могут дать мне новую идею при решении некоторых проблем.

Здесь я познакомлю всех с этими функциями.

4 интересных функции JS

Используйте тег для анализа URL

Иногда нам нужно извлечь из URL-адреса имена доменов, ключевые слова запроса, значения переменных параметров и т. Д. Как правило, мы сами анализируем URL-адрес, чтобы получить это содержимое. Но вы можете не знать, что есть более простой способ.

То есть создайте тег и назначьте URL-адрес для анализа атрибуту href элемента a, и тогда мы сможем легко получить контент. код показан ниже:

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('#','')

    };

}

метка

Иногда мы напишем цикл double for для обработки данных, иногда мы хотим выйти из цикла сразу после выполнения условий. Чтобы не тратить лишние ресурсы.

В это время мы можем использовать метку и продолжить / разорвать вместе:

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

Я считаю, что вы можете понять отмеченный оператор из результатов двух приведенных выше фрагментов кода.

недействительный оператор

Оператор void оценивает данное выражение и возвращает значение undefined.

Поскольку void игнорирует значение операнда, разумнее использовать void, когда операнд имеет побочные эффекты.

Используйте void для замены undefined

Поскольку undefined не является ключевым словом JavaScript, мы можем получить неожиданные результаты при присвоении переменной undefined.

function t(){

    var undefined = 10;

    console.log(undefined);

}

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

В приведенном выше коде мы можем захотеть присвоить значение undefined, но мы получаем необъяснимую ситуацию 10. Таким образом, мы можем использовать void для замены undefined.

Вот почему мы можем видеть использование void вместо undefined во многих исходных кодах.

Что такое 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 функции могут быть вам полезны, нажмите "Нравится" и вперед.

В конце концов

Если вы хотите присоединиться к [большой группе внешнего обмена], подпишитесь на официальную учетную запись и нажмите «Связь и добавить группу», чтобы добавить робота, который автоматически втянет вас в группу. Обратите внимание на то, чтобы я получил самую свежую галантерею как можно скорее.