while循环访问嵌套数组数据点出现TypeError: Cannot read properties of undefined错误

问题根源 #

• 类型不匹配：for...in遍历对象属性时，拿到的x是字符串类型（比如"1"、"2"），但testArr子数组的第一个元素是数字类型（1、2），两者用!==比较永远不相等，导致while循环一直执行，i不断递增直到超出testArr的长度，此时testArr[i]变为undefined，访问[0]就会抛出TypeError。
• 无循环终止条件：就算类型匹配，万一找不到对应元素，循环也会无限执行直到越界报错。

解决方法 #

方法1：修正类型并添加边界判断 #

把字符串类型的x转为数字，同时给while循环加上i < testArr.length的终止条件，避免数组越界：

var testObj = {
    1: 1,
    2: 2,
    3: 3,
    4: 4,
    5: 5,
    6: 6,
    7: 7,
    8: 8,
    9: 9
};

var testArr = [
    [1, []],
    [2, []],
    [3, []],
    [4, []],
    [5, []],
    [6, []],
    [7, []],
    [8, []],
    [9, []]
];

(() => {
    for (let x in testObj) {
        let i = 0;
        // 转为数字并添加边界判断
        while (i < testArr.length && Number(x) !== testArr[i][0]) {
            i++;
        }
        // 找到对应元素再推入，避免越界操作
        if (i < testArr.length) {
            testArr[i][1].push(x);
        }
    }
})();

方法2：提前构建映射表（更高效） #

如果数据量较大，每次循环查找会浪费性能，建议先给testArr创建一个以子数组第一个元素为键的映射表，直接通过键获取对应的子数组：

var testObj = {
    1: 1,
    2: 2,
    3: 3,
    4: 4,
    5: 5,
    6: 6,
    7: 7,
    8: 8,
    9: 9
};

var testArr = [
    [1, []],
    [2, []],
    [3, []],
    [4, []],
    [5, []],
    [6, []],
    [7, []],
    [8, []],
    [9, []]
];

(() => {
    // 构建映射表：数字键 -> 对应的子数组
    const arrMap = new Map();
    testArr.forEach(item => {
        arrMap.set(item[0], item);
    });

    for (let x in testObj) {
        const numKey = Number(x);
        const targetItem = arrMap.get(numKey);
        if (targetItem) {
            targetItem[1].push(x);
        }
    }
})();

内容的提问来源于stack exchange，提问作者Andrew Garrison