¿Cuáles son los métodos de array importantes de JavaScript?

En este artículo, intentaremos comprender varios métodos de Array importantes (como push(), pop(), etc.) con la ayuda de ciertos ejemplos.

Primero comprendamos cómo podemos crear una array en JavaScript utilizando cierta sintaxis provista.

Sintaxis:

Podemos usar la siguiente sintaxis para crear una array con facilidad (es decir, usando estos [] literales).

let array = [element1, element2, .....]

Alternativamente, también podemos usar la clase Array (usando la nueva palabra clave junto con el constructor predeterminado de la clase Array) para crear nuevos elementos Array, pero siempre se recomienda que prefiramos usar la sintaxis literal anterior.

let array = new Array (element1, elemnet2, .....);

Ejemplo: 

<script>
let array = ['Hello', 
    'GeeksforGeeks', 'JavaScript'];
console.log(array);
  
let newArray = new Array ('Hello', 
    'GeeksforGeeks', 'JavaScript');
console.log(newArray);
</script>

El resultado del fragmento de código anterior sería el siguiente:

['Hello', 'GeeksforGeeks', 'JavaScript']
['Hello', 'GeeksforGeeks', 'JavaScript']

Ahora que hemos entendido la creación de una array con la ayuda de un ejemplo, pasemos ahora a varios métodos que están asociados con la array.

Métodos de array de JavaScript:

1. Método push() : este método se usa para empujar los elementos desde el final a una array.

Ejemplo: 

<script>
  
let array = ['Hello', 
    'GeeksforGeeks', 'JavaScript'];
      
array.push('React');
console.log(array);
  
</script>

El resultado del fragmento de código anterior sería el siguiente:

[ 'Hello', 'GeeksforGeeks', 'JavaScript', 'React' ]

2. Método pop() : este método elimina el último elemento presente en la array.

Ejemplo: 

<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
let lastElement = array.pop();
console.log(lastElement);
console.log(array);
</script>

El resultado del fragmento de código anterior sería el siguiente:

JavaScript
[ 'Hello', 'GeeksforGeeks' ]

3. Método shift() : este método se utiliza para eliminar el primer elemento de la array.

Ejemplo: 

<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
let firstElement = array.shift();
console.log(firstElement);
console.log(array);
</script>

El resultado del fragmento de código anterior sería el siguiente:

Hello
[ 'GeeksforGeeks', 'JavaScript' ]

4. Método unshift() : este método se usa para agregar los elementos en la array desde el frente.

Ejemplo: 

<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
array.unshift("React");
console.log(array);
</script>

El resultado del fragmento de código anterior sería el siguiente:

[ 'React', 'Hello', 'GeeksforGeeks', 'JavaScript' ]

5. Método indexOf() : este método se utiliza para encontrar el índice de un elemento en particular en una array.

Ejemplo: 

<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
console.log(array.indexOf('GeeksforGeeks'));
</script>

El resultado del fragmento de código anterior sería el siguiente:

1

6. Método include() : este método se utiliza para verificar si la array contiene el elemento especificado o no.

Ejemplo: 

<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
console.log(array.includes("GeeksforGeeks"));
console.log(array.includes("React"));
</script>

El resultado del fragmento de código anterior sería el siguiente:

true
false

7. Método concat() : este método se usa para concatenar o básicamente unir dos arrays diferentes de extremo a extremo.

Ejemplo:

<script>
let firstArray = ["Hello", 
    "GeeksforGeeks", "JavaScript"];
      
let secondArray = ["React"];
  
let newArray = firstArray.concat(secondArray);
  
console.log(firstArray);
console.log(secondArray);
console.log(newArray);
</script>

El resultado del fragmento de código anterior sería el siguiente:

[ 'Hello', 'GeeksforGeeks', 'JavaScript' ]
[ 'React' ]
[ 'Hello', 'GeeksforGeeks', 'JavaScript', 'React' ]

8. Método forEach() : este método funciona como un bucle sobre una array en la que, para cada elemento, la función solo se ejecuta una sola vez. Este método es útil para reducir la sintaxis de bucle for, pero este método no devuelve nada en su salida.

