Xử lý các đối tượng trong JavaScript với Object.assign, Object.keys và hasOwnProperty

Bài đăng này là một loại hành động giúp bạn khám phá một vài phương pháp rất hữu ích để giúp bạn quản lý các đối tượng của bạn trong JavaScript. Ta sẽ khám phá Object.keys , Object.prototype.hasOwnProperty và Object.assign mới hơn.

hasOwnProperty

hasOwnProperty là một phương thức có sẵn trên các cá thể đối tượng cho phép kiểm tra xem một đối tượng có thuộc tính trực tiếp trên cá thể của nó hay không. Đây là một ví dụ đơn giản sẽ minh họa điều này rất rõ ràng:

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

console.log('clown' in myObj); // true
console.log('valueOf' in myObj); // true

console.log(myObj.hasOwnProperty('clown')); // true
console.log(myObj.hasOwnProperty('valueOf')); // false

Object.keys

Phương thức tĩnh Object.keys trả về một mảng có các khóa thuộc tính trên một đối tượng:

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

console.log(Object.keys(myObj));

// ["clown", "police", "santa", "farmer"]

Object.keys có thể thực sự hữu ích trong việc cho phép sử dụng vòng lặp for… of trên một đối tượng:

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

for (let k of Object.keys(myObj)) {
  console.log(`Hey ${ myObj[k] }!`);
}

// "Hey 🤡!"
// "Hey 👮!"
// "Hey 🎅!"
// "Hey 👩‍🌾!"

Lưu ý trong mảng được trả về từ Object.keys, các khóa sẽ không nhất thiết phải theo thứ tự.

Object.assign

ES2015 (ES6) mang đến cho ta một phương thức tĩnh mới trên phương thức tạo đối tượng : Object.assign . Phương thức mới này cho phép dễ dàng sao chép các giá trị từ đối tượng này sang đối tượng khác. Lưu ý trong ví dụ sau cách ta sử dụng một đối tượng trống theo nghĩa đen và sao chép các thuộc tính từ myObj để tạo một đối tượng mới ( myObj3 ) là bản sao của myObj :

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

const myObj2 = myObj;

const myObj3 = Object.assign({}, myObj);

console.log(Object.is(myObj, myObj2)); // true

console.log(Object.is(myObj, myObj3)); // false

console.log(myObj3);

// Object {
//   clown: "🤡",
//   farmer: "👩‍🌾",
//   police: "👮",
//   santa: "🎅"
// }

Trong trường hợp bạn đang thắc mắc, Object.is là một phương thức được sử dụng để kiểm tra xem hai đối tượng có giống nhau hay không.

Lưu ý chỉ các thuộc tính có thể liệt kê của một đối tượng sẽ được sao chép qua Object.assign.

Đối số đầu tiên là đối tượng nguồn và các đối số tiếp theo là đối tượng nguồn. Bạn có thể chuyển nhiều đối tượng nguồn và các thuộc tính trùng lặp trong các nguồn được chuyển cuối cùng sẽ giành chiến thắng:

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

const myObj2 = Object.assign({}, myObj, {
  santa: '🎄',
  teacher: '👩‍🏫'
});

console.log(myObj2);

// Object {
//   clown: "🤡",
//   farmer: "👩‍🌾",
//   police: "👮",
//   santa: "🎄",
//   teacher: "👩‍🏫"
// }

Ngày nay với sự tương thích của Redux để quản lý trạng thái, Object.assign trở nên thực sự hữu ích để tạo các đối tượng hoàn toàn mới từ những đối tượng hiện có, cho phép bạn sao chép và mở rộng các đối tượng theo cách bất biến.

Phần thưởng: Object.freeze

Sử dụng Object.freeze để đóng băng nông một đối tượng để ngăn các thuộc tính của nó bị thay đổi. Lưu ý trong ví dụ sau đây về cách, sau khi sử dụng Object.free trên một đối tượng, ta không thể thay đổi một thuộc tính, thêm một thuộc tính mới hoặc xóa một thuộc tính:

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

myObj.clown = 'scary';
myObj.astronaut = '👨‍🚀';

Object.freeze(myObj);

myObj.clown = 'really scary';
myObj.student = '👩‍🎓';
delete myObj.santa;

console.log(myObj);

// Object {
//   clown: "scary",
//   farmer: "👩‍🌾",
//   police: "👮",
//   santa: "🎅",
//   astronaut: "👨‍🚀"
// }

Ngoài ra còn có một phương pháp hữu ích khác, Object.isFrozen , để biết liệu một đối tượng đã bị đóng băng hay chưa:

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

console.log(Object.isFrozen(myObj)); // false

Object.freeze(myObj);

console.log(Object.isFrozen(myObj)); // true

Lưu ý các đối tượng lồng nhau sẽ không tự động bị đóng băng bởi Object.freeze . Trong ví dụ sau, đối tượng động vật lồng nhau vẫn có thể thay đổi hoặc xóa các thuộc tính của nó ngay cả sau khi đối tượng chứa đã được đóng băng:

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾',
  animals: {
    cow: '🐄',
    rabbit: '🐇'
  }
}

Object.freeze(myObj);

delete myObj.animals.rabbit;
myObj.animals.cow = 'moo!';

console.log(myObj);

// Object {
//   clown: "🤡",
//   farmer: "👩‍🌾",
//   police: "👮",
//   santa: "🎅",
//   animals: {
//     cow: 'moo!'
//   }
// }

Để đóng băng sâu một đối tượng, thay vào đó ta sẽ phải đóng băng đệ quy bất kỳ thuộc tính đối tượng nào cũng là một đối tượng. Đây là một tiện ích tốt để làm cho việc đóng băng sâu trở nên dễ dàng.

👨‍🔬 Tái bút: Bạn cũng có thể quan tâm đến việc tìm hiểu về các phương thức Object.values & Object.entries mới.

Tags:

Các tin liên quan

Sử dụng Vòng lặp While và Vòng lặp Do ... Trong khi trong JavaScript
2017-09-27
Sử dụng Vòng lặp While và Vòng lặp Do ... Trong khi trong JavaScript
2017-09-27
Cách sử dụng câu lệnh Switch trong JavaScript
2017-09-11
Cách viết các câu lệnh có điều kiện trong JavaScript
2017-08-29
Hiểu các đối tượng trong JavaScript
2017-08-24
Cách sử dụng phương thức mảng trong JavaScript: Phương thức lặp lại
2017-08-15
Cách chuyển đổi kiểu dữ liệu trong JavaScript
2017-08-15
Cách sử dụng các phương thức mảng trong JavaScript: Phương thức Accessor
2017-08-14
Cách sử dụng phương thức mảng trong JavaScript: Phương thức đột biến
2017-08-10
Cách viết chương trình JavaScript đầu tiên của bạn
2017-08-02