Métodos auxiliares de JavaScript

Una array en JavaScript generalmente se considera como «objetos de lista». En palabras simples, podemos decir que una array es un objeto que contiene algunos valores. Pero una array es un objeto especial en JavaScript. Una array puede almacenar estructuras de datos heterogéneas. Puede almacenar valores de datos de cualquier tipo, como objetos y arrays. 

const arr = [
  1,                        // Number type
  "Praveen kumar",          // String type
  {                         // Object type
    firstname: "Christopher",
    lastname: 'Nolan'
  },
  [9.1, 9.2, 8.7, 5]        // Array type
];
 
console.log( arr );

En JavaScript, una array es un objeto. Si una array es un objeto, ¿por qué no usamos un objeto en lugar de una array? Después de mucha investigación, descubrimos que podemos usar un objeto en lugar de una array. Pero viene con algunas advertencias.

En el programa anterior, tanto un objeto como una array almacenan datos exactamente de la misma manera. Pero hay alguna diferencia.

El primero es una array que contiene una propiedad llamada longitud. Nos dice el número de elementos en un arreglo. Esta no es la única diferencia. La principal diferencia surge cuando abre la propiedad __proto__ tanto de una array como de un objeto. Una array viene con algunos métodos de ayuda excelentes que discutiremos en este artículo. Analicemos algunos métodos importantes.

1. Método every(): este método se utiliza para verificar si todos los elementos de una array pasan la prueba que implementa la función de orden superior aprobada. Lo que hace el compilador debajo del capó es iterar sobre la array de empleados y verificar todos los empleados , si es un desarrollador o no. Como en este caso, debería devolver false .

Aporte: 

 predicate function

Producción:

Boolean value

const employees = [
  { name: "Sam",      age: 25, role: "Developer" },
  { name: "John",     age: 32, role: "Manager"   },
  { name: "Ronaldo",  age: 29, role: "Architect" },
  { name: "Perker",   age: 25, role: "Developer" },
  { name: "Sophia",   age: 38, role: "Director"  },
  { name: "kristine", age: 21, role: "Developer" },
];
 
function isDeveloper(employee) {
  return employee.role === "Developer";
}
console.log(employees.every(isDeveloper));

Producción:

false

2. Método fill(): este método llena la array con un valor estático. Anula todos los valores de array a partir del primer elemento (índice 0) y hasta el último elemento (índice array.longitud-1).

Aporte:

value 

Producción:

Modified array

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
         
const newEmployees = employees.fill(
    { name: "Sam", age: 25, role: "Developer" });
console.log(employees);
 
console.log(newEmployees === employees);    // true

Producción:

[
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'Sam', age: 25, role: 'Developer' }
]

true

3. Método filter(): este método filtra la array que pasa la prueba con la función que se le pasó. Devuelve una nueva array.

Aporte:

Predicate function

Salida :

New Array with filtered elements

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
         
function filterDevEmp(employee) {
  return employee.role === "Developer";
}
const filteredDevEmployees = employees.filter(filterDevEmp);
console.log(filteredDevEmployees);

Producción:

[
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'Perker', age: 25, role: 'Developer' },
 { name: 'kristine', age: 21, role: 'Developer' }
]

4. Método find(): este método devuelve el primer elemento que pasa la prueba con la función proporcionada.

Aporte:

Predicate function 

Producción:

Element that passes the test else undefined

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
 
function searchFirstDevEmployee(employee) {
  return employee.role === "Developer";
}
 
const firstEmployeeDeveloper =
    employees.find(searchFirstDevEmployee);
 
console.log(firstEmployeeDeveloper);   

Producción:

 { name: 'Sam', age: 25, role: 'Developer' }

5. Método findIndex(): este método devuelve el índice del primer elemento que pasa la prueba con la función proporcionada. Se puede utilizar en el caso de primitivas y en el caso de objetos.

Aporte: 

Predicate function

Producción: 

element index that passes the test else -1

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
 
function searchFirstArchitectEmployeeIndex(employee) {
  return employee.role === "Architect";
}
 
