js for循环优化与替代

for 循环是前端非常常用的语句。然而大多数前端同学们写出来的for循环都是只达到满足功能需求的程度。
而随着前端承担的逻辑越来越多，考虑优化就变得很必要了~
本文将分两部分介绍for循环的优化，第一for循环本身写法优化，第二其他方法替代for循环。

一、for循环本身写法优化

1.跳出：

大多数前端同学们写嗨了是记不得要break与continue一下的。
尤其在遍历查找替换某些属性的时候，一定要记得跳出一下，避免不必要的操作。
（1）break 语句
作用：可跳出当前循环，继续执行该循环之后的代码。
代码：

for (i=0;i<10;i++){
  if (i==3) break;
  x=x + "The number is " + i + "<br>";
}
// 结果
// The number is 0
// The number is 1
// The number is 2

（2）continue语句
作用：中断当前循环中的当前迭代，继续循环中的下一个迭代。
代码：

for (i=0;i<=10;i++){
 if (i==3) continue;
  x=x + "The number is " + i + "<br>";
}
// 结果
// The number is 0
// The number is 1
// The number is 2
// The number is 4
// The number is 5
// The number is 6
// The number is 7
// The number is 8
// The number is 9

2.缓存变量：

当遍历一个数组时，如果每次循环都从数组中读取length的话来判断的话，必然造成效率浪费。
所以把length单独提出来缓存为一个变量会稍微提高那么一丢丢的性能。
代码：

const arr =[1,2,23,1000];  
const len = arr.length;
for(let i=0;i<len;i++) { 
  // doSometing(arr[i]);
} 

二、for循环的一些特定用途的替代方法

1.reduce（）：累加循环

语法：array.reduce(callback,[initialValue])
参数解释：
(1)callback：执行函数，包含四个参数（previousValue、currentValue、index、array)
(2)initialValue：初始值

const list=[
    {id:1,age:9},
    {id:2,age:14},
    {id:3,age:17},
    {id:4,age:1},
];
//计算大于10的人俗
const count = list.reduce((count,item)=>(
    item.age>10?count +1: count
),0);
console.log(count); //2

2.filter（）：过滤循环

语法：array.filter(callback[,thisArg])
参数解释：
(1)callback：执行函数，包含三个参数（currentValue、index、array)
(2)thisArg：执行callback时使用的this值

const list=[
    {id:1,age:9},
    {id:2,age:14},
    {id:3,age:17},
    {id:4,age:1},
];
//寻找年龄大于10的对象
const age10ID = list.filter(item=>(
    item.age>10
));
console.log(age10ID); 

3.map()，这个不想写了，平时都写腻了

4.every（）：检测所有元素 都 通过的循环

语法：array.every(callback[,thisArg])
参数解释：
(1)callback：执行函数，包含三个参数（currentValue、index、array)
(2)thisArg：执行callback时使用的this值

const list=[
    {id:1,age:9},
    {id:2,age:14},
    {id:3,age:17},
    {id:4,age:1},
];
//是否全部年龄都大于10
const result = list.every(item=>(
    item.age>10
));
console.log(result);  //false

5.some() ：和every相对，检测至少有一个元素通过的循环