JavaMétodos de matriz de scripts: crear con un ejemplo

¿Qué es un Array en Java¿Texto?

Una matriz es un objeto que puede almacenar una colección de artículosLos arrays resultan muy útiles cuando necesitas almacenar grandes cantidades de datos del mismo tipo. Supongamos que quieres almacenar los detalles de 500 empleados. Si usas variables, tendrás que crear 500 variables, mientras que puedes hacer lo mismo con un solo array. Puedes acceder a los elementos de un array haciendo referencia a sus número de índicey el índice del primer elemento de una matriz es cero.

A diferencia de los arreglos en lenguajes estrictamente tipados, un JavaLos arrays de scripts son dinámicos. Su longitud aumenta automáticamente al añadir un nuevo elemento, y un mismo array puede contener cadenas, números, booleanos, objetos e incluso otros arrays simultáneamente. Esta flexibilidad convierte a los arrays en el contenedor predeterminado para listas de datos tanto en scripts de navegador como en código del servidor.

Cómo crear una matriz en JavaScript

Puedes crear una matriz en JavaScript como se indica a continuación.

var students = ["John", "Ann", "Kevin"];

Aquí, está inicializando su matriz a medida que se crea con los valores "John", "Ann" y "Kevin". El índice de “John”, “Ann” y “Kevin” es 0, 1 y 2 respectivamente. Si desea agregar más elementos a la matriz de estudiantes, puede hacerlo así:

students[3] = "Emma";
students[4] = "Rose";

También puedes crear un array usando el constructor Array de esta manera:

var students = new Array("John", "Ann", "Kevin");

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

Cómo acceder y modificar elementos de un array

Cada elemento se ubica en una posición numerada. La notación entre corchetes lee un valor, asigna un nuevo valor o agrega una nueva entrada cuando el índice coincide con la longitud actual.

let students = ["John", "Ann", "Kevin"];

console.log(students[0]);              // John  - first element
console.log(students[students.length - 1]); // Kevin - last element

students[1] = "Anna";                // replace an existing value
students[3] = "Emma";                // append a new value

console.log(students);              // ["John", "Anna", "Kevin", "Emma"]
console.log(students.length);       // 4
console.log(students[9]);              // undefined - index does not exist

JavaMétodos de matriz de scripts

El objeto Array tiene muchas propiedades y métodos que ayudan a los desarrolladores a manejar matrices de manera fácil y eficiente. Puede obtener el valor de una propiedad especificando nombrematriz.property y la salida de un método especificando nombrematriz.method().

1. propiedad de longitud –> Si desea saber la cantidad de elementos en una matriz, puede usar la propiedad de longitud.
2. propiedad del prototipo –> Si desea agregar nuevas propiedades y métodos, puede utilizar la propiedad prototipo.
3. método inverso –> Puede invertir el orden de los elementos en una matriz utilizando un método inverso.
4. método de ordenación -> Puedes ordenar los elementos de una matriz usando el método de ordenación.
5. método pop –> Puede eliminar el último elemento de una matriz utilizando un método pop.
6. método de cambio -> Puedes eliminar el primer elemento de una matriz usando el método shift.
7. método de empuje –> Puede agregar un valor como último elemento de la matriz.

La tabla de referencia que aparece a continuación agrupa los métodos más utilizados para que pueda ver de un vistazo cuáles modifican el array original y cuáles devuelven un nuevo valor.

Agregar y eliminar elementos

let fruits = ["apple", "banana"];

fruits.push("cherry");      // ["apple", "banana", "cherry"]
fruits.unshift("mango");    // ["mango", "apple", "banana", "cherry"]
fruits.pop();                // ["mango", "apple", "banana"]
fruits.shift();              // ["apple", "banana"]

// splice(startIndex, deleteCount, ...itemsToInsert)
fruits.splice(1, 0, "kiwi"); // ["apple", "kiwi", "banana"]
console.log(fruits);

Búsqueda, copia y unión

let colors = ["red", "green", "blue", "green"];

console.log(colors.indexOf("green"));     // 1  - first match only
console.log(colors.lastIndexOf("green")); // 3
console.log(colors.includes("pink"));     // false
console.log(colors.slice(1, 3));         // ["green", "blue"]
console.log(colors.join(" | "));         // red | green | blue | green
console.log(colors.concat(["black"]));   // new array, colors unchanged

Métodos de iteración: forEach, map, filter y reduce

