1 遍历数组的方法

1-1、for / while

最普通的循环 效率最高 兼容ie6
tips:for循环更适用于循环的开始和结束已知,循环次数固定的场合;while循环更适合于条件不确定的场合

1-2、for in

兼容ie6,效率最差(效率可看最下面的对比) for in 会把继承链的对象属性都会遍历一遍,所以会更花时间.

var arr = ['red', 'green', 'blue'];
var obj = {name:'张三',age:20
}<!-- 循环对象 -->
for(k in obj){console.log(k); //name  , age console.log(obj[k]);  // 张三 , 20
}<!-- 循环数组 -->
for(k in arr){console.log(k);   // 0   , 1   ,2  console.log(arr[k]); // red, green ,blue
}

1-3、for of  es6语法

ie不兼容  【for-of 语句只遍历可迭代对象的数据。】原生具备 Iterator 接口的数据结构如下。ArrayMapSetStringTypedArray函数的 arguments 对象NodeList 对象更多迭代器 阅读:http://es6.ruanyifeng.com/#do...

var arr = ['red', 'green', 'blue'];for(var v of arr) {console.log(v); // red green blue
}

区别:for of 和 for in的区别for-in 语句以原始插入顺序迭代对象的可枚举属性。for-in会把继承链的对象属性都会遍历一遍,所以会更花时间.

2、数组自带的循环方法:

every 、 filter、forEach、map、reduce、some 都是兼容ie9
map,filter 是返回新的数组 (形象区分几个循环方法的区别参考:https://www.zhihu.com/questio...)

2-1、Array.prototype.every()

方法说明:测试数组的所有元素是否都通过了指定函数的测试。 遇到有不满足的会提前终止整个循环
场景:检测每一项的selected字段都是被选中为true
案例:

var arr = [{id:1,name:"zhangsan1",selected:false},{id:2,name:"zhangsan2",selected:false},{id:3,name:"zhangsan3",selected:true},
];var reslut = arr.every(function(el,index,arr){console.log(el);return el.selected==true;
});console.log(reslut);  //false

2-2、Array.prototype.filter()  

方法说明: 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。true表示保留该元素(通过测试),false则不保留
场景:在一个数组中筛选数字大于10的元素,组成一个新数组
案例:

var arr = [10,20,30
];var arr1 = arr.filter(function(el,index,arr){return el > 10;
});console.log(arr1);  // 20 30

2-3、Array.prototype.forEach()
 
方法说明:方法对数组的每个元素执行一次提供的函数    没有办法中止或者跳出 forEach 循环,除了抛出一个异常。 如果您正在测试一个数组里的元素是否符合某条件,且需要返回一个布尔值,那么可使用 Array.every 或 Array.some。如果可用,新方法 find() 或者findIndex() 也可被用于真值测试的提早终止。
场景: 普通遍历
案例:

var arr = [{id:1,name:"zhangsan1",selected:false},{id:2,name:"zhangsan2",selected:false},{id:3,name:"zhangsan3",selected:true},
];arr.forEach(function(el,index,arr){console.log(el)
});

2-4、Array.prototype.map()
方法说明:方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
场景:异步得到数据后,需要新建一个数据根据id标识记录是否被选中的selected属性
案例:

var arr = [{id:1,name:"zhangsan1"},
];var arr1 = arr.map(function(el,index,arr){var newObj = {};newObj.id = el.id;newObj.selected = false;return newObj;
});console.log(arr);  // [{id:1,name:"zhangsan1"}]
console.log(arr1);  // [{id:1,selected:false}]

案例2: es6写法

var numbers = [1, 5, 10, 15];
var doubles = numbers.map( x => x ** 2); //[2,10,20,30]

案例3:重格式化数组 //不改变原数组

var kvArray = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}];var reformattedArray = kvArray.map(function(obj) { var rObj = {};rObj[obj.key] = obj.value;return rObj;
});// reformattedArray 数组为: [{1: 10}, {2: 20}, {3: 30}], 

2-5、Array.prototype.reduce()

方法说明:方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。
场景:累加 、 合并多个数组
案例:

var total = [0, 1, 2, 3].reduce(function(sum, value) {return sum + value;
}, 0);
// total is 6var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]

2-6、Array.prototype.some()

方法说明:方法测试数组中的某些元素是否通过由提供的函数实现的测试。
场景:检查数组中是否含有某个东西 (和every 是对立的)
案例:

const isBiggerThan10 = (element, index, array) => {return element > 10;
}[2, 5, 8, 1, 4].some(isBiggerThan10);
// false[12, 5, 8, 1, 4].some(isBiggerThan10);
// true

案例2: 是否包含id为1 对象

var arr = [{id:1,name:"zhangsan1"},{id:2,name:"zhangsan2"},
];var flag = arr.some(function(element, index, array){console.log(element.id)return element.id == 1;
});  console.log(flag)

