0% encontró este documento útil (0 votos)
291 vistas

Manual de Javascript

Este documento contiene varias secciones sobre conceptos básicos de JavaScript como el alcance de variables, funciones, valores devueltos, arrays y lógica condicional. Explica cómo las variables locales tienen prioridad sobre las globales, cómo devolver valores desde funciones, agregar y eliminar elementos de arrays, y usar sentencias if para tomar decisiones condicionales.
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
291 vistas

Manual de Javascript

Este documento contiene varias secciones sobre conceptos básicos de JavaScript como el alcance de variables, funciones, valores devueltos, arrays y lógica condicional. Explica cómo las variables locales tienen prioridad sobre las globales, cómo devolver valores desde funciones, agregar y eliminar elementos de arrays, y usar sentencias if para tomar decisiones condicionales.
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 33

MANUAL DE JAVASCRIPT – FREECODECAMP.

ORG

JavaScript básico: alcance global vs. local en funciones


Es posible tener variables locales y globales con el mismo nombre. Cuando haces
esto, la localvariable tiene prioridad sobre la global variable.

En este ejemplo:

var someVar = "Sombrero";


function myFun () {
var someVar = "Head";
devuelve someVar;
}

La función myFunvolverá "Head"porque la localversión de la variable está presente.

JavaScript básico: devolver un valor desde una función


con retorno
Podemos pasar valores a una función con argumentos . Puede usar una return
declaración para enviar un valor de vuelta de una función.

Ejemplo

función plusThree (num) {


return num + 3;
}
var respuesta = másTres (5); // 8

plusThreetoma un argumento para numy devuelve un valor igual a num + 3.


JavaScript básico: devolver un valor desde una función
con retorno
Podemos pasar valores a una función con argumentos . Puede usar
una returndeclaración para enviar un valor de vuelta de una función.

Ejemplo

función plusThree (num) {


return num + 3;
}
var respuesta = másTres (5); // 8

plusThreetoma un argumento para numy devuelve un valor igual a num + 3.

Cree una función timesFiveque acepte un argumento, lo multiplique por 5y devuelva


el nuevo valor. Vea la última línea en el editor para ver un ejemplo de cómo puede
probar su timesFivefunción.

JavaScript básico: comprender el valor indefinido


devuelto por una función
Una función puede incluir la returninstrucción pero no tiene que hacerlo. En el caso
de que la función no tenga una returndeclaración, cuando la llame, la función procesa
el código interno pero el valor devuelto es undefined.

Ejemplo

var suma = 0;
función addSum (num) {
suma = suma + num;
}
var returnValue = addSum (3); // la suma se modificará pero el
valor devuelto no está definido

addSumEs una función sin una returndeclaración. La función cambiará


la sumvariable global , pero el valor devuelto de la función esundefined
JavaScript básico: Asignación con un valor devuelto
Si recuerda de nuestra discusión sobre el almacenamiento de valores con el operador
de asignación , todo a la derecha del signo igual se resuelve antes de que se asigne el
valor. Esto significa que podemos tomar el valor de retorno de una función y
asignarlo a una variable.

Supongamos que hemos predefinido una función sumque suma dos números,
entonces:

ourSum = sum(5, 12);

Llamará a la sum función, que devuelve un valor de 17 y la asigna a la ourSum variable.

JavaScript básico: manipular matrices con push ()


Una forma fácil de agregar datos al final de una matriz es a través de
la push()función.

.push()toma uno o más parámetros y los "empuja" al final de la matriz.

var arr = [1,2,3];


arr.push (4);
// arr es ahora [1,2,3,4]

JavaScript básico: manipular matrices con pop ()


Otra forma de cambiar los datos en una matriz es con la .pop()función.

.pop()se utiliza para "extraer" un valor del final de una matriz.


Podemos almacenar
este valor "extraído" asignándolo a una variable. En otras palabras, .pop()elimina el
último elemento de una matriz y devuelve ese elemento.

Cualquier tipo de entrada se puede "extraer" de una matriz: números, cadenas,


incluso matrices anidadas.

var threeArr = [1, 4, 6];


var oneDown = threeArr.pop();
console.log(oneDown); // Returns 6
console.log(threeArr); // Returns [1, 4]
JavaScript básico: manipular matrices con shift ()
pop()Siempre elimina el último elemento de una matriz. ¿Qué pasa si quieres
eliminar el primero?

Ahí es donde .shift()entra. Funciona igual que .pop(), excepto que elimina el primer
elemento en lugar del último.

JavaScript básico: manipular matrices con unshift ()


No solo puede agregar elementos shiftdesde el principio de una matriz, sino
que también puede unshiftagregar elementos al principio de una matriz, es decir,
agregar elementos delante de la matriz.

.unshift()funciona exactamente igual que .push(), pero en lugar de agregar el


elemento al final de la matriz, unshift()agrega el elemento al principio de la matriz.

JavaScript básico: Stand en línea


En Ciencias de la Computación una cola es una estructura de datos abstracta donde
los elementos se mantienen en orden. Los nuevos elementos se pueden agregar en la
parte posterior de los queueelementos antiguos y se quitan de la parte frontal de
la queue.

