Cách sử dụng các phương thức đối tượng trong JavaScript

Giới thiệu

Các đối tượng trong JavaScript là bộ sưu tập của Chìa khóa/giá trị cặp. Các giá trị có thể bao gồm tính chất và phương phápvà có thể chứa tất cả các loại dữ liệu JavaScript khác, chẳng hạn như chuỗi, số và Booleans.

Tất cả các đối tượng trong JavaScript đều xuất phát từ bố mẹ Object constructor. Object có nhiều phương thức tích hợp hữu ích mà chúng ta có thể sử dụng và truy cập để làm việc với các đối tượng riêng lẻ đơn giản. không giống Mảng nguyên mẫu như sort() và reverse() được sử dụng trên cá thể mảng, các phương thức đối tượng được sử dụng trực tiếp trên Object constructor, và sử dụng instance object làm tham số. Điều này được gọi là phương thức tĩnh.

Hướng dẫn này sẽ đi qua các phương thức đối tượng dựng sẵn quan trọng, với mỗi phần bên dưới xử lý một phương thức cụ thể và cung cấp một ví dụ về sử dụng.

Điều kiện tiên quyết

Để tận dụng tối đa hướng dẫn này, bạn nên làm quen với việc tạo, sửa đổi và làm việc với các đối tượng mà bạn có thể xem lại trong "Hiểu đối tượng trong JavaScript" bài báo.

Để có thêm hướng dẫn về JavaScript nói chung, bạn có thể xem lại _Làm thế nào để mã trong JavaScript_ loạt.

Object.create ()

