"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Una guía para dominar los objetos JavaScript

Una guía para dominar los objetos JavaScript

Publicado el 2024-08-27
Navegar:572

A Guide to Master JavaScript-Objects

Los objetos son una parte fundamental de JavaScript y sirven como columna vertebral para almacenar y administrar datos. Un objeto es una colección de propiedades y cada propiedad es una asociación entre una clave (o nombre) y un valor. Comprender cómo crear, manipular y utilizar objetos es crucial para cualquier desarrollador de JavaScript. En este artículo, exploraremos las diversas funciones de objetos en JavaScript y brindaremos explicaciones detalladas, ejemplos y comentarios para ayudarlo a dominarlas.

Introducción a los objetos en JavaScript

En JavaScript, los objetos se utilizan para almacenar colecciones de datos y entidades más complejas. Se crean utilizando objetos literales o el constructor de objetos.

// Using object literals
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

// Using the Object constructor
let person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";

Propiedades del objeto

  • Object.prototype: Cada objeto JavaScript hereda propiedades y métodos de su prototipo.
let obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true

Métodos de objetos

1. Objeto.asignar()

Copia los valores de todas las propiedades propias enumerables de uno o más objetos de origen a un objeto de destino. Devuelve el objeto de destino.

let target = {a: 1};
let source = {b: 2, c: 3};
Object.assign(target, source);
console.log(target); // Output: {a: 1, b: 2, c: 3}

2. Objeto.crear()

Crea un nuevo objeto con las propiedades y el objeto prototipo especificados.

let person = {
    isHuman: false,
    printIntroduction: function() {
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};

let me = Object.create(person);
me.name = "Matthew";
me.isHuman = true;
me.printIntroduction(); // Output: My name is Matthew. Am I human? true

3. Objeto.defineProperties()

Define propiedades nuevas o modifica las existentes directamente en un objeto, devolviendo el objeto.

let obj = {};
Object.defineProperties(obj, {
    property1: {
        value: true,
        writable: true
    },
    property2: {
        value: "Hello",
        writable: false
    }
});
console.log(obj); // Output: { property1: true, property2: 'Hello' }

4. Objeto.defineProperty()

Define una nueva propiedad directamente en un objeto o modifica una propiedad existente y devuelve el objeto.

let obj = {};
Object.defineProperty(obj, 'property1', {
    value: 42,
    writable: false
});
console.log(obj.property1); // Output: 42
obj.property1 = 77; // No error thrown, but the property is not writable
console.log(obj.property1); // Output: 42

5. Entradas de objetos()

Devuelve una matriz de pares de propiedad [clave, valor] con clave de cadena enumerables propios de un objeto determinado.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj)); // Output: [['a', 1], ['b', 2], ['c', 3]]

6. Objeto.freeze()

Congela un objeto. Un objeto congelado ya no se puede cambiar; congelar un objeto evita que se le agreguen nuevas propiedades, que se eliminen propiedades existentes y evita que se cambien los valores de las propiedades existentes.

let obj = {prop: 42};
Object.freeze(obj);
obj.prop = 33; // Fails silently in non-strict mode
console.log(obj.prop); // Output: 42

7. Objeto.deEntries()

Transforma una lista de pares clave-valor en un objeto.

let entries = new Map([['foo', 'bar'], ['baz', 42]]);
let obj = Object.fromEntries(entries);
console.log(obj); // Output: { foo: 'bar', baz: 42 }

8. Objeto.getOwnPropertyDescriptor()

Devuelve un descriptor de propiedad para una propiedad propia (es decir, una presente directamente en un objeto y no en la cadena de prototipo del objeto) de un objeto determinado.

let obj = {property1: 42};
let descriptor = Object.getOwnPropertyDescriptor(obj, 'property1');
console.log(descriptor);
// Output: { value: 42, writable: true, enumerable: true, configurable: true }

9. Objeto.getOwnPropertyDescriptors()

Devuelve un objeto que contiene todos los descriptores de propiedad propios de un objeto.

