Rate this post

Tóm tắt: trong hướng dẫn này, bạn sẽ tìm hiểu về các Object JavaScript và cách thao tác các thuộc tính Object một cách hiệu quả. Hãy cùng W3seo tìm hiểu về điều này.

Giới thiệu về Object trong javascript

Trong JavaScript, một Object là một tập hợp các cặp khóa-giá trị không có thứ tự. Mỗi cặp khóa-giá trị được gọi là một thuộc tính.

Khóa của một thuộc tính có thể là một chuỗi và giá trị của một thuộc tính có thể là bất kỳ giá trị JavaScript hợp lệ nào, ví dụ: một chuỗi, một số, một mảng và thậm chí là một hàm.

Khi một hàm là một thuộc tính của một Object, nó thường được gọi là một phương thức.

JavaScript cung cấp cho bạn nhiều cách để tạo một Object mới. Cách phổ biến nhất là sử dụng cú pháp theo nghĩa đen của Object.

Ví dụ sau tạo một Object empty bằng cách sử dụng cú pháp theo nghĩa đen của Object:

let empty = {};

Object person có hai thuộc tính firstName và lastName với các giá trị tương ứng là ‘John’ và ‘Doe’.

let person = {
    firstName: 'Tom',
    lastName: 'Jerry'
};

Khi một Object có nhiều thuộc tính, bạn sử dụng dấu phẩy (,) để phân tách chúng như ví dụ trên.

Xem thêm Toán tử so sánh trong JavaScript

Truy cập thuộc tính (properties)

Để truy cập thuộc tính của một Object, bạn sử dụng một trong hai ký hiệu: ký hiệu dấu chấm và ký hiệu dạng mảng.

  1. Ký hiệu dấu chấm (.)

Phần sau minh họa cách sử dụng ký hiệu dấu chấm để truy cập thuộc tính của một Object:

objectName.propertyName

Ví dụ: để truy cập thuộc tính firstName của Object person, bạn sử dụng biểu thức sau:

person.firstName

Ví dụ này tạo một Object người và hiển thị tên và họ cho bảng điều khiển:

let person = {
    firstName: 'Tom',
    lastName: 'Jerry'
};

console.log(person.firstName);
console.log(person.lastName);

Xem thêm Collections trong Java

  1. Ký hiệu dạng mảng ([])

Phần sau minh họa cách truy cập giá trị thuộc tính của Object thông qua ký hiệu dạng mảng:

objectName['propertyName']

Ví dụ:

let person = {
    firstName: 'Tom',
    lastName: 'Jerry'
};

console.log(person['firstName']);
console.log(person['lastName']);

Khi tên thuộc tính chứa khoảng trắng, bạn cần đặt nó bên trong dấu ngoặc kép. Ví dụ: Object địa chỉ sau có thuộc tính ‘building number’:

let address = {
    'building number': 3960,
    street: 'North 1st street',
    state: 'LA',
    country: 'USA'
};

Để truy cập thuộc tính ‘building number’, bạn cần sử dụng ký hiệu dạng mảng:

address['building number'];

Nếu bạn sử dụng ký hiệu dấu chấm, bạn sẽ gặp lỗi:

address.'building nnumber';

Lỗi:

SyntaxError: Unexpected string

Lưu ý rằng việc sử dụng dấu cách trong tên thuộc tính của một Object không phải là một phương pháp hay.

Đọc từ một thuộc tính không tồn tại sẽ dẫn đến không xác định. Ví dụ:

console.log(address.district);

Sẽ gây ra lỗi:

undefined

Xem thêm Tìm hiểu tấn công Mobile code object hijack

Sửa đổi giá trị của thuộc tính(properties)

Để thay đổi giá trị của một thuộc tính, bạn sử dụng toán tử gán (=). Ví dụ:

let person = {
    firstName: 'Tom',
    lastName: 'Jerry'
};

person.firstName = 'Alice';

console.log(person);

Trong ví dụ này, chúng tôi đã thay đổi giá trị của thuộc tính firstName của Object person từ ‘Tome’ thành ‘Alice’.

Xem thêm String JavaScript

Thêm properties mới vào một Object

Không giống như hầu hết các Object ở các ngôn nhữ khác, javaScript chúng ta có thể tùy biến và thay đổi các properties sau khi đã tạo.

Ví dụ câu lệnh sau thêm properties age vào Object person và gán giá trị 25 cho thuộc tính age:

person.age = 25;

Để xóa thuộc tính của một Object, bạn sử dụng toán tử xóa:

delete objectName.propertyName;

Ví dụ sau loại bỏ thuộc tính age khỏi Object person:

