Developer javascript nên dừng lại for...in ngay bây giờ

Nội dung bài viết

For in javascript. Loop là một tips không thể tránh khỏi khi lập trình chức năng. Nhưng có khi nào bạn đã từng phạm phải những sai lầm mà tipjs chuẩn bị nói dưới đây, và cách khắc phục những vấn để đó như thế nào đây.

Yêu cầu người đọc

  • Hiểu về cơ bản javascript
  • Đã từng sử dụng loop, có thể là for

For in javascript

Thật ra vấn đề iterating trong lập trình thì tipjs cũng đã nói rất nhiều về những điều tích cực khi sử dụng for of trong javascript. Và tipjs cũng đã so sánh về for in và for of trong javascript. Nếu các bạn cảm thấy kiến thức mình khá hổng thì có thể đọc lại những bài trước, và sau đó tìm hiểu về những sai lầm khi sử dụng for in trong bài viết này.

JavaScript for...in dùng để lặp enumerable properties (enumerable properties có nghĩa là gì?) của một object như sau:

### with object
var player = {
    two: "Messi",
    one: "Ronaldo",
    zero: "AnonyStick"
};

var countdown = "";

for (var step in player) {
    countdown += player[step] + "\n";
}

console.log(countdown);
// => "Messi
//    Ronaldo
//   AnonyStick!
//    "

Bởi vì for in có thể hoạt động trên bất kỳ javascript object nào, vì vây chúng ta có thể sử dụng để loop một Array như ví dụ trên thì chúng ta có thể làm lại như sau:

### with array

var player = [
    "Messi",
    "Ronaldo",
     "AnonyStick"
]

var countdown = "";

for (var step in player) {
    countdown += player[step] + "\n";
}

console.log(countdown);
// => "Messi
//    Ronaldo
//   AnonyStick!
//    "

Notes: hai ví dụ khác nhau, bạn hãy nhìn kỹ, object và array. Nếu rảnh thì xem tiếp Javascript object array - when to Use Array and use object in javascript

Sai lầm đầu tiên sử dụng for in javascript

Array.prototype.voice = "Rooney"; //enumerable properties

var player = [
    "Messi",
    "Ronaldo",
     "AnonyStick"
] // ở đây có 3 item

var countdown = "";

for (var step in player) {
    countdown += player[step] + "\n";
}

console.log(countdown);
// xuât hiện 4 item.
//Messi
//Ronaldo
//AnonyStick
//Rooney


Nhiều bạn vẫn tinh ý và biết rằng có thể giải quyết được chuyện này đơn giản tại sao lại la hét lên đến vậy, đó là sử dụng hasOwnProperty.

Array.prototype.voice = "Rooney"; //enumerable properties

var player = [
"Messi",
"Ronaldo",
"AnonyStick"
] // ở đây có 3 item

var countdown = "";

for (var step in player) {
if (player.hasOwnProperty(step)) {
countdown += player[step] + "\n";
}
}

console.log(countdown);
//xuât hiện 3 item.
//Messi
//Ronaldo
//AnonyStick

Nhưng bạn giải quyết xong bạn có thể trơn tru mà mượt mà hơn không? Câu hỏi này để lại cho các bạn? 

Sai lầm thứ 2

Sắp xếp sai thứ tự khi loop được hoàn thành. Đó thực sự không phải là vấn đề đối với một object bình thường có giá trị vốn dĩ không có thứ tự. Nhưng có lẽ bạn không muốn công cụ JavaScript của mình trả lại các giá trị mảng theo thứ tự ngẫu nhiên, bởi vì bạn có thể nhận được kết quả không mong muốn như thế này:

Nếu bạn có thời gian để xem qua ecma-international.org tôi nghĩ bạn sẽ hiểu sâu hơn. Đó thực sự không phải là vấn đề đối với một đối tượng bình thường có giá trị vốn dĩ không có thứ tự. 

Nhưng có lẽ bạn không muốn công cụ JavaScript của mình trả lại các item của mẳng theo thứ tự ngẫu nhiên, bởi vì bạn có thể nhận được kết quả bất ngờ như thế này:

console.log(countdown);
// => "AnonyStick
//    Ronaldo
//    Messi
//    "

Sai lầm thứ 3 với lặp enumerable properties. 

Như chúng ta đã thảo luận trước đây, có thể lưu trữ các thuộc tính bổ sung trên một mảng. Điều này cũng có thể dẫn đến kết quả bất ngờ.

ví dụ:

var player = [
"Messi",
"Ronaldo",
"AnonyStick"
];

player.announcer = "Rooney";

var countdown = "";

for (var step in player) {
if (player.hasOwnProperty(step)) {
countdown += player[step] + "\n";
}
}

console.log(countdown);
// => "Messi
//Ronaldo
//AnonyStick
//Rooney

Bạn có thể tham khảo thêm ở adripofjavascript

Có thể bạn đã bị missing