let obj = {property1: 42};
let descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
/* Output:
{
  property1: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

10. Objeto.getOwnPropertyNames()

Devuelve una matriz de todas las propiedades (incluidas las propiedades no enumerables, excepto aquellas que usan símbolo) encontradas directamente en un objeto determinado.

let obj = {a: 1, b: 2, c: 3};
let props = Object.getOwnPropertyNames(obj);
console.log(props); // Output: ['a', 'b', 'c']

11. Objeto.getOwnPropertySymbols()

Devuelve una matriz de todas las propiedades de símbolos encontradas directamente en un objeto determinado.

let obj = {};
let sym = Symbol('foo');
obj[sym] = 'bar';
let symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // Output: [Symbol(foo)]

12. Objeto.getPrototypeOf()

Devuelve el prototipo (es decir, el valor de la propiedad interna [[Prototype]]) del objeto especificado.

let proto = {};
let obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

13. Objeto.is()

Determina si dos valores son el mismo valor.

console.log(Object.is('foo', 'foo')); // Output: true
console.log(Object.is({}, {})); // Output: false

14. Objeto.isExtensible()

Determina si se permite la extensión de un objeto.

let obj = {};
console.log(Object.isExtensible(obj)); // Output: true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false

15. Objeto.isFrozen()

Determina si un objeto está congelado.

let obj = {};
console.log(Object.isFrozen(obj)); // Output: false
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // Output: true

16. Objeto.isSealed()

Determina si un objeto está sellado.

let obj = {};
console.log(Object.isSealed(obj)); // Output: false
Object.seal(obj);
console.log(Object.isSealed(obj)); // Output: true

17. Objeto.claves()

Devuelve una matriz de nombres de propiedades enumerables propios de un objeto determinado, iterados en el mismo orden que lo haría un bucle normal.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)); // Output: ['a', 'b', 'c']

18. Objeto.preventExtensions()

Evita cualquier extensión de un objeto.

let obj = {};
Object.preventExtensions(obj);
obj.newProp = 'test'; // Throws an error in strict mode
console.log(obj.newProp); // Output: undefined

19. Objeto.sello()

Sella un objeto, evitando que se le agreguen nuevas propiedades y marcando todas las propiedades existentes como no configurables. Los valores de las propiedades actuales aún se pueden cambiar siempre que se pueda escribir en ellos.

let obj = {property1: 42};
Object.seal(obj);
obj.property1 = 33;
delete obj.property1; // Throws an error in strict mode
console.log(obj.property1); // Output: 33

20. Objeto.setPrototypeOf()

Establece el prototipo (es decir, la propiedad interna [[Prototype]]) de un objeto especificado en otro objeto o nulo.

let proto = {};
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

21. Objeto.valores()

Devuelve una matriz de valores de propiedad enumerables propios de un objeto determinado, en el mismo orden que el proporcionado por un bucle for...in.

let obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)); // Output: [1, 2, 3]

Ejemplos prácticos

Ejemplo 1: clonar un objeto

Usando Object.assign() para clonar un objeto.

let obj = {a: 1, b: 2};
let clone = Object.assign({}, obj);
console.log(clone); // Output: {a: 1, b: 2}

Ejemplo 2: fusionar objetos

Usando Object.assign() para fusionar objetos.

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
let merged = Object.assign({},

 obj1, obj2);
console.log(merged); // Output: {a: 1, b: 3, c: 4}

Ejemplo 3: creación de un objeto con un prototipo especificado

Usando Object.create() para crear un objeto con un prototipo específico.

let proto = {greet: function() { console.log("Hello!"); }};
let obj = Object.create(proto);
obj.greet(); // Output: Hello!

Ejemplo 4: definición de propiedades inmutables

Usando Object.defineProperty() para definir propiedades inmutables.

let obj = {};
Object.defineProperty(obj, 'immutableProp', {
    value: 42,
    writable: false
});
console.log(obj.immutableProp); // Output: 42
obj.immutableProp = 77; // Throws an error in strict mode
console.log(obj.immutableProp); // Output: 42

Ejemplo 5: convertir un objeto en una matriz

Usar Object.entries() para convertir un objeto en una matriz de pares clave-valor.

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);
console.log(entries); // Output: [['a', 1], ['b', 2], ['c', 3]]

Conclusión

Los objetos son un componente central de JavaScript y ofrecen una forma flexible de administrar y manipular datos. Al dominar las funciones de los objetos, puede realizar operaciones complejas con facilidad y escribir código más eficiente y fácil de mantener. Esta guía completa ha cubierto las funciones de objetos más importantes en JavaScript, completa con ejemplos y explicaciones detalladas. Practique el uso de estas funciones y experimente con diferentes casos de uso para profundizar su comprensión y mejorar sus habilidades de codificación.

Declaración de liberación Este artículo se reproduce en: https://dev.to/imsushant12/a-guide-to-master-javascript-objects-362b?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3