¡20 habilidades de JS para ayudarte a mejorar la eficiencia en el trabajo y nunca más volver a trabajar horas extras!

En nuestras tareas diarias, escribimos funciones como ordenar, buscar, encontrar valores únicos, pasar parámetros, intercambiar valores, etc., ¡así que aquí he compilado una lista de mis consejos taquigráficos!

JavaScript es realmente un gran lenguaje para aprender y usar. Para un problema determinado, puede haber más de una forma de llegar a la misma solución. En este artículo, solo discutiremos los más rápidos.

Estos métodos definitivamente te ayudarán:

• reducir la cantidad de LOC (líneas de código),
• competencias de codificación,
• hackathons
• u otras tareas de tiempo limitado.

La mayoría de estos Hacks de JavaScript utilizan ECMAScript6 (ES2015) y tecnologías posteriores, aunque la última versión es ECMAScript11 (ES2020).

==Nota==: Todos los consejos siguientes se han probado en la consola de Google Chrome.

1. Declarar e inicializar la matriz

Podemos inicializar una matriz de un tamaño específico usando un valor predeterminado (como "", nulo o 0). Es posible que ya los esté usando para matrices 1D, pero ¿cómo se inicializa una matriz/matriz 2D?

matriz constante = Array(5).fill(''); 
// Salida(5) ["", "", "", "", ""]

matriz constante = Array(5).fill(0).map(()=>Array(5).fill(0)); 
// Salida(5) [Matriz(5), Matriz(5), Matriz(5), Matriz(5), Matriz(5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0, 0, 0, 0, 0]
4: (5) [0, 0, 0, 0, 0]
longitud: 5

2. Encuentre la suma, los valores mínimo y máximo.

Deberíamos usar el método reduce para encontrar rápidamente operaciones matemáticas básicas.

matriz constante = [5,4,7,8,9,2];

• y

matriz.reduce((a,b) => a+b);
// Salida: 35

• máximo

array.reduce((a,b) => a>b?a:b);
// Salida: 9

• mínimo

array.reduce((a,b) => a<b?a:b);
// Salida: 2

3. Ordenar matrices de cadenas, números u objetos

Tenemos métodos integrados sort() y reverse() para ordenar cadenas, pero ¿qué pasa con matrices de números u objetos?

Veamos técnicas de clasificación ascendente y descendente para números y objetos.

• Ordenar matriz de cadenas

const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort();
// Salida(4) ["Joe", "Kapil", "Musk", "Steve"]

stringArr.reverse();
// Salida (4) ["Steve", "Musk", "Kapil", "Joe"]

• matriz de números ordenados

const array = [40, 100, 1, 5, 25, 10];
matriz.sort((a,b) => ab);
// Salida(6) [1, 5, 10, 25, 40, 100]

array.sort((a,b) => ba);
// Salida (6) [100, 40, 25, 10, 5, 1]

• ​​​​matriz de objetos ordenando

const objectArr = [
     {primer_nombre: 'Lazslo', apellido: 'Jamf' },
     {primer_nombre: 'Cerdo', apellido: 'Bodine' },    
     {primer_nombre: 'Pirata', apellido: 'Prentice' }
];
objectArr.sort((a, b) => a.apellido.localeCompare(b.apellido));
// Salida(3) [{…}, {…}, {…}]
0: {primer_nombre: "Cerdo", apellido: "Bodine"}
1: {primer_nombre: "Lazslo", apellido: "Jamf"}
2: {primer_nombre: "Pirata", apellido: "Prentice"}
longitud: 3

4. Filtre los valores falsos de la matriz

Los valores falsos como 0 , undefined , null , false , "" , '' se pueden omitir fácilmente mediante

const array = [3, 0, 6, 7, '' , FALSO];
matriz.filtro(Booleano);
// Salida (3) [3, 6, 7]

5. Utilice operadores lógicos para diversas condiciones.

Si desea reducir el if...else anidado o cambiar casos, simplemente puede utilizar los operadores lógicos básicos AND/OR .

función hacer algo(arg1){ 
    arg1 = arg1 || 10; 
// Establece arg1 en 10 como valor predeterminado si aún no está configurado return arg1;
}

sea ​​foo = 10;  
foo === 10 && hacer algo(); 
// es lo mismo que if (foo == 10) then doSomething();
// Salida: 10

foo === 5 || hacer algo();
// es lo mismo que si (foo != 5) entonces hagaAlgo();
// Salida: 10

6. Eliminar valores duplicados

Es posible que haya utilizado indexOf() con un bucle for que devuelve el primer índice encontrado o el includes() más reciente que devuelve un booleano verdadero/falso de una matriz para encontrar Out/eliminar duplicados. Aquí es donde tenemos dos métodos más rápidos.

matriz constante = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// o
const nonUnique = [...nuevo conjunto (matriz)];
// Salida: [5, 4, 7, 8, 9, 2]

7. Crear un objeto contador o mapa

La mayoría de las veces, es necesario resolver el problema creando un objeto contador o mapa que rastree las variables como claves, y realizar un seguimiento de su frecuencia/ocurrencia como un valor.

let cadena = 'kapilalipak';

tabla constante={}; 
for(let char de cadena) {
  tabla[char]=tabla[char]+1 || 1;
}
// Salida {k: 2, a: 3, p: 2, i: 2, l: 2}

y

const countMap = new Map();
  for (sea i = 0; i < cadena.longitud; i++) {
    si (countMap.has (cadena [i])) {
      countMap.set(cadena[i], countMap.get(cadena[i]) + 1);
    } demás {
      countMap.set(cadena[i], 1);
    }
  }