Escriba una función nextInLineque tome una matriz ( arr) y un número ( item) como
argumentos.

Agregue el número al final de la matriz, luego elimine el primer elemento de la


matriz.

La nextInLinefunción debe devolver el elemento que fue eliminado.

nextInLine([], 5)Debe devolver un número.


nextInLine([], 1)debería regresar 1
nextInLine([2], 1)debería regresar 2
nextInLine([5,6,7,8,9], 1)debería regresar 5
Después nextInLine(testArr, 10), testArr[4]debería ser10
JavaScript básico: Stand en línea
En Ciencias de la Computación una cola es una estructura de datos abstracta donde
los elementos se mantienen en orden. Los nuevos elementos se pueden agregar en la
parte posterior de los queue elementos antiguos y se quitan de la parte frontal de
la queue.

Escriba una función nextInLine que tome una matriz (arr) y un número (item) como
argumentos.

Agregue el número al final de la matriz, luego elimine el primer elemento de la


matriz.

La nextInLine función debe devolver el elemento que fue eliminado.

nextInLine([], 5)Debe devolver un número.


nextInLine([], 1)debería regresar 1
nextInLine([2], 1)debería regresar 2
nextInLine([5,6,7,8,9], 1)debería regresar 5
Después nextInLine(testArr, 10), testArr[4]debería ser10

Tema de funciones viene desde: Write Reusable JavaScript with Functions:

En JavaScript, podemos dividir nuestro código en partes reutilizables


llamadas funciones .

Aquí hay un ejemplo de una función:

function functionName () {
console.log ("Hello World");
}

Puede llamar o invocar esta función usando su nombre seguido de paréntesis, como
este:

functionName();
Cada vez que se llama a la función, se imprimirá el mensaje "Hello World" en la
consola dev. Todo el código entre las llaves se ejecutará cada vez que se llame a la
función.

JavaScript básico: pasar valores a funciones con


argumentos
Los parámetros son variables que actúan como marcadores de posición para los
valores que deben ingresarse en una función cuando se llama. Cuando se define una
función, generalmente se define junto con uno o más parámetros. Los valores reales
que se ingresan (o "pasan" ) en una función cuando se llama se conocen
como argumentos .

Aquí hay una función con dos parámetros, param1y param2:

función testFun (param1, param2) {


console.log (param1, param2);
}

Entonces podemos llamar testFun:

testFun("Hello", "World");

Hemos pasado dos argumentos, "Hello"y "World". Dentro de la función, param1será


igual a "Hola" y param2será igual a "Mundo". Tenga en cuenta que
podría testFunvolver a llamar con diferentes argumentos y los parámetros tomarían
el valor de los nuevos argumentos.

JavaScript básico: devolver un valor desde una función


con retorno
Podemos pasar valores a una función con argumentos . Puede usar
una returndeclaración para enviar un valor de vuelta de una función.

Ejemplo

función plusThree (num) {


return num + 3;
}
var respuesta = másTres (5); // 8

plusThreetoma un argumento para numy devuelve un valor igual a num + 3.


JavaScript básico: comprender el valor indefinido
devuelto por una función
Una función puede incluir la returninstrucción pero no tiene que hacerlo. En el caso
de que la función no tenga una returndeclaración, cuando la llame, la función procesa
el código interno pero el valor devuelto es undefined.

Ejemplo

var suma = 0;
función addSum (num) {
suma = suma + num;
}
var returnValue = addSum (3); // la suma se modificará pero el valor
devuelto no está definido

addSumEs una función sin una returndeclaración. La función cambiará


la sumvariable global , pero el valor devuelto de la función esundefined

JavaScript básico: entendiendo los valores booleanos


Otro tipo de datos es el booleano . Booleanspuede ser solo uno de dos
valores: trueo false. Son básicamente pequeños interruptores de encendido y
apagado, donde trueestá "encendido" y falseestá "apagado". Estos dos estados son
mutuamente excluyentes.

Los
Booleanvalores de las notas nunca se escriben entre
comillas. Los strings"true"y "false"no son y no Booleantienen un significado especial
en JavaScript.
JavaScript básico: usa lógica condicional con sentencias
if
IfLas declaraciones se utilizan para tomar decisiones en código. La palabra clave ifle
dice a JavaScript que ejecute el código entre llaves en ciertas condiciones, definidas
entre paréntesis. Estas condiciones se conocen como Booleancondiciones y solo
pueden ser trueo false.

Cuando la condición se evalúa como true, el programa ejecuta la instrucción dentro


de las llaves. Cuando la condición booleana se evalúa como false, la instrucción
dentro de las llaves no se ejecutará.

Pseudocódigo

si (la condición es verdadera ) {la


sentencia se ejecuta
}

Ejemplo

prueba de función (myCondition) {


if (myCondition) {
return "It was true";
}
devolver "Fue falso"; prueba
}
(verdadero); // devuelve la
prueba "Fue cierto" (falso); // devuelve "fue falso"

Cuando testse llama con un valor de true, la ifdeclaración se evalúa myConditionpara


