js 中的多种循环

js中有很多种循环方式，但是实际开发中很多人却总局限于for、forEach、for...in等基础的循环，根据需求不同使用不同的循环，可以让开发事半功倍

1.for 最常用的循环

关于for循环：for(初始化;条件;迭代) { 执行 }
执行顺序：初始化-条件-执行-迭代-条件-执行-迭代...

//从0开始依次递增 0 1 2 3...9
for(var i=0;i<10;i++){}
//从10开始依次递减 10 9 8 7...1
for(var i=10;i>0;i--){}

2.forEach

Array.forEach(function(item,index,arr){
//item:当前循环项  index:当前循环索引  arr:数组本身
})

3.each

$("div").each(function(index,item){
//index:当前循环索引  item:当前循环项
})
$.each(Array,function(index,item){
//index:当前循环索引  item:当前循环项
})

4.for...in

for...in本身是为对象构建的，不建议数组使用

var obj = {a:1, b:2, c:3};
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}
//obj.a = 1
//obj.b = 2
//obj.c = 3

5.for...of

for...of是ES6新增的循环方法，与for...in类似，但不可循环对象

6.map (不会改变原始数组)

Array.map(function(item,index,arr){
//item:当前循环项  index:当前循环索引  arr:当前元素属于的数组对象
})

7.filter (不会改变原始数组)

返回数组，包含了符合条件的所有元素，如果没有符合条件的元素则返回空数组

var array=[1,2,3,4,5,6];
array.filter(function(item,index,arr){
//item:当前循环项  index:当前循环索引  arr:当前元素属于的数组对象
    return item>2
})

8.every (不会改变原始数组)

用于检测数组所有元素是否都符合指定条件

var array=[1,2,3,4,5,6];
array.every(function(item,index,arr){
//item:当前循环项  index:当前循环索引  arr:当前元素属于的数组对象
    return item>1
})
//false

9.some (不会改变原始数组)

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测

var array=[1,2,3,4,5,6];
array.some(function(item,index,arr){
//item:当前循环项  index:当前循环索引  arr:当前元素属于的数组对象
    return item>2
})

10.find (不会改变原始数组)

返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined

var array=[{"name":"张三","sex":1},{"name":"李四","sex":2},{"name":"王五","sex":1}];
array.find(function(item,index,arr){
//item:当前循环项  index:当前循环索引  arr:当前元素属于的数组对象
    return item.sex==2
})
//{name: '李四', sex: 2}

11.reduce

接收一个函数作为累加器，执行每个数组元素的函数

Array.reduce(function(total,item,index,arr){
//total:初始值,或者计算结束后的返回值  item:当前循环项  index:当前循环索引  arr:当前元素属于的数组对象
},初始值)

reduce用途很多，如：求和，取最值，去重等
一、求和
var arr = [3,9,4,3,6,0,9];
var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);

二、取最值
var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

三、去重
var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);

12.switch case

用于基于不同的条件来执行不同的动作

switch (new Date().getDay()) {
    case 0:
        day = "星期天";
        break;
    case 1:
        day = "星期一";
         break;
    case 2:
        day = "星期二";
         break;
    case 3:
        day = "星期三";
         break;
    case 4:
        day = "星期四";
         break;
    case 5:
        day = "星期五";
         break;
    case 6:
        day = "星期六";
}