SonTran's avatar
Son Tran
TIPS

Làm việc với các thuộc tính của Object trong JavaScript

Làm việc với các thuộc tính của Object trong JavaScript
0 views
5 min read
#TIPS

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.