0% encontró este documento útil (0 votos)
52 vistas39 páginas

Array en Javascript

computacion

Cargado por

ixsa rab
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
52 vistas39 páginas

Array en Javascript

computacion

Cargado por

ixsa rab
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 39

1

ARRAY EN JAVASCRIPT

El objeto Array de JavaScript es un objeto global que es usado en la construcción


de arrays, que son objetos tipo lista de alto nivel.

Descripción

Los arrays son objetos similares a una lista cuyo prototipo proporciona métodos
para efectuar operaciones de recorrido y de mutación. Tanto la longitud como el
tipo de los elementos de un array son variables. Dado que la longitud de
un array puede cambiar en cualquier momento, y los datos se pueden almacenar
en ubicaciones no contiguas, no hay garantía de que los arrays de JavaScript
sean densos; esto depende de cómo el programador elija usarlos. En general
estas características son cómodas, pero si, en su caso particular, no resultan
deseables, puede considerar el uso de arrays con tipo.

Operaciones habituales

Crear un Array

JSCopy to Clipboard
let frutas = ["Manzana", "Banana"];

console.log(frutas.length);
// 2

Acceder a un elemento de Array mediante su índice

JSCopy to Clipboard
let primero = frutas[0];
// Manzana

let ultimo = frutas[frutas.length - 1];


// Banana
2

Recorrer un Array

JSCopy to Clipboard
frutas.forEach(function (elemento, indice, array) {
console.log(elemento, indice);
});
// Manzana 0
// Banana 1

Añadir un elemento al final de un Array

JSCopy to Clipboard
let nuevaLongitud = frutas.push("Naranja"); // Añade "Naranja" al final
// ["Manzana", "Banana", "Naranja"]

Eliminar el último elemento de un Array

let ultimo = frutas.pop(); // Elimina "Naranja" del final


// ["Manzana", "Banana"]

Añadir un elemento al principio de un Array

let nuevaLongitud = frutas.unshift("Fresa"); // Añade "Fresa" al inicio


// ["Fresa" ,"Manzana", "Banana"]

Eliminar el primer elemento de un Array

let primero = frutas.shift(); // Elimina "Fresa" del inicio


// ["Manzana", "Banana"]

Encontrar el índice de un elemento del Array

frutas.push("Fresa");
// ["Manzana", "Banana", "Fresa"]
3

let pos = frutas.indexOf("Banana"); // (pos) es la posición para abreviar


// 1

Eliminar un único elemento mediante su posición

Ejemplo:

Eliminamos "Banana" del array pasándole dos parámetros: la posición del


primer elemento que se elimina y el número de elementos que queremos
eliminar. De esta forma, .splice(pos, 1) empieza en la posición que nos
indica el valor de la variable pos y elimina 1 elemento. En este caso,
como pos vale 1, elimina un elemento comenzando en la posición 1
del array, es decir "Banana".

let elementoEliminado = frutas.splice(pos, 1);


// ["Manzana", "Fresa"]

Eliminar varios elementos a partir de una posición

Nota:

Con .splice() no solo se puede eliminar elementos del array, si no que


también podemos extraerlos guardándolo en un nuevo array. ¡Ojo! que al
hacer esto estaríamos modificando el array de origen.

let vegetales = ["Repollo", "Nabo", "Rábano", "Zanahoria"];


console.log(vegetales);
// ["Repollo", "Nabo", "Rábano", "Zanahoria"]

let pos = 1,
numElementos = 2;

let elementosEliminados = vegetales.splice(pos, numElementos);


// ["Nabo", "Rábano"] ==> Lo que se ha guardado en "elementosEliminados"
4

console.log(vegetales);
// ["Repollo", "Zanahoria"] ==> Lo que actualmente tiene "vegetales"

Copiar un Array

let copiaArray = vegetales.slice();


// ["Repollo", "Zanahoria"]; ==> Copiado en "copiaArray"

Acceso a elementos de un array

Los índices de los arrays de JavaScript comienzan en cero, es decir, el índice del
primer elemento de un array es 0, y el del último elemento es igual al valor de la
propiedad length del array restándole 1.

Si se utiliza un número de índice no válido, se obtendrá undefined.

let arr = [
"este es el primer elemento",
"este es el segundo elemento",
"este es el último elemento",
];
console.log(arr[0]); // escribe en consola 'este es el primer elemento'
console.log(arr[1]); // escribe en consola 'este es el segundo elemento'
console.log(arr[arr.length - 1]); // escribe en consola 'este es el último elemento'