const firstEmpArchitectIndex =
  employees.findIndex(searchFirstArchitectEmployeeIndex);
 
console.log(firstEmpArchitectIndex);   

Producción:

2

6. Método flat(): este método se usa para aplanar la array o concatenar la array con los elementos de la sub-array de forma recursiva.

Aporte: 

 depth(default value is 1)

Producción:

New array

const arr1 = [1, [2, 3, 4], 5];
const flattened1 = arr1.flat();
console.log(flattened1); // [ 1, 2, 3, 4, 5 ]
 
const arr2 = [1, 2, [3, 4, [5, 6]]];
 
const flattened2 = arr2.flat();
console.log(flattened2); // [1, 2, 3, 4, [5, 6]]

Producción: 

[1, 2, 3, 4, 5]
[1, 2, 3, 4, [5, 6]]

7. Método forEach(): Este es uno de los métodos más utilizados. Se utiliza para llamar o ejecutar la función proporcionada/aprobada una vez para cada elemento de una array. Modifica la array original.

Aporte: 

function

Producción:

undefined

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
         
function increaseAgeByOne(employee) {
  employee.age += 1;
}
employees.forEach(increaseAgeByOne);
console.log(employees);

Producción:

[
 { name: 'Sam', age: 26, role: 'Developer' },
 { name: 'John', age: 33, role: 'Manager' },
 { name: 'Ronaldo', age: 30, role: 'Architect' },
 { name: 'Perker', age: 26, role: 'Developer' },
 { name: 'Sophia', age: 39, role: 'Director' },
 { name: 'kristine', age: 22, role: 'Developer' }
]

8. Método include(): este método se utiliza para probar si un elemento está presente en una array o no. Comprueba un valor en primitiva y referencia en caso de un objeto.

Aporte:  

value

Producción:

Boolean value weather array includes value or not

const numbers = [1, 6, 8, 11, 5, 9, 4];
console.log( numbers.includes(6) ); 
console.log( numbers.includes(3) );

Producción:

true
false

En caso de un objeto

const arch = { name: "Ronaldo", age: 29, role: "Architect" };
 
const employees = [
  { name: "Sam", age: 25, role: "Developer" },
  { name: "John", age: 32, role: "Manager" },
  arch,
  { name: "Perker", age: 25, role: "Developer" },
  { name: "Sophia", age: 38, role: "Director" },
  { name: "kristine", age: 21, role: "Developer" },
];
 
console.log(employees.includes(arch));

Producción:

true

9. Método indexOf(): este método devuelve el índice del primer elemento que pasa la prueba con la función proporcionada. Toma un valor como entrada. Debe usarse en caso de primitivo. Como en el caso de los objetos, comprobará su referencia. El cheque distingue entre mayúsculas y minúsculas.

Aporte: 

value

Producción:

element index that passes the test else -1

const names = ["Sam", "John", "Ronaldo",
    "Perker", "Sophia", "kristine"];
names.indexOf("John");   
names.indexOf("john");

Producción:

1
-1

10. Método join(): este método concatena los valores de la array en una string separada por comas (si no se proporciona un separador) o con un separador proporcionado.

Aporte: 

separator

Producción:

New string

const names = ["Sam", "John", "Ronaldo",
    "Perker", "Sophia", "kristine"];
console.log( names.join() );
 
console.log( names.join(" -> ") );

Producción:

'Sam, John, Ronaldo, Perker, Sophia, kristine'
 'Sam -> John -> Ronaldo -> Perker -> Sophia -> kristine'

11. Método lastIndexOf(): busca un elemento en una array y devuelve el último índice de los elementos proporcionados en una array. Toma un valor como entrada. Debe usarse en caso de primitivo. Como en el caso de los objetos, comprobará su referencia.

Aporte: 

value

Producción:

last element index that is equal(test using ===) 
to value provided else -1

const roles = [ "Developer", "Manager", "Architect",
    "Developer", "Director", "Developer"];
 
console.log(roles.lastIndexOf("Developer"));

Producción:

5

