Javascript study notes-detailed explanation of in operator_javascript skills

1. Judgment
Syntax
prop in objectName
If the object pointed to by objectName contains the prop attribute or key value, the in operator will return true.

Copy code The 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 judged
'five' in arr;//true,'five' is a property of the arr object
'length' in arr;//true

Prototype chain
in operator The given prop attribute

will be queried on the entire prototype chain. Copy the code The code is as follows:

Object.prototype.sayHello = 'hello,world';
var foo = new Object();
'sayHello' in foo;//true;
'toString' in foo;//true;
'hasOwnProperty' in foo;//true;

Objects and literals
The in operator does not work well when dealing with objects and literals of certain types (String, Number) Same as

Copy code The 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;//Type error

The reason is that I found this introduction on String objects and literal conversion in MDN, which seems to explain this reason:


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, calls the 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 it this way: because in is an operator rather than a method, the string literal cannot be automatically converted into a String object, and because the query object of the in operator is not an object but a String (according to veteran Douglas, it is just an object-like type), so a type error is reported.

2. Traversing

is a very commonly used for...in loop statement. The in in this statement needs to follow another set of grammatical specifications:

for (variable in object)
statement
Different from using in alone as an operator, the for...in loop statement only traverses user-defined attributes, including custom attributes on the prototype chain, without Built-in properties, such as toString, will be traversed.

Object

Copy code The 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, tested Firefox , Chrome, Opera, and Safari browsers all give the results in the comments, only IE browser only gives 'more' and 'world'

Copy code The code is as follows:

var str = new String('hello');
str.more = 'world';
for(var p in str){
alert(p);//'more',0,1,2,3,4
alert(str[p]);//'world','h','e' ,'l','l','o'
}

Literal
Traverse the key values ​​and attributes of the array literal

Copy code The 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'
}

Traverse the string literal. Although using the in operator in front of the string literal alone will report a type error, the following code can run normally. At this time, the IE browser It is silent

Copy code The 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'
}

General
Although ECMA has specifications in this regard, there are still differences between browsers. In view of this, it is not recommended to use for...in to traverse strings, nor is it recommended to traverse arrays (as shown in the example) Indicates that if you add custom attributes to the array, the traversal will be messed up)

In terms of traversing objects, we can also use the object’s built-in method hasOwnProperty() to exclude properties on the prototype chain to further speed up the traversal. , improve performance

Copy code The code is as follows:

function each(object, callback, args) {
var prop;
for( prop in object ){
if( object.hasOwnProperty( i ) ){
callback.apply( prop, args );
}
}
}