Fundamentos de JavaScript

0
0
0

Páginas: 1 2 3 4 5 6 7 8


Array

El objeto Array de JavaScript es un objeto global que es usado en la construcción de arrays, que son objetos tipo lista de alto nivel.

Operaciones habituales

Crear un Array

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let frutas = ["Manzana", "Banana"];
console.log(frutas.length);
// 2
let frutas = ["Manzana", "Banana"]; console.log(frutas.length); // 2
let frutas = ["Manzana", "Banana"];

console.log(frutas.length);
// 2

Acceder a un elemento de Array mediante su índice

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let primero = frutas[0];
// Manzana
let ultimo = frutas[frutas.length - 1];
// Banana
let primero = frutas[0]; // Manzana let ultimo = frutas[frutas.length - 1]; // Banana
let primero = frutas[0];
// Manzana

let ultimo = frutas[frutas.length - 1];
// Banana

Recorrer un Array

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
1. frutas.forEach(function (elemento, indice, array) {
console.log(elemento, indice);
});
frutas.forEach((elemento, indice) => { console.log(elemento, indice); });
// Manzana 0
// Banana 1
2. for(let fruta of frutas) {
console.log(fruta);
}
// Manzana // Banana
3. const resultArray = array.map(fruta => { console.log(fruta) });
// Manzana // Banana
1. frutas.forEach(function (elemento, indice, array) { console.log(elemento, indice); }); frutas.forEach((elemento, indice) => { console.log(elemento, indice); }); // Manzana 0 // Banana 1 2. for(let fruta of frutas) { console.log(fruta); } // Manzana // Banana 3. const resultArray = array.map(fruta => { console.log(fruta) }); // Manzana // Banana
1. frutas.forEach(function (elemento, indice, array) {
  console.log(elemento, indice);
});

frutas.forEach((elemento, indice) => { console.log(elemento, indice); });
// Manzana 0
// Banana 1


2. for(let fruta of frutas) {
  console.log(fruta);
}
// Manzana  // Banana 

3. const resultArray = array.map(fruta => { console.log(fruta) });

// Manzana  // Banana

Añadir un elemento al final de un Array

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let nuevaLongitud = frutas.push("Naranja"); // Añade "Naranja" al final
// ["Manzana", "Banana", "Naranja"]
let nuevaLongitud = frutas.push("Naranja"); // Añade "Naranja" al final // ["Manzana", "Banana", "Naranja"]
let nuevaLongitud = frutas.push("Naranja"); // Añade "Naranja" al final
// ["Manzana", "Banana", "Naranja"]

Eliminar el último elemento de un Array

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let ultimo = frutas.pop(); // Elimina "Naranja" del final
// ["Manzana", "Banana"]
let ultimo = frutas.pop(); // Elimina "Naranja" del final // ["Manzana", "Banana"]
let ultimo = frutas.pop(); // Elimina "Naranja" del final
// ["Manzana", "Banana"]

Añadir un elemento al principio de un Array

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let nuevaLongitud = frutas.unshift("Fresa"); // Añade "Fresa" al inicio
// ["Fresa" ,"Manzana", "Banana"]
let nuevaLongitud = frutas.unshift("Fresa"); // Añade "Fresa" al inicio // ["Fresa" ,"Manzana", "Banana"]
let nuevaLongitud = frutas.unshift("Fresa"); // Añade "Fresa" al inicio
// ["Fresa" ,"Manzana", "Banana"]

Eliminar el primer elemento de un Array

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let primero = frutas.shift(); // Elimina "Fresa" del inicio
// ["Manzana", "Banana"]
let primero = frutas.shift(); // Elimina "Fresa" del inicio // ["Manzana", "Banana"]
let primero = frutas.shift(); // Elimina "Fresa" del inicio
// ["Manzana", "Banana"]

Encontrar el índice de un elemento del Array

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
frutas.push("Fresa");
// ["Manzana", "Banana", "Fresa"]
let pos = frutas.indexOf("Banana"); // (pos) es la posición para abreviar
// 1
frutas.push("Fresa"); // ["Manzana", "Banana", "Fresa"] let pos = frutas.indexOf("Banana"); // (pos) es la posición para abreviar // 1
frutas.push("Fresa");
// ["Manzana", "Banana", "Fresa"]

let pos = frutas.indexOf("Banana"); // (pos) es la posición para abreviar
// 1

Eliminar un único elemento mediante su posición

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let elementoEliminado = frutas.splice(pos, 1);
// ["Manzana", "Fresa"]
let elementoEliminado = frutas.splice(pos, 1); // ["Manzana", "Fresa"]
let elementoEliminado = frutas.splice(pos, 1);
// ["Manzana", "Fresa"]

Más métodos

