1. Làm thế nào để duyệt Object trong JavaScript

Trong những tình huống khác nhau, ta không chỉ muốn duyệt mảng mà cần cả việc duyệt qua các thành phần của đối tượng. Với việc duyệt mảng, mảng duyệt mảng là điều bình thường khi ta sử dụng for hoặc while . Và ta có một số giải pháp phổ biến để duyệt các đối tượng Js là:

  • Duyệt các thuộc tính đối tượng theo tên
  • Duyệt các thuộc tính đối tượng trong một vòng lặp
  • Duyệt Đối tượng bằng Object.values()
  • Duyệt Đối tượng bằng JSON.stringify()
  • …

Việc duyệt một đối tượng trong Js sẽ xuất ra [ object object ] .

Một demo nho nhỏ trước nhé:

<script>
const person = {
  name: "Thành",
  age: 19,
  city: "Hà Nội"
};

document.write(person);
</script>

2. Duyệt Object bằng for…in trong JavaScript

Để duyệt object trong Js, chúng ta sử dụng for in với cú pháp:

for (key in object ) {
   document.write(object[key]);
}

Trong đó:

  • object là đối tượng cần lấy thuộc tính
  • key là biến được sử dụng để gán lần lượt các tên thuộc tính của Object

Ví dụ:

<script>
let person = {
  name:'Thành',
  age:19,
  address:'Hà Nội'
};

for (key in person ){
  document.write(person [key]);
}
</script>

Chú ý

Tên thuộc tính khi lấy ra sẽ ở dạng chuỗi. Dù có nhiều phương pháp truy cập thuộc tính của object trong Js nhưng lại không thể dùng toán tử chấm (.) . Ta không thể dùng theo kiểu object.key khi duyệt object. Nếu dùng thì Js sẽ không thể xác định được key và trả về giá trị undefined .

Ví dụ:

<script>

let person= {
  name:'Thành',
  age:19,
  address:'Hà Nội'
};

for (key in person){
  document.write(person.key);
}
</script>

3. Duyệt các thuộc tính đối tượng trong JavaScript

Các thuộc tính của một đối tượng có thể được duyệt dưới một dạng chuỗi.

<script>
const person = {
  name: "Thành",
  age: 19,
  city: "Hà Nội"
};

document.write(person.name + ", " + person.age + ", " + person.city);
</script>

Các thuộc tính của một đối tượng cũng có thể được duyệt qua một vòng lặp.

<script>
const person = {
  name: "Thành",
  age: 19,
  city: "Hà Nội"
};

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
};

document.write(txt);
</script>

Lưu ý

Như đã lưu ý ở trên nhưng mình vẫn muốn note lại một chút. Ta sẽ phải sử dụng person [x] trong vòng lặp vì person.x sẽ không hoạt động.

4. Duyệt đối tượng bằng Object.values ​​() và JSON.stringify ()

Bất kỳ đối tượng Js nào cũng có thể được chuyển đổi thành một mảng bằng cách sử dụng Object.values() . Nó sẽ trả về một mảng các giá trị của những thuộc tính đếm được trong object đã cho.

Ví dụ:

const person = {
  name: "Thành",
  age: 19,
  city: "Hà Nội"
};

const myArray = Object.values(person);

myArray bây giờ là một mảng Js, sẵn sàng được duyệt:

<script>
const person = {
  name: "Thành",
  age: 19,
  city: "Hà Nội"
};

document.write(Object.values(person));
</script>

Object.values() đã được hỗ trợ trong tất cả các trình duyệt chính kể từ năm 2016.

Với JSON.stringify() cũng tương tự như Object.values()

Ví dụ:

<script>
const person = {
  name: "Thành",
  age: 19,
  city: "Hà Nội"
};

document.write(JSON.stringify(person));
</script>

Kết quả sẽ luôn là một chuỗi theo sau ký hiệu JSON:

{“name”: “Thành”, “age”: 19, “city”: “Hà Nội”}

JSON.stringify() được bao gồm trong Js và được hỗ trợ trong tất cả các trình duyệt chính.

5. Duyệt đối tượng bằng prototype.valueOf()

Khi duyệt đối tượng bằng prototype.valueOf() nó sẽ trả về giá trị nguyên thủy của một object xác định.

Ví dụ:

<script>
function MyAge(age) {
    this.age = age;
};

MyAge.prototype.valueOf  = function () {
    return this.age;
};

const myAge = new MyAge(20);
document.write('Tuổi của tôi là ', myAge - 1);
</script>

6. Duyệt đối tượng bằng prototype.toString()

Khi duyệt đối tượng bằng prototype.toString() nó sẽ trả về chuỗi đại diện cho object .

Cú pháp: obj.toString()

obj = new Object();
document.write(obj.toString()); // [object Object]

Ta có thể sử dụng prototype để ghi đè phương thức toString() .

<script>
function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
};

person = new Person();

Person.prototype.toString = function objToString() {
    return 'Đây là chuỗi ghi đè';
}
document.write(person.toString());
</script>