Los elementos de un array pueden considerarse propiedades del objeto tanto


como toString (sin embargo, para ser precisos, toString() es un método). Sin
embargo, se obtendrá un error de sintaxis si se intenta acceder a un elemento de
un array de la forma siguiente, ya que el nombre de la propiedad no sería válido:

console.log(arr.0) // error de sintaxis


5

No hay nada especial ni en los arrays de JavaScript ni en sus propiedades que


ocasione esto. En JavaScript, las propiedades cuyo nombre comienza con un
dígito no pueden referenciarse con la notación punto y debe accederse a ellas
mediante la notación corchete.

Por ejemplo, dado un objeto con una propiedad de nombre '3d', sólo podría
accederse a dicha propiedad con la notación corchete.

let decadas = [1950, 1960, 1970, 1980, 1990, 2000, 2010]


console.log(decadas.0) // error de sintaxis
console.log(decadas[0]) // funciona correctamente

renderizador.3d.usarTextura(modelo, 'personaje.png')
renderizador['3d'].usarTextura(modelo, 'personaje.png')

Obsérvese que, en el último ejemplo, ha sido necesario poner '3d' entre comillas.
Es posible usar también comillas con los índices del los arrays de JavaScript (p.
ej., decadas['2'] en vez de decadas[2]), aunque no es necesario.

El motor de JavaScript transforma en un string el 2 de decadas[2] a través de una


conversión implícita mediante toString. Por tanto, '2' y '02' harían referencia a dos
posiciones diferentes en el objeto decadas, y el siguiente ejemplo podría
dar true como resultado:

console.log(decadas["2"] != decadas["02"]);

Relación entre length y las propiedades numéricas

La propiedad length de un array de JavaScript está conectada con algunas otras


de sus propiedades numéricas.

Varios de los métodos propios de un array (p. ej., join(), slice(), indexOf(), etc.)
tienen en cuenta el valor de la propiedad length de un array cuando se les llama.
6

Otros métodos (p. ej., push(), splice(), etc.) modifican la propiedad length de un
array.

const frutas = [];


frutas.push("banana", "manzana", "pera");

console.log(frutas.length); // 3

Cuando se le da a una propiedad de un array JavaScript un valor que corresponda


a un índice válido para el array pero que se encuentre fuera de sus límites, el
motor actualizará el valor de la propiedad length como corresponda:

frutas[5] = "fresa";
console.log(frutas[5]); // 'fresa'
console.log(Object.keys(frutas)); // ['0', '1', '2', '5']
console.log(frutas.length); // 6

Si se aumenta el valor de length:

frutas.length = 10;
console.log(frutas); // ['banana', 'manzana', 'pera', <2 empty items>, 'fresa', <4
empty items>]
console.log(Object.keys(frutas)); // ['0', '1', '2', '5']
console.log(frutas.length); // 10
console.log(frutas[8]); // undefined

Si se disminuye el valor de la propiedad length pueden eliminarse elementos:

frutas.length = 2;
console.log(Object.keys(frutas)); // ['0', '1']
console.log(frutas.length); // 2

Hay más información sobre este tema en la página sobre Array.length.


7

Creación de un array a partir de una expresión regular

El resultado de una búsqueda con una RegExp en un string puede crear


un array de JavaScript. Este array tendrá propiedades y elementos que
proporcionan información sobre la correspondencia encontrada. Para obtener
un array de esta forma puede
utilizarse RegExp.exec(), String.match() o String.replace().

El siguiente ejemplo, y la tabla que le sigue, pueden ayudar a comprender mejor


las propiedades y elementos a los que nos referimos:

// Buscar una d seguida de una o más b y, al final, de otra d


// Recordar las b y la d final
// No distinguir mayúsculas y minúsculas

const miRe = /d(b+)(d)/i;


const miArray = miRe.exec("cdbBdbsbz");

Las propiedades y elementos que se obtienen de esta búsqueda son


los siguientes:

Propiedad/Elemento Descripción Ejemplo


El string original sobre el que se ha
input Read only realizado la búsqueda con la expresión "cdbBdbsbz"
regular
El índice de la correspondencia en el
index Read only string, siendo cero el de la primera 1
posición.
Los últimos caracteres que cumplen la
[0] Read only "dbBd"
correspondencia
[1], ...[n] Read only Elementos que indican las [1]: "bB" [2]: "d"
correspondencias de substrings entre
8

