JavaScript循环的几种写法

JavaScript中很多种循环的写法，不过有些运用场景不一样，下面来列举一下：

es5中：

• 普通for循环

for(var i=0;i<num;i++){
     do something...
}

• while循环

while(条件){
    do something... //当判断条件为真时执行，判断条件为假时跳出循环
}

• do while 循环

do {
    do something... //与while不同的是do-while循环至少执行一次，它是先执行后判断
}while(条件)

• for of 循环

//基本语法for(let val in arr)
var arr = [1,2,3,4,5]
for(let val of arr){
    console.log(val)
}

image.png

• for in 循环

//for in 一般用来遍历对象，不过他不是按照顺序进行输出的，
//先把当中的非负整数键提出来，排序好输出，然后将剩下的定义时的顺序输出
let obj = {
        'name':'jack',
        '2':'2',
        '1':'2',
        'say':'haha'
}
for(let key in obj){
      console.log(key+'----'+obj[key])
}

image.png

//for in 循环同样会遍历对象原型上的属性
    let obj = {
        'name':'jack',
        '2':'2',
        '1':'2',
        'say':'haha'
    }
    Object.prototype.age=12
    for(let key in obj){
        console.log(key+'----'+obj[key])
    }

image.png

• foreach() ----- 进行简单的遍历

// 分别对应：数组元素，元素的索引，数组本身
     var arr = ['a','b','c'];   
    arr.forEach(function(value,index,array){
        console.log(array)
        console.log(value+'--'+index);
    })

image.png

jq中：

• each()

//$.each( object, callback )   jQuery.each() 函数用于遍历指定的对象和数组
$.each([52, 97], function(index, value) {
    console.log(index + '--- ' + value);
});
//each遍历元素
//$(selector).each(function(index,element))

image.png

es6中：

• filter() ---- 过滤出符合条件的项 https://www.runoob.com/jsref/jsref-filter.html

//array.filter(function(currentValue,index,arr), thisValue)
//filter() 不会改变原始数组。
//例子:取出数组中大于10的项
  var arr = [1,5,15,20,8]
    var newArr= arr.filter(function(value){
        return value>10
    })
   console.log(newArr)//[15,20]

• some()
• every()

some()方法只要有一个满足就行，every（）方法要所有的满足才可以，即some（）：一真即真，every（）：一假即假，跟逻辑运算符差不多

 var arr = [1,5,15,20,8]
  var flag = arr.some(function(value){
        return value>10
    })
    console.log(flag)
//解析一下some()的过程
// value --1   flag ---undefined
// value --5   flag ---undefined
// value --15   flag ---true    跳出some循环
    var flag2 = arr.every(function(value){
        return value<10
    })
    console.log(flag2)
//解析一下every的过程
// value --1   flag ---undefined
// value --5   flag ---undefined
// value --15   flag ---false     跳出every循环

• map() ----映射

//1.map（）方法一定要有一个返回值，没有返回值的话就会返回一个undefined
//2.map（）方法的返回值是一个数组
//3.应用场景：要返回一个要利用原数组经过运算后的数组，
//或者是在一个对象数组中要拿到某一个属性，并且返回一个新数组的情况
    var arr = [1,5,15,20,8]
    var arr1 = arr.map(function(value){
        return value*2
    })
    console.log(arr1) // [2, 10, 30, 40, 16]
    var persons = [
        {'name':'jack','age':12},
        {'name':'rose','age':22},
    ]
    var names = persons.map(function(value){
        return value.name
    })
    console.log(names)//["jack", "rose"]

• reduce()

//1.使用reduce（）做一些简单的运算
//求arr所有项的和
     var arr = [1,5,15,20,8]
    var sum = arr.reduce(function(val1,val2){
        debugger
        return val1+val2
    },0)
    console.log(sum)
//过程解析：  reduce（）的第二个参数0，是自己设置的val1的初始值，因为是求和，所以设置为0
// 第一次：val1:0  val2:1  sum:undefined
// 第二次：val1:1  val2:5  sum:undefined
// 第三次：val1:6  val2:15  sum:undefined
// 第四次：val1:21  val2:20  sum:undefined
// 第五次：val1:41  val2:8  sum:49

//将一个对象数组中的某些属性的值抽出来，组成一个新的数组
  var colors = [
        {'color':'red'},
        {'color':'blue'},
        {'color':'yellow'}
    ]
    var colors2 = colors.reduce(function(colorArray,value){
        colorArray.push(value.color)
        return colorArray
    },[]) //colorArray初始化为空数组
    console.log(colors2)
//过程解析：
//第一次：colorArray：['red']
//第二次：colorArray：['red','blue']
//第三次：colorArray：['red','blue','yellow']