12. Método map(): este método llama a la función proporcionada y ejecuta esta función para cada elemento. Devuelve una nueva array.

Aporte:

function

Producción:

new array

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
 
function getName(employee) {
  return employee.name;
}
 
const names = employees.map(getName);
console.log(names);   
 
function concetenateNameWithAge(employee) {
  return employee.name + " " + employee.age;
}
const nameWithAge = employees.map(concetenateNameWithAge);
console.log(nameWithAge);

Producción:

 [ 'Sam', 'John', 'Ronaldo', 'Perker', 'Sophia', 'kristine' ]
[
 'Sam 25',
 'John 32',
 'Ronaldo 29',
 'Perker 25',
 'Sophia 38',
 'kristine 21'
]

13. Método pop(): Elimina el último elemento de una array y devuelve el elemento eliminado.

Producción: 

Removed element

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
 
const removedEmployee = employees.pop();
console.log(removedEmployee);   
console.log(employees.length);   

Producción:

{ name: 'kristine', age: 21, role: 'Developer' }
 5

14. Método push(): agrega o empuja un elemento como el último elemento de una array.

Aporte:

Array element

Producción: 

new length of an array

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
 
const totalEmployees = employees.push({
    name: "Donald", age: 21, role: "Manager" });
console.log(employees);
console.log( totalEmployees );

Producción:

[
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Ronaldo', age: 29, role: 'Architect' },
 { name: 'Perker', age: 25, role: 'Developer' },
 { name: 'Sophia', age: 38, role: 'Director' },
 { name: 'kristine', age: 21, role: 'Developer' },
 { name: 'Donald', age: 21, role: 'Manager' }
]
7

15. Método reduce(): El método reduce() de array ejecuta la función de reducción que le pasas a cada elemento y siempre devuelve un solo valor. La función reductora toma 4 parámetros

• Acumulador
• Valor actual
• Índice de corriente de array
• array de origen

Nota: la función de reducción siempre devuelve el valor y el valor se asigna al acumulador en la siguiente iteración.

Aporte: 

First argument is reducer function that takes minimum 
2 value i.e. accumulator and current value. Second 
argument is initial value of accumulator.

Producción: 

A single value.

Si no se proporciona el valor del acumulador, el primer valor de la array de origen o el valor inicial se toma como el segundo argumento del método de reducción y la iteración comienza desde el valor inicial de la array de origen. 

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
 
function getRoleReducer(acc, currentValue) {
  acc.push(currentValue.role);
  return acc;
}
const roles = employees.reduce(getRoleReducer, []);
console.log(roles);

Producción:

[
 'Developer',
 'Manager',
 'Architect',
 'Developer',
 'Director',
 'Developer'
]

16. Método reduceRight(): Es exactamente igual que el método Array reduce pero la iteración comienza de derecha a izquierda.

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
 
function getRoleReducer(acc, currentValue) {
  acc.push(currentValue.role);
  return acc;
}
const roles = employees.reduceRight(getRoleReducer, []);
console.log(roles);

Producción:

[
 'Developer',
 'Director',
 'Developer',
 'Architect',
 'Manager',
 'Developer'
]

17. Método reverse(): este método invierte los elementos de la array.

Producción: 

Same array but with reversed elements

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
 
const reversedEmployees = employees.reverse();
console.log(reversedEmployees);
console.log(employees === reversedEmployees);

Producción:

[
 { name: 'kristine', age: 21, role: 'Developer' },
 { name: 'Sophia', age: 38, role: 'Director' },
 { name: 'Perker', age: 25, role: 'Developer' },
 { name: 'Ronaldo', age: 29, role: 'Architect' },
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Sam', age: 25, role: 'Developer' }
]
true

18. Método shift(): Elimina el primer elemento de una array y devuelve el elemento eliminado.

Producción: 

removed element or if an array is empty returns undefined

    const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
 
const removedEmployee = employees.shift();
console.log(removedEmployee);
console.log(employees);

Producción:

