Introducción a JavaScript

En este ejemplo se muestran ejemplos sencillos del manejo de arrays en JavaScript

Definición y acceso a los elementos

Definición de un array

<script>

let lista=["Macarrones","Espaguetis","Lazos","Tallarines"];
document.write("Un array:" + lista+"<br>");
document.write("Un array (con join()):" + lista.join("; ")+"<br>");

Acceso a elementos empleando array[...]

<script>

for (let i = 0; i < 4; i++) {
    document.write("Elemento " 
            + i 
            + ":" 
            + lista[i] 
            + "<br>");
}

Acceso a elementos `for...of`

<script>

for (const elemento of lista) {
    document.write("Elemento:" 
            + elemento 
            + "<br>");
}

Iterar y cambiar los elementos

<script>

let numeros=[1,2,3,4,5];
for (const elemento of numeros) {
    document.write("Elemento previo" + elemento + "<br>");
}
for (let i = 0; i < numeros.length; i++) {
    numeros[i]= numeros[i]*2;
}

for (const elemento of numeros) {
    document.write("Elemento nuevo:" + elemento + "<br>");
}

document.write("Antes: "+numeros.join(", ") + "
");
let dobles = numeros.map(cuadrado);


function cuadrado(elemento, indice, array) {
    return Math.pow(elemento,2);
}
document.write("Cuadrado "+dobles.join(", ") + "
");

document.write("Antes: "+numeros.join(", ") + "
");
                            let menores = numeros.filter(menor);


                            function menor(elemento, indice, array) {
                                return elemento<10?true:false;
                            }
                            document.write("Menores "+menores.join(", ") + "
");

                            let factores = [1,2,3,4,5,6,7];

                            let multiplicar = function (acumulador,actual){
                                document.write(`Acumulado=${acumulador}, valor actual=${actual} Resultado=${acumulador*actual}
`);
                                return acumulador * actual;
                            }

                            document.write("Números: "+factores.join(", ") + "
");
                            let producto = factores.reduce(multiplicar,1);
                            
                            document.write("Producto resultado: "+producto + "
");

for ... of

for ... of y for i++

forEach()

Cambio de datos inmutables

<script>


document.write("Antes: "+numeros.join(", ") + "<br>");
let dobles = numeros.map(cuadrado);


function cuadrado(elemento, indice, array) {
    return Math.pow(elemento,2);
}
document.write("Cuadrado "+dobles.join(", ") + "<br>");

document.write("Antes: "+numeros.join(", ") + "<br>");
let menores = numeros.filter(menor);


function menor(elemento, indice, array) {
    return elemento<10?true:false;
}
document.write("Menores "+menores.join(", ") + "<br>");

let factores = [1,2,3,4,5,6,7];

let multiplicar = function (acumulador,actual){
    document.write(`Acumulado=${acumulador}, valor actual=${actual} Resultado=${acumulador*actual}<br>`);
    return acumulador * actual;
}

document.write("Números: "+factores.join(", ") + "<br>");
let producto = factores.reduce(multiplicar,1);

document.write("Producto resultado: "+producto + "<br>");

map() Hallar el cuadrado de un array de números

filter() - Dejar los números menores de 10

reduce() - Calcular el producto de una serie de números

Insertar y eliminar elementos

<script>

let p = document.getElementById("inserta");
let insertados = [];
let html_1 = "<strong>Array</strong> ";
let html_2 = "<br>Eliminado:";

function inserta_final(elemento) {
    insertados.push(elemento);
    p.innerHTML = "";
    p.innerHTML = html_1 + insertados.join(", ");
}
function inserta_inicio(elemento) {
    insertados.unshift(elemento);
    p.innerHTML = "";
    p.innerHTML = html_1 + insertados.join(", ");
}
function menos_ultimo() {
    let eliminado = insertados.pop();
    p.innerHTML = "";
    p.innerHTML = html_1 + insertados.join(", ") + html_2 + eliminado;
}
function menos_primero() {
    let eliminado = insertados.shift();
    p.innerHTML = "";
    p.innerHTML = html_1 + insertados.join(", ") + html_2 + eliminado;
}
function reemplaza(elemento) {
    p.innerHTML = "";
    if (insertados.length >= 3) {
        insertados.splice(2, 1, elemento);

        p.innerHTML = html_1 + insertados.join(", ");
    } else {
        p.innerHTML = "No hay suficientes elementos";
    }
}

function reemplaza(elemento) {
    p.innerHTML = "";
    if (insertados.length >= 3) {
        insertados.splice(2, 1, elemento);

        p.innerHTML = html_1 + insertados.join(", ");
    } else {
        p.innerHTML = "No hay suficientes elementos";
    }
}

function recorta() {
    p.innerHTML = "";
    if (insertados.length >= 3) {
        insertados = insertados.slice(2);

        p.innerHTML = html_1 + insertados.join(", ");
    } else {
        p.innerHTML = "No hay suficientes elementos";
    }
}
function unir() {
    insertados = insertados.concat(insertados);
    p.innerHTML = "";
    p.innerHTML = html_1 + insertados.join(", ");
}

Ordenar elementos

<script>

let ordena = document.getElementById("ordena");
let ordenados = [];

function inserta(elemento) {
    ordenados.push(elemento);
    ordena.innerHTML = "";
    ordena.innerHTML = html_1 + ordenados.join(", ");
}

function ordenar_array() {
    ordenados.sort();
    ordena.innerHTML = "";
    ordena.innerHTML = html_1 + ordenados.join(", ");
}

function revertir_array() {
    ordenados.reverse();
    ordena.innerHTML = "";
    ordena.innerHTML = html_1 + ordenados.join(", ");
}

function ordenar_array_numeros() {
    ordenados.sort(comparar);
    ordena.innerHTML = "";
    ordena.innerHTML = html_1 + ordenados.join(", ");
}
function comparar(a,b){
    let aa= parseInt(a);
    let bb= parseInt(b);
    return aa-bb;
}

Inicio

Definición y acceso a los elementos

Definición de un array

Acceso a elementos empleando array[...]

Acceso a elementos for...of

Iterar y cambiar los elementos

for ... of

for ... of y for i++

forEach()

Cambio de datos inmutables

map() Hallar el cuadrado de un array de números

filter() - Dejar los números menores de 10

reduce() - Calcular el producto de una serie de números

Insertar y eliminar elementos

Ordenar elementos

Acceso a elementos `for...of`