Tutorial paso a paso sobre cómo manejar objetos y arrays en JavaScript

4690

Paso 1: Definir el objeto y el array

Comienza por definir un objeto llamado “persona” con propiedades como nombre, edad y profesión. Por ejemplo:

const persona = {
  nombre: 'Juan',
  edad: 25,
  profesion: 'programador'
};

A continuación, crea un array llamado “amigos” que contendrá los nombres de los amigos de la persona. Por ejemplo:

const amigos = ['Pedro', 'María', 'Luisa'];

Paso 2: Acceder a las propiedades del objeto

Puedes acceder a las propiedades del objeto utilizando la notación de punto. Por ejemplo, para acceder al nombre de la persona:

console.log(persona.nombre); // Salida: Juan

También puedes acceder a las propiedades utilizando la notación de corchetes y una cadena que representa el nombre de la propiedad. Por ejemplo:

console.log(persona['edad']); // Salida: 25

Paso 3: Modificar las propiedades del objeto

Puedes modificar las propiedades del objeto asignándoles nuevos valores. Por ejemplo, cambia la edad de la persona a 30:

persona.edad = 30;
console.log(persona.edad); // Salida: 30

Paso 4: Acceder a elementos del array

Puedes acceder a los elementos del array utilizando índices. Recuerda que los índices de los arrays comienzan desde 0. Por ejemplo, para acceder al primer amigo:

console.log(amigos[0]); // Salida: Pedro

Paso 5: Modificar elementos del array

Puedes modificar los elementos del array asignándoles nuevos valores utilizando índices. Por ejemplo, cambia el segundo amigo a “Ana”:

amigos[1] = 'Ana';
console.log(amigos); // Salida: ['Pedro', 'Ana', 'Luisa']

Paso 6: Agregar elementos al array

Puedes agregar nuevos elementos al final del array utilizando el método push(). Por ejemplo, agrega un nuevo amigo llamado “Carlos”:

amigos.push('Carlos');
console.log(amigos); // Salida: ['Pedro', 'Ana', 'Luisa', 'Carlos']

Paso 7: Eliminar elementos del array

Puedes eliminar elementos del array utilizando el método splice(). Por ejemplo, elimina el segundo amigo:

amigos.splice(1, 1);
console.log(amigos); // Salida: ['Pedro', 'Luisa', 'Carlos']

Paso 8: Crear una tabla y graficarlo

// Crear la tabla
const tabla = document.createElement('table');// Crear el encabezado de la tabla
const encabezado = tabla.createTHead();
const filaEncabezado = encabezado.insertRow();
const thIndice = document.createElement('th');
const thAmigo = document.createElement('th');
thIndice.textContent = 'Índice';
thAmigo.textContent = 'Amigo';
filaEncabezado.appendChild(thIndice);
filaEncabezado.appendChild(thAmigo);// Crear el cuerpo de la tabla
const cuerpoTabla = tabla.createTBody();
amigos.forEach(function(amigo, indice) {
  const fila = cuerpoTabla.insertRow();
  const celdaIndice = fila.insertCell();
  const celdaAmigo = fila.insertCell();
  celdaIndice.textContent = indice;
  celdaAmigo.textContent = amigo;
});// Agregar la tabla al documento
document.body.appendChild(tabla);