{ name: 'Sam', age: 25, role: 'Developer' }
[
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Ronaldo', age: 29, role: 'Architect' },
 { name: 'Perker', age: 25, role: 'Developer' },
 { name: 'Sophia', age: 38, role: 'Director' },
 { name: 'kristine', age: 21, role: 'Developer' }
]

19. Método slice(): El método slice() devuelve la nueva array con los elementos especificados dentro del índice inicial y final. La nueva array contiene el elemento en el índice inicial pero no incluye el elemento en el índice final. Si no se proporciona el índice final, se considera como una array.longitud-1 . El método de división no cambia la array original.

Aporte:  

Start index and end index

Producción: 

 New array

    const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
 
const someEmployees = employees.slice(1, 3);
console.log(someEmployees);
console.log(employees);

Producción:

[
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Ronaldo', age: 29, role: 'Architect' }
]
[
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Ronaldo', age: 29, role: 'Architect' },
 { name: 'Perker', age: 25, role: 'Developer' },
 { name: 'Sophia', age: 38, role: 'Director' },
 { name: 'kristine', age: 21, role: 'Developer' }
]

20. Método some(): este método verifica si alguno de los elementos en la array pasa la prueba proporcionada por la función de predicado. Si en cualquier índice de array, la prueba pasa, algún método devuelve verdadero, de lo contrario, es falso. Simplemente comprueba que el elemento existe en una array. Vuelve tan pronto como la función de predicado devuelve verdadero.

Aporte: 

predicate function

Producción: 

Boolean

function checkIfDevExist(employee) {
  return employee.role === "Developer";
}
const isDeveloperExist = employees.some(checkIfDevExist);
console.log(isDeveloperExist);

Producción:

true

21. Método sort(): este método ordena la array en orden ascendente (comportamiento predeterminado si no se especifica la función de comparación). Este método muta la array original.
Aporte:

optional comparer function

Producción:

sorted array

const names = ["Sam", "John", "Ronaldo", "Perker", "Sophia", "kristine"];
names.sort();
console.log(names);

Producción:

 [ 'John', 'Perker', 'Ronaldo', 'Sam', 'Sophia', 'kristine' ]

22. Método splice(): El método splice() en una array se usa para agregar, eliminar o reemplazar elementos en una array. Muta la array original.

Aporte:

Starting index from where changes will takes place.
(optional) No of element to delete or remove from the start index.
(optional) The elements to add at starting index.    

Producción: 

array with removed elements.

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
         
const removedElements = employees.splice(3, 1, {
    name: "kristine",
    age: 21,
    role: "Developer",
});
 
console.log(removedElements);
console.log(employees);

Producción:

[ { name: 'Perker', age: 25, role: 'Developer' } ]
[
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Ronaldo', age: 29, role: 'Architect' },
 { name: 'kristine', age: 21, role: 'Developer' },
 { name: 'Sophia', age: 38, role: 'Director' },
 { name: 'kristine', age: 21, role: 'Developer' }
]

23. Método unshift(): agrega o inserta un elemento en la posición inicial de una array.

Aporte: 

Element to insert

Producción:  

Array length after element insertion

const employees = [
    { name: "Sam",      age: 25, role: "Developer" },
    { name: "John",     age: 32, role: "Manager"   },
    { name: "Ronaldo",  age: 29, role: "Architect" },
    { name: "Perker",   age: 25, role: "Developer" },
    { name: "Sophia",   age: 38, role: "Director"  },
    { name: "kristine", age: 21, role: "Developer" },
];
         
const totalNoOfemployees = employees.unshift({
    name: "kristine",
    age: 21,
    role: "Developer",
});
 
console.log(totalNoOfemployees);
console.log(employees);

Producción:

7
[
 { name: 'kristine', age: 21, role: 'Developer' },
 { name: 'Sam', age: 25, role: 'Developer' },
 { name: 'John', age: 32, role: 'Manager' },
 { name: 'Ronaldo', age: 29, role: 'Architect' },
 { name: 'Perker', age: 25, role: 'Developer' },
 { name: 'Sophia', age: 38, role: 'Director' },
 { name: 'kristine', age: 21, role: 'Developer' }
]