Object trong JavaScript là tập hợp các cặp key/value. Các giá trị có thể bao gồm các thuộc tính và phương thức, chúng còn có thể chứa tất cả các loại dữ liệu JavaScript khác, chẳng hạn như string, số và Booleans.

Bài viết này sẽ tổng hợp các phương thức built-in object quan trọng. Bên cạnh các phương thức, bài viết còn mang đến cho bạn những ví dụ minh họa cụ thể cho từng trường hợp.

1.Object.create()

Phương thức Object.create() này được sử dụng để tạo một object mới và liên kết nó với nguyên mẫu của một object hiện có.

Chúng ta có thể tạo một job thể hiện object và mở rộng nó sang một object cụ thể hơn. 

// Initialize an object with properties and methods
const job = {
    position: 'cashier',
    type: 'hourly',
    isAvailable: true,
    showDetails() {
        const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";

        console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);
    }
};

// Use Object.create to pass properties
const barista = Object.create(job);

barista.position = "barista";
barista.showDetails();

Output
The barista position is hourly and is accepting applications.

Object barista hiện có một thuộc tính là — position— nhưng tất cả các thuộc tính và phương thức khác từ job đó đều có sẵn thông qua nguyên mẫu. Object.create() rất hữu ích trong việc giữ code DRY bằng cách giảm thiểu trùng lặp.

2.Object.keys()

Object.keys() tạo một mảng chứa các key của một object.

Chúng ta có thể tạo một object và print array của key.

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

Khi Object.keys chuyển đổi các key object của bạn thành một array key, phương thức array forEach() có thể được sử dụng để lặp lại các key và giá trị.

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

     console.log(`${key}: ${value}`);
});

Output
boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

Object.keys cũng rất có ích trong việc kiểm tra độ dài của array được chuyển đổi bằng thuộc tính length.

// Get the length of the keys
const length = Object.keys(employees).length;

console.log(length);

Output

4
Sử dụng thuộc tính length, chúng ta có thể đếm các thuộc tính 4 của employees.

3.Object.values()

Object.values() tạo một mảng chứa các giá trị của một object.

// Initialize an object
const session = {
    id: 1,
    time: `26-July-2018`,
    device: 'mobile',
    browser: 'Chrome'
};

// Get all values of the object
const values = Object.values(session);

console.log(values);

Output
[1, "26-July-2018", "mobile", "Chrome"]

Object.keys() và Object.values() cho phép bạn trả lại dữ liệu từ một object.

4.Object.entries()

Object.entries() tạo một mảng lồng nhau của các cặp key/value của một object.

// Initialize an object
const operatingSystem = {
    name: 'Ubuntu',
    version: 18.04,
    license: 'Open Source'
};

// Get the object key/value pairs
const entries = Object.entries(operatingSystem);

console.log(entries);

Output

[ ["name", "Ubuntu"] ["version", 18.04] ["license", "Open Source"] ]

Khi chúng ta có các mảng cặp key/value, chúng ta có thể sử dụng phương thức forEach() để lặp lại và chạy với kết quả.

// Loop through the results
entries.forEach(entry => {
    let key = entry[0];
    let value = entry[1];

    console.log(`${key}: ${value}`);
});

Output
name: Ubuntu
version: 18.04
license: Open Source

Phương thức Object.entries() sẽ chỉ trả về các thuộc tính riêng của object và không trả về bất kỳ thuộc tính nào có thể được kế thừa thông qua nguyên mẫu của nó.

5.Object.assign()

Object.assign() được sử dụng để sao chép các giá trị từ object này sang object khác.

Chúng ta có thể tạo hai object và merge chúng bằng Object.assign().

// Initialize an object
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// Initialize another object
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// Merge the objects
const character = Object.assign(name, details);

console.log(character);

Output
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

Bạn cũng có thể sử dụng spread operator (...) để làm những task tương tự. Trong code bên dưới, chúng ta sẽ sửa đổi cách khai báo character thông qua việc merge các object name và details.

// Initialize an object
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// Initialize another object
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// Merge the object with the spread operator
const character = {...name, ...details}

console.log(character);

Output
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

Cú pháp spread này theo định nghĩa trong object còn được gọi là shallow-cloning.

6.Object.freeze()

Object.freeze() ngăn việc sửa đổi các thuộc tính và giá trị của một object, đồng thời ngăn các thuộc tính được thêm hoặc xóa khỏi một object. 

// Initialize an object
const user = {
    username: 'AzureDiamond',
    password: 'hunter2'
};

// Freeze the object
const newUser = Object.freeze(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);

Output
{username: "AzureDiamond", password: "hunter2"}

Ví dụ đã cố ghi đè mật khẩu hunter2 bằng *******, nhưng thuộc tính password vẫn giữ nguyên. Bên cạnh đó cũng đã cố gắng thêm một thuộc tính mới active nhưng nó không được thêm vào.

Object.isFrozen() tồn tại để xác định xem một object có bị đóng băng hay không và trả về một Boolean.

7.Object.seal()

Object.seal() ngăn các thuộc tính mới được thêm vào một object, nhưng cho phép sửa đổi các thuộc tính hiện có. Phương pháp này tương tự như Object.freeze(). Đừng quên làm mới console của bạn trước khi triển khai code bên dưới để tránh bị lỗi nhé.

// Initialize an object
const user = {
    username: 'AzureDiamond',
    password: 'hunter2'
};

// Seal the object
const newUser = Object.seal(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);

Output
{username: "AzureDiamond", password: "*******"}

Như bạn có thể thấy thuộc tính mới active không được thêm vào object đã được sealed, nhưng password thuộc tính đã được thay đổi thành công.

8.Object.getPrototypeOf()

Object.getPrototypeOf() được sử dụng để lấy internal hidden [[Prototype]] của một object, cũng có thể truy cập thông qua thuộc tính __proto__.

Trong ví dụ này, chúng ta có thể tạo một mảng có quyền truy cập vào Array Nguyên mẫu.

const employees = ['Ron', 'April', 'Andy', 'Leslie'];

Object.getPrototypeOf(employees);

Output
[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]

Chúng ta có thể thấy trong đầu ra rằng nguyên mẫu của mảng employees có quyền truy cập vào pop, find và các phương thức nguyên mẫu khác của Array. Chúng ta có thể xác nhận điều này bằng cách test nguyên mẫu  employees  với Array.prototype.

Object.getPrototypeOf(employees) === Array.prototype;
Output
true

Phương pháp này giúp ích trong việc lấy thêm thông tin về một object hoặc đảm bảo chúng có quyền truy cập vào nguyên mẫu của một object khác.

Ngoài ra còn có một phương pháp Object.setPrototypeOf(), phương pháp này sẽ giúp thêm một nguyên mẫu vào một object khác.

VietnamWorks inTECH