1. for statement
The grammatical structure of the for statement is as follows:
for(initialize; test; increment) {
statement
}
The three values of initialize, test, and increment need to be separated by semicolons. They represent initialization operation, loop condition judgment, and counter variable update respectively. statement is the statement that needs to be executed in the loop.
1) Common usage
for (let i = 0; i < 10; i++) {
console.log(i)
}
2) Multi-statement usage
Each step can execute multiple statements.
for (let i = 0, j = 0; i < 10 && j < 5; i++, j++) {
console.log(i, j)
}
3) Default usage
Any operation can be omitted, but the two semicolons cannot be omitted.
let k = 0
for (; k < 5; k++) {
console.log(k)
}
And when the test operation is omitted, the program will fall into an infinite loop:
for (; ;) {
console.log(1)
}
4) The loop variable is not a number
Useful when traversing data structures such as linked lists:
// o是链表的头结点
for (; o.next; o = o.next) {
// 操作
}
2. for/in statement
The grammatical structure of the for/in statement is as follows:
for(variable in object) {
statement
}
variable: must be a value suitable for use on the left side of an assignment expression
- variable name.
- Variables declared by keywords such as var, let, const, etc.
- An expression that can yield an lvalue.
object: is an expression that evaluates to an object.
Traversing object property members
let object = {
name: '张三',
age: 25
}
for (const key in object) {
console.log(key)
}
Implementation process
104
executes the object expression first.
If the result is null or undefined, the loop is skipped.
If the result is a primitive value (a value of a basic data type, such as: Number, String, Symbol, Boolean), the primitive value will be converted into the corresponding wrapper object.
packaging object
The following is a slice method attribute called by data of type String.
Why is the data of String type not an object, but can use the access form of the object?
As long as the attribute in the string s is referenced, javascript will convert the string value into an object through the new String(s) method. This object inherits the method of the string and is used to handle the reference of the attribute. The data of Boolean and Number types are the same as above.
console.log('string'.slice(0, 4)) // stri
variable is an expression
let o = {
x: 1, y: 2, z: 3 }
let a = [], i = 0
for (a[i++] in o) {
console.log(a)
}
traverse range
The for/in statement does not traverse all properties of the object, only "enumerable" properties will be traversed.
The for/in statement will traverse all enumerable properties on the entire prototype chain, so the performance will be very poor and it is not recommended.
Although this statement can also traverse the array, it will also return all enumerable properties in the array, including enumerable properties on the prototype chain.
3. for/of statement
ES6 new statement.
The grammatical structure of the for/of statement:
for(varibale of Iterator) {
statement
}
iterate over the array
The following two methods are equivalent:
const arr = ['one', 'two', 'three']
let iterator = arr[Symbol.iterator]()
for (let v of iterator) {
console.log(v)
}
for (let v of arr) {
console.log(v)
}
traverse range
The for/of statement can traverse objects (not recommended), arrays, array-like objects (arguments and Dom nodeList objects), strings, Set, Map, and Generator objects.
When traversing an object, what is obtained is the key value of the object. When traversing the array, what is obtained is the value corresponding to the subscript.
4. What is the difference between for in and for of?
for...in gets the key name of the object. for...of traversal gets the key value of the object;
for...in will traverse the entire prototype chain of the object, the performance is very poor and it is not recommended to use it.
for...of only traverses the current object and does not traverse the prototype chain;
For array traversal, for...in returns all enumerable properties in the array (including enumerable properties on the prototype chain).
for...of only returns the attribute value corresponding to the subscript of the array;
Summary:
The for...in loop is mainly for traversing objects, not for traversing arrays; the for...of loop can be used for traversing arrays, array-like objects, strings, Sets, Maps, and Generator objects