// Output Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

8. El operador ternario es muy Genial,

puedes evitar condicionales anidados usando el operador ternario if…elseif…elseif.

función Fiebre (temperatura) {
    temperatura de retorno > 97 ? '¡Visite al médico!'
      : temp < 97 ? '¡¡Sal y juega!!'
      : temp === 97 ? '¡Descansa un poco!';
}

// Output Fever(97): "¡Descansa un poco!" 
Fever(100): "¡Visite al médico!"

9. El bucle for es más rápido en comparación con el antiguo

• for y for..in que le proporciona un índice de forma predeterminada, pero puede usar arr[index].
• for..in también acepta números que no sean números, así que evítelo.
• forEach , for...of obtener elementos directamente.
• forEach también puede darle un índice, pero for...of no puede.
• for y for...of considere los agujeros en la matriz, pero no los otros 2.

10. Fusionar 2 objetos

Normalmente necesitamos fusionar varios objetos en las tareas diarias.

usuario constante = { 
 nombre: 'Kapil Raghuwanshi', 
 género: 'masculino' 
 };
universidad constante = { 
 primaria: 'Escuela primaria Mani', 
 secundaria: 'Escuela secundaria Lass' 
 };
habilidades constantes = { 
 programación: 'Extrema', 
 natación: 'promedio', 
 durmiendo: 'Pro' 
 };

resumen const = {...usuario, ...universidad, ...habilidades};

// Género de salida: "Masculino"
nombre: "Kapil Raghuwanshi"
primaria: "Escuela primaria Mani"
programación: "extrema"
secundaria: "Escuela secundaria Lass"
durmiendo: "Pro"
natación: "Promedio"

11. Funciones de flecha

Las expresiones de función de flecha son alternativas compactas a las expresiones de función tradicionales, pero tienen limitaciones y no se pueden usar en todas las situaciones. Dado que tienen alcance léxico (el alcance principal) y no tienen su propio alcance, this arguments se refieren al entorno en el que están definidos.

persona constante = {
nombre: 'Kapil',
decir nombre() {
    devolver este.nombre;
    }
}
persona.decirNombre();
// Salida "Kapil"

pero

persona constante = {
nombre: 'Kapil',
decir nombre : () => {
    devolver este.nombre;
    }
}
persona.decirNombre();
// Salida ""

12.

Encadenamiento opcional ¿Encadenamiento opcional? Detiene la evaluación si el valor viene antes de ?. es indefinido o nulo y devuelve

indefinido.
usuario constante = {
  empleado: {
    nombre: "Kapil"
  }
};
usuario.empleado?.nombre;
// Salida: "Kapil"
usuario.emplear?.nombre;
// Salida: indefinido
usuario.empleado.nombre
// Salida: VM21616:1 Error de tipo no detectado: no se puede leer la propiedad 'nombre' de undefinido

13.

Utilice el método Math.random() incorporado para codificar la matriz.

lista constante = [1, 2, 3, 4, 5, 6, 7, 8, 9];
lista.sort(() => {
    devolver Math.random() - 0,5;
});
// Salida(9) [2, 5, 1, 6, 9, 8, 4, 3, 7]
// Llámalo de nuevo
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

14. Operador coalescente nulo

El operador coalescente nulo (??) es un operador lógico, cuando su operando izquierdo está vacío o indefinido, devuelve su operando derecho; de lo contrario, devuelve su operando izquierdo.

const foo = nulo ?? 'mi escuela';
// Salida: "mi escuela"

constante baz = 0 ??
// Salida: 0

15. Operador de Descanso y Extensión

Esos misteriosos 3 puntos ... ¡pueden descansar o extenderse! ?

función miDiversión(a, b, ...muchosMásArgumentos) {
   devolver argumentos.longitud;
}
myFun("uno", "dos", "tres", "cuatro", "cinco", "seis");

// Salida: 6

y

partes constantes = ['hombros', 'rodillas']; 
const letras = ['cabeza', ...partes, 'y', 'dedos de los pies']; 

lírica;
//producción: 
(5) ["cabeza", "hombros", "rodillas", "y", "dedos de los pies"]

16. Parámetro predeterminado

búsqueda constante = (arr, low=0,high=arr.length-1) => {
    retorno alto;
}
buscar([1,2,3,4,5]);

// Salida: 4

17. Convertir decimal a binario o hexadecimal

Mientras solucionamos el problema, podemos usar algunos métodos integrados como .toPrecision() o .toFixed() para implementar muchas funciones auxiliares.

número constante = 10;

num.toString(2);
// Salida: "1010"
num.toString(16);
// Salida: "a"
num.toString(8);
// Salida: "12"

18. Utilice la desestructuración para simplemente intercambiar dos valores

let a = 5;
sea ​​b = 8;
[a,b] = [b,a]

[a,b]
// Salida(2) [8, 5]

19. Verificación de palíndromo de una sola línea

Bueno, este no es un consejo abreviado, pero le dará una buena idea de cómo usar cadenas.

función checkPalindrome (cadena) {
  return cadena == str.split('').reverse().join('');
}
checkPalindromo('naman');
// Salida: verdadero

20. Convertir propiedades de objetos en matrices de propiedades

usando Object.entries(), Object.keys() y Object.values()
objeto constante = { a: 1, b: 2, c: 3 };

Entradas.objeto(obj);
// Salida(3) [Matriz(2), Matriz(2), Matriz(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
longitud: 3

Objeto.claves(obj);
(3) ["a", "b", "c"]

Objeto.valores(obj);
(3) [1, 2, 3]