Video học lập trình mỗi ngày

Nói về iterate trong javascript có rất nhiều cách để chúng ta có thể làm được điều đó như for, for ... in, for ... of. Thậm chí là reduce()... Nhưng bạn có biết vì sao javascript lại cung cấp nhiều method đến vậy, và nó có sự khác biệt gì. Trong bài viết này, chúng ta sẽ làm rõ những điều mà có thể bạn chưa hề biết.

For ... in

Đầu tiên chúng ta nói về for ... in. For ... in được sử dụng để được sử dụng để lặp lại trên tất cả các enumerable properties của một Object, bao gồm enumerable properties được kế thừa. Câu lệnh lặp này có thể được sử dụng với String, Array, or những object đơn giản, nhưng không phải với các object như Map() hoặc Set().

Nhân tiện đây bạn nào chưa hiểu về "enumerable properties object"? Tôi sẽ nói thêm một chút khi bài viết này kết thúc.

Example For ... in

for (let prop in ['a', 'b', 'c']) 
  console.log(prop);            // 0, 1, 2 (array indexes)

for (let prop in 'str') 
  console.log(prop);            // 0, 1, 2 (string indexes)

for (let prop in {a: 1, b: 2, c: 3}) 
  console.log(prop);            // a, b, c (object property names)

for (let prop in new Set(['a', 'b', 'a', 'd'])) 
  console.log(prop);            // undefined (no enumerable properties)

For ... of

For ... of được sử dụng để lặp qua các iterable objects, lặp lại các giá trị của chúng thay vì các thuộc tính của chúng. Câu lệnh lặp này có thể được sử dụng với các Array, String, Map hoặc Set object, nhưng nó không sử dụng trên những object đơn giản. Điều này có nghĩa là nó ngược với for ... in.

Cách đây mấy bài hôm trước, có một bài viết khá sâu về for ... of này. Bạn có thể đọc nó tại đây.  For ... of trong javascript đừng bỏ lỡ viên đá quý này 

Example For ... of

for (let val of ['a', 'b', 'c']) 
  console.log(val);            // a, b, c (array values)

for (let val of 'str') 
  console.log(val);            // s, t, r (string characters)

for (let val of {a: 1, b: 2, c: 3}) 
  console.log(prop);           // TypeError (not iterable)

for (let val of new Set(['a', 'b', 'a', 'd'])) 
  console.log(val);            // a, b, d (Set values)

forEach

forEach là một phương thức của Array prototype, cho phép bạn lặp lại các phần tử của một mảng. Trong khi forEach () chỉ lặp qua các mảng, nó có thể truy cập cả giá trị và chỉ mục của từng phần tử trong khi lặp.

Một điều chú ý ở đây, đó là forEach được sử dụng rộng rải nhưng vẫn có nhiều bất cập cho nên bạn có thể đọc những bài viết trước về cách sử dụng forEach() cụ thể hơn đó là Trời sinh ra for loop sao còn sinh array.forEach trong javascript? 

Example foreach

['a', 'b', 'c'].forEach(
  val => console.log(val)     // a, b, c (array values)
);

['a', 'b', 'c'].forEach(
  (val, i) => console.log(i)  // 0, 1, 2 (array indexes)
);

Enumerable properties object có nghĩa là gì?

Enumerable properties nó đơn giản có nghĩa là thuộc tính sẽ hiển thị nếu bạn lặp lại đối tượng bằng vòng lặp for..in hoặc Object.keys. Hãy xem xét một ví dụ đơn giản: Nói về object javascript

const obj = {
    purposeOfLife: 42,
}

Object.getOwnPropertyDescriptor(obj, 'purposeOfLife')

Object.getOwnPropertyDescriptor() trả về một đối tượng với các characteristics của property. Trong trường hợp của chúng tôi, nó sẽ return:

{
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
}

Như bạn đã thấy enumerable: true bởi vì mỗi new property có default enumerable: true

Nhưng nếu bạn muốn tạo một object có enumerable: false thì bạn làm thế nào? Để làm được điều đó bạn sẽ sử dụng method sau: Object.defineProperty()

Object.defineProperty(obj, 'flameWarTopic', {
    value: 'Angular2 vs ReactJS',
    configurable: true,
    writable: false,
    enumerable: false
});

Như đầu bài tôi đã nói rằng chúng ta nên tập trung vào chính vấn đề là phân biệt và khi nào nên sử dụng For ... in, for ... of và forEach(). Cho nên tôi chỉ dừng lại và giới thiệu gọn nhẹ cho bạn những tính năng trên. Nếu bài viết này giúp cho bạn, thì hãy giúp tôi share cho tất cả mọi người đều thấy. Xin cảm ơn!