JS中for循环的⼏种形式及区别
⽂章⽬录
JavaScript中常⽤的 for 循环⽅式有 for、for…in、forEach、for…of循环等。
for
⼀般格式
for(语句1; 语句2; 语句3 ){
执⾏代码
}
//语句 1 循环前执⾏，⼀般为初始变量
//语句 2 定义循环的运⾏的判断条件
//语句 3 在循环代码被执⾏后执⾏该语句`
js arguments
⽰例：
for(var i =0; i<array.length; i++){
每次代码执⾏都需要进⾏长度判断，浪费性能
}
优化：
for(var i=0, len=array.length; i<len ;i++){
暂存长度变量，只需进⾏⼀次长度计算
}
for…in…
⼀般格式
for(var i in cars){
typeof i;//string
}
描述
for…in… 为ES5标准，主要为获取对象的属性名，同样可以⽤来遍历数组元素。由于每次都需要搜索实例和原型属性，所以在性能上要⽐其他循环类型性能低，并且⾃⾝参数值是数组下标。适⽤于Array和Object。
for 与 for…in…对⽐
标准for循环中ｉ为 number 类型，⽽ for…in…中，i 表⽰的是数组的 key 是string类型，因为js中⼀切皆为对象。
for…in… ⽅法在遍历过程中会访问原型上的所有属性，如果扩展了js原⽣的Array类，则会影响遍历结果
Object.prototype.say ='zsl';
const array =[1,2,3,4,5,6,7,8,9];
for(let i in array){
console.log(array[i]);
}
//执⾏结果为：
123456789 zsl
因此建议不要⽤for in遍历数组，全部统⼀采⽤标准的for循环变量数组( 我们⽆法保证我们引⼊的js是否会采⽤prototype扩展原⽣的Array )；
同时，如果要对js的原⽣类扩展的时候，不要采⽤prototype。
forEach
forEach⽅法为ES5推出的另⼀种遍历数组的⽅法，forEach() ⽅法⽤于调⽤数组的每个元素，并将元素传递给回调函数。针对可迭代对象(Array, Map, Set, arguments等)
注意: forEach() 对于空数组是不会执⾏回调函数的。
描述
array.forEach(function(currentValue, index, arr), thisValue)
参数：
currentValue 必需。当前元素。
index        可选。当前元素的索引值。
arr            可选。当前元素所属的数组对象。
thisValue    可选。传递给函数的值⼀般⽤"this"值。如果这个参数为空，"undefined"会传递给"this"值。
对⽐
⽐起传统for循环，它不需要判断条件和计数器，写起来更加简便
forEach ⽅法没办法使⽤ break 语句跳出循环，或者使⽤return从函数体内返回
点我
输出结果：
index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25
有回调函数，但是没有return返回值
const array =[1,2,3,4,5,6,7,8,9];
const arrTest = array.forEach(function(value,index,arr){
value++;
//直接使⽤数组[下标]的形式更改时，则会影响原数组
//arr[index]++; 输出结果为[2, 3, 4, 5, 6, 7, 8, 9, 10]
return arr[index];
});
console.log(array,arrTest);
输出结果：
[1,2,3,4,5,6,7,8,9] undefined
for…of
for…of 为ES6中提出的循环机制，for…of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建⼀个迭代循环，调⽤⾃定义迭代钩⼦，并为每个不同属性的值执⾏语句。
const array1 =['a','b','c'];
for(const element of array1){
console.log(element);
}
输出结果：
"a""b""c"
描述
for(variable of iterable){
//statements
}
//variable 在每次迭代中，将不同属性的值分配给变量。
//iterable 被迭代枚举其属性的对象。
对⽐
对⽐ for in 以及 forEach ，for of 可以使⽤continue和breack来阻⽌循环，并且，⾃⾝参数就是数组中的值，但⽆法对对象属性进⾏循环；
⽀持数组的遍历，适⽤于类似于数组的对象，也⽀持字符串的遍历；
for…of循环可以⾃动遍历 Generator 函数时⽣成的Iterator对象，且此时不再需要调⽤next⽅法;
不适⽤于处理原有的原⽣对象。
const car={
name:{
product:'⼤众',
color:blue
}
};
for(let item of car){
console.log(item);
}
//执⾏结果：TypeError: jsonArray is not iterable

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。