题目:
请介绍 JavaScript 中有哪些循环和遍历的方法, 说说它们的应用场景和优缺点?
1,for 循环
- let arr = [1,2,3];
- for (let i=0; i<arr.length; i++){
- console.log(i,arr[i])
- }
- // 0 1
- // 1 2
- // 2 3
for 循环是 Js 中最常用的一个循环工具, 经常用于数组的循环遍历.
2,for in 循环
- let obj = {name:'zhou',age:'**'}
- for(let i in obj){
- console.log(i,obj[i])
- }
- // name zhou
- // age **
for in 循环主要用于遍历普通对象, i 代表对象的 key 值, obj[i] 代表对应的 value, 当用它来遍历数组时候, 多数情况下也能达到同样的效果, 但是你不要这么做, 这是有风险的, 因为 i 输出为字符串形式, 而不是数组需要的数字下标, 这意味着在某些情况下, 会发生字符串运算, 导致数据错误, 比如:'52'+1 = '521' 而不是我们需要的 53.
另外 for in 循环的时候, 不仅遍历自身的属性, 还会找到 prototype 上去, 所以最好在循环体内加一个判断, 就用 obj[i].hasOwnProperty(i), 这样就避免遍历出太多不需要的属性.
3,while 循环
同样的遍历 cars 数组, 先用 for 循环方法
- let cars=["BMW","Volvo","Saab","Ford"];
- let i=0;
- for (;cars[i];)
- {
- console.log(cars[i])
- i++;
- };
- // BMW
- // Volvo
- // Saab
- // Ford
然后是 while 循环方法
- cars=["BMW","Volvo","Saab","Ford"];
- var i=0;
- while (cars[i])
- {
- console.log(cars[i] + "<br>")
- i++;
- };
我们发现, 它们可以实现同样的效果, 事实上它们底层的处理是一样的, 不过 for 循环可以把定义, 条件判断, 自增自减操作放到一个条件里执行, 代码看起来方便一些, 仅此而已.
4,do while 循环
- let i = 3;
- do{
- console.log(i)
- i--;
- }
- while(i>0)
- // 3
- // 2
- // 1
do while 循环是 while 循环的一个变体, 它首先执行一次操作, 然后才进行条件判断, 是 true 的话再继续执行操作, 是 false 的话循环结束.
5,Array forEach 循环
- let arr = [1,2,3];
- arr.forEach(function(i,index){
- console.log(i,index)
- })
- // 1 0
- // 2 1
- // 3 2
forEach 循环, 循环数组中每一个元素并采取操作, 没有返回值, 可以不用知道数组长度, 他有三个参数, 只有第一个是必需的, 代表当前下标下的 value.
另外请注意, forEach 循环在所有元素调用完毕之前是不能停止的, 它没有 break 语句, 如果你必须要停止, 可以尝试 try catch 语句, 就是在要强制退出的时候, 抛出一个 error 给 catch 捕捉到, 然后在 catch 里面 return, 这样就能中止循环了, 如果你经常用这个方法, 最好自定义一个这样的 forEach 函数在你的库里.
6,Array map()方法
- let arr = [1,2,3];
- let tt = arr.map(function(i){
- console.log(i)
- return i*2;
- })
- // [2,4,6]
map() 方法返回一个新数组, 数组中的元素为原始数组元素调用函数处理后的值.
注意: map 和 forEach 方法都是只能用来遍历数组, 不能用来遍历普通对象.
7,Array filter() 方法
- let arr = [1,2,3];
- let tt = arr.filter(function(i){
- return i>1;
- })
- // [2,3]
filter 方法是 Array 对象内置方法, 它会返回通过过滤的元素, 不改变原来的数组.
8,Array some() 方法
- let arr = [1,2,3];
- let tt = arr.some(function(i){
- return i>1;
- })
- // true
some() 方法用于检测数组中的元素是否满足指定条件(函数提供), 返回 boolean 值, 不改变原数组.
9,Array every() 方法
- let arr = [1,2,3];
- let tt = arr.some(function(i){
- return i>1;
- })
- // 检测数组中元素是否都大于 1
- // false
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供), 返回 boolean 值, 不改变原数组.
10,Array reduce()方法
- let arr = [1,2,3];
- let ad = arr.reduce(function(i,j){
- return i+j;
- })
- // 6
reduce() 方法接收一个函数作为累加器, 数组中的每个值 (从左到右) 开始缩减, 最终计算为一个值.
11,Array reduceRight()方法
- let arr = [1,2,3];
- let ad = arr.reduceRight(function(i,j){
- return i+j;
- })
- // 6
reduceRight()方法, 和 reduce() 功能是一样的, 它是从数组的末尾处向前开始计算.
12,for of 循环
- let arr = ['name','age'];
- for(let i of arr){
- console.log(i)
- }
- // name
- // age
for of 循环是 Es6 中新增的语句, 用来替代 for in 和 forEach, 它允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代 (Iterable data) 的数据结构, 注意它的兼容性.
总结
以上就是我总结的 Js 中常见的循环遍历方法, 随着 Es6 标准的兼容性越来越好, 我发现很多实现方案慢慢都不再必要了, 比如 let,const 取代 var 后, 在某些情况下的闭包函数也就不存在了.
如果你有其它的方法, 请在留言区留言, 我们可以一起探讨.
来源: https://www.cnblogs.com/zhoumingjie/p/9114708.html