Làm việc với các thuộc tính của Object trong JavaScript
Table Of Content
- 1. Truy cập thuộc tính
- Dot notation
- Bracket notation
- 2. Thêm hoặc cập nhật thuộc tính
- 3. Xóa thuộc tính
- 4. Kiểm tra sự tồn tại của thuộc tính
- 5. Liệt kê các thuộc tính
- `Object.keys()`
- `Object.values()`
- `Object.entries()`
- 6. Duyệt qua các thuộc tính
- 7. Sao chép và hợp nhất object
- Sao chép object
- Hợp nhất object
- 8. Đóng băng object
- 9. Ngăn chặn thêm mới thuộc tính
- 10. Lấy mô tả thuộc tính
- 11. Định nghĩa thuộc tính
- Kết luận
Trong JavaScript, object là một cấu trúc dữ liệu quan trọng giúp chúng ta quản lý dữ liệu dưới dạng cặp key-value. Các thuộc tính (properties) của object có thể được truy cập, chỉnh sửa, và quản lý bằng nhiều cách khác nhau. Trong bài viết này, chúng ta sẽ tìm hiểu các cách làm việc với object trong JavaScript.
1. Truy cập thuộc tính
Có hai cách chính để truy cập thuộc tính của object: dot notation và bracket notation.
Dot notation
const person = { name: 'John', age: 30 };
console.log(person.name); // John
Bracket notation
const person = { name: 'John', age: 30 };
console.log(person['name']); // John
2. Thêm hoặc cập nhật thuộc tính
Bạn có thể dễ dàng thêm hoặc cập nhật thuộc tính trong object bằng cách gán giá trị mới:
const person = { name: 'John' };
person.age = 30; // Thêm thuộc tính age
person.name = 'Jane'; // Cập nhật thuộc tính name
console.log(person); // { name: 'Jane', age: 30 }
3. Xóa thuộc tính
Để xóa thuộc tính khỏi object, bạn có thể sử dụng từ khóa delete
:
const person = { name: 'John', age: 30 };
delete person.age;
console.log(person); // { name: 'John' }
4. Kiểm tra sự tồn tại của thuộc tính
Sử dụng toán tử in
để kiểm tra xem một thuộc tính có tồn tại trong object hay không:
const person = { name: 'John', age: 30 };
console.log('age' in person); // true
console.log('height' in person); // false
5. Liệt kê các thuộc tính
Object.keys()
Trả về một mảng chứa tất cả các khóa (key) của object:
const person = { name: 'John', age: 30 };
console.log(Object.keys(person)); // ['name', 'age']
Object.values()
Trả về một mảng chứa tất cả các giá trị (value) của object:
console.log(Object.values(person)); // ['John', 30]
Object.entries()
Trả về một mảng chứa các cặp key-value dưới dạng mảng con:
console.log(Object.entries(person)); // [['name', 'John'], ['age', 30]]
6. Duyệt qua các thuộc tính
Sử dụng vòng lặp for...in
để duyệt qua các thuộc tính của object:
const person = { name: 'John', age: 30 };
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// Output:
// name: John
// age: 30
7. Sao chép và hợp nhất object
Sao chép object
Bạn có thể sao chép object bằng cách sử dụng Object.assign()
hoặc spread operator (...
):
const person = { name: 'John', age: 30 };
const copy = Object.assign({}, person);
// hoặc
const copy = { ...person };
Hợp nhất object
Để hợp nhất nhiều object với nhau, bạn có thể sử dụng Object.assign()
hoặc spread operator:
const person = { name: 'John' };
const details = { age: 30, job: 'Developer' };
const merged = Object.assign({}, person, details);
// hoặc
const merged = { ...person, ...details };
console.log(merged); // { name: 'John', age: 30, job: 'Developer' }
8. Đóng băng object
Sử dụng Object.freeze()
để đóng băng một object, ngăn không cho thay đổi hoặc thêm mới thuộc tính:
const person = { name: 'John', age: 30 };
Object.freeze(person);
person.age = 35; // Không thay đổi được
console.log(person); // { name: 'John', age: 30 }
9. Ngăn chặn thêm mới thuộc tính
Sử dụng Object.seal()
để ngăn không cho thêm thuộc tính mới nhưng vẫn cho phép chỉnh sửa các thuộc tính hiện tại:
const person = { name: 'John', age: 30 };
Object.seal(person);
person.age = 35; // Có thể cập nhật
person.height = 180; // Không thể thêm mới
console.log(person); // { name: 'John', age: 35 }
10. Lấy mô tả thuộc tính
Sử dụng Object.getOwnPropertyDescriptor()
để lấy thông tin về một thuộc tính cụ thể, bao gồm các mô tả như writable, enumerable, configurable:
const person = { name: 'John' };
const descriptor = Object.getOwnPropertyDescriptor(person, 'name');
console.log(descriptor);
// Output: { value: 'John', writable: true, enumerable: true, configurable: true }
11. Định nghĩa thuộc tính
Bạn có thể sử dụng Object.defineProperty()
để định nghĩa một thuộc tính với các đặc tả riêng:
const person = {};
Object.defineProperty(person, 'name', {
value: 'John',
writable: false, // Không thể thay đổi giá trị
enumerable: true, // Hiển thị khi duyệt qua object
configurable: false, // Không thể xóa thuộc tính
});
console.log(person.name); // John
person.name = 'Jane'; // Không thể thay đổi
console.log(person.name); // John
Kết luận
Làm việc với các thuộc tính của object là một kỹ năng quan trọng trong JavaScript. Việc hiểu rõ cách truy cập, thêm, sửa, xóa và quản lý thuộc tính sẽ giúp bạn xử lý dữ liệu hiệu quả hơn trong các dự án của mình.