比较for、for...in、for...of、forEach的区别

简介: 【10月更文挑战第9天】

前言
在比较之前我们先了解两个概念:

迭代(iterate),指的是按照某种顺序反复多次执行一段程序,通常会有明确的终止条件。

遍历(traversal),指的是按照一定的规则访问树形结构中的每个节点,而且每个节点都只访问一次。

一、for循环语句
for循环语句在之前的博客里有较为详细的介绍,简单来说for语句是一种先测试循环语句,(即先检测退出条件,再执行循环体内的代码.)

1、语法:
for(初始化变量;条件表达式;操作表达式){
循环体语句
}
(1)三个表达式都可以省略,但是表达式之间的分号不能省略。都省略的话就创建了一个无穷循环。
(2)初始化变量:给循环变量、其他变量进行初始化。
(3)条件表达式:控制循环体语句是否执行。如果只包含条件表达式for循环就变成while循环。 (4)操作表达式:使循环趋向结束的语句。

2、使用方法:
2.1、for循环可以用于遍历数组

var arr = [33,22,44,55,66]
for (let i = 0; i < arr.length; i++) {
   
    console.log(arr[i]);    
}

2.2、可以使用break,continue语句跳出循环。

var arr = ['a','b','c','d','e']
for (let i = 0; i < 10; i++) {
   
    if(i===5){
   
        console.log('跳过索引为1的元素');
        continue;
    }
    console.log('');
   <script>
        var n = parseInt(prompt('请输入一个数'))
        //var flag = true;//标记变量,标记当前n是否位素数
        var sum = 0
        for(i=2;i<n;i++){
   
            if(n%i == 0){
   
                //flag = false;//n不是素数,将标记变量值为素数
                break
            }
        }
        if(i>=n){
   
            alert(n+'是素数')
        }else{
   
            alert(n+'不是素数')
        }
    </script>

二、for…in语句
for-in类似于增强for循环,我们可以简单理解为它适合遍历对象。应用场景:遍历数组以及遍历对象的属性。

1、语法

for(var 变量 in 数组名或集合名) //变量中存放的数组或集合的索引
{
   
数组名[变量]
}

2、使用方法:

let arr = {
   
    name : '关羽',
    sex:'男',
    yrs:'33',
    sleep:function(){
   },
    eat :function(){
   }
}
for(attr in arr){
   //遍历arr对象的所有属性
    console.log(attr)
}

三、for…of语句
for…of语句是一种严格的迭代语句,用于遍历可迭代对象的元素。

1、语法

for(var 变量 of 数组名或集合名) //变量中存放的是数组或集合中的元素
{
   
console.log(变量);
}

2、使用方法:

let arr1=[12,22,32,42,52]
let m= arr1.keys()
for(m1 of m){
   //遍历数组对象中的所有元素
    console.log(m1)

}

四、forEach语句
foreach 语句是对数组的每个元素执行一次提供的函数。是for语句的特殊简化版本,不能完全取代for语句,但任何foreach语句都可以改写为for语句版本。

1、语法

arr.forEach(function(k){
    //依次从数组中取出元素放在k中,然后将k作为参数传递给函数
console.log(k);
})

2、使用方法:

let arr = [123,456,789,269,258]


 for(i=0;i<arr.length;i++){
   
    console.log(arr[i])
} 
 var str = ''
arr.forEach(function(arr){
   //自循环:数组中的每个元素都执行forEach给定的函数
    str+=arr+'\t'

})

五、比较
1、优缺点
for:

优点:程序简洁,结构清晰,循环初始化,循环变量化和循环条件位置突出。

缺点:结构比while循环复杂,容易出编码错误。

for…in:

优点:避免了for in的所有缺点,可以使用break,continue和return,不仅支持数组的遍历,还可以遍历类似数组的对象,支持字符串的遍历最简洁。

缺点:不适用于处理原有的原生对象。

for…of:

优点:避免了for…in的所有缺点,支持break,continue,return。支持遍历map,object,array,set string等。

缺点:不适用于处理原有的原生对象。

forEach:
优点:便利的时候更加简洁,效率和for循环相同,不用关心集合下标的问题,减少了出错的效率

缺点:不能同时遍历多个集合,在遍历的时候无法修改和删除集合数据,方法不能使用break,continue语句跳出循环,或者使用return从函数体返回,对于空数组不会执行回调函数

2、区别
四个算法语句区别主要体现在响应break, continue, return上和使用的对象上。

for 语句性能最好;能响应break, continue, return控制循环。

forEach 无法响应break, continue, return控制循环。

for in 无法响应break, continue, return控制循环;for in 主要针对对象,它不仅会循环对象本身的属性,还会查找循环原型上的属性;循环的顺序不确定。

for of 能响应break, continue, return控制循环,还能遍历map、set 等类数组,但是不能循环普通的对象

相关文章
|
2月前
|
索引
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
|
1月前
for in ,for of和forEach的区别
for in ,for of和forEach的区别
40 5
|
2月前
数组方法中的`forEach()`方法和`map()`方法有什么区别?
数组方法中的`forEach()`方法和`map()`方法有什么区别?
|
3月前
|
索引
foreach,for in和for of的区别
foreach,for in和for of的区别
46 1
|
6月前
|
索引
for和foreach谁更快,为什么
for和foreach谁更快,为什么
218 0
|
6月前
|
JavaScript 前端开发
foreach、for in和for of的区别?
foreach、for in和for of的区别?
49 0
|
6月前
|
存储 索引
for 和 foreach 谁更快
for 和 foreach 谁更快
106 1
|
6月前
|
前端开发 JavaScript
你不知道的forEach函数
你不知道的forEach函数
|
JavaScript 前端开发 索引
foreach、for in 和for of的区别?
foreach、for in 和for of的区别?