Propiedad/Elemento Descripción Ejemplo


paréntesis (si se han incluido) de la
expresión regular. No hay límite al
número de substrings entre paréntesis
que se puedan utilizar.

Constructor

Array()

Crea un nuevo objeto Array.

Propiedades estáticas

get Array[@@species]

La función del constructor se utiliza para crear objetos derivados.

Métodos estáticos

Array.from()

Crea una nueva instancia de Array a partir de similarAUnArray, un objeto


iterable o parecido a un array.

Array.isArray()

Devuelve true si valor es un array, y false en caso contrario.

Array.of()

Crea una nueva instancia de Array con un número variable de parámetros,


independientemente del número y del tipo de dichos parámetros.

Propiedades de instancia
9

Array.prototype.length

Indica el número de elementos de un array.

Array.prototype[@@unscopables]

Símbolo que contiene todos los nombres de las propiedades que se


excluyen de un ámbito de enlace with.

Métodos de instancia

Array.prototype.concat()

Devuelve un nuevo array que es la concatenación de aquél sobre el que se


invoca, seguido de otros array(s) o valor(es).

Array.prototype.copyWithin()

Copia una secuencia de elementos de un array dentro del propio array.

Array.prototype.entries()

Devuelve un nuevo objeto Array Iterator que contiene los pares clave/valor
para cada índice del array.

Array.prototype.every()

Devuelve true si todos los elementos del array cumplen el predicado que
recibe como parámetro.

Array.prototype.fill()

Asigna un valor estático a todos los elementos del array entre las
posiciones inicio y fin.

Array.prototype.filter()
10

Devuelve un nuevo array que contiene todos los elementos de aquél para el
cual se llama que cumplan el predicado que se le pasa como parámetro.

Array.prototype.find()

Devuelve el primer elemento del array que cumpla el predicado que se pasa
como parámetro, o undefined si ninguno lo cumple.

Array.prototype.findIndex()

Devuelve el índice del primer elemento del array que cumpla el predicado
que se pasa como parámetro, o -1 si nunguno lo cumple.

Array.prototype.forEach()

Llama a la función pasada como parámetro para todos los elementos


del array.

Array.prototype.includes()

Determina si el array contiene el valorBuscado y


devuelve true o false según sea el caso.

Array.prototype.indexOf()

Devuelve el índice del primer elemento del array que sea igual
a elementoBuscado, o -1 si no existe.

Array.prototype.join()

Concatena en un string todos los elementos de un array.

Array.prototype.keys()

Devuelve un nuevo Array Iterator que contiene las claves de cada índice
del array.
11

Array.prototype.lastIndexOf()

Devuelve el índice del último elemento del array que sea igual
a elementoBuscado, o -1 si no existe.

Array.prototype.map()

Devuelve un nuevo array que contiene el resultado de llamar a la función


pasada como parámetro a todos los elementos del array sobre el que se
invoca.

Array.prototype.pop()

Elimina el último elemento de un array, y devuelve dicho elemento.

Array.prototype.push()

Añade uno o más elementos al final de un array y devuelve el nuevo valor


de su propiedad length.

Array.prototype.reduce()

Aplica la función pasada como parámetro a un acumulador y a cada valor


del array, que se recorre de izquierda a derecha, para reducirlo a un único
valor.

Array.prototype.reduceRight()

Aplica la función pasada como parámetro a un acumulador y a cada valor


del array, que se recorre de derecha a izquierda, para reducirlo a un único
valor.

Array.prototype.reverse()
12

Invierte el orden de los elementos de un array (el primero pasa a ser el


último y el último a ser el primero) en el propio array. Este método modifica
el array.

Array.prototype.shift()

Elimina el primer elemento de un array, y devuelve dicho elemento.

Array.prototype.slice()

Extrae una porción del array sobre el que se llama y devuelve un


nuevo array.

Array.prototype.some()

Devuelve true si al menos un elemento del array cumple con el predicado


que se pasa como parámetro.

Array.prototype.sort()

Ordena los elementos de un array, modificando éste, y devuelve el array


ordenado.

Array.prototype.splice()

Añade, borra o modifica elementos de un array.

Array.prototype.toLocaleString()

Devuelve un string adaptado a la configuración regional que representa


el array y sus elementos. Redefine el
método Object.prototype.toLocaleString().

Array.prototype.toString()
13