ver si es trueo no. Como es true, la función vuelve "It was true". Cuando
llamamos testcon un valor de false, no lomyConditiones y la instrucción entre llaves
no se ejecuta y la función regresa . true"It was false"
JavaScript básico: comparación con el operador de
igualdad
Hay muchos operadores de comparación en JavaScript. Todos estos operadores
devuelven un valor booleano trueo falsevalor.

El operador más básico es el operador de igualdad ==. El operador de igualdad


compara dos valores y devuelve truesi son equivalentes o falsesi no lo son. Tenga en
cuenta que la igualdad es diferente de la asignación ( =), que asigna el valor a la
derecha del operador a una variable de la izquierda.

function equalityTest (myVal) {


if (myVal == 10) {
return "Equal";
}
devolver "No es igual";
}

Si myVales igual a 10, el operador de igualdad regresa true, por lo que el código entre
las llaves se ejecutará y la función volverá "Equal". De lo contrario, la función
volverá "Not Equal".

Para que JavaScript pueda comparar dos diferentes data types(por


ejemplo, numbersy strings), debe convertir un tipo a otro. Esto se conoce como "Tipo
de coerción". Una vez que lo hace, sin embargo, puede comparar los términos de la
siguiente manera:

1 == 1 // verdadero
1 == 2 // falso
1 == '1' // verdadero
"3" == 3 // verdadero
JavaScript básico: comparación con el operador de
igualdad estricta
La igualdad estricta ( ===) es la contraparte del operador de igualdad ( ==). Sin
embargo, a diferencia del operador de igualdad, que intenta convertir ambos valores
en comparación con un tipo común, el operador de igualdad estricta no realiza una
conversión de tipo.

Si los valores que se comparan tienen diferentes tipos, se consideran desiguales y el


operador de igualdad estricta devolverá el valor falso.

Ejemplos

3 === 3 // verdadero
3 === '3' // falso

En el segundo ejemplo, 3 es un Number tipo y '3'es un String tipo.

JavaScript básico: practica comparando diferentes


valores
En los últimos dos desafíos, aprendimos sobre el operador de igualdad ( ==) y el
operador de igualdad estricta ( ===). Hagamos una revisión rápida y practiquemos el
uso de estos operadores un poco más.

Si los valores que se comparan no son del mismo tipo, el operador de igualdad
realizará una conversión de tipo y luego evaluará los valores. Sin embargo, el
operador de igualdad estricta comparará tanto el tipo de datos como el valor tal como
está, sin convertir un tipo en otro.

Ejemplos

3 == '3' // devuelve true porque JavaScript realiza la conversión de


tipo de la cadena al número
3 === '3' // devuelve false porque los tipos son diferentes y la
conversión de tipo no se realiza

Nota
En JavaScript, puede determinar el tipo de una variable o un valor con
el typeofoperador, de la siguiente manera:
typeof 3 // devuelve 'número'
typeof '3' // devuelve 'cadena'

JavaScript básico: comparación con el operador de


desigualdad
El operador de desigualdad ( !=) es lo opuesto al operador de igualdad. Significa "No
es igual" y retorna falsedonde la igualdad regresaría truey viceversa . Al igual que el
operador de igualdad, el operador de desigualdad convertirá los tipos de datos de los
valores al comparar.

Ejemplos

1! = 2 // verdadero
1! = "1" // falso
1! = '1' // falso
1! = Verdadero // falso
0! = Falso // falso

JavaScript básico: comparación con el operador de


desigualdad estricta
El operador de desigualdad estricta (!==) es el opuesto lógico del operador de igualdad
estricta. Significa "Estrictamente no es igual" y retornos false donde la igualdad
estricta volvería true y viceversa . La desigualdad estricta no convertirá los tipos de
datos.

Ejemplos

3! == 3 // falso
3! == '3' // verdadero
4! == 3 // verdadero

STATEMENT : DECLARACIÓN.
JavaScript básico: comparación con el operador mayor
que
El operador mayor que ( >) compara los valores de dos números. Si el número a la
izquierda es mayor que el número a la derecha, devuelve true. De lo contrario,
vuelve false.

Al igual que el operador de igualdad, el operador mayor que el convertirá los tipos de
datos de valores al comparar.

Ejemplos

5> 3 // verdadero
7> '3' // verdadero
2> 3 // falso
'1'> 9 // falso

JavaScript básico: comparación con el operador mayor o


igual que el operador
El greater than or equal tooperador ( >=) compara los valores de dos números. Si el
número a la izquierda es mayor o igual que el número a la derecha, devuelve true. De
lo contrario, vuelve false.

Al igual que el operador de igualdad, el greater than or equal tooperador convertirá


los tipos de datos al comparar.

Ejemplos

6> = 6 // verdadero
7> = '3' // verdadero
2> = 3 // falso
'7'> = 9 // falso
JavaScript básico: comparación con el operador menor
que
El operador menor que ( <) compara los valores de dos números. Si el número a la
izquierda es menor que el número a la derecha, devuelve true. De lo contrario,
vuelve false. Al igual que el operador de igualdad, menos que el operador convierte
los tipos de datos al comparar.

Ejemplos

