js循环大全

1.while循环

var i = 1
while(i < 100 ) {
    console.log('i 当前为：' + i )
    i++
}

2.do-while循环

var x = 3
var y = 0
do {
    console.log(y)
    y++
} while(y<x)

3.for循环

使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果比较明显

var arrFor = [{name:'for1'},{name:'for2'},{name:'for3'},{name:'for4'},{name:'for5'}]
 for(var i=0,len=arrFor.length; i<len; i++){
     console.log(arrFor[i])
 }

4.foreach循环

遍历数组中的每一项，没有返回值，对原数组没有影响

var arrForeach =  [{name:'arrForeach1'},{name:'arrForeach2'},{name:'arrForeach3'},{name:'arrForeach4'},{name:'arrForeach5'}]
//1 没有返回值
//参数：value数组中的当前项, index当前项的索引, array原始数组；
//数组中有几项，那么传递进去的匿名回调函数就需要执行几次；
arrForeach.forEach((item,index,array)=>{
   //执行代码
    console.log(item)
    console.log(index)
    console.log(array)
})

5.map循环

// 有返回值，可以return出来
// map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；

var ary = [12, 23, 24, 42, 1];
var res = ary.map(function (item, index, ary) {
    return item * 10;
})
console.log(res);//-->[120,230,240,420,10];  原数组拷贝了一份，并进行了修改
console.log(ary);//-->[12,23,24,42,1]；  原数组并未发生变化

6.forof循环

可以正确响应break、continue和return语句

var arrForof = [{ name: 'forof1' }, { name: 'forof2' }, { name: 'forof3' }, { name: 'forof4' }, { name: 'forof5' }]
for (var value of arrForof) {
    console.log(value);
}

7.for…in循环

注意:for…in循环一般用于对象的遍历，但是这里有个坑需要注意

 // 任何对象都继承了Object对象，或者其他对象，继承的类的属性是默认不可遍历的，for...in循环遍历的时候会跳过，但是这个属性是
// 可以更改为可以遍历的，那么就会造成遍历到不属于自身的属性
var obj = {a: 1, b: 2, c: 3};
for(var i in obj) {
    console.log('键名：' , i)
    console.log('键值：' , obj[i])
}

8.filter循环

一、作用

  filter用于对数组进行过滤。
  它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
  注意：filter()不会对空数组进行检测、不会改变原始数组

二、语法

            Array.filter(function(currentValue, indedx, arr), thisValue)
            其中，函数 function 为必须，数组中的每个元素都会执行这个函数。且如果返回值为 true，则该元素被保留；

函数的第一个参数 currentValue 也为必须，代表当前元素的值。

三、实例

//返回数组nums中所有大于5的元素。
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = nums.filter((num) => {
    return num > 5;
});
console.log(res);  // [6, 7, 8, 9, 10]

9.every循环

一、作用

every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。

二、语法

    Array.every(function(item, index, array), thisValue)
   其中，函数 function 为必须，数组中的每个元素都会执行这个函数。

三、实例

//判断数组中所有值是否大于5。
   var arr = [ 1, 2, 3, 4, 5, 6 ]; 
   console.log( arr.every( function( item, index, array ){ 
                        return item > 5; 
               })); 

10.some循环

一、作用

    some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。

二、语法

   Array.some(function(item, index, array), thisValue)
   其中，函数 function 为必须，数组中的每个元素都会执行这个函数。

三、实例

 // 判断数组中是否有值大于5。
 var arr = [ 1, 2, 3, 4, 5, 6 ]; 
 console.log( arr.some( function( item, index, array ){ 
         return item > 5; 
 })); 

11.reduce循环&&reduceRight循环

一、作用

reduce()方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
reduceRight()方法接收一个函数作为累加器（accumulator），数组中的每个值（从右到左）开始缩减，最终为一个值。

二、语法

          arr.reduce(function(prev,cur,index,arr){
           ...
           }, init);
           其中，
           arr 表示原数组；
           prev 表示上一次调用回调时的返回值，或者初始值 init;
           cur 表示当前正在处理的数组元素；
           index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
           init 表示初始值。

三、实例

var arr = [3,9,4,3,6,0,9];
//1. 求数组项之和
var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);
//由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，
//相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

// 2. 求数组项最大值
var arr = [3, 9, 4, 3, 6, 0, 9];
 var max = arr.reduce(function (prev, cur) {
      console.log('prev' + prev)
      console.log('cur' + cur)
      return Math.max(prev, cur);
 });
 console.log(max)
//由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调。

//3. 数组去重
var arr = ['123', '123', '123', '1243', '123', '123', '123'];
var newArr = arr.reduce(function (prev, cur) {
    console.log(prev)
    console.log(prev.indexOf(cur))
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
}, []);
console.log(newArr)

