Javascript learning notes-Detailed description of the in Operator

I. Judgment
Syntax
Prop in objectName
If the object pointed to by objectName contains the property or key value of prop, The in operator returns true.
Copy codeThe Code is as follows:
Var arr = ['one', 'two', 'three ', 'four'];
Arr. five = '5 ';
0 in arr; // true
'One' in arr; // false. Only the key value of the array can be determined.
'Five' in arr; // true, 'five' is the property of the arr object.
'Length' in arr; // true

Prototype chain
The in operator queries the given prop attributes on the entire prototype chain.
Copy codeThe Code is as follows:
Object. prototype. sayHello = 'hello, world ';
Var foo = new Object ();
'Sayhello' in foo; // true;
'Tostring' in foo; // true;
'Hasownproperties' in foo; // true;

Object and literal volume
The in operator varies with the object and Number of Certain types.
Copy codeThe Code is as follows:
Var sayHelloObj = new String ('hello, World ');
Var sayHello = 'hello, world ';
Var numObj = new Number (1 );
Var num = 1;

'Tostring' in sayHelloObj; // true
'Tostring' in sayHello; // Type Error

'Tostring' in numObj; // true
'Tostring' in num; // The type is incorrect.

The reason is that the following figure shows an introduction to String object and word volume conversion in MDN, which can be explained as follows:


Because JavaScript automatically converts between string primitives and String objects, you can call any of the methods of the String object on a string primitive. javaScript automatically converts the string primitive to a temporary String object, callthe method, then discards the temporary String object. for example, you can use the String. length property on a string primitive created from a string literal
Try to understand this: Because in is an operator rather than a method, the string literal cannot be automatically converted to a String object, because the in operator is not an object but a string (according to Douglas, only the object-like type), a type error is reported.

Ii. Traversal

The for... in loop Statement, which is commonly used, must follow another set of syntax specifications:

For (variable in object)
Statement
Unlike using in as an operator,... the in loop statement only traverses user-defined attributes, including the Custom Attributes on the prototype chain, rather than the built-in (build-in) attributes, such as toString.

Object
Copy codeThe Code is as follows:
Function Bird (){
This. wings = 2;
This. feet = 4;
This. flyable = true;
}
Var chicken = new Bird ();
Chicken. flyable = false;
For (var p in chicken ){
Alert ('chicken. '+ p +' = '+ chicken [p]);
}

String object. After testing, Firefox, Chrome, Opera, and Safari all provide comments. Only Internet Explorer provides 'more' and 'World'
Copy codeThe Code is as follows:
Var str = new String ('hello ');
Str. more = 'World ';
For (var p in str ){
Alert (p); // 'more', 4
Alert (str [p]); // 'World', 'h', 'E', 'l', 'l', 'O'
}

Literal
Traverse the key values and attributes of the array literal
Copy codeThe Code is as follows:
Var arr = ['one', 'two', 'three ', 'four'];
Arr. five = 'five ';
For (var p in arr ){
Alert (arr [p]); // 'one', 'two', 'three ', 'four', 'five'
}

Although a type error is reported when the in operator is used before the string literal, the following code can run normally. in this case, the IE browser does not sound clear.
Copy codeThe Code is as follows:
Var str = 'hello ';
Str. more = 'World ';
For (var p in str ){
Alert (p); // 0, 1, 2, 3, 4
Alert (str [p]); // 'h', 'E', 'l', 'l', 'O'
}

To sum up
Although ECMA has such specifications, there are still differences between browsers. In view of this, it is not recommended to use... in to traverse strings, we do not recommend traversing arrays. (as shown in the example, adding custom attributes to arrays will cause traversal to be messy)

In terms of object traversal, we can also use the built-in hasOwnProperty () method of the object to exclude attributes on the prototype chain to further speed up the traversal and improve performance.
Copy codeThe Code is as follows:
Function each (object, callback, args ){
Var prop;
For (prop in object ){
If (object. hasOwnProperty (I )){
Callback. apply (prop, args );
}
}
}