Ejemplo:

<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
array.forEach(function(element){
    console.log(element)
});
</script>

El resultado del fragmento de código anterior sería el siguiente:

Hello
GeeksforGeeks
JavaScript

9. Método sort() : este método ordena los elementos de una array en orden alfabético en orden ascendente.

Ejemplo: 

<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
console.log(array);
array.sort();
console.log(array);
</script>

El resultado del fragmento de código anterior sería el siguiente:

[ 'Hello', 'GeeksforGeeks', 'JavaScript' ]
[ 'GeeksforGeeks', 'Hello', 'JavaScript' ]

10. Método map() : este método itera sobre una array y transforma la array de acuerdo con las condiciones especificadas por el usuario y devuelve una nueva array. Usando esta sintaxis más corta, uno podría fácilmente hacer que el código sea más legible y comprensible.

Ejemplo: 

<script>
let oldArray = [1 , 2 , 3 , 4 , 5];
  
console.log(oldArray);
  
let newArray = oldArray.map(function(element){
    return element * 5;
});
  
console.log(newArray);
</script>

El resultado del fragmento de código anterior sería el siguiente:

[ 1, 2, 3, 4, 5 ]
[ 5, 10, 15, 20, 25 ]

11. método reduce() : este método utiliza una función reductora que reduce los resultados a una sola salida.

Ejemplo:

<script>
let oldArray = [1, 2, 3, 4, 5];
  
console.log(oldArray);
  
let sumOfElements = oldArray.reduce(
function (accumulator, element) {
  return accumulator + element;
});
  
console.log(sumOfElements);
</script>

El resultado del fragmento de código anterior sería el siguiente:

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

12. método filter() : este método se utiliza para filtrar los contenidos, según la condición especificada por el usuario, en forma de una nueva array.

Ejemplo:

<script>
let oldArray = [1, 2, 3, 4, 5];
  
console.log(oldArray);
  
let newArray = oldArray.filter(function (element) {
  return element % 2 === 0;
});
  
console.log(newArray);
</script>

El resultado del fragmento de código anterior sería el siguiente:

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

13. Método find() & findIndex() : este método encuentra el primer valor que pasa las condiciones especificadas por el usuario y el método findIndex() encuentra el primer valor de índice que pasa las condiciones especificadas por el usuario.

Ejemplo: 

<script>
let arr = [1, 2, 3, 4, 5];
  
let findElement = arr.find(function(element){
    return element > 4
});
  
console.log(findElement);
  
let findIndexValue = arr.findIndex(function(element){
    return element >= 4
});
  
console.log(findIndexValue);
</script>

El resultado del fragmento de código anterior sería el siguiente:

5 
3

14. Método slice() y splice() : slice() selecciona el número especificado de elementos sin afectar los elementos del arreglo original, mientras que splice() elimina los elementos seleccionados del arreglo original.

<script>
let arr = [1, 2, 3, 4, 5];
  
let sliceArray = arr.slice(0, 2);
console.log("Slice Array: " + sliceArray);
  
console.log("Original Array: " + arr);
let spliceArray = arr.splice(0, 2);
  
console.log("Slice Array: " + spliceArray);
console.log("Original Array: " + arr);
</script>

El resultado del fragmento de código anterior sería el siguiente:

Slice Array: 1,2
Original Array: 1,2,3,4,5
Slice Array: 1,2
Original Array: 3,4,5

15. Método some() y every() : El método some() verifica las condiciones especificadas por el usuario en algunos elementos de una array (es decir, solo verifica algunos elementos), mientras que el método every() verifica las condiciones especificadas por el usuario en cada elemento de una array luego devuelve los resultados en verdadero o falso.

Ejemplo: 

<script>
let arr = [1, 2, 3, 4, 5];
  
let NumbersGreaterThanZero = arr.every(
function(element){
    return element > 0
});
  
let NumbersLessThanZero = arr.some(
function(element){
    return element < 0
});
  
console.log(NumbersGreaterThanZero);
console.log(NumbersLessThanZero);
</script>

La salida del código anterior sería la siguiente:

true
false