整理JavaScript循环数组和对象的方法
众所周知,常用的循环语句有for、while、do-while、for-in,forEach以及jQuery中提供的循环的方法;以及ES6中提供的很多用来循环对象的方法如map,
在 Javascript 中,当某些条件得到满足时,用 break 语句来中断一个循环的运行。(请注意,也用 break 语句退出一个 switch 块。参见 Javascript 条件语句)。如果是一个 for 或者 for...in 循环,在更新计数器变量时使用 continue 语句越过余下的代码块而直接跳到循环的下一次重复中。
//数组长度 let len = 200; //准备测试数组 let arr = new Array(); for (let i = 0 ; i < len; i++){ arr.push("abc"+i); }
第一部分:循环数组的方法
1、for循环
//正向for循环 for(let i = 0, len = arr.length; i < len; i++){ let value = arr[i]; } //反向for循环 for(let i = arr.length; i > 0; i--){ let value = arr[i]; }
2、while循环
let i = 0; let len = arr.length; while(i < len){ let value = arr[i]; i++; }
3、do-while循环
let i = 0; let len = arr.length; do{ let value = arr[i]; i++; }while(i < len);
4、for-in循环
//循环数组时for-in循环相对性能很差,其主要用于循环对象。 for(let item in arr){ let value = item; }
5、forEach方法
//这个方法执行是没有返回值的,对原来数组也没有影响; //forEach方法中的this是原数组,匿名回调函数中的this默认是window; let res = arr.forEach((val, ind, input)=>{ let value = val; //数组的每一项的值 let index = ind; //数组的索引值 let array = input; //原数组 input[ind] = val*10; //可以改变原数组 }) console.log(arr);//原数组已经改变 console.log(res);//undefined
6、map方法
//map:和forEach非常相似,都是用来遍历数组中的每一项值的,用来遍历数组中的每一项; //区别:map的回调函数中支持return返回值; //return的是什么,相当于把数组中的这一项变为什么 //(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了); //不管是forEach还是map 都支持第二个参数值,第二个参数的意思是把匿名回调函数中的this进行修改。 let res = arr.map((val, ind, input)=>{ let value = val; //数组中的每一项的值 let index = ind; //数组的索引 let array = input; //原数组 return val*10; //数组中的每一项return出去为map方法的返回值 }) console.log(arr);//原数组未改变 console.log(res);//原数组改变后的数组
注:不管是forEach还是map在IE6-8下都不兼容(不兼容的情况下在Array.prototype上没有这两个方法),那么需要我们自己封装一个都兼容的方法,代码如下:
/** * forEach遍历数组 * @param callback [function] 回调函数; * @param context [object] 上下文; */ Array.prototype.myForEach = function myForEach(callback,context){ context = context || window; if('forEach' in Array.prototye) { this.forEach(callback,context); return; } //IE6-8下自己编写回调函数执行的逻辑 for(var i = 0,len = this.length; i < len;i++) { callback && callback.call(context,this[i],i,this); } } /** * map遍历数组 * @param callback [function] 回调函数; * @param context [object] 上下文; */ Array.prototype.myMap = function myMap(callback,context){ context = context || window; if('map' in Array.prototye) { return this.map(callback,context); } //IE6-8下自己编写回调函数执行的逻辑 var newAry = []; for(var i = 0,len = this.length; i < len;i++) { if(typeof callback === 'function') { var val = callback.call(context,this[i],i,this); newAry[newAry.length] = val; } } return newAry; }
7、jQuery中遍历数组的方法$.each()
$.each(arr, (ind, val)=>{ let index = ind;//数组中每一项的索引 let value = val;//数组中每一项的值 })
第二部分:循环对象的方法
//对象中键值对个数 let len = 200; //准备测试数组 let obj = new Object(); for (let i = 0 ; i < len; i++){ obj[`index${i}`] = `value${i}`; }
1、for-in用来遍历非数组对象
for(let ind in obj){ let index = ind; //对象中的每一项的键名 let value = obj[ind]; //对象中的每一项的值 }
2、jQuery中遍历对象的方法$.each()
$.each(obj, (ind, val)=>{ let index = ind; //对象中每一项的键名 let value = val; //对象中每一项的值 })
3、ES6新提供的对象的遍历方法
(未完待续。。。)