初学者跪着学JavaScript Day16 : 阵列Array 迭代的小小秘密

一日客语：中文:早安客语：anˋzoˋ安走
前提：在学习Array.methods时会想知道他是如何迭代Array内的元素，才知道会有这一些稍微不同的迭代差异。

find、filter会迭代array，像是这样：

let a = ['apple', , , 'egg'];

a.find(function (value, index, array) {
    console.log('index:', index);
    console.log('value:', value);
    console.log('array:', array);
});
//结果
//index: 0
//value: apple
//array: [ 'apple', <2 empty items>, 'egg' ]
//index: 1
//value: undefined
//array: [ 'apple', <2 empty items>, 'egg' ]
//index: 2
//value: undefined
//array: [ 'apple', <2 empty items>, 'egg' ]
//index: 3
//value: egg
//array: [ 'apple', <2 empty items>, 'egg' ]

会把array元素一个个带进function

a = [0, 1, 2, 3, 4, 5, 6]

有想过在把a[4]元素带进CallBack function 的时候把後面元素删掉会发生什麽事吗？

find版本

执行方式:a[4]带入callBack function 带入时把a[5]元素删除

let a = [0, 1, 2, 3, 4, 5, 6];
a.find(function (value, index) {
    console.log('index:', index, 'value:', value);
    if (index == 4) {
        delete a[5];
    }
});
//结果
//index: 0 value: 0
//index: 1 value: 1
//index: 2 value: 2
//index: 3 value: 3
//index: 4 value: 4
//index: 5 value: undefined
//index: 6 value: 6

把元素迭代进function 事前会先把array.length长度算好，知道跑几次

就算把最後一个元素删除也是这样情况

let a = [0, 1, 2, 3, 4, 5, 6];
a.find(function (value, index) {
    console.log('index:', index, 'value:', value);
    if (index == 5) {
        delete a[6];
    }
});
//index: 0 value: 0
//index: 1 value: 1
//index: 2 value: 2
//index: 3 value: 3
//index: 4 value: 4
//index: 5 value: 5
//index: 6 value: undefined

因为一开始迭代长度已经算好，迭代时仍会找6

filter版本

会发现filter的index居然没有6!!和find不一样结果

let a = [0, 1, 2, 3, 4, 5, 6];
a.filter(function (value, index) {
    console.log('index:', index, 'value:', value);
    if (index == 5) {
        delete a[6];
    }
});
//index: 0 value: 0
//index: 1 value: 1
//index: 2 value: 2
//index: 3 value: 3
//index: 4 value: 4
//index: 5 value: 5