Devuelve un string que representa el array y sus elementos. Redefine el


método Object.prototype.toString().

Array.prototype.unshift()

Añada uno o más elementos al inicio de un array y devuelve el nuevo valor


de length para el array resultante.

Array.prototype.values()

Devuelve un nuevo objeto Array Iterator que contiene los valores para cada
índice del array.

Array.prototype[@@iterator]()

Devuelve un nuevo objeto Array Iterator que contiene los valores para cada
índice del array.

Ejemplos

Creación de una matriz unidimensional

El siguiente ejemplo crea un array mensajes con una longitud de 0, y luego asigna
valores a mensajes[0] y a mensajes[99], con lo que la longitud del array pasa a ser
100.

JSCopy to Clipboard
let mensajes = [];
mensajes[0] = "Hola";
mensajes[99] = "mundo";

if (mensajes.length === 100) {


console.log("La longitud es de 100.");
}
14

Creación de una matriz de dos dimensiones

El siguiente ejemplo crea una matriz bidimensional que representa un tablero de


ajedrez. El primer movimiento se realiza copiando la 'p' de tablero[6]
[4] en tablero[4][4]. La posición [6][4] se limpia.

JSCopy to Clipboard
let tablero = [
["T", "C", "A", "D", "R", "A", "C", "T"],
["P", "P", "P", "P", "P", "P", "P", "P"],
[" ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " "],
["p", "p", "p", "p", "p", "p", "p", "p"],
["t", "c", "a", "d", "r", "a", "c", "t"],
];

console.log(tablero.join("\n") + "\n\n");

// Adelantar dos posiciones el peón de rey


tablero[4][4] = tablero[6][4];
tablero[6][4] = " ";
console.log(tablero.join("\n"));

Este es el resultado:

T,C,A,D,R,A,C,T
P,P,P,P,P,P,P,P
,,,,,,,
,,,,,,,
,,,,,,,
,,,,,,,
15

p,p,p,p,p,p,p,p
t,c,a,d,r,a,c,t

P,P,P,P,P,P,P,P
,,,,,,,
,,,,,,,
, , , ,p, , ,
,,,,,,,
p,p,p,p, ,p,p,p
t,c,a,d,r,a,c,t

Uso de un array para tabular un conjunto de valores

valores = [];
for (let x = 0; x < 10; x++) {
valores.push([2 ** x, 2 * x ** 2]);
}
console.table(valores);

da como resultado:

0 1 0
1 2 2
2 4 8
3 8 18
4 16 32
5 32 50
6 64 72
7 128 98
8 256 128
9 512 162

(La primera columna es el índice).


16

Listas en Javascript

Las listas en javascript son un tema enorme pero que todo programador de
javascript debe conocer a fondo. En esta entrada me enfocare a los aspectos
básicos de las listas (arreglos, matrices).

Para crear una lista vacía se puede hacer de las siguientes dos formas:

//Forma 1: corchetes
var lista=[];

//Forma 2: new Array();


var lista=new Array();

Sea cual sea la forma que utilicen para crear una lista (arreglo) es irrelevante.

Ahora para crear una lista con elementos desde el inicio se puede hacer de la
siguiente manera:

//Forma 1: corchetes
var lista=new Array("ganzo","perro");

//Forma 2: new Array();


var lista=["ganzo","perro"]

Ahora para recorrer una lista, la mejor manera es por medio del método forEach,
el cual itera con cada elemento del arreglo. Este método recibe una función como
parámetro, y se utiliza de la siguiente manera:

//creamos nuestra lista


var lista=["ganzo","perro"];

//recorre elemento por elemento y los muestra con alert()


//el atributo i es el elemento actual en cada iteración.

lista.forEach(function(i){
alert(i)
});
17

Para agregar un elemento al final del arreglo se utiliza el método push(), y para
agregar un elemento al inicio del arreglo se utiliza el método unshift(). En el
siguiente ejemplo muestro como se utilizan:

var lista=["ganzo","perro"];

//agregamos pato al final de la lista


lista.push("pato");

//agregamos pez al inicio de la lista


lista.unshift("pez");

//si mostramos nuestra lista ahora se veria así


//>> pez, ganzo, perro, pato

La función pop() elimina el elemento que esta al final (una pila):

var lista=["ganzo","perro","palomo","gato"];

lista.pop();

//si mostramos nuestra lista ahora se veria así


//>> ganzo, perro, palomo

Y por último los métodos sort() y reverse() nos sirven para ordenar nuestra lista ya
sea ascendente o descendentemente:

var lista=[5,4,1,9];

lista.sort();
//>> 1, 4, 5, 9

lista.reverse();
//>>9, 5, 4, 1

Todas estas funciones son básicas y nos sirven para el buen manejo de los
objetos, y conocerla es obligación de todo programador de javascript.

Existen muchísimas funciones más de listas .


18

MÉTODO MAP

El método map de javascript sirve para llamar una función la cual se ejecutara con
cada uno de los elementos de un arreglo (matriz, lista). Este método recibe
una función como argumento la cual ejecutara n veces (el número de elementos
en nuestro arreglo), y regresara un nuevo arreglo con los resultados.

Su función es la siguiente:

//lista con numeros


var lista=[1,4,9,16,25]

//la función map es inmutable por lo cual debemos asignar lo que regresa a otra lista
//en este caso se lo asignamos a la misma lista
var lista=lista.map(function(elemento){
//sacamos la raíz cuadrada del elemento
return Math.sqrt(elemento);
});

//Ahora recorremos con foreach la lista


//foreach funciona de manera similar solo que no regresa la lista
lista.forEach(function(i){

alert(i)
//muestra 1,2,3,4,5
})

También podemos llamar una función existente la cual reciba un argumento el cual
será nuestro elemento:

//lista con numeros


var lista2=[1,2,3,4,5]

//función que multiplica un numero por 10


function MultiplicaX10(elementoLista){

return elementoLista*10
}

//la función mapa puede enviar parametros a la función que se ejecutara


19

//se hace de la siguiente manera


var lista2=lista2.map(MultiplicaX10,10);

//mostramos el resultado
lista2.forEach(function(i){

alert(i)

//muestra 10,20,30,40,50
})

Nota: La función foreach tiene un funcionamiento parecido, solo que no regresa un


arreglo.
20

Listas enlazadas en
JavaScript (Linked list)

Diego Esteban C 🧢
·
Follow
6 min read
·
Jun 13, 2022

81
21

Artículo básico de estructura de datos. Concepto de lista


enlazada con ejemplos prácticos aplicados al lenguaje
JavaScript.

Recomendaciones
Antes de empezar a estudiar listas enlazadas en
JavaScript, se recomienda contar con algunos
conocimientos previos antes de leer este artículo, por lo
cual, dejo la invitación a revisar los siguientes enlaces de
apoyo opcionales:
Introducción a las estructuras de datos en programación
Artículo básico conceptual sobre las estructuras de datos en la programación.
Estructura de datos comunes, breve…
medium.com

Concepto lista enlazada


Una lista enlazada o LinkedListen inglés, es una estructura
de datos en la que los elementos están conectados entre
sí mediante referencias o punteros. En otras palabras,
cada elemento de la lista tiene información y una
referencia al siguiente elemento. Es importante notar que
los elementos no están almacenados de manera
consecutiva en la memoria, sino que pueden estar
dispersos en diferentes ubicaciones. La conectividad
entre los elementos permite un acceso eficiente a través
de la lista, facilitando la inserción y eliminación de
22

elementos en comparación con algunas otras estructuras


de datos.

Las listas enlazadas están compuestas por los siguientes


elementos:

1. LinkedList: La LinkedList es la estructura


gestora principal que mantiene y organiza los
elementos de la lista. Sirve como punto de
entrada y control para manipular la lista.

2. Node: Un nodo es el bloque básico de


construcción en una lista enlazada. Cada nodo
contiene al menos un dato de interés, que puede
ser de cualquier tipo (números, texto, objetos,
etc.), y un puntero (o referencia) al siguiente nodo
en la secuencia. En el caso de la último nodo de la
lista, su puntero puede ser nulo, indicando el final
de la lista.

3. HEAD: El HEAD es el primer nodo de la lista


enlazada. Este nodo inicializa la secuencia y actúa
como la entrada principal para acceder a los
elementos restantes de la lista. Desde el HEAD, se
23

pueden seguir los punteros para recorrer la lista y


acceder a los demás nodos.

Tipos de listas enlazadas


Hoy en día, hay diversas formas de implementar listas
enlazadas, y la principal diferencia entre ellas se
encuentra en cómo se establecen las referencias entre los
nodos. Algunas implementaciones tienen referencias
circulares, lo que significa que el último nodo apunta al
primero, creando un ciclo continuo. Otras
implementaciones pueden tener referencias solo a los
nodos sucesores o antecesores, sin formar un ciclo. Estas
variaciones en la estructura permiten adaptar las listas
enlazadas a diferentes necesidades y contextos de
programación.

Aquí algunos tipos de listas enlazadas:

 Lista enlazada simple: Lista enlazada en la que


cada nodo contiene un único campo de enlace al
elemento sucesor.

 Lista doblemente enlazadas: Lista enlazada en


la que cada nodo contiene doble vía de enlace, los
24

nodos apuntan tanto al elemento sucesor como el


antecesor.

 Lista enlazada circular: Semejante a la lista


enlazada simple, con la distinción que el último
nodo apunta hacía el primer nodo de la lista.

Implementación de una lista enlazada simple en


JavaScript
Para implementar una lista en JavaScript nos basaremos
en el repositorio https://github.com/trekhleb/javascript-
algorithms que contiene una excelente implementación;
sin embargo, simplificaremos algunos métodos y
estructuras para poder comprender su funcionamiento. A
continuación nos apoyaremos de la programación
orientada a objetos.

Implementando nuestra Clase LinkedList


Esta clase define una lista enlazada y tiene una propiedad
llamada head que representa el nodo inicial. Al inicio, la
cabeza (head) se establecerá con el valor null, indicando
25

que inicialmente no hay ningún nodo asociado a la lista.


La cabeza actúa como el punto de entrada y se actualiza a
medida que se añaden nodos a la lista enlazada.

class LinkedList {
constructor() {
this.head = null;
}
}

Implementando nuestra Clase Node


Esta clase define un nodo en una lista enlazada. Cada
nodo tiene dos propiedades:

 value: Representa el dato de interés que el nodo


almacena.

 next: Es un puntero que apunta al siguiente nodo


en la lista.

En otras palabras, cada nodo guarda un dato y señala al


siguiente nodo en la secuencia. Esto es fundamental para
la estructura y conectividad de la lista enlazada.

class Node {
constructor(value, next) {
this.value = value;
this.next = next;
}
}
26

Ahora, vamos a añadir a la clase LinkedList una serie de


métodos que nos facilitarán manipular los nodos en
nuestra lista. Estos métodos incluyen operaciones como
la inserción de nuevos elementos, la búsqueda de
elementos existentes y la eliminación de nodos. Estas
operaciones son esenciales para gestionar y modificar la
lista según nuestras necesidades.

Método de inserción de nodos

* insertNode

Comenzaremos con la implementación de un método


fundamental para insertar nodos en nuestra lista
enlazada. Este método nos permitirá agregar nuevos
nodos, ampliando así nuestra lista.

insertNode(value) {
const newNode = new Node(value, null);
if (this.head === null) {
this.head = newNode;
return
}

let current = this.head;


while (current.next) {
current = current.next;
}
current.next = newNode;
}

En el fragmento de código anterior:


27

 Se crea un nuevo nodo con el valor indicado por


parámetro.

 El primer nodo es almacenado en la


propiedad head .

 Los nodos posteriores se enlazarán a la


propiedad next del último elemento y así
sucesivamente.

NOTA 🧐: El último elemento de la lista lo podemos


distinguir con la propiedad next, la cual tendrá el
valor null.

Método de visualización de nodos

* display

Proseguiremos implementando un método básico que nos


permitirá imprimir en la consola el valor de cada nodo en
nuestra lista enlazada. Esto nos proporcionará una
manera sencilla de visualizar los datos almacenados en la
lista para propósitos de prueba y depuración.

display() {
let current = this.head;
while (current) {
console.log(current.value);
current = current.next;
}
}
28

En el fragmento de código anterior:

 Recorre todos los nodos de una lista enlazada e


imprime en la consola los valores almacenados en
cada uno de ellos. Este proceso permite visualizar
fácilmente la información contenida en la lista
para propósitos de prueba y depuración.

Método de búsqueda de nodos

* findNode

Seguiremos avanzando incorporando un método simple


para buscar elementos en nuestra lista enlazada según
sus valores. Este método nos proporcionará la capacidad
de encontrar la primera coincidencia con un valor
específico y devolverá ese nodo. Esto es útil para localizar
nodos particulares en la lista.

findNode(value) {
let current = this.head;
while (current) {
if (current.value === value) {
return current;
}
current = current.next;
}
return null;
}

En el fragmento de código anterior:


29

 Utilizamos la misma técnica de recorrido de


elementos con el ciclo while, pero se agrega una
condicional comparando los valores.

 Si el valor es igual al valor a encontrar, se retorna


el elemento.

 Si el valor no es igual, se sigue recorriendo la


lista.

 En caso de no encontrar ningún elemento, se


retorna null.

Método de eliminación de nodos

* deleteNode

Vamos a seguir adelante implementando un método


simple para eliminar elementos en nuestra lista enlazada
según sus valores. Este método nos proporcionará la
capacidad de eliminar la primera coincidencia con un
valor específico en la lista. La eliminación de nodos
basada en el valor es útil para modificar dinámicamente
la lista según nuestras necesidades.

deleteNode(value) {
if (this.head.value === value) {
this.head = this.head.next;
return
}
let current = this.head;
30

while (current.next) {
if (current.next.value === value) {
current.next = current.next.next;
return;
}
current = current.next;
}
}

En el fragmento de código anterior:

 Recorremos los elementos de la lista hasta el


nodo con el valor.

 Si encontramos el nodo, lo que realizaremos es


una omisión del elemento de la lista, es decir, nos
saltaremos ese elemento conectando con el
subsiguiente eliminando por completo la
referencia actual.
31

Listas simples
Una lista simple o lista simplemente encadenada, son
estructuras de datos muy parecidas a los array, donde el
acceso al elemento o nodo , es a través de
un puntero , a diferencia de un array donde este se
accede a través de índices.
En un array los elementos están contiguos en lo que a
memoria se refiere, en cambio en una lista pueden no
estarlos , esto puede verse como una ventaja frente a los
array, por ejemplo si agregamos un nuevo elemento en un
array se verificará que haya un espacio contiguo en
memoria disponible para el nuevo elemento y en caso de
no haberlo se movera el array completo hasta otro lugar
en memoria donde si haya un espacio completo, esto no
sucede con las listas, los elementos pueden estar
dispersos en memoria.
Otra ventaja, es que para ciertas operaciones como
insertar en la mitad es constante en función del tiempo,
por poner un ejemplo.

Una lista está compuesta por nodos, donde cada uno se


conecta con el nodo siguiente (salvo el último), esto
quiere decir que no puede ver para atrás o por quien fue
enlazado.
Siempre se tiene como referencia el puntero o inicio de
32

lista llamado head , este define el principio de la lista, sin


este puntero de referencia no se podría acceder a la lista.
El último nodo enlaza con NULL y esto marca el fin de la
lista.

Lista simplemente encadenada

Veamos una implementación de nodo y la lista:


function Node (value) {
this.value = value
this.next = null
}

function LinkedList() {
this.head = null
}

En el código de arriba ⬆️tenemos 2 funciones


constructoras, por un lado la función Node a la cual le
asignamos un value (que puede ser del tipo number,
string, por nombrar algunos…) y tenemos next , que lo
inicializamos en null, este sería el encargado de apuntar
al próximo nodo en la lista, pero por ahora esa sería
nuestra estructura inicial del tipo nodo.

La función constructora LinkedList , es la que utilizamos


para inicializar la lista simple, es importante notar que al
crear esta lista ya tenemos el puntero de
referencia head para poder ir encadenando los nodos.
33

Hasta este momento solo tenemos….. una lista vacía,


obviamente no nos es muy útil 😅 si no le agregamos
métodos o funciones para poder ‘jugar’ un poco con
este tipo de data abstracto .

Los nodos solo conocen a su predecesor.

🔰 Agregando nodos a la lista

Una vez instanciado linkedList , lo interesante sería poder


agregar nuevos nodos, y acá se nos presentan varios
casos a tener en consideración.

⚡️Lista vacía insertamos el 1er nodo

Primer elemento de la lista.

Debemos asegurarnos, que al agregar el primer nodo a


nuestra lista, head apunte a este nuevo nodo.
Ahora bien al momento de insertar un segundo o n nodo,
podemos hacerlo al final de la lista o al principio de la
lista.

⚡️Agregar nodo al final (append)


34

Agregamos un nodo posterior

Para esta situación tenemos que buscar el nodo


cuyo next sea NULL (eso significa que en el nodo que
estoy parado es el último), y es importante resaltar esto
de que el ‘próximo’ sea NULL… recordar que los nodos
solo conocen su predecesor, por lo tanto si estuviéramos
parados en NULL no podemos hacer que el anterior
apunte al nuevo nodo!, por eso es que nos situamos un
paso atrás y re asigansmosnode.next , ahora si, hacia el
nuevo nodo.

LinkedList.prototype.append = function(value, current = this.head){


if(this.head === null){
return this.head = new Node(value)
}
if(current.next === null){
return current.next = new Node(value)
}
this.append(value, current.next)
}
35

⚡️ Agregar nodo al principio (prepend)

Reemplazamos el Head por 8

En este caso particular, lo importante es, primero crear


el nuevo nodo (en este caso con un value de 8) y luego
apuntarlo a lo que apunta head ( a 4 en este caso ), por
último head reasignarlo al nuevo nodo.
Si lo hiciéramos en caso inverso, osea, primero
pusiéramos la asignación de head al nuevo nodo, perdemos
la referencia del resto de la lista 🤷🏻‍.
LinkedList.prototype.prepend = function(value){
if(this.head === null){
return this.head = new Node(value)
}
let newNode = new Node(value)
newNode.next = this.head
this.head = newNode
}

🔰 Removiendo nodos a la lista

Otra operación que necesitamos es la del borrado de


nodo.
36

El caso más sencillo es querer borrar el primer elemento,


en ese caso head se apunta a head.next .
Ahora para borrar cualquier otro elemento, lo primero es
ubicar el nodo anterior al buscado( eso lo hacemos
preguntando por next ) y apuntar ese nodo al next del que
queremos borrar.
Por ejemplo, queremos borrar el nodo con value 8,
primero buscamos el nodo cuyo next tenga un value de 8
(ese seria el nodo con value 4) y hacemos que ese nodo
apunte a lo que apunta el next del nodo que queremos
borrar 🤢 (que sería el nodo con value 15), en otras
palabras puentearlo…

LinkedList.prototype.removeNode = function (value, current = this.head) {


if(this.head === null){ // no head
return false
}

if (this.head.value === value){


return this.head = this.head.next
}

if(current.next !== null){


if(current.next.value === value){
return current.next = current.next.next
}
this.removeNode(value, current.next)
}
return false // no match found
}
37

🔰 Buscando un nodo

No hay mucho que explicar… si coincide con el elemento,


devuelve true , si llega al final de la lista (NULL) el
elemento no existe y devuelve false .
LinkedList.prototype.findNode = function (value, current = this.head){
if(this.head === null) {
return false
}

if (current !== null) {


if (current.value === value){
return true
} else {
return this.findNode(value, current.next)
}
}
return false
}

🔰 Primer elemento
LinkedList.prototype.peekNode = function (value) {
if(this.head === null) {
return false
}
return this.head
}

Retorna el primer nodo 🤷🏻‍.

🔰 Largo de la lista
LinkedList.prototype.length = function (current = this.head, acum = 1) {
if(this.head === null){
return 0
}
if (current.next !== null){
return this.length(current.next, acum = acum + 1)
}
return acum
}
38

retorna el total de nodos presentes en la lista.

🌀 Implementacion completa

function Node (value) {


this.value = value
this.next = null
}

function LinkedList() {
this.head = null
}

LinkedList.prototype.append = function(value, current = this.head){


if(this.head === null){
return this.head = new Node(value)
}
if(current.next === null){
return current.next = new Node(value)
}
this.append(value, current.next)
}

LinkedList.prototype.prepend = function(value){
if(this.head === null){
return this.head = new Node(value)
}
let newNode = new Node(value)
newNode.next = this.head
this.head = newNode
}

LinkedList.prototype.removeNode = function (value, current = this.head) {


if(this.head === null){ // no head
return false
}

if (this.head.value === value){


return this.head = this.head.next
}

if(current.next !== null){


if(current.next.value === value){
return current.next = current.next.next
}
this.removeNode(value, current.next)
}
return false // no match found
}
39

LinkedList.prototype.findNode = function (value, current = this.head){


if(this.head === null) {
return false
}

if (current !== null) {


if (current.value === value){
return true
} else {
return this.findNode(value, current.next)
}
}
return false
}

LinkedList.prototype.peekNode = function (value) {


if(this.head === null) {
return false
}
return this.head
}

LinkedList.prototype.length = function (current = this.head, acum = 1) {


if(this.head === null){
return 0
}
if (current.next !== null){
return this.length(current.next, acum = acum + 1)
}
return acum
}

También podría gustarte