Tất tần tật về cách sử dụng Object trong JavaScript
Object trong JavaScript đi kèm với một số phương thức hữu ích giúp lập trình viên thao tác với đối tượng một cách dễ dàng. Hãy cùng tìm hiểu một số phương thức quan trọng nhất, với các giải thích ngắn gọn và ví dụ minh họa.
1. Object.create()
Object.create() là một phương thức trong JavaScript được sử dụng để tạo một đối tượng mới với một đối tượng nguyên mẫu được chỉ định và các thuộc tính tùy chọn. Nó cho phép kiểm soát chi tiết hơn đối với nguyên mẫu và thuộc tính của một đối tượng so với việc sử dụng các đối tượng literal hoặc hàm tạo.
const personPrototype = {
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
const john = Object.create(personPrototype);
john.name = "John";
john.greet(); // Output: Hello, my name is John
2. Object.assign()
Object.assign() là một phương thức tích hợp sẵn trong JavaScript được sử dụng để sao chép các giá trị của tất cả các thuộc tính riêng có thể liệt kê được từ một hoặc nhiều đối tượng nguồn sang một đối tượng đích. Nó thực hiện sao chép nông và trả về đối tượng đích đã sửa đổi.
const target = { a: 1 };
const source = { b: 2, c: 3 };
const result = Object.assign(target, source);
console.log(result); // Output: { a: 1, b: 2, c: 3 }
console.log(target); // Output: { a: 1, b: 2, c: 3 } (target is also modified)
3. Object.keys()
Object.keys() trả về một mảng chứa tên thuộc tính (khóa) riêng có thể liệt kê của đối tượng.
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // Output: ['a', 'b', 'c']
4. Object.values()
Object.values() trả về một mảng chứa các giá trị thuộc tính riêng có thể liệt kê của đối tượng.
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // Output: [1, 2, 3]
5. Object.entries()
Object.entries() trả về một mảng chứa các cặp [khóa, giá trị] thuộc tính riêng có thể liệt kê của đối tượng.
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // Output: [['a', 1], ['b', 2], ['c', 3]]
6. Object.freeze()
Object.freeze() đóng băng đối tượng, ngăn chặn việc thêm thuộc tính mới hoặc thay đổi hoặc xóa các thuộc tính hiện có.
const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // No effect, because the object is frozen
console.log(obj.a); // Output: 1
7. Object.seal()
Object.seal() niêm phong đối tượng, ngăn chặn việc thêm thuộc tính mới, nhưng cho phép sửa đổi các thuộc tính hiện có.
const obj = { a: 1 };
Object.seal(obj);
obj.a = 2; // Allowed
delete obj.a; // Not allowed
console.log(obj.a); // Output: 2
8. Object.preventExtensions()
Object.preventExtensions() ngăn chặn bất kỳ thuộc tính mới nào được thêm vào đối tượng, nhưng cho phép sửa đổi và xóa các thuộc tính hiện có.
const obj = { a: 1 };
Object.preventExtensions(obj);
obj.b = 2; // Not allowed
console.log(obj.b); // Output: undefined
9. Object.getPrototypeOf()
Object.getPrototypeOf() trả về nguyên mẫu (tức là [[Prototype]] nội bộ) của đối tượng được chỉ định.
const obj = {};
const proto = Object.getPrototypeOf(obj);
console.log(proto); // Output: {} (the default Object prototype)
10. Object.setPrototypeOf()
Object.setPrototypeOf() đặt nguyên mẫu của một đối tượng được chỉ định.
const proto = { greet() { console.log('Hello!'); } };
const obj = {};
Object.setPrototypeOf(obj, proto);
obj.greet(); // Output: 'Hello!'
11. Object.defineProperty()
Object.defineProperty() xác định một thuộc tính mới trên một đối tượng hoặc sửa đổi một thuộc tính hiện có, với các tùy chọn bổ sung cho mô tả thuộc tính (ví dụ: writable, configurable).
const obj = {};
Object.defineProperty(obj, 'a', {
value: 42,
writable: false, // Cannot modify the value
});
obj.a = 100; // No effect because writable is false
console.log(obj.a); // Output: 42
12. Object.defineProperties()
Object.defineProperties() xác định nhiều thuộc tính trên một đối tượng với mô tả thuộc tính.
const obj = {};
Object.defineProperties(obj, {
a: { value: 42, writable: false },
b: { value: 100, writable: true }
});
console.log(obj.a); // Output: 42
console.log(obj.b); // Output: 100
13. Object.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptor() trả về mô tả cho một thuộc tính của một đối tượng.
const obj = { a: 1 };
const descriptor = Object.getOwnPropertyDescriptor(obj, 'a');
console.log(descriptor);
// Output: { value: 1, writable: true, enumerable: true, configurable: true }
14. Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors() trả về một đối tượng chứa tất cả các mô tả thuộc tính cho các thuộc tính riêng của đối tượng.
const obj = { a: 1 };
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
// Output: { a: { value: 1, writable: true, enumerable: true, configurable: true } }
15. Object.getOwnPropertyNames()
Object.getOwnPropertyNames() trả về một mảng chứa tất cả các thuộc tính (bao gồm cả những thuộc tính không thể liệt kê) được tìm thấy trực tiếp trên một đối tượng.
const obj = { a: 1 };
Object.defineProperty(obj, 'b', { value: 2, enumerable: false });
console.log(Object.getOwnPropertyNames(obj)); // Output: ['a', 'b']
16. Object.is()
Object.is() so sánh xem hai giá trị có giống nhau hay không (giống như === nhưng xử lý các trường hợp đặc biệt như NaN).
console.log(Object.is(NaN, NaN)); // Output: true
console.log(Object.is(+0, -0)); // Output: false
17. Object.isFrozen()
Object.isFrozen() kiểm tra xem một đối tượng có bị đóng băng hay không.
const obj = Object.freeze({ a: 1 });
console.log(Object.isFrozen(obj)); // Output: true
18. Object.isSealed()
Object.isSealed() kiểm tra xem một đối tượng có bị niêm phong hay không.
const obj = Object.seal({ a: 1 });
console.log(Object.isSealed(obj)); // Output: true
19. Object.isExtensible()
Object.isExtensible() kiểm tra xem có thể thêm thuộc tính mới vào một đối tượng hay không.
const obj = { a: 1 };
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false
20. Object.fromEntries()
Object.fromEntries() chuyển đổi một mảng chứa các cặp khóa-giá trị thành một đối tượng.
const entries = [['a', 1], ['b', 2]];
const obj = Object.fromEntries(entries);
console.log(obj); // Output: { a: 1, b: 2 }
21. Object.hasOwnProperty()
Object.hasOwnProperty() kiểm tra xem một đối tượng có thuộc tính được chỉ định là của riêng nó (không được kế thừa) hay không.
const obj = { a: 1 };
console.log(obj.hasOwnProperty('a')); // Output: true
22. Object.groupBy
Object.groupBy là một tính năng tương đối mới được đề xuất cho JavaScript trong ECMAScript 2024 cho phép bạn nhóm các đối tượng dựa trên một tiêu chí chung. Hiện tại, nó chưa được hỗ trợ rộng rãi trên tất cả các môi trường, vì vậy nó có thể không hoạt động trong nhiều trình duyệt hoặc công cụ JavaScript cho đến khi được triển khai đầy đủ.
const array = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 25 },
{ name: 'David', age: 30 },
];
// Group objects by age
const groupedByAge = Object.groupBy(array, item => item.age);
console.log(groupedByAge);
/*
Expected Output:
{
25: [
{ name: 'Alice', age: 25 },
{ name: 'Charlie', age: 25 }
],
30: [
{ name: 'Bob', age: 30 },
{ name: 'David', age: 30 }
]
}
*/
Hy vọng các bạn thấy bài viết hữu ích. Cảm ơn đã theo dõi!
All rights reserved