/**实现的基本原理如下：
1， 初始化一个空数组
2, 将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中
3, 将需要去重处理的数组中的第2项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
4, ……
5, 将需要去重处理的数组中的第n项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
6, 将这个初始化数组返回**/

//4.数组对象中的用法 <!-- 比如生成“老大、老二和老三” -->
const objArr = [{name: '老大'}, {name: '老二'}, {name: '老三'}];
const res = objArr.reduce((pre, cur, index, arr) => {
    if (index === 0) {
        return cur.name;
    }
    else if (index === (arr.length - 1)) {
        return pre + '和' + cur.name;
    }
    else {
        return pre + '、' + cur.name;
    }
}, '');
//5.求字符串中字母出现的次数
const str = 'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';
 const res = str.split('').reduce((accumulator, cur) => {
     console.log(accumulator)
     console.log(cur)
     accumulator[cur] ? accumulator[cur]++ : accumulator[cur] = 1;
     return accumulator;
 }, {});
 console.log(res)
 
//6.数组转数组 <!-- 按照一定的规则转成数组 -->
var arr1 = [2, 3, 4, 5, 6]; // 每个值的平方
var newarr = arr1.reduce((accumulator, cur) => {accumulator.push(cur * cur); return accumulator;}, []);

//7.数组转对象 <!-- 按照id 取出stream -->
var streams = [{name: '技术', id: 1}, {name: '设计', id: 2}];
var obj = streams.reduce((accumulator, cur) => {accumulator[cur.id] = cur; return accumulator;}, {});

//8.多维的叠加执行操作
// 各科成绩占比重不一样， 求结果 
var result = [
    { subject: 'math', score: 88 },
    { subject: 'chinese', score: 95 },
    { subject: 'english', score: 80 }
    ];
var dis = {
    math: 0.5,
    chinese: 0.3,
    english: 0.2
};
var res = result.reduce((accumulator, cur) => dis[cur.subject] * cur.score + accumulator, 0);
// 加大难度， 商品对应不同国家汇率不同，求总价格 
var prices = [{ price: 23 }, { price: 45 }, { price: 56 }];
var rates = {
    us: '6.5',
    eu: '7.5',
};
var initialState = { usTotal: 0, euTotal: 0 };
var res = prices.reduce((accumulator, cur1) => Object.keys(rates).reduce((prev2, cur2) => {
    console.log(accumulator, cur1, prev2, cur2);
    accumulator[`${cur2}Total`] += cur1.price * rates[cur2];
    return accumulator;
}, {}), initialState);
console.log(res)

var manageReducers = function () {
    return function (state, item) {
        return Object.keys(rates).reduce((nextState, key) => {
            state[`${key}Total`] += item.price * rates[key];
            return state;
        }, {});
    }
};
var res1 = prices.reduce(manageReducers(), initialState);
console.log(res1)

// 9.对象数组去重
var arr = [{ id: 1, name: 'bob' }, { id: 1, name: 'bob' }, 
{ id: 1, name: 'bob' }, { id: 1, name: 'lucy' },
{ id: 1, name: 'lucy' }, { id: 2, name: 'lucy' }, { id: 2, name: '张三' }]
var arr1 = arr.reduce(function (prev, element) {
   if (!prev.find(el => el.id == element.id)) {
       prev.push(element)
   }
   return prev
}, [])
console.log(arr)
console.log(arr1) 

四.重点总结：

reduce() 是数组的归并方法，与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历，但是reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算，这一点是其他迭代方法无法企及的

12.find循环

一、作用

	find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined 

二、语法

function getStu(element){
   return element.name == '李四'
 }
 stu.find(getStu)
 stu.find((element) => (element.name == '李四'))

三、实例

var stu = [
	{
		name: '张三',
		gender: '男',
		age: 20
	},
	{
		name: '王小毛',
		gender: '男',
		age: 20
	},
	{
		name: '李四',
		gender: '男',
		age: 20
	}
	]
	function getStu(element){
		return element.name == '李四'
	}
	stu.find(getStu)
	stu.find((element) => (element.name == '李四'))

13.findIndex循环

一、作用

findIndex()对于数组中的每个元素，findIndex 方法都会调用一次回调函数（采用升序索引顺序），直到有元素返回 true。只要有一个元素返回 true，findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true，则 findIndex 返回 -1。

二、语法

[1,2,3].findIndex(function(x) { x == 2; });

三、实例

[1,2,3].findIndex(x => x == 4);

14.keys，values，entries循环

一、作用

     ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

二、实例

for (let index of ['a', 'b'].keys()) {
	console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
 	console.log(elem);
 }
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
	console.log(index, elem);
}
// 0 "a"
// 1 "b"