js 死循环问题

Question

var arr = [{'name':'彭于晏','age':25},{'name':'吴彦祖','age':35},{'name':'陈冠希','age':28},{'name':'陈伟霆','age':36},{'name':'angelababy','age':25},{'name':'黄晓明','age':28}];

for(var i=0;i<arr.length;i++){
        if(arr[i].name=='陈冠希'){
            arr.splice(i,0,{'name':'范冰冰','age':30});
        }
      }
      console.log(arr)

  RT 为什么这个循环变成死循环了?

Answer 1

很明显你的 splice 用的有问题。

splice 第二个参数表示删除多少个元素，如果设置0，则陈冠希一直没有删除，导致一直再循环，且此时陈冠希是一直往后移动的。

如果你想留着陈冠希，那就需要在陈冠希后面加上范冰冰

如果不留陈冠希

for循环中，把splice的第二个参数改成1即可。

for (var i = 0; i < arr.length; i++) {
        if (arr[i].name == '陈冠希') {
            arr.splice(i, 1, { 'name': '范冰冰', 'age': 30 });
        }
    }

如果留着陈冠希 在陈冠希后面加范冰冰

for (var i = 0; i < arr.length; i++) {
        if (arr[i].name == '陈冠希') {
            arr.splice(i+1, 1, { 'name': '范冰冰', 'age': 30 });
        }
    }

Answer 2

不要在循环里做会修改所遍历数组的操作。

Answer 3

因为你是在'陈冠希'前面插入了'范冰冰'，然后i++之后，还是'陈冠希'。
就变成了
i: xxxx '陈冠希' xxxx
i+1: xxxx '范冰冰' '陈冠希' xxxx
i+2: xxxx '范冰冰' '范冰冰' '陈冠希' xxxx
... 然后就死循环了

Answer 4

本来想说 在for循环内慎用splice……不过看你这里没有做删除，所以再分析一下。

其实你如果断点调试就能发现问题了，当i=2的时候，正好if语句就匹配上了，于是往数组插入了范爷，此时arr[2]就是范爷. 然后i=3，这个时候arr[3]又指向冠希哥了……如此一来数组有增加了一个范爷……然后就死循环了， 因为一直把冠希哥盼到了，结果你一个splice又一个范爷把冠希哥挤到了后面，于是下一次还是遇到冠希哥，其次i<arr.length ，每次都取arr的length，每一次splice都给arr更新了length，所以就for不停了……

Answer 5

splice方法改变原数组
你往数组里面添加了一项
所有 循环一次添加一次 无限添加 数组长度一直在增加 所有无限循环
你可以在循环外面定义个变量 记录数组长度

var arrLen = arr.length;
for(var i=0;i<arrLen;i++){}

Answer 6

数组遍历到arr[2]，碰到陈冠希，然后在arr[2]的地方插入范冰冰。
插入之后呢，陈冠希挪到了arr[3]的位置了。
插入完成后，继续遍历arr[3]，又是陈冠希。继续下一次循环。然后一直都是陈冠希

Answer 7

第一次循环：i=0,数组第一项是陈冠希，数组前面添加一个范冰冰；
第二次循环：i=1，数组第一项是范冰冰，第二项是陈冠希，再添加一个范冰冰；
第三次循环：...
所以新的数组项不要添加到当前循环索引的前面，当然最好的是不要再循环中改变数组。

Answer 8

splice 会修改 arr 呀，造成循环体一直无法结束

Answer 9

每循环一次，数组长度＋1