1、for
let arr = [1,2,3];
for (let i=0; i
if(i == 1){
//return 函数执行被终止 //break 循环被终止 continue; //循环被跳过 }
console.log(i,arr[i])
}
// 0 1// 2 3
最常见的循环,不过注意 这里我用的是let , 如果你使用var的话 那么会有一种名为变量提升的默认操作,详细 请见JavaScript之经典for循环取i
当然也有大神推荐这样写,可以提高效率
let i = 0 , len = arr.length ; i < len ; i++
2、for in
let obj = {name:'wj',age:'99'} ;
for(let i in obj){
console.log(i,obj[i])
}
// name wj// age 99
for in 循环主要用于遍历普通对象,i 代表对象的 key 值,obj[i] 代表对应的 value。
但此时的 i 输出为字符串形式,而不是数组需要的数字下标,这意味着在某些情况下,会发生字符串运算,导致数据错误,比如:'1'+1 = '11' 而不是我们需要的 2。
另外 for in 循环的时候,不仅遍历自身的属性,还会找到 prototype 上去,解决方法是在循环体内加一个判断, obj[i].hasOwnProperty(i),这样可以避免遍历出不需要的属性。在for循环与for in循环中,i值都会在循环结束之后保留下来,推荐使用let解决/或者自执行函数解决。
使用return,break,continue跳出循环都与for循环一致,不过关于return需要注意,在函数体中,return表示函数执行终止,就算是循环外面的代码,也不再继续往下执行。而break仅仅只是终止循环,后面的代码会继续执行。
3、while
let arr = [1,2,3];
let i = 0;
while (arr[i]) {
console.log(arr[i]);
i++;
}
// 1// 2// 3
其实它约等于for...
4、do while 循环
let i = 0;
do{
console.log(i)
i++;
}
while(i < 3)
// 0// 1// 2
其实它约等于whiledo-while循环至少执行一次循环
5、Array forEach
let arr = [1,2,3];
arr.forEach(function(item,index){
console.log(item,index)
})
// 1 0// 2 1// 3 2回调函数中有2个参数,分别表示值和索引,这一点与jQuery中的$.each相反
forEach无法遍历对象
forEach无法在IE中使用,firefox和chrome实现了该方法
forEach无法使用break,continue跳出循环,使用return时,效果和在for循环中使用continue一致
最重要的一点,可以添加第二参数,为一个数组,而且回调函数中的this会指向这个数组。而如果没有第二参数,则this会指向window。
arr.forEach(function(item,index){
this.push(value); //这里的this 指向newArr},newArr)
6、Array map()
let arr = [1,2,3];
let a = arr.map(function(i){
return i*2;
})
console.log(a);
// [2,4,6]
此方法返回一个新数组
7、Array filter()
let arr = [1,2,3];
let a = arr.filter(function(i){
return i > 1;
})
console.log(a);
// [2,3]
filter() 方法创建一个新的数组,不会改变原来的数组filter() 不会对空数组进行检测
8、Array some()
let arr = [1,2,3];
let a = arr.some(function(i){
return i>1;
})
console.log(a);
// true
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
9、Array every()
let arr = [1,2,3];
let a = arr.every(function(i){
return i>1;
})
console.log(a);
// false
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。
10、Array reduce() / Array reduceRight()
let arr = [1,2,3];
let a = arr.reduce(function(i,j){
return i+j;
})
console.log(a);
// 6
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右 / 从右到左)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
11、for of 循环
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)的数据结构,注意它的兼容性。
最后楼主分享一个小知识有三种能提升逼格的函数自执行的方式:
()()
!function() {}()
+function() {}()