Mastering JavaScript Objects: Comparison, Manipulation, and Control Techniques

JavaScript objects are incredibly powerful and versatile. They allow us to store complex data and come with a wide range of built-in methods to make data manipulation easier. Let's look at some of the most useful object methods, and how they compare to each other.

---

1. Object Comparison

Comparing objects directly with === won’t work because JavaScript compares by reference, not by value. For example:

const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 === obj2); // false

To compare the contents, use a deep comparison function or a library like Lodash.

---

2. Object Descriptors

Property descriptors provide metadata about an object's properties. For instance:

value: Property’s value
writable: Can the value be changed?
enumerable: Is it visible in loops?
configurable: Can it be modified?

const obj = { name: "Alice" };
const descriptor = Object.getOwnPropertyDescriptor(obj, "name");
console.log(descriptor);

---

3. Extracting Keys, Values, and Entries

Object.keys(): Returns an array of an object’s keys.
Object.values(): Returns an array of values.
Object.entries(): Returns an array of key-value pairs.

const person = { name: "Alice", age: 25 };
console.log(Object.keys(person));   // ["name", "age"]
console.log(Object.values(person)); // ["Alice", 25]
console.log(Object.entries(person)); // [["name", "Alice"], ["age", 25]]

---

4. Merging and Cloning Objects

Object.assign() copies properties from one object to another. It only performs a shallow copy, so it won’t deeply clone nested objects.

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

---

5. Object.create()

This method creates a new object using a specified prototype. Useful for inheritance:

const personPrototype = {
  greet() { return `Hello, ${this.name}`; }
};
const person = Object.create(personPrototype);
person.name = "Alice";
console.log(person.greet()); // "Hello, Alice"

---

6. Object.is()

This method checks if two values are the same, even distinguishing between 0 and -0 or comparing NaN correctly.

console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true

---

7. Object.getOwnPropertyDescriptors()

Gets descriptors of all properties. Useful for deep copies with non-default descriptors:

const obj = { name: "Alice" };
console.log(Object.getOwnPropertyDescriptors(obj));

---

8. Object.getOwnPropertyNames()

Returns all property names, including non-enumerable ones.

const obj = { a: 1 };
Object.defineProperty(obj, "b", { value: 2, enumerable: false });
console.log(Object.getOwnPropertyNames(obj)); // ["a", "b"]

---

9. Object.seal()

Seals an object, allowing changes to existing properties but no additions or deletions.

const obj = { name: "Alice" };
Object.seal(obj);
obj.age = 30; // Fails
console.log(obj); // { name: "Alice" }

---

10. Object.freeze()

Freezes an object, preventing any modifications.

const obj = { name: "Alice" };
Object.freeze(obj);
obj.name = "Bob"; // Fails
console.log(obj); // { name: "Alice" }

---

11. Object.assign()

This is used for copying properties from multiple source objects to a target object.

const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 === obj2); // false

---

Conclusion

JavaScript provides an arsenal of methods to work with objects, each serving a specific purpose. By understanding how and when to use these methods, you can control object behaviour, modify their properties, or even lock them from changes.

The above is the detailed content of Mastering JavaScript Objects: Comparison, Manipulation, and Control Techniques. For more information, please follow other related articles on the PHP Chinese website!