循环与遍历

主要介绍了 ECMAScript 下各种循环和遍历的语法，并了解在循环中跳出、终止

循环或者遍历

for循环
for...of
for...in
Array.forEach
Array.map
jQuery 的 each
while 循环

循环跳出或者终止

在 JS 中对于循环的终止、跳出等存在下面几种方式：

break: 用来终止循环，让循环不再往下继续。
continue : 跳出此次循环、继续下次循环。
return false ：只能在函数里面，返回结果，下面的语句不在执行； for 中循环会报错； jquery 中循环跳出需要使用 return false;

for 循环

var arr = [1, 2, 3, 4, 5, 6, 7, 8]

let forArr1 = []
for (var i = arr.length - 1; i >= 0; i--) {
  if (arr[i] === 4) {
    break
  }
  forArr1.push(arr[i])
}
console.log(forArr1.join("-")) // 8-7-6-5

let forArr2 = []
for (var i = arr.length - 1; i >= 0; i--) {
  if (arr[i] === 4) {
    continue
  }
  forArr2.push(arr[i])
}
console.log(forArr2.join("-")) // 8-7-6-5-3-2-1

let forArr3 = []
for (var i = arr.length - 1; i >= 0; i--) {
  if (arr[i] === 4) {
    return false
  }
  forArr3.push(arr[i])
}
console.log(forArr3.join("-")) // Uncaught SyntaxError: Illegal return statement

结论

对于 for 循环：

通过break去终止循环(不会继续后面的循环)
通过continue去跳出当前循环，继续后面的循环
return false 报错

Array.forEach

let forArr21 = [];
arr.forEach(item => {
	if (item === 4) {
		break;
	}
	forArr21.push(item);
});
console.log(forArr21.join('-')); // Illegal break statement
let forArr22 = [];
arr.forEach(item => {
	if (item === 4) {
		continue;
	}
	forArr22.push(item);
});
console.log(forArr22.join('-')); //  Illegal continue statement: no surrounding iteration statement
let forArr23 = [];
arr.forEach(item => {
	if (item === 4) {
		return false;
	}
	forArr23.push(item);
});
console.log(forArr23.join('-')); // 1-2-3-5-6-7-8

结论

对于 forEach 循环：

forEach用break、continue会报错
forEach()通过return 去跳出当前循环，继续后面的循环
如果需要终止循环，那么只能通过抛出异常去终止循环(需要捕获异常)

while 循环

let forArr21 = [],
  i = arr.length
while (i > -1) {
  i--
  if (arr[i] === 4) {
    break
  }
  forArr21.push(arr[i])
}
console.log(forArr21.join("-")) //8-7-6-5

let forArr23 = []
i = arr.length
while (i > -1) {
  i--
  if (arr[i] === 4) {
    continue
  }
  forArr23.push(arr[i])
}
console.log(forArr23.join("-")) // 8-7-6-5-3-2-1-

let forArr22 = []
i = arr.length
while (i > -1) {
  i--
  if (arr[i] === 4) {
    return
  }
  forArr22.push(arr[i])
}
console.log(forArr22.join("-")) // uncaught SyntaxError: Illegal return statement

结论

对于 while 循环：

通过break去终止循环(不会继续后面的循环)
通过continue去跳出当前循环，继续后面的循环
return false 报错

jQuery 的 each

$.each(arr, function(item, index) {
	if (item === 4) {
		continue;
	}
	forArr31.push(item);
});
console.log(forArr31.join('-')); // Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement

let forArr32 = [];

$.each(arr, function(item, index) {
	if (item === 4) {
		break;
	}
	forArr32.push(item);
});
console.log(forArr32.join('-')); // ncaught SyntaxError: Illegal break statement

let forArr33 = [];
$.each(arr, function(item, index) {
	if (item === 4) {
		return false;
	}
	forArr33.push(item);
});
console.log(forArr33.join('-')); // 0-1-2-3

let forArr34 = [];
$.each(arr, function(item, index) {
	if (item === 4) {
		return true;
	}
	forArr34.push(item);
});
console.log(forArr34.join('-')); // 0-1-2-3-5-6-7

结论

对于 forEach 循环：

jQuery 的 each用break、continue会报错
jQuery 的 each通过return true去跳出当前循环，继续后面的循环
jQuery 的 each通过return false去终止循环

jQuery 的 each 源码

each: function( obj, callback ) {
    var length, i = 0;
    if ( isArrayLike( obj ) ) {
        length = obj.length;
        for ( ; i < length; i++ ) {
            // 返回值为 false直接 break;  说明其也是使用的break;去终止循环
            // return true 其实是终止的函数后面的执行，而不是跳出当前循环
            if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                break;
            }
        }
    } else {
        for ( i in obj ) {
            if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                break;
            }
        }
    }
    return obj;
}

总结

对于 for 循环、while 循环都是通过 break 去终止循环、continue 跳出当前循环，不支持 return
对于 forEach 其只支持通过 return 去跳出当前循环。
对于 jQuery 的 each 其不支持 break、continue，但是通过 return 的返回值(true：跳出当前循环；false 终止循环)

循环与遍历 ​

for 循环 ​

Array.forEach ​

while 循环 ​

jQuery 的 each ​

总结 ​

循环与遍历

for 循环

Array.forEach

while 循环

jQuery 的 each

总结