MODERNA JavaEl script da preferencia a los métodos controlados por devoluciones de llamada sobre los bucles de índice manuales, porque la intención de la operación se indica directamente en el nombre del método.

const scores = [45, 72, 88, 31, 95];

scores.forEach(s => console.log(s));   // prints each score

const doubled = scores.map(s => s * 2);  // [90, 144, 176, 62, 190]
const passed  = scores.filter(s => s >= 50); // [72, 88, 95]
const total   = scores.reduce((sum, s) => sum + s, 0); // 331
const first   = scores.find(s => s > 80);   // 88

console.log(doubled, passed, total, first);

JavaEjemplo de matriz de script con código fuente Code

El siguiente script crea un array de estudiantes, añade un método de visualización personalizado mediante la propiedad `prototype` y, a continuación, muestra las operaciones de longitud, ordenación, inversión, extracción y inserción en secuencia. Pruébalo tú mismo:

<html>
<head>
	<title>Arrays!!!</title>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		Array.prototype.displayItems=function(){
			for (i=0;i<this.length;i++){
				document.write(this[i] + "<br />");
			}
		}
		document.write("students array<br />");
		students.displayItems();
		document.write("<br />The number of items in students array is " + students.length + "<br />");
		document.write("<br />The SORTED students array<br />");
		students.sort();
		students.displayItems();
		document.write("<br />The REVERSED students array<br />");
		students.reverse();
		students.displayItems();
		document.write("<br />THE students array after REMOVING the LAST item<br />");
		students.pop();
		students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
		students.displayItems();
	</script>
</head>
<body>
</body>
</html>

Rendimiento esperado:

students array
John
Ann
Aaron
Edwin
Elizabeth

The number of items in students array is 5

The SORTED students array
Aaron
Ann
Edwin
Elizabeth
John

The REVERSED students array
John
Elizabeth
Edwin
Ann
Aaron

THE students array after REMOVING the LAST item
John
Elizabeth
Edwin
Ann

THE students array after PUSH
John
Elizabeth
Edwin
Ann
New Stuff

Observa que la función `sort` coloca "Aaron" antes que "Ann" porque las letras mayúsculas y minúsculas se comparan según sus códigos de caracteres. Observa también que la función `pop` eliminó "Aaron" del array invertido, lo que confirma que tanto `sort` como `reverse` modificaron el array original en su lugar.

Cómo recorrer un bucle JavaMatriz de scripts

Cuatro bañosping Existen diferentes estilos, y cada uno se adapta a una situación distinta. El bucle for clásico ofrece control total sobre el índice, for…of lee los valores directamente, forEach expresa la intención con claridad y for…in debe reservarse para las propiedades de los objetos.

const cities = ["Paris", "Tokyo", "Cairo"];

// 1. Classic for loop - index is available
for (let i = 0; i < cities.length; i++) {
    console.log(i + ": " + cities[i]);
}

// 2. for...of loop - value is available
for (const city of cities) {
    console.log(city);
}

// 3. forEach with index parameter
cities.forEach((city, index) => console.log(index, city));

// 4. entries() when both index and value are needed
for (const [index, city] of cities.entries()) {
    console.log(index, city);
}

Un análisis más profundo de la sintaxis de bucles, incluyendo while y do…while, aparece en el artículo sobre cómo usar bucles en JavaScript.

Matrices multidimensionales en JavaScript

JavaEl script no tiene un tipo de matriz específico. Una cuadrícula es simplemente una matriz cuyos elementos son a su vez matrices, y se utilizan dos expresiones de índice para acceder a una sola celda.

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]); // 6  - row index 1, column index 2

for (const row of matrix) {
    console.log(row.join(" "));
}

// flatten a nested array into a single level
console.log(matrix.flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Salida:

6
1 2 3
4 5 6
7 8 9
[1, 2, 3, 4, 5, 6, 7, 8, 9]

Los arrays aparecen en casi todos los scripts prácticos, desde la validación de formularios hasta la representación de datos. Continúa con el Información JavaEjemplos de código de script, revisión JavaCadenas de script para el manejo de texto y lea sobre interno y externo JavaScript para decidir dónde pertenecen estos scripts en una página. Los desarrolladores que deseen una comprobación de tipos estática sobre el contenido de los arrays pueden pasar a la siguiente sección. TypeScript tutoriales.

Preguntas Frecuentes