3、 循环/遍历效率对比

for ~= do while < forEach ~= map ~= every < $.each < $(e).each < for in  
参考:http://www.jb51.net/article/1...

for > for-of > forEach > filter > map > for-in
参考:https://dailc.github.io/2016/...

4、原生实现every 、 filter、forEach、map、reduce、some 等方法

http://www.jb51.net/article/6...

5、其他参考

https://juejin.im/post/5a3a59...

数组常见的遍历循环方法、数组的循环遍历的效率对比相关推荐

  1. java中的switch用法,循环,方法,数组以及类

    选择结构语句之switch: switch语句在开发过程中的使用仅次于if语句的使用. switch语句: switch语句格式: switch(表达式) { case 值1: 语句体1; break ...

  2. html遍历map,forEach()方法遍历map()方法数组遍历

    1.forEach()方法//以前遍历的方法 var arr = ['苹果','西瓜','香蕉','芒果']; for (var i=0;i console.log(arr[i]); } //forE ...

  3. JS-9 JS常见内置类;包装类型;Number类方法与实例方法;Math方法;String类常见方法;数组方法(增删改查+遍历+排序);时间Date 构造函数+获取信息+设置信息+获取Unix时间戳

    目录 1_包装类型 2_Number类补充 3_Math对象 4_String类的补充 4.1_基本使用 4.2_修改字符串 4.3_查找.替换字符串 开头与结尾 4.4_获取子字符串 4.5_其他方 ...

  4. java数组遍历最快方式_java数组遍历的方法

    对于数组来说,基本上可以看做是一些数字.我们在使用字符串的时候,有过遍历的操作,那么对应的数组也能够进行遍历.这里为大家整理了三种遍历的方法.for循环.foreach.toString(),第二种可 ...

  5. Java数组常见操作

    Java数组常见操作 文章目录 Java数组常见操作 7.0 数组的遍历 1.使用foreach循环访问数组中每个元素. 2.使用简单的for循环(多层循环嵌套)来遍历数组. 7.1 数组长度 7.2 ...

  6. js循环/迭代/遍历有多少方法

    js循环/迭代/遍历有多少方法 JavaScript中存在着很多循环的方法 常见的有for,while,do while,for in等, ES5中的forEach, ES6的for of , jqu ...

  7. JS——遍历对象方法总结

    遍历对象方法 一.对象遍历方法 1.==for...in== 2.==Object.keys()==.==Object.values()==.==Object.entries()== 3.==Obje ...

  8. Java中的ArrayList集合定义、遍历、方法

    /* 一.定义 ArrayList集合的使用 是引用数据类型 实用的步骤: 1.导入包 java.util包中 2.创建引用类型的变量 数据类型<集合储存的数据类型> 变量名 = new ...

  9. c语言二维数组 ppt,C语言二维数组与指针.ppt

    C语言二维数组与指针.ppt 好好考,全国计算机等级考试 二级C语言,第12讲 二维数组与指针,二维数组的定义 数组元素的引用及初始化 二维数组和指针 二维数组名和指针数组作为实参 二维数组程序举例 ...

最新文章

  1. 网友为对百合所唱的最后的挽歌!(节选)
  2. flex 设置换行flex-wrap
  3. BeanDefinition构建示例
  4. mysql优化积累(持续更新中)
  5. Java 内建函数式接口
  6. python判断日期是星期几_python 判断日期是星期几
  7. python节日贺卡图片大全_新年贺卡图片_新年贺卡手工制作图片
  8. Linux: 让切换目录更方便: pushd,popd,dirs,cd -
  9. Wireshark-002导入导出
  10. ArcGIS案例学习笔记4_2_水文分析批处理地理建模
  11. matlab正反馈系统根轨迹,正反馈回路和非最小相位系统根轨迹
  12. vs2019专业版本 vtk安装
  13. 如何快速上手制作高质量短视频?
  14. dpbs和pbs的区别_简单问题:PBS缓冲液到底是什么?
  15. QQ空间|qq人气号怎么赚钱?
  16. C++生成GIF小结
  17. 自动上传视频到B站和西瓜视频
  18. 中国大陆已有IB学校243所
  19. 高德地图引用,搜索定位
  20. 我不是药神,救不了你的穷根

热门文章

  1. Python 数据结构视频教程三
  2. linux下的strerror和perror
  3. 贷款利率最高多少合法?
  4. spring10: 引用类型的自动注入
  5. matlab练习程序(图像旋转,最邻近插值)
  6. Redis中bitmap的妙用
  7. python bottle web框架上传静态文件与加载静态文件
  8. OpenCV 仿射变换
  9. mysql 值到99999后不增值了_MySQL数据库之更新语句精解(一)
  10. MacroMedia FreeHand中文版