[Diccionario front-end] 4 funciones JS útiles e interesantes

Prefacio

En el proceso de estudiar recientemente, descubrí algunas características que no había entendido antes, y algunas de ellas me parecieron muy interesantes y pueden darme una nueva idea al abordar algunos problemas.

Aquí les presentaré estas características a todos.

4 características interesantes de JS

Use una etiqueta para analizar la URL

A veces necesitamos extraer de una URL nombres de dominio, palabras clave de consulta, valores de parámetros variables, etc. Generalmente, analizaremos la URL nosotros mismos para obtener estos contenidos. Pero es posible que no sepa que existe una forma más fácil.

Es decir, cree una etiqueta a y asigne la URL a analizar al atributo href de a, y luego podemos obtener fácilmente el contenido. el código se muestra a continuación:

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

    };

}

Etiqueta

A veces escribiremos un bucle for doble para hacer algún procesamiento de datos, a veces queremos saltar del bucle directamente cuando se cumplen las condiciones. Para no desperdiciar recursos innecesarios.

En este momento, podemos usar etiqueta y continuar / romper juntos:

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

Creo que puede comprender la declaración marcada a partir de la salida de los dos códigos anteriores.

operador vacío

El operador void evalúa la expresión dada y devuelve undefined.

Dado que void ignora el valor del operando, es más razonable usar void cuando el operando tiene efectos secundarios.

Use void para reemplazar indefinido

Dado que undefined no es una palabra clave de JavaScript, es posible que obtengamos algunos resultados inesperados al asignar una variable a undefined.

function t(){

    var undefined = 10;

    console.log(undefined);

}

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

En el código anterior, es posible que deseemos asignar el valor indefinido, pero obtenemos la situación inexplicable de 10. Entonces podemos usar void para reemplazar undefined.

Es por eso que podemos ver el uso de void en lugar de undefined en muchos códigos fuente.

¿Qué es IntersectionObserver?

IntersectionObserver puede usarse para monitorear si el elemento ingresa al área visual del dispositivo, sin cálculos frecuentes para realizar este juicio.

Entonces podemos usar esta función para lidiar con el punto enterrado de exposición, en lugar de usar getBoundingClientRect (). Top para lidiar con él de una manera más costosa.

Por supuesto, también puede utilizar esta API para optimizar el techo de desplazamiento, el código es el siguiente:

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));

    }

}, 

Espero que estas 4 funciones puedan serle útiles, luego haga clic en Me gusta y listo.

Al final

Si desea unirse al [gran grupo de intercambio de front-end], siga la cuenta oficial y haga clic en "Comunicación y agregar grupo" para agregar un robot que lo incorpore automáticamente al grupo. Sígueme para recibir los últimos productos secos lo antes posible.