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

Đô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  ab 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ý  key và 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

Leave a Reply

Your email address will not be published.