JavaScript array methods and tips

Array.isArray(): determina si el valor pasado es un Array (retorna trueo false).

Array.prototype.concat() unir dos o más arrays. Este método no cambia los arrays existentes, sino que devuelve un nuevo array.

fuente : MDN

.filter()

Devuelve un nuevo array con todos los elementos que satisfacen la condición.
Si ninguno cumple, retorna un array vacio.
No cambia el array original.

let arr = [1, 2, 3, 4, 5, 6];

// retornar los menores a 4
let filteredArr = arr.filter((item) => item < 4);

console.log(filteredArr); // output: [1, 2, 3]

.map()

Devuelve un nuevo array con el resultado de llamar a una función para cada elemento del array.
No cambia el array original.
async?

let arr = [1, 2, 3, 4, 5, 6];

// suma 1 a cada elemento
let mappedArr = arr.map((item) => item + 1);

console.log(mappedArr); // output: [2, 3, 4, 5, 6, 7]

.find()

Retorna el valor del primer elemento del array que cumple la condición.
Se ejecuta para todos los elementos del array.
No cambia el array original.

let arr = [1, 2, 3, 4, 5, 6];

// encontrar elemento mayor a 4
let resultArr = arr.find((item) => item > 4);

console.log(resultArr); // output: [5]

.findIndex()

devuelve el índice del PRIMER elemento de un array que cumpla con la función de prueba proporcionada
Si no lo encuentra, retorna -1

const scores = [70, 65, 23, 50, 32];

const firstFail = (element) => element < 40;

console.log(scores.findIndex(firstFail));
// expected output: 2

const students = [{
  name: "Jhon",
  code: 652
}, {
  name: "Alice",
  code: 222
}, {
  name: "Yuan",
  code: 667
}, {
  name: "Ter",
  code: 362
}];

function findName(nameToSearch) {
  return (element) => element.name === nameToSearch;
}

console.log(students.findIndex(findName("Ter")));
// expected output: 3

function findByCode(codeToSearch) {
  return (element) => element.code === codeToSearch;
}

console.log(students.findIndex(findByCode(667)));
// expected output: 2

.forEach()

Ejecuta la función indicada una vez por cada elemento del array.
No cambia el array original.

let arr = [1, 2, 3, 4, 5, 6];

arr.forEach((item) => {
  console.log(item); // output: 1 2 3 4 5 6
});

.some()

Comprueba si al menos un elemento del array cumple con la condición
Devuelve true cuando encuentra al menos un elemento, de lo contrario, retorna false.
Recorre el array hasta dar con el primer elemento que satisface la condición dada, sólo recorrera el array completo cuando ningún elemento satisfaga la condición o sea unicamente el último elemento que satisfaga la condición.
No cambia el array original.

let arr = [1, 2, 3, 4, 5, 6];

// checking is any array element equals to 3
let isThree = arr.some((item) => item === 3);

console.log(isThree); // output: true

// checking is any array element equals to 10
let isTen = arr.some((item) => item === 10);

console.log(isTen); // output: false

.every()

Comprueba si todos los elementos en el array satisfacen una condición.
Si todos los elementos en el array satisfacen la condición retorna true de lo contrario, retorna false.
No cambia el array original.

let arr = [1, 2, 3, 4, 5, 6];

// son todos los elementos menores o igual a 6
let lessSix = arr.every((item) => item <= 6);

console.log(lessSix); // output: true

// son todos los elementos mayores a 5
let greaterTen = arr.every((item) => item > 5);

console.log(greaterTen); // output: false

.reduce()

Reduce un array a un único valor.
Ejecuta una función proporcionada (función reductora) a cada elemento del array (), y el valor de retorno de la función se almacena en un acumulador.
El valor del acumulador esta disponible en cada iteración de la función reductora.
No cambia el array original.

// suma todos los elementos de un array con multiples elementos.
let arrayManyValues = [1, 2, 3, 4, 5, 6];
let sumManyValues = arrayManyValues.reduce((total, value) => total + value);

console.log(sumManyValues); // output: 21

// suma un atributo de todos los objetos de un array
// Debemos definir valor inicial en CERO
let arrayManyObjects = [{amount: 500},{amount: 700}]
let totalManyObjects = arrayManyObjects.reduce((valorPrevio, itemActual) => valorPrevio + itemActual.amount,0);

console.log(totalManyObjects) // output: 1200

.includes()

Determina si un array incluye un determinado elemento.
Devuelve true o false según corresponda.
No cambia el array original.

let language = ["html", "css", "js"];

// Verifica si el array `language` contiene el item 'js'
language.includes("js"); // output: true

// Verifica si el array `language` contiene el item 'react'
language.includes("react"); // output: false

.push()

añade uno o más elementos al final de un array y devuelve la nueva longitud del array.
Ccambia el array original

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

.pop()

elimina el último elemento de un array y lo devuelve.
Este método cambia la longitud del array.

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

.shift()

elimina el primer elemento
Retorna el valor eliminado.
Modifica el array original

let languages = ["Java", "PHP", "Python"];
let foo = languages.shift();

console.log(foo);
// Output => Java

console.log(languages);
// Output => [ 'PHP', 'Python' ]

.unshift()

agrega uno o más elementos al inicio del array.
Revuelve la nueva longitud del array.
Modifica el array original

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

.sort(funcionComparador)

Ordena los elementos de un arreglo (array) localmente y devuelve el arreglo ordenado.
El modo de ordenación por defecto responde a la posición del valor del string de acuerdo a su valor Unicode.
funcionComparador (Opcional), especifica una función que define el modo de ordenamiento. Si se omite, el array es ordenado atendiendo a la posición del valor Unicode de cada caracter, según la conversión a string de cada elemento.
Modifica el array original

