js 数组遍历符合条件跳出循环体_JavaScript 中的循环遍历方法

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() {}()