Objetos

Los objetos son como un armario para cosas, diseñado para almacenar y transportar otro tipo de datos. JavaScript está diseñado en torno a un paradigma simple. El concepto se basa en objetos simples. Un objeto es un conjunto de propiedades, y cada propiedad consta de un nombre (clave) y un valor asociado con ese nombre. El valor de la propiedad puede ser una función⚙️ que se puede llamar método de objeto o cualquier otro tipo.

En este artículo, veremos las propiedades más básicas de los objetos de JavaScript, creando y cambiando, enumerando propiedades.

Un objeto en JavaScript es solo una matriz asociativa o, en otras palabras, un "hash". Almacena cualquier coincidencia `"clave: valor" y tiene varios métodos estándar.

Los objetos en JavaScript, como los objetos en la vida real (persona, autobús, edificio, etc.) tienen varios parámetros con nombre (clave🗝️) (edad, nombre, color de cabello, estado) con valores específicos (15, Juan, negro, 'verdadero') :

let obj = {
  age: 15,
  name: 'John',
  color: 'black',
  student: true
}

Un método de objeto en JavaScript es solo una función que se ha agregado a una matriz asociativa.

Editor en vivo

function learnJavaScript() { let obj = { // propiedades : valores age: 15, name: 'John', // método : función say: () => 'Hello!' } return obj.say() }

function learnJavaScript() {
  let obj = {
    // propiedades : valores
    age: 15,
    name: 'John',
    // método : función
    say: () => 'Hello!'
  }
  return obj.say()
}

Resultado

Loading...

Video

Crear un objeto

En una computadora ️, podemos representar un objeto en forma de gabinete con nombres de propiedad (claves de acceso) firmados en él. Dentro de los cajones del gabinete hay datos (información específica) e incluso puede haber objetos más pequeños, similares a cosas. Es fácil encontrar, borrar o agregar (escribir) un nuevo valor mediante clave.

Estas son dos 2️⃣ opciones para crear un objeto vacío:

// эквивалентные записи
let obj = {}
let person = new Object()

La segunda opción se usa muy raramente en la práctica.

Creación avanzada

Las propiedades se pueden especificar directamente al crear un objeto, a través de una lista entre llaves de la forma {..., clave: valor, ...} y crear objetos complejos:

Editor en vivo

function learnJavaScript() { const obj = { age: 15, name: 'John', color: 'black', passport: { serial: 5721, number: 258963, date: '27.10.2015' }, student: true } return obj.passport.date }

function learnJavaScript() {
  const obj = {
    age: 15,
    name: 'John',
    color: 'black',
    passport: {
      serial: 5721,
      number: 258963,
      date: '27.10.2015'
    },
    student: true
  }

  return obj.passport.date
}

Resultado

Loading...

El objeto creado contiene cinco propiedades con valores específicos, uno de los cuales son datos de pasaporte, que es un objeto integrado. Preste atención a cómo se accede a las propiedades o métodos remotos del objeto. Trate de recuperar su número de pasaporte.

Agregando propiedades

Hay dos 2️⃣ sintaxis para agregar propiedades a un objeto. 1️⃣ El primero es un punto, el segundo son corchetes:

// entradas equivalentes
obj.age = 15
obj['age'] = 15

Editor en vivo

function learnJavaScript() { let obj = { name: 'John' } obj.age = 15 return obj.age }

function learnJavaScript() {
  let obj = {
    name: 'John'
  }

  obj.age = 15

  return obj.age
}

Resultado

Loading...

Los corchetes se usan principalmente cuando el nombre de la propiedad (propiedades) está en una variable :

let nameProp = 'age'
obj[nameProp] = 15

Aquí, a través de la variable nameProp, establecemos el nombre de la propiedad "edad", que es la clave en la matriz asociativa, que contiene valor 15.

Editor en vivo

function learnJavaScript() { let obj = { name: 'John' } let nameProp = 'age' obj[nameProp] = 15 return obj.age }

function learnJavaScript() {
  let obj = {
    name: 'John'
  }

  let nameProp = 'age'
  obj[nameProp] = 15

  return obj.age
}

Resultado

Loading...

Acceso a la propiedad

Se accede a una propiedad accediendo a ella :

Editor en vivo

function learnJavaScript() { let obj = {} // el objeto esta vacio obj.age = 17 // equivalente a obj['age']=17 o simplemente obj={age:17} let result1 = obj.age // Opción 1 let result2 = obj['age'] // Opción 2 return result1 + ' o ' + result2 }

function learnJavaScript() {
  let obj = {} // el objeto esta vacio
   obj.age = 17 // equivalente a obj['age']=17 o simplemente obj={age:17}

  let result1 = obj.age // Opción 1
   let result2 = obj['age'] // Opción 2

  return result1 + ' o ' + result2
}

Resultado

Loading...

Si el objeto no tiene tal propiedad, entonces el resultado es 'indefinido'. Compruébalo en la consola de tu navegador.

let obj = {}
obj.nokey

No habrá ningún error al acceder a una propiedad inexistente, solo se devolverá el valor especial undefined. Si no hay una palabra clave 🗝️ return dentro de la función ⚙️, también se devolverá el valor undefined: la ausencia de algo.

Eliminando propiedades

Elimina una propiedad con el operador delete. Intente eliminar el número de pasaporte del ejemplo anterior:

Cree un objeto del ejemplo anterior en la consola.

const obj = {
  age: 15,
  name: 'John',
  color: 'black',
  passport: {
    serial: 5721,
    number: 258963,
    date: '27.10.2015'
  },
  student: true
}

Y ahora elimine el objeto pasaporte anidado

delete obj.passport

Ahora, si recurrimos a él, como resultado obtenemos undefined

obj.passport

Métodos de objetos

Al igual que otros lenguajes , los objetos de JavaScript tienen métodos.

Por ejemplo, vamos a crear el objeto sport inmediatamente con el método run:

Editor en vivo

function learnJavaScript() { let sport = { run: n => ' John ' + ' corrió ' + n + ' metros! ' } return sport.run(300) }

function learnJavaScript() {
  let sport = {
    run: n => ' John ' + ' corrió ' + n + ' metros! '
  }

  return sport.run(300)
}

Resultado

Loading...

Agregar un método

Agregar un método a un objeto existente es tan simple como asignar una función ⚙️ function(n) { ... } a la propiedad sport.run.

Editor en vivo

function learnJavaScript() { let sport = {} sport.run = n => 'El atleta corrió' + n + ' metros y era ' + 'Nikita' return sport.run(350) }

function learnJavaScript() {
  let sport = {}

  sport.run = n => 'El atleta corrió' + n + ' metros y era ' + 'Nikita'

  return sport.run(350)
}

Resultado

Loading...

No se trata de clases, crear instancias y cosas por el estilo. Simple: puede agregar un nuevo método a cualquier objeto en cualquier momento o eliminar uno existente.

Iterando sobre las propiedades del objeto

Para enumerar todas las propiedades de un objeto, se utiliza un tipo especial de construcción for .. in:

for(let key in obj) {
// key - nombre de la propiedad
   // obj[key] - valor de propiedad
  ...
}

Например :

Editor en vivo

function learnJavaScript() { let result = '' const obj = { age: 15, b: 'true', color: 'red' } for (let key in obj) { result += key + ': ' + obj[key] + ' ' } return result }

function learnJavaScript() {
  let result = ''

  const obj = {
    age: 15,
    b: 'true',
    color: 'red'
  }

  for (let key in obj) {
    result += key + ': ' + obj[key] + ' '
  }

  return result
}

Resultado

Loading...

Y en secreto, para ser honesto, casi cualquier variable es un miniobjeto en el entorno de JavaScript. Así que no tengas miedo de usarlos.

Reaccionar nativo

Por ejemplo, necesitamos mostrar el nombre del objeto obj, luego lo haremos así:

Intente mostrar otros datos, como la serie del pasaporte.

¿Problemas?

Escribe en Discord o Telegram chat y suscríbete a nuestras noticias

Preguntas

Se crea un objeto vacío con el comando:

1. let obj = {}
2. function obj()
3. sea x = 10

El objeto almacena coincidencias:

1. er nombre : apellido
2. variable = valor
3. clave: valor

Sintaxis para asignar un valor a una clave específica (propiedad):

1. color() = "green"
2. obj.color = "red"
3. function color () => "yellow"

Un método de objeto en JavaScript es

1. Solo una función agregada a una matriz asociativa
2. Función externa
3. Variable declarada fuera del objeto

Iterando sobre las propiedades del objeto

1. for (let i = 0; i <= 100; i++) { sum += i }
2. for(let key in obj) { }
3. while (условие) { }

En JavaScript, un objeto es una colección de propiedades (valores con nombre).

1. true
2. false

Cuando la propiedad de un objeto es una función, tiene un nombre especial: madre.

1. true
2. false Tiene un nombre especial: clase
3. false Tiene un nombre especial: método

Para comprender cuánto ha aprendido esta lección, realice una prueba en la aplicación móvil de nuestra escuela sobre este tema o en nuestro bot de Telegram.

Enlaces:

1. Documento web de MDN. Developer.mozilla.org - Artículo "Tipos de datos y estructuras de datos de JavaScript"
2. Documento web de MDN. Developer.mozilla.org - Artículo "Inicialización de objetos"
3. Artículo "Tipos de objetos"
4. Artículo "Objetos", sitio Learn.javascript.ru
5. Código para adolescentes: la gran guía de programación para principiantes Volumen 1: Javascript - Jeremy Moritz

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dmitriy K.

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