- vừa được xem lúc

Tất tần tật về cách sử dụng Object trong JavaScript

0 0 2

Người đăng: Vinh Phạm

Theo Viblo Asia

JavaScript Object đ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!

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 525

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 433

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 153

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 145

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 110

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 245