JavaScript exploration: for-in loop (for-inLoops)

The for-in loop should be used to traverse non-array objects.

The for-in loop should be used to traverse non-array objects. the for-in loop is also called "enumeration ".

Technically, you can use a for-in loop array (because arrays in JavaScript are also objects), but this is not recommended. Because logical errors may occur if the array object has been enhanced by custom functions. In addition, in for-in, the Order (sequence) of the attribute list cannot be guaranteed. Therefore, it is best to use a normal for loop for arrays and a for-in loop for objects.

There is an important hasOwnProperty () method. When traversing object attributes, you can filter out attributes from the prototype chain.

Think about the following code:

// Object var man = {hands: 2, legs: 2, heads: 1 }; // somewhere in the Code // a method is added to all objects if (typeof Object. prototype. clone = "undefined") {Object. prototype. clone = function (){};}

In this example, we have an object named man defined using the object literal. A useful method named clone () is added to the object prototype somewhere after man's definition is complete. This prototype chain is real-time, which means that all objects can automatically access the new method. To avoid the clone () method when enumerating man, you need to apply the hasOwnProperty () method to filter the prototype attributes. If no filter is performed, the clone () function is displayed, which is not expected in most cases.

// 1. // for-in loop for (var I in man) {if (man. hasOwnProperty (I) {// filter the console. log (I, ":", man [I]) ;}/ * hands: 2 legs: 2 heads: 1 * // 2. // negative example: // for-in loop without checking hasOwnProperty () for (var I in man) {console. log (I, ":", man [I]);}/* console display result hands: 2 legs: 2 heads: 1 clone: function ()*/

Another way to use hasOwnProperty () is to cancel the method on Object. prototype. Like this:

For (var I in man) {if (Object. prototype. hasOwnProperty. call (man, I) {// filter the console. log (I, ":", man [I]) ;}}

The advantage is that the name conflict is avoided when the man object is redefined with hasOwnProperty. It also avoids all methods for searching objects with long attributes. You can use the local variable "cache" it.

Var I, hasOwn = Object. prototype. hasOwnProperty; for (I in man) {if (hasOwn. call (man, I) {// filter the console. log (I, ":", man [I]) ;}}

Strictly speaking, not using hasOwnProperty () is not an error. Based on the task and your confidence in the code, you can skip it to improve the speed of the loop. However, when you are not sure about the content of the current object (and its prototype chain), adding hasOwnProperty () is more secure.

Formatting changes (though JSLint) will directly ignore curly braces and place the if statement on the same line. The advantage is that loop statements read like a complete idea (each element has its own attribute "X" and what to do with "X ):

// Warning: JSLint cannot detect var I, hasOwn = Object. prototype. hasOwnProperty; for (I in man) if (hasOwn. call (man, I) {// filter the console. log (I, ":", man [I]);}

Additional reading

The topic list of this article is as follows:

1. How should we understand the working principle of the JavaScript engine?
2. JavaScript exploration: the importance of writing maintainable code
3. JavaScript exploration: exercise caution when using global variables
4. JavaScript exploration: var pre-parsing and side effects
5. JavaScript exploration: for Loop (for Loops)
6. JavaScript exploration: for-in loop (for-in Loops)
7. Exploring JavaScript: Prototypes is too powerful
8. JavaScript: eval () is the devil"
9. JavaScript exploration: Using parseInt () for Numerical Conversion
10. Exploring JavaScript: Basic coding specifications
11. JavaScript exploration: function declaration and function expression
12. JavaScript exploration: Name function expressions
13. JavaScript: function name in the debugger
14. JavaScript: JScript Bug
15. JavaScript exploration: Memory Management of JScript
16. Exploring JavaScript: SpiderMonkey's quirks
17. JavaScript exploration: an alternative solution to naming function expressions
18. JavaScript exploration: Object
19. JavaScript exploration: Prototype chain
20. JavaScript exploration: Constructor
21. JavaScript probing: executable context Stack
22. Execution context 1: Variable object and activity object
23. Execution context 2: Scope chain Scope Chains
24. Execution context 3: Closure Closures
25. Execution context 4: This pointer
26. Exploring JavaScript: Powerful prototype and prototype chain
27. JavaScript Functions 1: function declaration
28. JavaScript function 2: function expressions
29. JavaScript function 3: function expressions in a group
30. JavaScript function 4: function Constructor
31. JavaScript variable object 1: VO Declaration
32. JavaScript variable object 2: VO in different execution contexts
33. JavaScript variable object 3: two stages of execution Context
34. JavaScript variable object IV: Variables
35. Property of the JavaScript variable object __parent _
36. JavaScript scope chain 1: Scope chain Definition
37. JavaScript scope chain 2: function Lifecycle
38. JavaScript scope chain 3: Scope chain features
39. JavaScript closure 1: Introduction to closures
40. JavaScript closure 2: Implementation of closure
41. JavaScript closure 3: Closure usage

This article is available at http://www.nowamagic.net/librarys/veda/detail/1625.