Các [Object.create()](https://www.codehub.vn/tim-kiem?q=Object.create()&utm_medium=codehub.vn&utm_source=developer.mozilla.org&utm_campaign=guest_content&utm_term=https://www.digitalocean.com/community/tutorials/how-to-use-object-methods-in-javascript) phương pháp được sử dụng để tạo ra một đối tượng mới và liên kết nó với nguyên mẫu của một đối tượng hiện có.

Chúng ta có thể tạo ra job đối tượng dụ và mở rộng nó đến một đối tượng 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();

OutputThe barista position is hourly and is accepting applications.

Các barista đối tượng hiện có một thuộc tính - " position â € ”nhưng tất cả các thuộc tính và phương thức khác từ job có sẵn thông qua nguyên mẫu. Object.create() rất hữu ích cho việc giữ mã KHÔ bằng cách giảm thiểu trùng lặp.

Object.keys ()

[Object.keys()](https://www.codehub.vn/tim-kiem?q=Object.keys()&utm_medium=codehub.vn&utm_source=developer.mozilla.org&utm_campaign=guest_content&utm_term=https://www.digitalocean.com/community/tutorials/how-to-use-object-methods-in-javascript) tạo một mảng chứa các khóa của một đối tượng.

Chúng ta có thể tạo một đối tượng và in mảng các khóa.

// 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"]

Object.keys có thể được sử dụng để lặp qua các khóa và giá trị của một đối tượng.

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

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

Outputboss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

Object.keys cũng hữu ích cho việc kiểm tra độ dài của một đối tượng.

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

console.log(length);

Output4

Sử dụng length tài sản, chúng tôi đã có thể đếm 4 tính chất của employees.

Object.values ​​()

[Object.values()](https://www.codehub.vn/tim-kiem?q=Object.values()&utm_medium=codehub.vn&utm_source=developer.mozilla.org&utm_campaign=guest_content&utm_term=https://www.digitalocean.com/community/tutorials/how-to-use-object-methods-in-javascript) tạo một mảng chứa các giá trị của một đối tượng.

// 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 đối tượng.

Object.entries ()

[Object.entries()](https://www.codehub.vn/tim-kiem?q=Object.entries()&utm_medium=codehub.vn&utm_source=developer.mozilla.org&utm_campaign=guest_content&utm_term=https://www.digitalocean.com/community/tutorials/how-to-use-object-methods-in-javascript) tạo một mảng lồng nhau của các cặp khóa / giá trị của một đối tượng.

// 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 tôi có các mảng cặp khóa / giá trị, chúng tôi có thể sử dụng forEach() để lặp lại và làm việc với kết quả.

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

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

Outputname: Ubuntu
version: 18.04
license: Open Source

Các Object.entries() phương thức này sẽ chỉ trả về các thuộc tính riêng của cá thể đối tượng và không phải 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ó.

Object.assign ()

[Object.assign()](https://www.codehub.vn/tim-kiem?q=Object.assign()&utm_medium=codehub.vn&utm_source=developer.mozilla.org&utm_campaign=guest_content&utm_term=https://www.digitalocean.com/community/tutorials/how-to-use-object-methods-in-javascript) được sử dụng để sao chép các giá trị từ một đối tượng này sang đối tượng khác.

Chúng tôi có thể tạo hai đối tượng và hợp nhất chúng với 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"}

Cũng có thể sử dụng toán tử spread (...) để hoàn thành nhiệm vụ tương tự. Trong mã bên dưới, chúng tôi sẽ sửa đổi cách chúng tôi khai báo character thông qua hợp nhất name và details các đối tượng.

// 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"}

Điều này cú pháp truyền bá trong đối tượng literals còn được gọi là nông nhân bản.

Object.freeze ()

[Object.freeze()](https://www.codehub.vn/tim-kiem?q=Object.freeze()&utm_medium=codehub.vn&utm_source=developer.mozilla.org&utm_campaign=guest_content&utm_term=https://www.digitalocean.com/community/tutorials/how-to-use-object-methods-in-javascript) ngăn không cho sửa đổi các thuộc tính và các giá trị của một đối tượng, và ngăn chặn các thuộc tính được thêm vào hoặc loại bỏ khỏi một đối tượng.

// 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"}

Trong ví dụ trên, chúng tôi đã cố gắng ghi đè mật khẩu hunter2 với *******, nhưng password tài sản vẫn như cũ. Chúng tôi cũng đã cố gắng thêm thuộc tính mới, active, nhưng nó không được thêm vào.

Object.isFrozen() có sẵn để xác định xem một đối tượng có bị đóng băng hay không và trả về một Boolean.

Object.seal ()

[Object.seal()](https://www.codehub.vn/tim-kiem?q=Object.seal()&utm_medium=codehub.vn&utm_source=developer.mozilla.org&utm_campaign=guest_content&utm_term=https://www.digitalocean.com/community/tutorials/how-to-use-object-methods-in-javascript) ngăn chặn các thuộc tính mới được thêm vào một đối tượng, 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(). Làm mới bảng điều khiển của bạn trước khi triển khai mã bên dưới để tránh lỗi.

// 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: "*******"}

Cái mới active tài sản không được thêm vào đối tượng được niêm phong, nhưng password thuộc tính đã được thay đổi thành công.

Object.getPrototypeOf ()

[Object.getPrototypeOf()](https://www.codehub.vn/tim-kiem?q=Object.getPrototypeOf()&utm_medium=codehub.vn&utm_source=developer.mozilla.org&utm_campaign=guest_content&utm_term=https://www.digitalocean.com/community/tutorials/how-to-use-object-methods-in-javascript) được sử dụng để ẩn nội bộ [[Prototype]] của một đối tượng, cũng có thể truy cập thông qua __proto__ bất động sản.

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 employees mảng có quyền truy cập vào pop, findvà các phương thức mẫu thử khác của Array. Chúng tôi có thể xác nhận điều này bằng cách kiểm tra employees nguyên mẫu chống lại Array.prototype.

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

Outputtrue

Phương pháp này có thể hữu ích để có thêm thông tin về một đối tượng hoặc đảm bảo nó có quyền truy cập vào nguyên mẫu của một đối tượng khác.

Cũng có liên quan [Object.setPrototypeOf()](https://www.codehub.vn/tim-kiem?q=Object.setPrototypeOf()&utm_medium=codehub.vn&utm_source=developer.mozilla.org&utm_campaign=guest_content&utm_term=https://www.digitalocean.com/community/tutorials/how-to-use-object-methods-in-javascript) phương pháp sẽ thêm một mẫu thử nghiệm cho một đối tượng khác. Bạn nên sử dụng Object.create() thay vào đó vì nó nhanh hơn và hiệu quả hơn.

Phần kết luận

Các đối tượng có nhiều phương thức hữu ích giúp chúng ta sửa đổi, bảo vệ và lặp qua chúng. Trong hướng dẫn này, chúng tôi đã xem xét cách tạo và gán các đối tượng mới, lặp qua các khóa và / hoặc các giá trị của một đối tượng và đóng băng hoặc đóng dấu một đối tượng.

Nếu bạn cần xem lại các đối tượng JavaScript bạn có thể đọc "Hiểu đối tượng trong JavaScript"Nếu bạn muốn làm quen với chuỗi nguyên mẫu, bạn có thể xem"Hiểu nguyên mẫu và thừa kế trong JavaScript. "