for轮回和for in在遍历数组中的区分

疑心

在演习数组操纵的时刻,愿望完成删除数组中特定元素(比方删除字符“1”)的功用
很容易地就想到了应用for轮回和splice要领

for (let i = 0; i < hobbies.length; i++) {
        if (hobbies[i] == "1") {
            hobbies.splice(i, 1);
            i--;
        }
    }

测试效果
"1", "2", "3","1", "1", "4", "1"
"2", "3", "4"

如愿杀青目的,不过想起来另有for in这个东西,好像写起来更简约
那用for in行不行呢

for(var i in hobbies)
    {
        if(hobbies[i]=="1")
        {
            hobbies.splice(i,1);
            i--;
        }
    }
    
测试效果
"1", "2", "3", "1", "1","4"
"2", "3", "1", "4"

为何中心多了一个”1″出来?发作了什么?

测试

增加console.log语句观察i值的变化

for(var i in hobbies)
    {
        console.log("推断前"+i);
        if(hobbies[i]=="1")
        {
            hobbies.splice(i,1);
            i=i+1;
        }
        console.log("推断后"+i)
    }
效果
推断前0
推断后-1
推断前1
推断后1
推断前2
推断后1
推断前3
推断后3

能够看到,在第一次删去1后,i–由0变成了-1
但下一次推断的时刻,i直接由-1跳到了1

隐蔽的圈套

在查询材料以后,才发现问题出在了i的范例上

规范的for轮回中的i是number范例,示意的是数组的下标
然则for in轮回中的i, 示意的是数组的key是string范例!

由于隐式范例转换的机制,这个区分被隐蔽了起来
由于我测试的时刻,用的是i–
而字符串,在应用递增递减标记的时刻,会把它转换成number范例
因而虽然i是字符”1“,但也变成了0
假如我用的是i=i+1
字符串加数字,会把数字转化成字符串拼接,涌现01如许的效果
那末这个区分就会被我监测到
别的,在splice函数中,参数用了字符串也并没有影响末了的效果,由于也举行了隐式转换

现实发作的事

在先前,我们删除了元素后,给i–,想当然地以为下一次变量的值会+1,变回i,就能够对删除的元素背面的一个元素举行推断(由于它的角标数值由i+1,变成了i)
在for轮回中是没事的,但在for in内里
i–这个操纵实在没有任何意义,即便给i随意赋一个值,它的下一次取值依然是i+1
由于它是依据数组的元素键值(索引)来举行遍历的,string范例的0,1,2,3,4…arr.length-1已排好了,并不会由于半途i的值有所变化而转变

除此之外,for in另有一些坑

•作用于数组的for-in轮回体除了遍历数组元素外,还会遍历自定义属性。举个例子,假如你的数组中有一个可罗列属性myArray.name,轮回将分外实行一次,遍历到名为“name”的索引。就连数组原型链上的属性都能被访问到。

•某些情况下,for in能够根据随机递次遍历数组元素。

因而不合适用for in来遍历数组
for in合适用来遍历对象

P.S

假如用forEach呢
效果以下

hobbies.forEach(function(value,index,hobbies){
        console.log("推断前"+index);
        if(value=="1")
        {
            hobbies.splice(index,1);
            console.log(typeof index);
            index=index-1;
            // console.log("二"+i);
        }
        console.log("推断后"+index);
    });
["1", "2", "3", "1", "1", "4", "1"]
推断前0
number
推断后-1
推断前1
推断后1
推断前2
number
推断后1
推断前3
推断后3
推断前4
number
推断后3
["2", "3", "1", "4"]

数组中有几项,那末通报进去的匿名回调函数就实行频频

    原文作者:夜行风
    原文地址: https://segmentfault.com/a/1190000018701872
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