filter() : Recorre el array y retorna un nuevo array con aquellos elementos que pasen una determinada condición.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const array = [1,2,3,4,5,6,7];
const resultArray = array.filter(element => element === 3 || element ===7);
console.log(resultArray); // [3,7]
const array = [1,2,3,4,5,6,7]; const resultArray = array.filter(element => element === 3 || element ===7); console.log(resultArray); // [3,7]
const array = [1,2,3,4,5,6,7];
const resultArray = array.filter(element => element === 3 || element ===7);
console.log(resultArray); // [3,7]

 
find() : Recorre el array y retorna la primera coincidencia del elemento que se busca.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const resultArray = array.find(element => element > 3);
console.log(resultArray); // [4]
const resultArray = array.find(element => element > 3); console.log(resultArray); // [4]
const resultArray = array.find(element => element > 3);
console.log(resultArray); // [4]

 
sort() : Ordena los elementos del array y retorna el arreglo ordenado. Los elementos se ordenarán en orden ascendente (de la A a la Z) por defecto.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const array = [1,2,3,4,5,6,7];
const alphabets = ['g','d','c','o','d','e','v'];
//ordenar descendente
const descArray = array.sort((a,b) => a>b ? -1 : 1);
console.log(descArray); // [7,6,5,4,3,2,1]
//ordenar ascendente
const ascArray = array.sort((a,b) => a>b ? 1 : -1);
console.log(ascArray); // ['c', 'd', 'd', 'e', 'g', 'v'];
const array = [1,2,3,4,5,6,7]; const alphabets = ['g','d','c','o','d','e','v']; //ordenar descendente const descArray = array.sort((a,b) => a>b ? -1 : 1); console.log(descArray); // [7,6,5,4,3,2,1] //ordenar ascendente const ascArray = array.sort((a,b) => a>b ? 1 : -1); console.log(ascArray); // ['c', 'd', 'd', 'e', 'g', 'v'];
const array = [1,2,3,4,5,6,7];
const alphabets = ['g','d','c','o','d','e','v'];

//ordenar descendente
const descArray = array.sort((a,b) => a>b ? -1 : 1);
console.log(descArray); // [7,6,5,4,3,2,1]

//ordenar ascendente
const ascArray = array.sort((a,b) => a>b ? 1 : -1);
console.log(ascArray); // ['c', 'd', 'd', 'e', 'g', 'v'];

 
some() : Itera el array y retorna un booleano si como mínimo uno de los elementos presentes en el array pasa una condición determinada. Recibe un callback que se encargara de preguntar aquello que queremos dentro del array.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const array = [1,2,3,4,5,6,7];
// elementos mayores a 4
const greaterThanFour = array.some(element => element > 4);
console.log(greaterThanFour); // true
const array = [1,2,3,4,5,6,7]; // elementos mayores a 4 const greaterThanFour = array.some(element => element > 4); console.log(greaterThanFour); // true
const array = [1,2,3,4,5,6,7];

// elementos mayores a 4
const greaterThanFour = array.some(element => element > 4);
console.log(greaterThanFour); // true

 
every() : Es similar al some(), ya que itera el array y retorna un booleano. Pero esta vez, para que dicho booleano sea true todos los elementos del array deberán pasar la condición dada.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const array = [1,2,3,4,5,6,7];
// elementos mayores a 4
const greaterThanFour = array.every(element => element > 4);
console.log(greaterThanFour); // false
const array = [1,2,3,4,5,6,7]; // elementos mayores a 4 const greaterThanFour = array.every(element => element > 4); console.log(greaterThanFour); // false
const array = [1,2,3,4,5,6,7];

// elementos mayores a 4
const greaterThanFour = array.every(element => element > 4);
console.log(greaterThanFour); // false
concat() : Se utiliza para unir dos o más arrays. Este método no cambia los arrays existentes, sino que devuelve un nuevo array.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const array = ['a', 'b', 'c'];
const array1 = ['d', 'e', 'f'];
const resultArray = array.concat(array1);
console.log(resultArray); //['a','b','c','d','e','f']
const array = ['a', 'b', 'c']; const array1 = ['d', 'e', 'f']; const resultArray = array.concat(array1); console.log(resultArray); //['a','b','c','d','e','f']
const array = ['a', 'b', 'c'];
const array1 = ['d', 'e', 'f'];

const resultArray = array.concat(array1);
console.log(resultArray); //['a','b','c','d','e','f']

¿Te ha resultado útil??

0 / 0

Post relacionados:

  1. Mejora imports
    Mejora imports
  2. Abreviaciones útiles
    Abreviaciones útiles
  3. Then
    Then
  4. Async/Await y promesas
    Async/Await y promesas

Páginas: 1 2 3 4 5 6 7 8

Deja una respuesta 0

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.