JavaScript中常用for循环区别（for,for in,for of,map,foreach）

大家都知道JS中的常用遍历数组的方式有for , fo in,for of , map ,foreach，但他们之间的区别是什么呢，在这里博主进行了一个区分：
一：
for循环，最常用的循环，也是写起来较为麻烦的，以分号相隔开，第一个参数是初始变量，第二个参数是判断条件，第三个参数是步长

for(let i = 0;i<0;i++){
但还可以进行优化，因为每次都要判断长度毫无疑问的浪费了性能
}

对标准for循环进行优化

for(let i =0,len = arr.length;i<len;i++){
//这样一来，我们将长度以一个临时变量的方式暂存，只需要获取一次数组的长度即可
}

二：
foreach循环，是ES5推出的另一种遍历数组的方法，比起传统for循环，它不需要判断条件和计数器，写起来更加简便，但缺点是无法使用continue和breack来组织数组的遍历，否则会报错

array.foreach((value,index,arr)=>{
})

实例：直接更改回调函数中的第一个参数不会影响原数组

const array = [1,2,3,4,5,6,7,8,9];
array.forEach((value,index,arr)=>{
    value++;
});
console.log(array);
//执行结果：依然是[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

//但如果直接使用数组[下标]的形式更改时，则会影响原数组
const array = [1,2,3,4,5,6,7,8,9];
array.forEach((value,index,arr)=>{
    arr[index]++;
});
console.log(array);
//执行结果为[ 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

实例：虽然有回调函数，但是foreach并没有返回值

const array = [1,2,3,4,5,6,7,8,9];
const arrTest = array.forEach((value,index,arr)=>{
    arr[index]++;
    return arr[index];
});
console.log(array,arrTest);
//执行结果为：[ 2, 3, 4, 5, 6, 7, 8, 9, 10 ] undefined

三：
map循环，和foreach相近，同样都有回调函数，第一个参数是元素值，第二个参数是下表，第三个参数是数组本身，并且第一个参数的更改不会影响到原数组；但不同的是,map循环有返回值，返回的是一个新数组

const array = [1,2,3,4,5,6,7,8,9];
const arrTest = array.map((value,index,arr)=>{
    value++;
    arr[index]++;
    return arr[index];
});
console.log(array,arrTest);
//执行结果为：[ 2, 3, 4, 5, 6, 7, 8, 9, 10 ] [ 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

四：
for in 循环是es5中不仅可以遍历数组元素还可以遍历对象属性的方法,由于每次都需要搜索实例和原型属性，所以在性能上要比其他循环类型性能低,并且自身参数值是数组下标

const array = [1,2,3,4,5,6,7,8,9];
const jsonArray = {
    name:{
        product:'雪饼',
        age:24
    }
};
for(let i in array){
    console.log(array[i]);
}
for(let i in jsonArray){
    console.log(jsonArray[i]);
}
//执行结果：
1
2
3
4
5
6
7
8
9
{ product: '雪饼', age: 24 }

实例：虽然能够遍历对象，但同时也会访问原型上的所有属性，如果在某种程度上进行了扩展，则回影响遍历结果

Object.prototype.say = 'zzw';
const array = [1,2,3,4,5,6,7,8,9];
for(let i in array){
    console.log(array[i]);
}
//执行结果为：
1
2
3
4
5
6
7
8
9
zzw

五：
for of是es6中出现的另一种循环机制，比起for in和foreach,for of可以使用continue和breack来阻止循环，并且，自身参数就是数组中的值，但无法对对象属性进行循环

const array = [1,2,3,4,5,6,7,8,9];
for(let item of array){
    console.log(item);
}
//执行结果：	
1
2
3
4
5
6
7
8
9

实例：无法对对象进行循环，会报错

const array = [1,2,3,4,5,6,7,8,9];
const jsonArray = {
    name:{
        product:'雪饼',
        age:24
    }
};
for(let item of jsonArray){
    console.log(item);
}
//执行结果：TypeError: jsonArray is not iterable

六：
filter循环，有返回值，通常用于过滤数组元素并返回，不会影响原数组

const array = [1,2,3,4,5,6,7,8,9];
const s= array.filter((item)=>{
    return item>1;
});
console.log(s);
//执行结果：[ 2, 3, 4, 5, 6, 7, 8, 9 ]

七：
some循环，有返回值，但返回的都是boolean类型，通常用于判断条件，只要有一项满足即返回true，否则返回false

const array = [1,2,3,4,5,6,7,8,9];
const s = array.some((item)=>{
  return item>9  
});
console.log(s);
//执行结果：false

const array = [1,2,3,4,5,6,7,8,9];
const s = array.some((item)=>{
  return item>8  
});
console.log(s);
//执行结果：true

JavaScript中常用for循环区别（for,for in,for of,map,foreach）

猜你喜欢