1, for loop
|
1
2
3
4
5
6
7
|
let arr = [1,2,3];
for
(let i=0; i<arr.length; i++){
console.log(i,arr[i])
}
// 0 1
// 1 2
// 2 3
|
Js for loop is most commonly used in a circulation tool, often used to cycle through the array.
2, for in loop
|
1
2
3
4
5
6
|
let obj = {name:
'zhou'
,age:
'**'
}
for
(let i
in
obj){
console.log(i,obj[i])
}
// name zhou
// age **
|
for in the general circulation it is mainly used to traverse the object, key value i represents the object, obj [i] represents the corresponding value, when to use it to traverse an array, when in many cases can achieve the same effect, but you do not do it, this is risky, because i is the output string, instead of an array of numerical subscript required, which means that in some cases, string operations will occur, resulting in data errors, such as: '52' = 1 + '521' instead of the 53 we needed.
Also for in the cycle time, not only to traverse their properties, will also find prototype up, it is best to add is determined in a loop body, use obj [i] .hasOwnProperty (i), thus avoiding too many do not need to traverse property.
3, while circulation
The same cars traversing the array, the first method for loop
|
1
2
3
4
5
6
7
8
9
10
11
|
let cars=[
"BMW"
,
"Volvo"
,
"Saab"
,
"Ford"
];
let i=0;
for
(;cars[i];)
{
console.log(cars[i])
i++;
};
// BMW
// Volvo
// Saab
// Ford
|
Then while loop method
|
1
2
3
4
5
6
7
|
cars=[
"BMW"
,
"Volvo"
,
"Saab"
,
"Ford"
];
var
i=0;
while
(cars[i])
{
console.log(cars[i] +
"<br>"
)
i++;
};
|
We have found that they can achieve the same effect, are in fact the underlying process is the same, but the cycle can be defined for, condition determination, increment decrement operation into a condition where the implementation, the code looks convenient, only this only.
4, do while loop
|
1
2
3
4
5
6
7
8
9
|
let i = 3;
do
{
console.log(i)
i--;
}
while
(i>0)
// 3
// 2
// 1
|
do while loop is a variant of the while loop, which performs a first operation, before performing determination condition is true, then before proceeding, it is the end of the cycle false.
5, Array forEach loop
|
1
2
3
4
5
6
7
|
let arr = [1,2,3];
arr.forEach(
function
(i,index){
console.log(i,index)
})
// 1 0
// 2 1
// 3 2
|
forEach loop, each loop element of the array and take action, no return value, you can not know the length of the array, he has three parameters, only the first one is required, the representative value of the current index.
另外请注意，forEach 循环在所有元素调用完毕之前是不能停止的，它没有 break 语句，如果你必须要停止，可以尝试 try catch 语句，就是在要强制退出的时候，抛出一个 error 给 catch 捕捉到，然后在 catch 里面 return，这样就能中止循环了，如果你经常用这个方法，最好自定义一个这样的 forEach 函数在你的库里。
6、Array map()方法
|
1
2
3
4
5
6
|
let arr = [1,2,3];
let tt = arr.map(
function
(i){
console.log(i)
return
i*2;
})
// [2,4,6]
|
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
注意：map 和 forEach 方法都是只能用来遍历数组，不能用来遍历普通对象。
7、Array filter() 方法
|
1
2
3
4
5
|
let arr = [1,2,3];
let tt = arr.filter(
function
(i){
return
i>1;
})
// [2,3]
|
filter 方法是 Array 对象内置方法，它会返回通过过滤的元素，不改变原来的数组。
8、Array some() 方法
|
1
2
3
4
5
|
let arr = [1,2,3];
let tt = arr.some(
function
(i){
return
i>1;
})
// true
|
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）,返回 boolean 值，不改变原数组。
9、Array every() 方法
|
1
2
3
4
5
6
|
let arr = [1,2,3];
let tt = arr.some(
function
(i){
return
i>1;
})
// 检测数组中元素是否都大于1
// false
|
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供），返回 boolean 值，不改变原数组。
10、Array reduce()方法
|
1
2
3
4
5
|
let arr = [1,2,3];
let ad = arr.reduce(
function
(i,j){
return
i+j;
})
// 6
|
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
11、Array reduceRight()方法
|
1
2
3
4
5
|
let arr = [1,2,3];
let ad = arr.reduceRight(
function
(i,j){
return
i+j;
})
// 6
|
reduceRight()方法,和 reduce() 功能是一样的，它是从数组的末尾处向前开始计算。
12、for of 循环
|
1
2
3
4
5
6
|
let arr = [
'name'
,
'age'
];
for
(let i of arr){
console.log(i)
}
// name
// age
|
for of 循环是 Es6 中新增的语句，用来替代 for in 和 forEach，它允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构,注意它的兼容性。