JavaScript的循环方法及使用方式

//下面的循环方式都用obj做数据
var obj = [
            {
                id:1,
                text:"小明"
            },
            {
                id:2,
                text:"小红"
            },
            {
                id:3,
                text:"小亮"
            }
        ];

for循环

最常见最基础的循环方式，通过定义长度来实现循环的范围

// 最常见最基础的循环方式，通过定义长度来实现循环的范围
for(let i=0;i<obj.length;i++){
    // 通过下标来取数组中每一条对象
    console.log(obj[i])
}

forEach循环

forEach功能和for循环差不多，函数无返回值。在工作中通过数组加下标方式取数据比较麻烦，所以通过forEach方式可以更方便的拿到数据并处理。

obj.forEach((item,index,arr)=>{
    /**
     * @param {*item} 本次循环的值
     * @param {*index} 本次循环的下标
     * @param {*arr} 当前循环的对象
    */ 
    console.log(item,index,arr)
})

while循环

while循环和for循环本质一样，也需要结束条件，否则就会陷入死循环中

do...while() 循环和while循环的主要区别是：do{}while()循环最少能执行一次，而while可以一次都不执行

let i=0;  // 定义变量，为while循环的结束条件做准备
while(i++<obj.length){
    // 通过下标来取数组中每一条对象
    console.log(obj[i]) 
}

// while循环的另一种使用方式
// 注意：两个循环目前共用一个变量 i 
do{
    console.log(obj[i])
}while(i++<obj.length-1)

some循环

当循环的数组中有一条符合条件则立刻停止循环，并返回true,否则返回false

some(fn) fn函数包含三个参数：本次循环的值,本次循环的下标,当前循环的对象

let flag = obj.some(item=>item.id % 2 == 0)
console.log(flag)  // true

 every循环

当循环的数组中必须全部符合条件才能返回true,否则返回false

every(fn) fn函数包含三个参数：本次循环的值,本次循环的下标,当前循环的对象

let flag1 = obj.every(item=>item.id % 2 == 0)
console.log(flag1) // false

 for in 循环属于是for循环的加强版，不同的是会直接返回对象的键，而不会返回对象本身

for(let key in obj){
    // 循环是obj对象的长度，key:返回每个对象的键,数组会直接返回其下标。
    // 一般用来循环对象，此时利用obj[key]就可获取对象中每个属性的值了
    console.log(key)  // key:0 因为obj是数组，所有直接返回下标
}

for of循环和for in 循环差不多，业务方面不一样

for(let item of obj){
    // 循环obj对象的长度，item为每个对象的值
    console.log(item)
}

 filter循环

返回符合条件的新数组

filter(fn) fn函数包含三个参数：本次循环的值,本次循环的下标,当前循环的对象

let newArr = obj.filter((item,index,arr)=>{
    return i.id % 2 == 0;
})
console.log(newArr)  // [{id:2,text:"小红"}]

reduce循环

reduce适合做数字计算，如果想做条件筛选，请使用filter-API

obj.reduce(fn,init) fn:回调函数 init:累加的初始值 有返回值：累积的结果

reduceRight 、 reduce 这两个方法的唯一区别是，前者是有右到左循环，后者是从左到右循环

let total = obj.reduce((priv,item,index,arr)=>{
    console.log(priv,item,index,arr)
    /**
     * @param {*priv} 上一次返回的值
     * @param {*item} 本次循环的值
     * @param {*index} 本次循环的下标
     * @param {*arr} 当前循环的对象
    */ 
//    将id值相加，也可以将对象中其他属性相加，如每个对象中金额的累计
    return priv+=item.id;
},0)
console.log(total)  // 6

map循环

map 循环和forEach 一样，但是map循环会返回处理好的新数组，不会改变原来数组

let newArr = obj.map((item,index,arr)=>{
//     /**
//      * @param {*item} 本次循环的值
//      * @param {*index} 本次循环的下标
//      * @param {*arr} 当前循环的对象
//     */ 
    // 将数组中每次循环的值添加flag属性
    item["flag"] = true;
    return item;
})
console.log(newArr) // 如：obj=[{id:1,flag:true,text:"小明"}...]

 以上都是个人的工作小总结，也是个人的小笔记。如果哪里有不对的地方请各位大佬指出，我看到后一定加以改正，非常感谢。

其实for循环就可以代替所有的循环了，但是官方出这么多的循环方式，我想肯定是为了更好地提高开发效率，优化项目的性能。不过平常我们使用这些循环时一方面可能为了优雅，方便。更多的是为了与众不同（懂的都懂）吧，哈哈！！！