Cách lấy tên thuộc tính của Object trong JavaScript

Cách lấy tên thuộc tính của Object trong JavaScript

adminBạn nghĩ gì về bài viết này?

Đôi khi, bạn muốn lấy tên thuộc tính trong một JavaScript.

Trong bài viết này, cùng mình học cách lấy tên thuộc tính của obj bằng JavaScript.

Cách lấy tên thuộc tính của Object trong JavaScript

Sử dụng phương thức Object.keys để lấy tên thuộc tính của Object trong JavaScript

Bạn có thể sử dụng phương thức Object.keys này để trả về một mảng các chuỗi tên thuộc tính.

Ví dụ, bạn có thể viết:

const obj = {
  a: 1,
  b: 2,
  c: 3
}
Object.keys(obj).forEach(key => {
  console.log(key)
  console.log(obj[key])
})Code language: JavaScript (javascript)

Tôi đã tạo đối tượng obj với các thuộc tính a, b và c.

Tiếp theo, tôi gọi Object.keys với obj để trả về các tên thuộc tính của obj dưới dạng chuỗi.

Sau đó, tôi gọi forEach với một cuộc gọi lại có tham số key với khóa của đối tượng được lặp.

Trong lệnh gọi lại, chúng tôi ghi nhật ký keyvà giá trị mà chúng tôi truy cập bằng obj[key].

Do đó, tôi nhận được:

a
1
b
2
c
3

Sử dụng vòng lặp for-in để lấy tên thuộc tính của Object trong JavaScript

Cách lấy tên thuộc tính của Object trong JavaScript

Bạn có thể lấy tên thuộc tính để khóa đối tượng bằng vòng lặp for-in.

Ví dụ, bạn có thể viết:

const obj = {
  a: 1,
  b: 2,
  c: 3
}
for (const key in obj) {
  console.log(key);
  console.log(obj[key]);
}Code language: JavaScript (javascript)

Tôi lấy khóa đối tượng từ biến vòng lặp key.

Và sau đó tôi nhận được khóa và giá trị trong phần thân vòng lặp theo cùng một cách.

Do đó, tôi nhận được:

a
1
b
2
c
3

như kết quả giống như ví dụ trước.

Vòng lặp for-in cũng lặp lại qua bất kỳ thuộc tính nào được kế thừa từ các đối tượng nguyên mẫu nên chúng ta có thể nhận được nhiều khóa hơn từ phương thức Object.keys.

Object.keys chỉ lấy các khóa thuộc tính từ các thuộc tính không được kế thừa.

Bài toán

Cho trước một đối tượng chứa các cặp key-value khác nhau. Trong đó, key là thuộc tính và value là giá trị của thuộc tính.

Bạn cần thay đổi một hoặc nhiều tên ban đầu của key bằng tên mới.

Ví dụ, ban đầu đối tượng chứa các cặp key-value như name: "Hello", v.v. Và mình cần thay đổi thuộc tính name thành firstName.

Trước khi đi vào các hướng giải quyết, mình hãy khai báo đối tượng sẽ sử dụng cho bài toán trên như sau:

let object = {
  name: "Hello",
  age: 20,
  gender: "Male",
};

console.log(object);
// { name: 'Hello', age: 20, gender: 'Male' }

Sau đây, hãy xem các cách để giải quyết vấn đề đã nêu trên.

Cách 1

Đây là cách tiếp cận khá đơn giản.

Trong cách này, mình sẽ trực tiếp lấy giá trị của name rồi thay đổi tên của thuộc tính đó bằng tên mới. Sau đó, mình xóa tên đã khai báo trước đó và thay thế bằng tên mới.

let object = {
  name: "Hello",
  age: 20,
  gender: "Male",
};

let renameObjectKey = (object) => {
  // gán giá trị của name vào thuộc tính `firstName`
  object.firstName = object.name;

  // xóa thuộc tính `name`
  delete object.name;
};

renameObjectKey(object);

console.log(object);
// {age: 20, gender: 'Male', firstName: 'Hello'}

Giả sử, bạn cần thay đổi thuộc tính age thành currentAge thì cách làm như sau:

let object = {
  name: "Hello",
  age: 20,
  gender: "Male",
};

let renameObjectKey = (object) => {
  // gán giá trị cũ vào thuộc tính mới
  object.firstName = object.name;
  object.currentAge = object.age;

  // xóa thuộc tính mới
  delete object.name;
  delete object.age;
};

renameObjectKey(object);

console.log(object);
// {gender: 'Male', firstName: 'Hello', currentAge: 20}Code language: JavaScript (javascript)

Tóm lại, với cách 1 thì kết quả thu được đã như mong muốn. Tuy nhiên có hai vấn đề là:

  • Vị trí các thuộc tính trong đối tượng đã bị thay đổi.
  • Khó mở rộng khi bạn cần thay đổi tên nhiều thuộc tính.

Cách 2

Trong cách 2, mình sẽ khai báo một hàm với đầy đủ tham số để giải quyết bài toán. Hàm này nhận vào hai tham số là:

  • keysMap là đối tượng với các cặp key – value tương ứng với tên cũ – tên mới.
  • object là đối tượng cần thay đổi key.

Bên trong hàm, mình sử dụng Object.keys() để trả về một mảng các key trong object.

Sau đó, mình dùng phương thức reduce kết hợp với toán tử spread để biến đổi object cũ thành đối tượng mới.

let object = {
  name: "Hello",
  age: 20,
  gender: "Male",
};

let renameKeys = (keysMap, object) =>
  Object.keys(object).reduce(
    (acc, key) => ({
      ...acc,
      ...{ [keysMap[key] || key]: object[key] },
    }),
    {}
  );

let result = renameKeys(
  {
    name: "firstName",
    age: "currentAge",
  },
  object
);

console.log(result);
// {firstName: 'Hello', currentAge: 20, gender: 'Male'}Code language: JavaScript (javascript)

Kết luận

Cách lấy tên thuộc tính của Object trong JavaScript

Bạn có thể sử dụng phương thức Object.keys hoặc vòng lặp for-in để lấy tên thuộc tính của Obj trong JavaScript.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận