js循环语句,html for循环

1.while循环varI=1while(I100 ) console.log ) I现在是(I ) I )2.do-while循环varx=3vary=0do ) console.log

vararrfor={name:'for1'}、{name:'for2'}、{name3360'for3'}、{name3360'for4'}、{name3360} ilen I ) { console.log (arr for [ I ] )4. foreach循环遍历数组中的所有项目，无返回值，不影响原始数组

vararrforeach={ name : ' arr foreach1' }、{name:'arrforeach2'}、{name3360'arrforeach3'}，如果{name:} //数组中有几个项，则传递的匿名回调函数需要执行几次arrforeach.foreach((item，index，array ) )//执行代码控制台

//map回调函数支持return返回值的return是什么，就相当于为什么更改了数组中的本节。 (不影响原始数组，只是克隆了一个原始数组，并更改了克隆的此部分数组中的对应项。）

varary=[ 12，23，24，42，1 ]； varres=ary.map (功能(item，index，ary ) { return item * 10； )控制台. log (RES； //- [ 120，230，240，420，10 ]；复制了原始数组并修改了console.log(Ary )。 //- [ 12，23，24，42，1 ]；原始数组未更改6.forof循环正确响应break、continue和return语句

vararrforof={ name : ' foro f1 ' }、{name:'foroF2'}、{name3360'foroF3'}、{name3360'foroF4'}.

//任何对象都继承了Object对象或其他对象。默认情况下，继承类的属性是不可遍历的。 for.in循环遍历时跳过，但如果可以更改为//可遍历，则不属于自身的属性var obj={a: 1，b: 2，遍历到c: 3}的for(varIinobj )、console.log (键名)、I (console.log )键值)、obj[i] )8.filter循环一，作用filter 通过检查指定数组中满足条件的所有元素来创建新数组。注意： filter (不检测空数组，不更改原始数组) 2、语法array.filter (function (current value，indedx，arr )，其中函数thisValue ) 函数的第一个参数currentValue也是必需的，表示当前元素的值。

三.返回实例//数组nums中大于5的所有元素。 let nums=[ 1，2，3，4，5，6，7，8，9，10 ]； letRES=nums.filter((num )={ return num 5； )；控制台. log (RES； //6、7、8、9、10 ) every循环1、作用every ) )对数组中的各个项目执行规定的函数，如果该函数对各个项目返回true，则返回true。二、语法array.every(function(item，index，array )，thisValue )，其中函数function是必需的，数组中的每个元素运行该函数。三、判断实例//数组中的所有值是否大于5。 vararr=[ 1，2，3，4，5，6 ]； console.log(arr.every(function ) item、index、arra

y ){ 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: 'ggdxy'}];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.数组转对象 var streams = [{name: '技术', id: 1}, {name: '设计', id: 2}];var obj = streams.reduce((accumulator, cur) => {accumulator[cur.id] = cur; return accumulator;}, {});//8.ttdbb的叠加执行操作// 各科成绩占比重不一样，求结果 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: '失眠的可乐' },{ id: 1, name: '失眠的可乐' }, { id: 2, name: '失眠的可乐' }, { id: 2, name: 'mmydfh' }]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 == 'kndbm' } stu.find(getStu) stu.find((element) => (element.name == 'kndbm')) 三、实例 var stu = [{name: 'mmydfh',gender: '男',age: 20},{name: '王小毛',gender: '男',age: 20},{name: 'kndbm',gender: '男',age: 20}]function getStu(element){return element.name == 'kndbm'}stu.find(getStu)stu.find((element) => (element.name == 'kndbm')) 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// 1for (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"