2 <5 // verdadero
'3' <7 // verdadero
5 <5 // falso
3 <2 // falso
'8' <4 // falso

JavaScript básico: comparación con el operador menor o


igual que el operador
El less than or equal tooperador ( <=) compara los valores de dos números. Si el
número a la izquierda es menor o igual que el número a la derecha, regresa true. Si el
número a la izquierda es mayor que el número a la derecha, devuelve false. Al igual
que el operador de igualdad, less than or equal toconvierte tipos de datos.

Ejemplos

4 <= 5 // verdadero
'7' <= 7 // verdadero
5 <= 5 // verdadero
3 <= 2 // falso
'8' <= 4 // falso
JavaScript básico: comparaciones con el operador lógico
“y”
A veces necesitará probar más de una cosa a la vez. La lógica y el operador ( &&)
devuelven true si y solo si los operandos a su izquierda y derecha son verdaderos.

El mismo efecto podría lograrse anidando una instrucción if dentro de otra si:

if (num> 5) {
if (num <10) {
return "Yes";
}
}
devolver "No";

solo devolverá "Sí" si numes mayor que 5y menor que 10. La misma lógica se puede
escribir como:

if (num> 5 && num <10) {


return "Sí";
}
devuelve "No";

JavaScript básico: comparaciones con el operador lógico


“Ó”
La lógica o el operador ( ||) devuelve truesi alguno de los operandos es true. De lo
contrario, vuelve false.

El operador lógico o está compuesto por dos símbolos de tubería ( |). Normalmente,
esto se puede encontrar entre las teclas Retroceso e Intro.

El patrón a continuación debe parecer familiar de los puntos de paso anteriores:

if (num> 10) {
return "No";
}
if (num <5) {
return "No";
}
devolver "Sí";

devolverá "Sí" solo si numestá entre 5y 10(5 y 10 incluidos). La misma lógica se puede
escribir como:

if (num> 10 || num <5) {


return "No";
}
devolver "Sí";

JavaScript básico: Introducción a otras declaraciones


Cuando una condición para una if declaración es verdadera, el bloque de código
siguiente se ejecuta. ¿Qué pasa cuando esa condición es falsa? Normalmente no
pasaría nada. Con una else declaración, se puede ejecutar un bloque de código
alternativo.

if (num> 10) {
return "Más grande que 10";
} else {
return "10 or Less";
}

JavaScript Básico: Introduciendo Else If Sentencias


Si tiene múltiples condiciones que deben abordarse, puede
encadenar ifdeclaraciones junto con else ifdeclaraciones.