delete person.age;

Nếu bạn cố gắng truy cập lại thuộc tính độ tuổi, bạn sẽ nhận được một giá trị không xác định.

Kiểm tra xem thuộc tính có tồn tại không

Để kiểm tra xem một thuộc tính có tồn tại trong một Object hay không, bạn sử dụng toán tử in:

propertyName in objectName
let employee = {
    firstName: 'Peter',
    lastName: 'Doe',
    employeeId: 1
};

console.log('ssn' in employee);
console.log('employeeId' in employee);

Xem thêm Kiểm tra bảo mật – Insecure Direct Object Reference

Lặp lại các thuộc tính của một Object bằng cách sử dụng vòng lặp for … in

Để lặp lại tất cả các thuộc tính của một Object khi biết tên thuộc tính, bạn sử dụng vòng lặp for … in:

for(let key in object) { 
    // ...
}

Ví dụ: câu lệnh sau tạo một Object trang web và lặp lại các thuộc tính của nó bằng cách sử dụng vòng lặp for … in:

let website = {
    title: 'JavaScript Tutorial',
    url: 'https://www.websitehcm.net',
    tags: ['es6', 'javascript', 'css', 'html', 'react native']
};

for (const key in website) {
    console.log(key);
}

Xem thêm Browser Object Model

Phương thức(method)

Bên cạnh dữ liệu, các Object có thể có các hành động. Các hành động của các Object được gọi là các phương thức.

Phần sau thêm hành động greet() vào Object người:

let person = {
    firstName: 'Tom',
    lastName: 'Jerry'
};

person.greet = function () {
    console.log('Hello Every one!');
}
person.greet();

Trong ví dụ này, chúng tôi đã sử dụng một biểu thức hàm để tạo hàm và gán nó vào thuộc tính welcome của Object person.

Sau đó, chúng ta gọi hàm thông qua thuộc tính welcome là welcome ().

Bên cạnh việc sử dụng biểu thức hàm, bạn có thể định nghĩa một hàm và gán nó cho một Object như sau:

let person = {
    firstName: 'Tom',
    lastName: 'Jerry'
};

function greet() {
    console.log('Hello, World!');
}

person.greet = greet;

person.greet();

Trong ví dụ này, lời chào được định nghĩa là một hàm thông thường. Biểu thức person.greet = welcome chỉ định chức năng chào cho thuộc tính chào của Object person.

Xem thêm Object number JavaScript

Phương pháp viết tắt

Có thể xác định các phương thức của một Object bằng cách sử dụng cú pháp theo nghĩa đen của Object như thể hiện trong ví dụ sau:

let person = {
    firstName: 'Tom',
    lastName: 'Jerry',
    greet: function () {
        console.log('Hello, World!');
    }
};

ES6 cung cấp cho bạn cú pháp phương thức ngắn gọn cho phép bạn xác định phương thức cho một Object ngắn gọn hơn:

let person = {
    firstName: 'Tom',
    lastName: 'Jerry',
    greet() {
        console.log('Hello, World!');
    }
};

person.greet();

Cú pháp này trông gọn gàng và ít dài dòng hơn nhiều.

Giá trị This

Thông thường, các phương thức cần truy cập dữ liệu được lưu trữ trong Object.

Ví dụ: chúng ta có thể xây dựng phương thức trả về tên đầy đủ của đối tượng bằng cách ghép firstname và lastname.

this.propertyName

Bên trong phương thức, giá trị này tham chiếu đến Object được sử dụng để gọi phương thức. Do đó, chúng ta có thể truy cập properties Object bằng cách sử dụng phương thức getFullName():

let person = {
    firstName: 'Tom',
    lastName: 'Jerry',
    greet: function () {
        console.log('Hello, World!');
    },
    getFullName: function () {
        return this.firstName + ' ' + this.lastName;
    }
};
console.log(person.getFullName());

Hãy xem hướng dẫn này để biết thêm thông tin về giá trị này.

Xem thêm Variable – biến trong JavaScript

Kết luận Object trong javascript

Một Object là một tập hợp các cặp name – value.

Sử dụng ký hiệu dấu chấm (.) Hoặc ký tự ([]) để truy cập properties Object.

Toán tử Delete xóa một thuộc tính khỏi một Object.

Toán tử in kiểm tra properties có trong Object hay không.

For … in lặp qua các thuộc tính của một Object.

Khi các hàm là thuộc tính của một Object, chúng được gọi là các phương thức.

Sử dụng this bên trong phương thức để truy cập các thuộc tính của Object.

Xem thêm Global attribute trong html

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now