Nội dung
- Yêu cầu - Object.create () - Object.keys () - Object.values () - Object.entries () - Object.assign () - Object.freeze () - Object.seal () - Object.getPrototypeOf () - Kết luận

Thứ sáu, 03/08/2018 | 00:00 GMT+7

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

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

Tất cả các đối tượng trong JavaScript đều giảm xuống từ hàm tạo Object mẹ. Object có nhiều phương thức tích hợp hữu ích mà ta có thể sử dụng và truy cập để làm việc với các đối tượng riêng lẻ một cách đơn giản. Không giống như các phương thức nguyên mẫu của mảng 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 phương thức khởi tạo Object và sử dụng cá thể đối tượng làm tham số. Đây được gọi là một phương thức tĩnh.

Hướng dẫn này sẽ trình bày về các phương thức đối tượng tích hợp sẵn quan trọng, với mỗi phần bên dưới đề cập đến một phương thức cụ thể và cung cấp một ví dụ về cách sử dụng.

Yêu cầu

Để 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, bạn có thể xem lại bài viết này trong bài viết “ Hiểu đối tượng trong JavaScript ”.

Để có thêm hướng dẫn về JavaScript nói chung, bạn có thể xem lại loạt bài Cách viết mã trong JavaScript của ta .

Object.create ()

Phương thức Object.create() được sử dụng để tạo 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ó.

Ta có thể tạo một thể hiện đối tượng job và mở rộng nó sang 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();

Output
The barista position is hourly and is accepting applications.

Đối tượng barista 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 đều có sẵn thông qua nguyên mẫu. Object.create() rất hữu ích để giữ cho mã KHÔ bằng cách giảm thiểu sự trùng lặp.

Object.keys ()

Object.keys() tạo một mảng chứa các khóa của một đối tượng.

Ta có thể tạo một đối tượng và in mảng 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 dùng để lặp lại 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}`); });

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

Object.keys cũng hữu ích để 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);

Output
4

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

Object.values ()

Object.values() 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ả về dữ liệu từ một đối tượng.

Object.entries ()

Object.entries() 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 ta có mảng cặp khóa / giá trị, ta có thể sử dụng phương thức 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}`); });

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 đối tượng chứ 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() được sử dụng để sao chép các giá trị từ đối tượng này sang đối tượng khác.

Ta 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 đoạn mã dưới đây, ta sẽ sửa đổi cách ta khai báo character thông qua hợp nhất các đối tượng 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 lây lan này trong các nghĩa đen đối tượng còn gọi là nhân bản nông.

Object.freeze ()

Object.freeze() ngăn việc sửa đổi các thuộc tính và giá trị của một đối tượng, đồng thời ngăn các thuộc tính được thêm vào hoặc xóa 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, ta đã cố gắng overrides password hunter2 bằng ******* , nhưng thuộc tính password vẫn giữ nguyên. Ta 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() có sẵn để xác định xem một đối tượng đã bị đóng băng hay chưa và trả về một Boolean.

Object.seal ()

Object.seal() ngă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 thức này tương tự như Object.freeze() . Làm mới console 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: "*******"}

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

Object.getPrototypeOf ()

Object.getPrototypeOf() được sử dụng để lấy [[Prototype]] ẩn bên trong của một đối tượng, cũng có thể truy cập thông qua thuộc tính __proto__ .

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

const employees = ['Ron', 'April', 'Andy', 'Leslie'];  Object.getPrototypeOf(employees);

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

Ta có thể thấy trong kết quả rằng nguyên mẫu của mảng employees có quyền truy cập vào các phương thức nguyên mẫu của mảng pop , find và khác. Ta có thể xác nhận điều này bằng cách thử nghiệm nguyên mẫu employees dựa trên Array.prototype .

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

Output
true

Phương pháp này có thể hữu ích để lấy 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.

Ngoài ra còn có một phương thức Object.setPrototypeOf() có liên quan sẽ thêm một nguyên mẫu vào một đối tượng khác. Bạn nên sử dụng Object.create() để thay thế vì nó nhanh hơn và hiệu quả hơn.

Kết luận

Các đối tượng có nhiều phương thức hữu ích giúp ta sửa đổi, bảo vệ và lặp lại chúng. Trong hướng dẫn này, ta đã 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 giá trị của một đối tượng và đóng băng hoặc niêm phong 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 các đối tượng trong JavaScript ”. Nếu bạn muốn tự làm quen với chuỗi nguyên mẫu, bạn có thể xem phần “ Hiểu về nguyên mẫu và kế thừa trong JavaScript ”.

Tags:

Các tin liên quan

Xử lý lỗi trong JavaScript Sử dụng try ... catch
2018-08-03
Hiểu sự kiện trong JavaScript
2018-06-19
Lập lịch tác vụ trong JavaScript Sử dụng setTimeout & setInterval
2018-06-12
Hiểu các lớp trong JavaScript
2018-05-04
Truy cập API Rails trong ứng dụng khách JavaScript bằng Rails Ranger
2018-03-15
Hiểu các biến, phạm vi và lưu trữ trong JavaScript
2018-02-20
Tìm hiểu Nguyên mẫu và Kế thừa trong JavaScript
2018-01-12
Khám phá đối tượng ngày JavaScript
2017-12-06
chuỗi con so với chuỗi con trong JavaScript
2017-11-06
Hiểu Ngày và Giờ trong JavaScript
2017-10-19