目录
一、遍历数组的方法
1. for
2. while 和 do while
3. for of
4. for in
5. 达夫设备
6. forEach 和 map
7. filter、some、every、reduce、reduceRight
8. js库 jquery $.each 和 underscore _.each()
二、遍历对象的方法
1. for in
2. Object.keys(obj).forEach(function(key){console.log(key,obj[key]);});
3. Object.getOwnPropertyNames(obj).forEach
8. js库 jquery $.each 和 underscore _.each()
讲解及使用
一、遍历数组的方法
// 定义测试数组 var arr = ['关羽', '张飞', '赵云', '马超', '黄忠']; // var arr = new Array(1000000); /* for 循环 比较常用 大数据速度较高 会循环数组中的空值 */ for (let i = 0; i < arr.length; i++) { // console.log(arr[i]); } /* for of 循环 两千以下数据 for of 比 for 稍快点 会循环数组的空值 es6新增 一般可循环所有带有 Iterator 接口的对象 例如:数组、某些类似数组的对象、字符串、Set和Map结构 注意:对象不是可迭代对象,没有内置 Iterator */ for (let item of arr) { // console.log(item); } /* for in 循环数组性能偏差 使用较少 不会循环数组的空值 索引为字符串型数字 可能遍历出数组上的属性和方法 更适合遍历对象,不适合遍历数组 */ for (let key in arr) { // console.log(arr[key]); } /* while 和 do while 循环 使用较少 */ var wi = 0; while(wi < arr.length) { // console.log(arr[wi]) wi++; } var di = 0; do { // console.log(arr[di]); di++; } while(di < arr.length); /* 达夫设备 大数据下速度极快 数据量越大 优势越明显 上百万数据的不二选择 可读性差 数据少不适合 使用较少 原理:使用了两个while 第一个先循环余数,第二个在进行循环 */ // console.time('达夫设备'); var i = arr.length % 8; var dIndex = 0; while(i) { // console.log(arr[dIndex]); dIndex++; i--; } i = Math.floor(arr.length / 8); while(i) { // console.log(arr[dIndex]); dIndex++; // console.log(arr[dIndex]); dIndex++; // console.log(arr[dIndex]); dIndex++; // console.log(arr[dIndex]); dIndex++; // console.log(arr[dIndex]); dIndex++; // console.log(arr[dIndex]); dIndex++; // console.log(arr[dIndex]); dIndex++; // console.log(arr[dIndex]); dIndex++; i--; } // console.timeEnd('达夫设备'); /* forEach 数据量小时较for快 大数据较for慢 写法较for简单 不会循环数组的空值 属于数组的原型链的方法 */ arr.forEach((e, i)=>{ // console.log(e); }); /* map 遍历 和 forEach 的区别是返回一个操作后的数组 可用变量接收 速度不如for和forEach 不会循环数组中的空值 属于数组的原型链的方法 */ arr.map((e, i)=>{ // console.log(e,i) }); /* 常用js库方法遍历数组 都需要引入相应的库才可以使用 jquery中$.each underscore _.each() */ // $.each(arr, function(i, e){ // console.log(e); // }); // _.each(arr, (e, i, arrs)=>{console.log(e)}, 需要绑定的对象可选) /* 下面这些数组的方法可以遍历数组,但是一般不用来遍历数组,因为他们都有自己的的功能,在需要用到这些功能时才使用它们。 filter 遍历 返回一个符合条件的数组 可用变量接收 主要用于过滤 some():有一个满足条件,返回true,否则返回false; every():都满足条件,返回true,否则返回false; reduce() 和 reduceRight() 这两个方法都会实现迭代数组的所有项,返回一个最终值,一个从前到后,一个从后到前 第一个参数是函数 函数中可接收四个参数前一个值、当前值、项的索引和数组对象 第二个参数是初始值 可省略 */ var filterVal = arr.filter((e, i)=>{ // 一般会返回一个 Boolean 类型 用于判断是否符合条件 // console.log(e,i) return e === '张飞' }); // console.log(filterVal); // [ '张飞' ] var someVal = arr.some((e)=>{ return e === '黄忠' }); // console.log(someVal); // true var someVal = arr.every((e)=>{ return e === '黄忠' }); // console.log(someVal); // false var someVal = arr.reduce((prov, next)=>{ return prov+next }, '五虎将就是:'); // console.log(someVal); // 五虎将就是:关羽张飞赵云马超黄忠 var someVal = arr.reduceRight((prov, next, i, arrs)=>{ return prov+next }, '五虎将就是:'); // console.log(someVal); // 五虎将就是:黄忠马超赵云张飞关羽
二、遍历对象的方法
// 定义个测试对象 var obj = { name: '苏大强', age: 55, sex: '男', tv: '都挺好', book: '《作妖记》', children: ['苏明哲', '苏明成', '苏明玉'] }; /* for in 便利对象首选方法 */ for (const key in obj) { if (obj.hasOwnProperty(key)) { // console.log(key+':'+obj[key]); } } /* Object.keys(obj) + 数组循环或者普通循环 */ Object.keys(obj).forEach((e)=>{ // console.log(e+':'+obj[e]); }); /* Object.getOwnPropertyNames(obj) + 数组循环或者普通循环 */ Object.getOwnPropertyNames(obj).forEach((e)=>{ // console.log(e+':'+obj[e]); }); /* js库循环对象 需要引入相应库方可使用 jquery $.each() underscore _.each() */ // $.each(obj, (key, val) => { // console.log(key+':'+val); // }); // _.each(obj, (val, key, objs) => { // console.log(key+':'+val); // });
发表评论: