22 mayo, 2024

Todo Programación

Cursos, código fuente y ejemplos.

Javascript – Capítulo 06 – Arrays y objetos

1 minuto de lectura
Javascript, Capítulo 06, Arrays y objetos

Trabajo con Arrays

Los arrays son estructuras de datos fundamentales en JavaScript que permiten almacenar y organizar múltiples valores en una sola variable. En este capítulo, exploraremos cómo trabajar con arrays, incluyendo cómo añadir y eliminar elementos, y cómo recorrerlos.

1. Creación de Arrays

Puedes crear un array en JavaScript de varias maneras:

// Array vacío
let miArray = [];

// Array con elementos
let colores = ['rojo', 'verde', 'azul'];

2. Añadir Elementos

a. push()

El método push() añade un elemento al final del array.

colores.push('amarillo');

b. unshift()

El método unshift() añade un elemento al principio del array.

colores.unshift('naranja');

3. Eliminar Elementos

a. pop()

El método pop() elimina el último elemento del array y lo devuelve.

let ultimoColor = colores.pop();

b. shift()

El método shift() elimina el primer elemento del array y lo devuelve.

let primerColor = colores.shift();

c. splice()

El método splice() permite eliminar elementos específicos del array en función de su índice.

colores.splice(1, 2); // Elimina dos elementos a partir del índice 1

4. Recorrer Arrays

a. Bucle for

Puedes recorrer un array utilizando un bucle for.

for (let i = 0; i < colores.length; i++) {
  console.log(colores[i]);
}

b. Bucle forEach()

El método forEach() es una forma más elegante de recorrer un array.

colores.forEach(function(color) {
  console.log(color);
});

Ejercicio 1: Trabajo con Arrays

Crea un array llamado frutas con tres frutas de tu elección. Luego, añade una fruta adicional al final del array y elimina la primera fruta. Finalmente, muestra las frutas restantes en la consola.

let frutas = ['manzana', 'banana', 'pera'];
frutas.push('uva');
frutas.shift();

frutas.forEach(function(fruta) {
  console.log(fruta);
});

Concepto de Objetos y Propiedades

Los objetos son otra estructura de datos fundamental en JavaScript. Representan colecciones de propiedades y valores relacionados. A continuación, aprenderemos sobre objetos y cómo utilizarlos en situaciones prácticas.

1. Creación de Objetos

Puedes crear un objeto utilizando llaves {} y especificando sus propiedades y valores.

let persona = {
  nombre: 'Juan',
  edad: 30,
  ciudad: 'Madrid'
};

2. Acceso a Propiedades

Puedes acceder a las propiedades de un objeto utilizando la notación de puntos objeto.propiedad o la notación de corchetes objeto['propiedad'].

console.log(persona.nombre); // 'Juan'
console.log(persona['edad']); // 30

3. Modificación de Propiedades

Puedes modificar el valor de una propiedad de objeto de la misma manera en que accedes a ella.

persona.edad = 31;

4. Adición de Propiedades

Puedes agregar nuevas propiedades a un objeto en cualquier momento.

persona.profesion = 'ingeniero';

5. Eliminación de Propiedades

Puedes eliminar propiedades de un objeto utilizando el operador delete.

delete persona.ciudad;

Ejercicio 2: Uso de Objetos en Situaciones Prácticas

Crea un objeto llamado producto que represente un artículo de una tienda en línea. Este objeto debe tener propiedades como nombre, precio, disponibilidad y descripcion. Luego, muestra la información del producto en la consola.

let producto = {
  nombre: 'Teléfono inteligente',
  precio: 599.99,
  disponibilidad: true,
  descripcion: 'Un teléfono avanzado con una pantalla de alta resolución y cámara de alta calidad.'
};

console.log('Nombre del producto: ' + producto.nombre);
console.log('Precio: $' + producto.precio);
console.log('Disponible: ' + (producto.disponibilidad ? 'Sí' : 'No'));
console.log('Descripción: ' + producto.descripcion);

Conclusión

En este capítulo, hemos explorado cómo trabajar con arrays y objetos en JavaScript. Los arrays son ideales para almacenar colecciones de datos, mientras que los objetos son útiles para representar objetos del mundo real con propiedades y valores relacionados.


Copyright © Todos los derechos reservados. | Newsphere por AF themes.