var frutas = ['guindas', 'manzanas', 'bananas'];
frutas.sort(); 
console.log(frutas)
// ['bananas', 'guindas', 'manzanas']

var puntos = [1, 10, 2, 21];
puntos.sort(); 
console.log(puntos)
// [1, 10, 2, 21]
// Tenga en cuenta que 10 viene antes que 2
// porque '10' viene antes que '2' según la posición del valor Unicode.

var cosas = ['word', 'Word', '1 Word', '2 Words'];
cosas.sort(); 
console.log(cosas)
// ['1 Word', '2 Words', 'Word', 'word']
// En Unicode, los números vienen antes que las letras mayúsculas
// y estas vienen antes que las letras minúsculas.

function compare(a, b) {
  if (a < b) {
    // a es menor que b según criterio de ordenamiento
    return -1;
  }
  if (a > b) {
    // a es mayor que b según criterio de ordenamiento
    return 1;
  }
  // a es igual b
  return 0;
}

// Ordenando un array de enteros
const array = [10, 1, 2, 20]
array.sort(compare)
console.log(array)
// [1, 2, 10, 20]


// Ordenando array de objetos por String 
var users = [{
    name: 'Edward',
    value: 21
  },
  {
    name: 'Sharpe',
    value: 37
  },
  {
    name: 'And',
    value: 45
  },
  {
    name: 'The',
    value: -12
  },
  {
    name: 'Magnetic',
    value: 13
  },
  {
    name: 'Zeros',
    value: 37
  }
];

function sortByName(a, b) {

  if (a.name > b.name) {
    return 1
  }

  if (a.name < b.name) {
    return -1
  }
  return 0

}

users.sort(sortByName);
console.log(users)
/*
[{
  name: "And",
  value: 45
}, {
  name: "Edward",
  value: 21
}, {
  name: "Magnetic",
  value: 13
}, {
  name: "Sharpe",
  value: 37
}, {
  name: "The",
  value: -12
}, {
  name: "Zeros",
  value: 37
}]
*/

function sortByValue(a, b) {

  if (a.value > b.value) {
    return 1
  }

  if (a.value < b.value) {
    return -1
  }
  return 0

}


users.sort(sortByValue);
console.log(users)
/*
[{
  name: "The",
  value: -12
}, {
  name: "Magnetic",
  value: 13
}, {
  name: "Edward",
  value: 21
}, {
  name: "Sharpe",
  value: 37
}, {
  name: "Zeros",
  value: 37
}, {
  name: "And",
  value: 45
}]
*/

.slice(inicio,fin)

Devuelve una copia de una parte del array desde el indice inicio hasta el indice fin.
fin no incluido
El array original no se modificará.
Los elementos del array original son copiados en el array devuelto de la siguiente manera:
- Si el item del array es un objeto, copia su referencia ( no el objeto en sí ), slice copia la referencia dentro del nuevo array. Ambos, el array original y el nuevo, referencian al mismo objeto. Si un objeto referenciado cambia, los cambios son visibles para ambos arrays.
- Si el item es primitivo, un string, numbers o boolean (no objetos String y Number), slice copia los valores en el nuevo array. Los cambios a los string, numbers y boolean en un array no afectan a los del otro array.
Si un nuevo elemento es agregado a cualquiera de los arrays, el otro array no es afectado.
Si inicio es omitido el valor por defecto es 0.
Si el inicio especificado es negativo, indica un desplazamiento desde el final del array .slice(-2)extrae los dos últimos elementos del array.
Si inicio es mayor a la longitud del array, se devuelve un array vacío.
Si fin es omitido, slice extrae hasta el final de la secuencia (arr.length).
Si fin es negativo, indica un desplazamiento desde el final de la secuencia. slice(2,-1) extrae desde el tercer hasta el penúltimo elemento en la secuencia.

const array = ["A","B","C","D","E","F","G","H","I"]

/** 
 * Inicio y fin positivos 
 * Obteniendo un sub array
 */
const subArray = array.slice(2,4)
// ["C" ,"D"] 

/** 
 * Omitiendo inicio y fin 
 * Copiando todos los items
 */
const copy = array.slice()
// ["A","B","C","D","E","F","G","H","I"]

/** 
 * Inicio CERO
 * Copiando los primeros 3 elementos
 */
const getFirstElements = array.slice(0,3)
// ["A","B","C"]

/** 
 * Omitiendo fin  
 * Omite los primeros 3 elementos
 */
const omitFirstElement = array.slice(3)
// ["D","E","F","G","H","I"]

/** 
 * Inicio negativo 
 * Copiando los últimos 3 elementos
 */
const getLastElements = array.slice(-3)
// ["G","H","I"]

/** 
 * Fin negativo 
 * Omite los últimos 2 elementos
*/
const omitLastElement = array.slice(0,-2)
//["A","B","C","D","E","F","G"]

/** 
 * Inicio y fin negativo 
*/
const sub = array.slice(-5,-3)
// ["E","F"]

console.log(JSON.stringify(sub))

Tips

Remover valores falsos (falsy) de un array.

var myArray = [12, 'web development', '', NaN, undefined, 0, true, false];

// 
var myArrayClean = myArray.filter(Boolean);
console.log(myArrayClean); 

//Output : [ 12, 'web development', true ]

Eliminar duplicado de un array usando SET

var myArray = [1,2,3,3,3,"A","A","b"]


// Utiliza el constructor para para crear un set con el mismo contenido que un array
var mySet = new Set(myArray)

// Utiliza la propagación para crear un array con los contenidos de un set
var myArrayClean = [...mySet]

console.log(myArrayClean)

// En una unica linea, queda algo asi
var noDuplicate = [...new Set(myArray)]
console.log(noDuplicate)