if (num> 15) {
return "Más grande que 15";
} else if (num <5) {
return "Más pequeño que 5";
} else {
return "Entre 5 y 15";
JavaScript Básico: Encadenar Si En Else Declaraciones
if/elseLas declaraciones se pueden encadenar juntas para una lógica
compleja. Aquí está el pseudocódigo de múltiples enunciados if / else if
enunciados:

if (condición1) {
declaración1
} else if ( condición2 ) {
declaración2
} else if ( condición3 ) {
declaración3
. . .
} else {
statementN
}

JavaScript básico: Código de golf


En el juego de golf, cada hoyo tiene un parsignificado strokesque se espera que el
número promedio de un golfista haga para hundir la bola en un hoyo para completar
el juego. Dependiendo de lo lejos que esté por encima o por debajo
de parusted strokes, hay un apodo diferente.

Tu función será pasada pary strokesargumentos. Devuelva la cadena correcta de


acuerdo con esta tabla que enumera los trazos en orden de prioridad; arriba (más
alto) a abajo (más bajo):

Trazos Regreso

1 "¡Hoyo en uno!"

<= par - 2 "Águila"

par - 1 "Pajarito"

par "Par"
Trazos Regreso

par + 1 "Espectro"

par + 2 "Doble Bogey"

> = par + 3 "¡Vete a casa!"

pary strokessiempre será numérico y positivo. Hemos agregado una serie de todos los
nombres para su conveniencia.

JavaScript básico: selección de muchas opciones con


instrucciones de cambio
Si tiene muchas opciones para elegir, use
una switchdeclaración. Una switchdeclaración prueba un valor y puede tener
muchas casedeclaraciones que definen varios valores posibles. Las declaraciones se
ejecutan desde el primer casevalor coincidente hasta que breakse encuentra una.

Aquí hay un ejemplo de pseudocódigo :

switch (num) {valor de


caso1:
declaración1;
descanso;
valor de caso2:
declaración2;
descanso;
... valor de
casoN:
declaraciónN;
descanso;
}

caseLos valores son probados con igualdad estricta ( ===). El breakle dice a JavaScript
que deje de ejecutar sentencias. Si breakse omite, se ejecutará la siguiente
instrucción.
Escriba una instrucción de conmutación que pruebe valy establezca answerlas
siguientes condiciones:
1- "alpha"
2- "beta"
3- "gamma"
4- "delta"

JavaScript básico: Agregar una opción predeterminada


en los estados de cambio
En una switch declaración, es posible que no pueda especificar todos los valores
posibles como case declaraciones. En su lugar, puede agregar el default instrucción
que se ejecutará si no encuentran declaraciones coincidentes. Piense en ello como
la else declaración final en una if/else cadena.

Un default declaración debe ser el último caso.

switch (num) {valor de


caso1:
declaración1;
descanso;
valor de caso2:
declaración2;
descanso;
...
predeterminado:
defaultStatement;
descanso;
}

JavaScript básico: múltiples opciones idénticas en las


instrucciones de cambio
Si breakse omite la declaración de una switchdeclaración case, casese ejecutan las
siguientes instrucciones hasta que breakse encuentra una. Si tiene varias entradas
con la misma salida, puede representarlas en una switchdeclaración como esta:

interruptor (val) {
caso 1:
caso 2:
caso 3:
resultado = "1, 2 o 3";
descanso;
caso 4:
resultado = "4 solo";
}

Los casos para 1, 2 y 3 producirán el mismo resultado.

JavaScript básico: Reemplazo de cadenas de otro tipo


con interruptor
Si usted tiene muchas opciones para elegir, una switchdeclaración puede ser más
fácil de escribir que muchos encadenados if/ else ifdeclaraciones. El seguimiento:

if (val === 1) {
answer = "a";
} else if (val === 2) {
answer = "b";
} else {
answer = "c";
}

puede ser reemplazado con:

switch (val) {
caso 1:
respuesta = "a";
descanso;
caso 2:
respuesta = "b";
descanso;
por defecto:
answer = "c";
}

JavaScript básico: Devolviendo valores booleanos desde


funciones
De la comparación con el operador de igualdad puede recordar que todos los
operadores de comparación devuelven un valor booleano trueo falsevalor.

A veces las personas usan una declaración if / else para hacer una comparación,
como esta:

function isEqual (a, b) {


if (a === b) {
return true;
} else {
devolver falso;
}
}

Pero hay una mejor manera de hacer esto. Desde ===devoluciones trueo false,
podemos devolver el resultado de la comparación:

function isEqual (a, b) {


return a === b;
}

JavaScript básico: regresa el patrón inicial para funciones


Cuando return se llega a una declaración, la ejecución de la función actual se detiene
y el control vuelve a la ubicación de la llamada.

Ejemplo

function myFun () {
console.log ("Hello");
volver "Mundo";
console.log ("byebye")
}
myFun ();

Lo anterior genera "Hola" en la consola, devuelve "Mundo", pero "byebye"nunca se


imprime, porque la función sale de la returninstrucción.

JavaScript básico: Tarjetas de conteo

Falta por RESOLVER


En el juego de casino Blackjack, un jugador puede obtener una ventaja sobre la casa
al hacer un seguimiento del número relativo de cartas altas y bajas que quedan en el
mazo. Esto se llama conteo de cartas .

Tener más cartas altas en el mazo favorece al jugador. A cada tarjeta se le asigna un
valor de acuerdo con la siguiente tabla. Cuando el conteo es positivo, el jugador debe
apostar alto. Cuando el conteo es cero o negativo, el jugador debe apostar bajo.
Cambio de cuenta Tarjetas

+1 2, 3, 4, 5, 6

0 7, 8, 9

-1 10, 'J', 'Q', 'K', 'A'

Escribirás una función de conteo de cartas. Recibirá un cardparámetro, que puede ser
un número o una cadena, e incrementará o disminuirá la countvariable global según
el valor de la tarjeta (consulte la tabla). La función devolverá una cadena con el
recuento actual y la cadena Betsi el recuento es positivo, o Holdsi el recuento es cero o
negativo. El conteo actual y la decisión del jugador ( Beto Hold) deben estar separados
por un solo espacio.

Ejemplo de salida
-3 Hold
5 Bet

Sugerencia
NO reinicie counta 0 cuando el valor sea 7, 8 o 9.
NO devuelva una matriz.
NO incluya comillas (simples o dobles) en la salida.

switch(card){
case 2:
case 3:
case 4:
case 5:
case 6:
count += 1;
break;
case 7:
case 8:
case 9:
count = 0;
break;
case 10:
case 'J':
case 'Q':
case 'K':
case 'A':
count -=1;
break;
}
if (count == 5){
return '5 Bet';
}else if(count == 0){
return '0 Hold';
}else if(count == -5){
return '-5 Hold';
}else if(count == -1){
return '-1 Hold';
}else if(count == 1){
return '1 Bet';
}else if(count===1){
return '1 Bet';
}

JavaScript básico: Construye objetos JavaScript


Es posible que haya escuchado el término object antes.

Los objetos son similares a arrays, excepto que en lugar de usar índices para acceder
y modificar sus datos, puede acceder a los datos en objetos a través de lo que se
llama properties.

Los objetos son útiles para almacenar datos de forma estructurada y pueden
representar objetos del mundo real, como un gato.

Aquí hay un objeto cat de muestra:

var cat = {
"nombre": "Bigotes",
"piernas": 4,
"colas": 1,
"enemigos": ["Agua", "Perros"]
};

En este ejemplo, todas las propiedades se almacenan como cadenas, tales como
- "name", "legs", y "tails". Sin embargo, también puede utilizar los números como
propiedades. Incluso puede omitir las comillas para las propiedades de cadena de
una sola palabra, de la siguiente manera:

var anotherObject = {
make: "Ford",
5: "five",
"model": "focus"
};

Sin embargo, si su objeto tiene propiedades que no son de cadena, JavaScript las
encasilla automáticamente como cadenas.
JavaScript básico: acceso a propiedades de objetos con
notación de puntos
Hay dos formas de acceder a las propiedades de un objeto: notación de puntos ( .) y
notación de corchetes ( []), similar a una matriz.

La notación de puntos es lo que usa cuando sabe el nombre de la propiedad a la que


intenta acceder con anticipación.

Aquí hay una muestra del uso de la notación de puntos ( .) para leer la propiedad de
un objeto:

var myObj = {
prop1: "val1",
prop2: "val2"
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj.prop2; // val2

JavaScript básico: acceso a propiedades de objetos con


notación de corchete
La segunda forma de acceder a las propiedades de un objeto es la notación de corchetes
( []). Si la propiedad del objeto al que intenta acceder tiene un espacio en su nombre,
deberá utilizar la notación de corchetes.

Sin embargo, aún puede usar la notación de corchete en las propiedades del objeto
sin espacios.

Aquí hay una muestra del uso de la notación de corchetes para leer la propiedad de
un objeto:

var myObj = {
"Nombre del espacio": "Kirk",
"Más espacio": "Spock",
"NoSpace": "USS Enterprise"
};
myObj ["Nombre del espacio"]; // Kirk
myObj ['Más espacio']; // Spock
myObj ["NoSpace"]; // USS Enterprise
Tenga en cuenta que los nombres de propiedades con espacios en ellos deben estar
entre comillas (simple o doble).

JavaScript básico: acceso a propiedades de objetos con


variables
Otro uso de la notación de corchetes en los objetos es acceder a una propiedad que se
almacena como el valor de una variable. Esto puede ser muy útil para iterar a través
de las propiedades de un objeto o al acceder a una tabla de búsqueda.

Aquí hay un ejemplo del uso de una variable para acceder a una propiedad:

var dogs = {
Fido: "Mutt", Hunter: "Doberman", Snoopie: "Beagle"
};
var myDog = "Cazador";
var myBreed = perros [myDog];
console.log (myBreed); // "Doberman"

Otra forma en que puede usar este concepto es cuando el nombre de la propiedad se
recopila dinámicamente durante la ejecución del programa, de la siguiente manera:

var someObj = {
propName: "John"
};
function propPrefix (str) {
var s = "prop";
devuelve s + str;
}
var someProp = propPrefix ("Nombre"); // someProp ahora tiene el
valor 'propName'
console.log (someObj [someProp]); // "Juan"

Tenga en cuenta que no usamos comillas alrededor del nombre de la variable cuando
la usamos para acceder a la propiedad porque estamos usando el valor de la variable,
no el nombre .
JavaScript básico: actualizando las propiedades del
objeto
Una vez que haya creado un objeto JavaScript, puede actualizar sus propiedades en
cualquier momento, como si fuera a actualizar cualquier otra variable. Puede utilizar
la notación de puntos o corchetes para actualizar.

Por ejemplo, veamos ourDog:

var ourDog = {
"nombre": "Camper",
"piernas": 4,
"colas": 1,
"amigos": ["¡todo!"]
};

Como es un perro particularmente feliz, cambiemos su nombre por "Happy


Camper". Así es como actualizamos la propiedad del nombre de su objeto:

ourDog.name = "Happy Camper";o

ourDog["name"] = "Happy Camper";

Ahora, cuando evaluamos ourDog.name, en lugar de obtener "Camper", obtendremos


su nuevo nombre, "Happy Camper".

JavaScript básico: Agregar nuevas propiedades a un


objeto JavaScript
Puede agregar nuevas propiedades a los objetos JavaScript existentes de la misma
manera que los modificaría.

Así es como agregaríamos una "bark" propiedad a ourDog:

ourDog.bark = "bow-wow";

ourDog["bark"] = "bow-wow";

Ahora, cuando evaluamos ourDog.bark, obtendremos su ladrido, "bow-wow".


JavaScript básico: eliminar propiedades de un objeto
JavaScript
También podemos eliminar propiedades de objetos como este:

delete ourDog.bark;

JavaScript básico: Uso de objetos para búsquedas


Los objetos pueden considerarse como un almacenamiento de clave / valor, como un
diccionario. Si tiene datos tabulares, puede usar un objeto para "buscar" valores en
lugar de una switch declaración o una if/else cadena. Esto es más útil cuando sabe
que sus datos de entrada están limitados a un cierto rango.

Aquí hay un ejemplo de una búsqueda de alfabeto inversa simple:

var alfa = {
1: "Z",
2: "Y",
3: "X",
4: "W",
...
24: "C",
25: "B",
26: "A"
};
alfa [2]; // "Y"
alfa [24]; // "C"

var value = 2;
alfa [valor]; // "Y"

JavaScript básico: Prueba de objetos para propiedades


A veces es útil verificar si la propiedad de un objeto dado existe o no. Podemos usar
el .hasOwnProperty(propname)método de los objetos para determinar si ese objeto tiene
el nombre de propiedad dado. .hasOwnProperty()Devoluciones trueo falsesi la
propiedad se encuentra o no.

Ejemplo
var myObj = {
top: "hat",
abajo: "pants"
};
myObj.hasOwnProperty ("top"); // true
myObj.hasOwnProperty ("middle"); // falso

JavaScript básico: manipulando objetos complejos


A veces es posible que desee almacenar datos en una estructura de datos flexible . Un
objeto JavaScript es una forma de manejar datos flexibles. Permiten combinaciones
arbitrarias de cadenas , números , booleanos , matrices , funciones y objetos.

Aquí hay un ejemplo de una estructura de datos compleja:

var ourMusic = [
{
"artist": "Daft Punk",
"title": "Homework",
"release_year": 1997,
" format ": [
"CD",
"Cassette",
"LP"
],
"gold": verdadero
}
];

Esta es una matriz que contiene un objeto dentro. El objeto tiene varias piezas
de metadatos sobre un álbum. También tiene una "formats"matriz anidada . Si desea
agregar más registros de álbum, puede hacerlo agregando registros a la matriz de
nivel superior.

Los objetos mantienen datos en una propiedad, que tiene un formato de clave-
valor. En el ejemplo anterior, "artist": "Daft Punk" es una propiedad que tiene una
clave "artist"y un valor de "Daft Punk".

La notación de objetos de JavaScript o JSONes un formato de intercambio de datos


relacionado que se utiliza para almacenar datos.

{
"artist": "Daft Punk",
"title": "Homework",
"release_year": 1997 , "format
": [
"CD",
"Cassette",
"LP"
],
"gold": true
}

Nota
Deberá colocar una coma después de cada objeto de la matriz, a menos que sea el
último objeto de la matriz.

JavaScript básico: acceso a objetos anidados


Se puede acceder a las sub-propiedades de los objetos encadenando la notación de
punto o corchete.

Aquí hay un objeto anidado:

var ourStorage = {
"desk": {
"cajón": "grapadora"
},
"cabinet": {
"cajón superior": {
"folder1": "un archivo",
"folder2": "secrets"
},
"cajón inferior ":" soda "
}
};
ourStorage.cabinet ["cajón superior"]. folder2; // "secretos"
ourStorage.desk.drawer; // "engrapadora"

JavaScript básico: accediendo a matrices anidadas


Como hemos visto en ejemplos anteriores, los objetos pueden contener tanto objetos
anidados como matrices anidadas. Al igual que para acceder a objetos anidados, la
notación de paréntesis de arrays se puede encadenar para acceder a arrays anidados.

Aquí hay un ejemplo de cómo acceder a una matriz anidada:

var ourPets = [
{
animalType: "cat",
nombres: [
"Meowzer",
"Fluffy",
"Kit-Cat"
]
},
{
animalType: "dog",
nombres: [
"Spot",
"Bowser",
"Frankie "
]
}
];
ourPets [0] .names [1]; // "Fluffy"
ourPets [1] .names [0]; // "Lugar"

JavaScript básico: colección de discos


Te dan un objeto JSON que representa una parte de tu colección de álbumes
musicales. Cada álbum tiene varias propiedades y un número de identificación único
como clave. No todos los álbumes tienen información completa.

Escriba una función que tome un álbum id (como 2548), una


propiedad prop(como "artist"o "tracks") y un value (como "Addicted to Love") para
modificar los datos en esta colección.

Si propno está "tracks"y no valueestá vacío ( ""), actualice o configure


la valuepropiedad del álbum de grabación.

Su función debe devolver siempre el objeto de colección completo.

Existen varias reglas para el manejo de datos incompletos:

Si prop es "tracks" pero el álbum no tiene una "tracks" propiedad, cree una matriz
vacía antes de agregar el nuevo valor a la propiedad correspondiente del álbum.

Si prop está "tracks" y value no está vacío ( ""), presione value sobre el final de
la tracks matriz existente del álbum .

Si value está vacío ( ""), elimine la prop propiedad dada del álbum.

Sugerencias
Utilice bracket notational acceder a las propiedades del objeto con variables .

Push es un método de matriz que puede leer sobre Mozilla Developer Network .

Puede volver a consultar Manipular objetos complejos presentando la notación de


objetos de JavaScript (JSON) para obtener una actualización.
JavaScript básico: Iterar números impares con un bucle
for
Para que los bucles no tengan que iterar uno a la vez. Al cambiar nuestro final-
expression, podemos contar por números pares.

Vamos a empezar i = 0y hacer un bucle mientras i < 10. Incrementaremos ien 2


cada bucle con i += 2.

var ourArray = [];


para (var i = 0; i <10; i + = 2) {
ourArray.push (i);
}

ourArrayahora contendrá [0,2,4,6,8].

Cambiemos nuestro initializationpara que podamos contar por números impares.

JavaScript básico: contar hacia atrás con un bucle for


Un bucle for también puede contar hacia atrás, siempre que podamos definir las
condiciones correctas.

Con el fin de contar hacia atrás de dos en dos, tendremos que cambiar
nuestra initialization, conditiony final-expression.

Vamos a empezar i = 10 y hacer un bucle mientras i > 0. Vamos a disminuir i en 2


cada bucle con i -= 2.

var ourArray = [];


para (var i = 10; i> 0; i- = 2) {
ourArray.push (i);
}

ourArrayahora contendrá [10,8,6,4,2].

Cambiemos nuestro initializationy final-expressionasí podemos contar hacia atrás


de dos en dos por números impares.
JavaScript básico: iterar a través de una matriz con un
bucle For
Una tarea común en JavaScript es iterar a través del contenido de una matriz. Una
forma de hacerlo es con un forbucle. Este código dará salida a cada elemento de la
matriz arra la consola:

var arr = [10,9,8,7,6];


para (var i = 0; i <arr.length; i ++) {
console.log (arr [i]);
}

Recuerde que las matrices tienen numeración basada en cero, lo que significa que el
último índice de la matriz es la longitud - 1. Nuestra condición para este bucle es i <
arr.length, que se detiene cuando iestá en la longitud - 1.

Declarar e inicializar una variable totala 0. Use un forbucle para agregar el valor de
cada elemento de la myArrmatriz a total.

JavaScript básico: Nesting For Loops


Si tiene una matriz multidimensional, puede usar la misma lógica que el punto de
ruta anterior para recorrer tanto la matriz como cualquier subarreglo. Aquí hay un
ejemplo:

var arr = [
[1,2], [3,4], [5,6]
];
para (var i = 0; i <arr.length; i ++) {
para (var j = 0; j <arr [i] .length; j ++) {
console.log (arr [i] [j]);
}
}

Esto genera cada subelemento en arruno a la vez. Tenga en cuenta que para el bucle
interno, estamos comprobando el .lengthde arr[i], ya que arr[i]es una matriz.

Modifique la función de multiplyAllmodo que multiplique la productvariable por


cada número en los subgrupos dearr.
JavaScript básico: Iterate con JavaScript Do ... While
Loops
Puede ejecutar el mismo código varias veces utilizando un bucle.

El siguiente tipo de bucle que aprenderá se llama " do...while" bucle porque primero
" do" pasará el código dentro del bucle sin importar qué, y luego se ejecuta " while"
una condición específica es verdadera y se detiene una vez que esa condición es no ya
es verdad Veamos un ejemplo.

var ourArray = [];


var i = 0;
hacer {
ourArray.push (i);
i ++;
} while (i <5);

Esto se comporta como se esperaría con cualquier otro tipo de bucle, y la matriz
resultante se verá así [0, 1, 2, 3, 4]. Sin embargo, lo que hace do...whilediferente a
otros bucles es cómo se comporta cuando la condición falla en la primera
comprobación. Veamos esto en acción.

Aquí hay un bucle while común que ejecutará el código en el bucle siempre y
cuando i < 5.

var ourArray = [];


var i = 5;
while (i <5) {
ourArray.push (i);
i ++;
}

Observe que inicializamos el valor de iser 5. Cuando ejecutamos la siguiente línea,


notamos que ino es menor que 5. Por lo tanto, no ejecutamos el código dentro del
bucle. El resultado es que ourArrayno se agregará nada, por lo que aún se verá
así []cuando todo el código en el ejemplo anterior termine de ejecutarse.

Ahora, eche un vistazo a un do...while bucle.

var ourArray = [];


var i = 5;
hacer {
ourArray.push (i);
i ++;
} while (i <5);
En este caso, inicializamos el valor de i5, como hicimos con el bucle while. Cuando
llegamos a la siguiente línea, no se comprueba el valor de i, por lo que vamos al
código dentro de las llaves y lo ejecutamos. Agregaremos un elemento a la matriz e
incrementaremos iantes de llegar a la verificación de condición. Luego, cuando
lleguemos a verificar si i < 5vemos que iahora es 6, no se puede realizar la
verificación condicional. Así que salimos del bucle y estamos listos. Al final del
ejemplo anterior, el valor de ourArrayes [5].

Esencialmente, un do...whilebucle garantiza que el código dentro del bucle se


ejecutará al menos una vez.

Intentemos que un do...whilebucle funcione empujando los valores a una matriz.

Cambie el whilebucle en el código a un do...whilebucle para que empuje el número


10 myArray, y iserá igual 11cuando su código termine de ejecutarse.

JavaScript básico: Búsqueda de perfiles


Tenemos una variedad de objetos que representan a diferentes personas en nuestras
listas de contactos.

Una lookUpProfile función que toma name y una propiedad (prop) como argumentos
se ha escrito previamente para usted.

La función debe verificar si name es un contacto real firstName y la propiedad dada


(prop) es una propiedad de ese contacto.

Si ambos son verdaderos, entonces devuelva el "valor" de esa propiedad.

Si name no corresponde a ninguno de los contactos, vuelve. "No such contact".

Si prop no corresponde a ninguna propiedad válida de un contacto encontrado para


coincidir name, devuelva "No such property".

También podría gustarte