Introducción a Arreglos en JavaScript
Traducido por
ScribdTranslationsIntroducción a Arreglos en JavaScript
Traducido por
ScribdTranslationsMatrices
Array in JavaScript is an object which is used to represent a collection of similar type of elements. It allows
tú para almacenar más de un valor o un grupo de valores en un solo nombre de variable. Los arreglos se utilizan para almacenar
las colecciones de valores en orden cronológico. Un arreglo es la colección de elementos homogéneos, o nosotros
se puede decir que un arreglo es la colección de valores del mismo tipo de dato.
Podemos almacenar cualquier valor válido como objetos, números, cadenas, funciones y también otros arreglos, lo que hace
it possible to create complex data structures like an array of arrays or an array of objects.
Características de un Array:
El indexado está disponible en un array, por lo que el acceso aleatorio a los elementos utilizando el índice del array es posible.
Se pueden almacenar múltiples elementos utilizando un solo nombre de variable.
La iteración a través de un arreglo se vuelve fácil utilizando un bucle.
La clasificación se vuelve fácil ya que se puede lograr escribiendo menos líneas de código en un arreglo.
Los valores de un arreglo pueden ser modificados o actualizados.
Hay 3 maneras de construir un array en JavaScript
1. Por literal de arreglo
2. Creando una instancia de Array directamente (usando la palabra clave new)
3. Usando un constructor de Array (usando la palabra clave new)
1) Literal de arreglo de JavaScript
El sintaxis de creando arreglo usando arreglo literal es dado abajo:
vararrayname=[value1,value2.....valueN];
Como puedes ver, los valores están contenidos dentro de [ ] y separados por , (coma). Veamos lo simple
ejemplo de creación y uso de arrays en JavaScript.
<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<[Link];i++){
[Link](emp[i] + "<br/>\");
}
</script>
2) Array de JavaScript directamente (nueva palabra clave)
La sintaxis para crear un array directamente se muestra a continuación:
var arrayname=new Array();
Aquí, la nueva palabra clave se utiliza para crear una instancia de un arreglo.
Veamos el ejemplo de crear un arreglo directamente.
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";
para (i=0;i<[Link];i++){
[Link](emp[i] + "<br>");
}
</script>
3) Constructor de arreglos de JavaScript (palabra clave new)
Aquí, necesitas crear una instancia de un arreglo pasando argumentos en el constructor para que no tengamos que
proporcione valor explícitamente. A continuación se muestra el ejemplo de crear un objeto mediante el constructor de matriz.
<script>
var emp=new Array("Jai","Vijay","Smith");
para (i=0;i<[Link];i++){
[Link](emp[i] + "<br>");
}
</script>
Accediendo a elementos de arreglo
Programa: Accediendo al Primer Elemento del Arreglo
Accedes a un elemento de un arreglo refiriéndote al número de índice:
<!DOCTYPE html>
<html> <body>
<h2>JavaScript Arrays</h2>
<p>Los elementos del array de JavaScript se acceden utilizando índices numéricos (comenzando desde 0).</p>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
[Link]("demo").innerHTML = coches[0];
</script> </body> </html>
Output:
Arreglos de JavaScript
Los elementos de un arreglo de JavaScript se acceden utilizando índices numéricos (empezando desde 0).
Saab
Programa: Accediendo al Último Elemento del Arreglo
<!DOCTYPE html> <html> <body>
<h2>Arreglos de JavaScript</h2>
<p>Los elementos de un array de JavaScript se acceden utilizando índices numéricos (comenzando desde 0).</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
[Link]("demo").innerHTML = fruits[[Link]-1];
</script> </body> </html>
Salida:
Arreglos de JavaScript
Los elementos de un arreglo de JavaScript se acceden mediante índices numéricos (comenzando desde 0).
Mango
Programa: Acceder a la Matriz Completa
Con JavaScript, se puede acceder al arreglo completo refiriéndose al nombre del arreglo:
<!DOCTYPE html> <html> <body>
<h2>Arreglos de JavaScript</h2>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
[Link]("demo").innerHTML = coches;
</script> </body> </html>
Output:
Arreglos de JavaScript
Saab, Volvo, BMW
Cambiando un elemento de un array
Esta declaración cambia el valor del primer elemento en coches:
<!DOCTYPE html>
<html> <body>
<h2>Arreglos de JavaScript</h2>
<p>Los elementos de un arreglo en JavaScript se acceden utilizando índices numéricos (comenzando desde 0).</p>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
[Link]("demo").innerHTML = coches;
</script> </body> </html>
Arreglos de JavaScript
Los elementos de un array de JavaScript se acceden utilizando índices numéricos (comenzando desde 0).
Opel, Volvo, BMW
1. Los arreglos usan números para acceder a sus "elementos". En este ejemplo, person[0] devuelve
Juan:
<!DOCTYPE html> <html> <body>
<h2>Arreglos de JavaScript</h2>
<p>Los arreglos utilizan números para acceder a sus elementos.</p>
<p id="demo"></p>
<script>
const person = ["John", "Doe", 46];
[Link]("demo").innerHTML = person[0];
</script> </body> </html>
Salida:
Arreglos de JavaScript
Los arreglos utilizan números para acceder a sus elementos.
Juan
2. Objects usenamesto acceso su miembros En esto
example, [Link] returns John:
<!DOCTYPE html> <html> <body>
<h2>JavaScript Objects</h2>
<p>JavaScript utiliza nombres para acceder a las propiedades de los objetos.</p>
<p id="demo"></p>
<script> const person = {firstName:"John", lastName:"Doe", age:46};
[Link]("demo").innerHTML = [Link];
</script> </body> </html>
Output:
Objetos de JavaScript
JavaScript uses names to access object properties.
Juan
Los elementos de un arreglo pueden ser objetos
Las variables de JavaScript pueden ser objetos. Los arreglos son un tipo especial de objetos. Debido a esto, puedes tener
variables de diferentes tipos en el mismo Array.
Puedes tener objetos en un Array. Puedes tener funciones en un Array. Puedes tener arrays en un
Array:
myArray[0] = [Link];
myArray[1] = myFunction;
myArray[2] = myCars;
Propiedades y Métodos de Array
La verdadera fuerza de los arreglos de JavaScript son las propiedades y métodos de arreglo incorporados: Por ejemplo, coches es el nombre
de un array.
[Link] // Devuelve el número de elementos
[Link]() // Ordena el arreglo
La propiedad de longitud
La propiedad length de un array devuelve la longitud de un array (el número de elementos del array).
<!DOCTYPE html> <html> <body> <h2>Arreglos de JavaScript</h2>
<p>La propiedad length devuelve la longitud de un array.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
[Link]("demo").innerHTML = [Link];
</script> </body> </html>
Output:
Arreglos de JavaScript
La propiedad length devuelve la longitud de un array.
Repetir elementos de matriz
Una forma de recorrer un arreglo es usando un bucle for:
<!DOCTYPE html> <html> <body>
<h2>Arreglos de JavaScript</h2>
<p>La mejor manera de recorrer un arreglo es utilizando un bucle for estándar:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = [Link];
let text = "<ul>";
para (let i = 0; i < fLen; i++) {
<li>
</ul>
[Link]("demo").innerHTML = text;
</script> </body></html>
Output:
Arreglos de JavaScript
La mejor manera de recorrer un array es utilizando un bucle for estándar:
Banana
Naranja
Manzana
Mango
La Diferencia Entre Arrays y Objetos
En JavaScript, los arrays utilizan índices numerados.
En JavaScript, los objetos utilizan índices nombrados.
Los arreglos son un tipo especial de objetos, con índices numerados.
Cuándo usar arreglos. Cuándo usar objetos.
Debes usar objetos cuando quieras que los nombres de los elementos sean cadenas (texto).
Deberías usar arreglos cuando quieras que los nombres de los elementos sean números.
JavaScript nuevo Array()
JavaScript tiene un constructor de array incorporado nuevo Array().
Pero puedes usar [] en su lugar de manera segura.
Estas dos declaraciones diferentes crean un nuevo arreglo vacío llamado puntos:
const puntos = new Array();
constpuntos = [];
Estas dos declaraciones diferentes crean un nuevo arreglo que contiene 6 números:
constpoints =newArray(40,100,1,5,25,10);
constpoints = [40,100,1,5,25,10];
Un array en JavaScript puede contener diferentes elementos
Podemos almacenar Números, Cadenas y Booleanos en un solo arreglo.
Ejemplo:
// Storing number, boolean, strings in an Array
varhouse = ["1BHK", 25000,"2BHK", 50000,"Rent",true];
JavaScript Array Methods
Veamos la lista de métodos de arreglos de JavaScript con su descripción.
Métodos Description
concat() Devuelve un nuevo objeto de matriz que contiene dos o más matrices fusionadas.
copiaDentro() Copia la parte del array dado con sus propios elementos y devuelve el
arreglo modificado.
entradas() Crea un objeto iterador y un bucle que itera sobre cada clave/valor
par
cada() Determina si todos los elementos de un arreglo satisfacen
condiciones de función proporcionadas.
llenar() Rellena elementos en un arreglo con valores estáticos.
de() Crea un nuevo array que lleva la copia exacta de otro elemento del array.
filtrar() Devuelve el nuevo array que contiene los elementos que pasan el criterio proporcionado
condiciones de función.
encontrar() Devuelve el valor del primer elemento en el arreglo dado que satisface el
condición especificada.
findIndex() Devuelve el valor del índice del primer elemento en el array dado que
satisface la condición especificada.
forEach() Invoca la función proporcionada una vez para cada elemento de un array.
incluye() It checks whether the given array contains the specified element.
indexOf() Busca el elemento especificado en el arreglo dado y devuelve el índice de
el primer partido.
unir() Une los elementos de un arreglo como una cadena.
claves() Crea un objeto iterador que contiene solo las claves del arreglo, luego
recorre estas claves.
lastIndexOf() Busca el elemento especificado en el array dado y devuelve el índice de
el último partido.
mapa() Llama a la función especificada para cada elemento del arreglo y devuelve el nuevo
arreglo
de() Crea un nuevo array a partir de un número variable de argumentos, conteniendo cualquier
tipo de argumento.
pop() Elimina y devuelve el último elemento de un arreglo.
empujar() It adds one or more elements to the end of an array.
invertir() Invierte los elementos del array dado.
reducir(función, Ejecuta una función proporcionada para cada valor de izquierda a derecha y
inicial) reduce el arreglo a un solo valor.
reduceRight() Ejecuta una función proporcionada para cada valor de derecha a izquierda y
reduce el array a un solo valor.
shift() Elimina y devuelve el primer elemento de un array.
cortar() It returns a new array containing the copy of the part of the given array.
ordenar() Devuelve el elemento del arreglo dado en un orden ordenado.
splice() Agrega/elimina elementos del array dado.
toLocaleString() Devuelve una cadena que contiene todos los elementos de un array especificado.
toString() Convierte los elementos de un arreglo especificado a forma de cadena, sin
afectando la matriz original.
unshift() Agrega uno o más elementos al principio del arreglo dado.
valores() Crea un nuevo objeto iterador que lleva valores para cada índice en el arreglo.
Métodos de Array de JavaScript
Pop y Push
Cuando trabajas con arrays, es fácil eliminar elementos y agregar nuevos elementos.
Esto es lo que significa 'popping' y 'pushing':
Sacando elementos de un array, o añadiendo elementos a un array.
Agregar elementos de arreglo
La forma más fácil de agregar un nuevo elemento a un arreglo es usando el método push(). El método push() añade un
nuevo elemento a un array (al final):
Sintaxis :
[Link](elemento1, elemento2 …)
Parameters:Items to be added to an array.
<!DOCTYPE html> <html> <body>
<h2>Arrays de JavaScript</h2>
<p>El método push agrega un nuevo elemento a un arreglo.</p>
<button onclick="myFunction()">Pruébalo</button>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
[Link]("demo").innerHTML = fruits;
función miFunción() {
[Link]("Limón");
[Link]("demo").innerHTML = fruits;
} </script> </body> </html>
Output:
También se puede agregar un nuevo elemento a un arreglo utilizando lapropiedad length:
Ejemplo
constfruits = ["Banana","Orange","Apple"];
frutas[[Link]] = "Limón"; // Agrega "Limón" a frutas
[Link]() : Eliminar elementos del final de un array
Sintaxis:
[Link]()
Parámetros: No requiere parámetros
Description:It is used to remove array elements from the end of an array.
// Eliminando elementos del final de un arreglo
// Declarar e inicializar arreglos
varnumber_arr = [ 20, 30, 40, 50 ];
varstring_arr = ["amit","sumit","anil"];
pop()
// number_arr contiene
[ 20, 30, 40 ]
number_arr.pop();
// string_arr contiene
// ["amit", "sumit"]
string_arr.pop();
// Imprimiendo ambos arreglos después de realizar la operación pop
[Link]("Después de quitar el elemento " + number_arr);
[Link]("Después de popo op " + string_arr);
[Link]() : Eliminar elementos al principio de un array
Sintaxis :
[Link]()
Parámetro: no toma ningún parámetro
Description :It is used to remove array at the beginning of an array.
// Eliminando un elemento del principio de un arreglo
// Declarando e inicializando arreglos
varnumber_arr = [ 20, 30, 40, 50, 60 ];
varstring_arr = ["amit","sumit","anil","prateek"];
// shift() // number_arr contiene // [30, 40, 50, 60];
number_arr.shift();
// string_arr contiene
// ["sumit", "anil", "prateek"]
string_arr.shift();
// Imprimiendo ambos arreglos después de realizar la operación de desplazamiento
[Link]("Después de la operación de desplazamiento " + number_arr);
[Link]("Después de la operación shift " + string_arr);
[Link]() : Añadiendo elementos al principio de un Array
Sintaxis :
[Link](item1, item2 …)
Parameters:Items to be added to the array
Description:This method is used to add elements at the beginning of an array.
// Agregar elemento al principio de un arreglo
// Declaración e inicialización de arreglos
varnumber_arr = [ 20, 30, 40 ];
varstring_arr = ["amit","sumit"];
unshift()
// el array de números contiene
[10, 20, 20, 30, 40]
number_arr.unshift(10, 20);
// string_arr contiene
// ["sunil", "anil", "amit", "sumit"]
string_arr.unshift("sunil", "anil");
// Imprimiendo ambos arreglos después de realizar la operación unshift
[Link]("Después de la operación unshift " + number_arr);
[Link]("Después de la operación unshift " + string_arr);
[Link]() : Inserción y Eliminación en medio de un Array
Sintaxis:
[Link] (start, deleteCount, item 1, item 2….)
Parámetros:
Inicio: Ubicación en la que realizar la operación
deleteCount:Number of element to be deleted,
si no se va a eliminar ningún elemento, pasa 0.
Elemento1, elemento2 …..- este es un parámetro opcional.
Estos son los elementos que se deben insertar desde startubicación
Descripción: Splice es un método muy útil ya que puede eliminar y agregar elementos del
ubicación particular.
// Eliminando y agregando un elemento en una ubicación particular de un arreglo
// Declaración e inicialización de arreglos
varnumber_arr = [ 20, 30, 40, 50, 60 ];
varstring_arr = ["amit","sumit","anil","prateek"];
// splice()
// elimina 3 elementos a partir del 1
// el arreglo de números contiene [20, 60]
number_arr.splice(1, 3);
// no elimina sino que inserta 3, 4, 5
// en la ubicación de inicio 1
number_arr.splice(1, 0, 3, 4, 5);
// elimina dos elementos comenzando desde el índice 1
// y añadir tres elementos.
["amit","xyz","geek 1","geek 2","prateek"]
string_arr.splice(1, 2,"xyz","geek 1","geek 2");
// Imprimiendo ambos arreglos después de realizar la operación de splice
[Link]("Después de la operación splice " + number_arr);
[Link]("Después de la operación de splice " + string_arr);
Método sort() de Array en javaScript
<script>
// JavaScript para ilustrar la función sort()
functionfunc() {
// Cadena original
vararr = ["Geeks", "for", "Geeks"]
[Link](arr);
[Link]("<br>");
// Ordenando el arreglo
[Link]([Link]());
}
func();
</script>
Output:
Geeks para Geeks
Geeks, Geeks, por
El método [Link]() se utiliza para ordenar el arreglo en su lugar en un orden dado según
la función compare(). Si el método se omite, entonces el arreglo se ordena en orden ascendente.
orden. Sintaxis:
[Link](funciónDeComparación)
Parámetros: Este método acepta un solo parámetro como se mencionó anteriormente y se describió
debajo:
compareFunction: Este parámetro se utiliza para ordenar los elementos de acuerdo a
diferentes atributos y en diferente orden.
compareFunction(a,b) < 0
compareFunction(a,b) > 0
compareFunction(a,b) = 0
Valor de retorno: Este método devuelve la referencia del arreglo original ordenado. Abajo
los ejemplos ilustran el método sort() del Array de JavaScript:
Ejemplo 1: En este ejemplo, el método sort() ordena los elementos del arreglo.
en orden ascendente.
var arr = [2, 5, 8, 1, 4]
[Link]([Link]());
[Link](arr);
Output:
1,2,4,5,8
1,2,4,5,8
Ejemplo 2: En este ejemplo, el método sort() organiza los elementos de la matriz.
ordenado según la función aplicada a cada elemento.
var arr = [2, 5, 8, 1, 4]
[Link]([Link](function(a, b) {
retornar a + 2 * b;
}));
[Link](arr);
Salida:
2,5,8,1,4
2,5,8,1,4
<script>
// JavaScript para ilustrar la función sort()
funciónfunc() {
//Cadena original
vararr = [2, 5, 8, 1, 4]
//Sorting the array
[Link]([Link]());
<br>
[Link](arr);
}
func();
</script>
Output:
1,2,4,5,8
1,2,4,5,8
Programa 2:
<script>
// JavaScript para ilustrar la función sort()
functionfunc() {
// Array original
vararr = [2, 5, 8, 1, 4];
[Link]([Link](function(a, b) {
returna + 2 * b;
}));
<br>
[Link](arr);
}
func();
</script>
Salida:
4,1,8,5,2
4,1,8,5,2
Fusionando (Concatenando) Arreglos
El método concat() crea un nuevo arreglo al fusionar (concatenar) arreglos existentes:
<!DOCTYPE html> <html> <body>
<h2>Métodos de Array en JavaScript</h2>
<h2>concat()</h2>
<p>El método concat() combina (concatena) arreglos:</p>
<p id="demo"></p>
<script>
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const misNiños = [Link](misChicos);
[Link]("demo").innerHTML = misHijos;
</script> </body> </html>
Output:
Métodos de Array en JavaScript
concatenar()
El método concat() combina (concatena) arreglos:
Cecilie,Lone,Emil,Tobias,Linus
Arreglos de JavaScript
JavaScript soporta las siguientes categorías de arreglos.
arreglo multidimensional
Pasar arreglos a funciones
Devolver array desde funciones
Arreglos Multidimensionales
también admite el concepto de matriz multidimensional. Una matriz multidimensional se puede definir como una
referencia de array a otro array para su valor.
Los arreglos multidimensionales no se proporcionan directamente en JavaScript. Si necesitas crear un
arreglo multidimensional, tienes que hacerlo utilizando el arreglo unidimensional.
También podemos decir que un arreglo bidimensional es la forma más simple de un arreglo multidimensional.
Declaración
La siguiente sintaxis te ilustra cómo declarar una matriz bidimensional en JavaScript.
var array_name = [[value1,value2,value3],[val1,val2,val3]];
Acceso a elemento bidimensional de un array
var nombre_arreglo[índice_arreglo_inicial][índice_arreglo_referenciado]
Ejemplo: var multi = [[2,3,4],[4,9,16]]
[Link](multi[0][0])
[Link](multi[0][1])
[Link](multi[0][2])
[Link](multi[1][0])
[Link](multi[1][1])
[Link](multi[1][2])
Salida
2
3
4
4
9
16
Pasar un arreglo a una función
Al pasar un arreglo como argumento a una función, debes especificar el nombre del arreglo (una referencia a un
array) sin corchetes. Tratemos de entenderlo con el siguiente ejemplo.
Ejemplo
var rainbow =newArray["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];
función mostrar(rainbow) {
for(var i = 0;i<[Link];i++) {
[Link](rainbow[i]) } }
mostrar(arcoíris)
Producción
Violeta
Índigo
Azul
Verde
Amarillo
Naranja
Rojo
Devolver Array desde la función
Permite que una función devuelva un arreglo.
Ejemplo de función mostrar() {
return newArray("Blue", "Red", "Green", "Yellow") }
var colores = mostrar()
for(var i in colores) {
[Link](colores[i]) }
Salida
Azul
Rojo
Verde
Amarillo