JavaScript出现Uncaught TypeError报错，请求排查代码问题

代码运行时抛出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'r')，推测报错指向c1.r，但实际问题出在以下环节：

问题代码 #

class Color{
    constructor(a1, a2, a3){
        this.r = a1;
        this.g = a2;
        this.b = a3;
    }

    delta(c1){
        var ret = new Color(this.r - c1.r, this.g - c1.g, this.b - c1.b);
        return ret;
    }
}

function createPalette(){
    var mainColors = [new Color(255, 0, 0), new Color(0, 255, 0)];
    var colors = [], steps = 16;
    var colorLength = mainColors.length;
    var colorDelta = 1 / (colorLength - 1);

    for(var i = 0; i < steps; i++){
        var globalRel = i / (steps - 1);
        var index0 = globalRel / colorDelta;
        var index1 = Math.min(colorLength - 1, index0 + 1);
        var localRel = (globalRel - index0 * colorDelta) / colorDelta;
        var c0 = mainColors[index0];
        var c1 = mainColors[index1];
        var dc = c1.delta(c0);
        var col = new Color(c0.r + localRel * dc.r,
            c0.g + localRel * dc.g,
            c0.b + localRel * dc.b);
        colors.push(col);
    }
    return colors;
}

palette = createPalette();

错误原因 #

• index0计算后是浮点数（比如当i=1时，globalRel=1/15≈0.0667，colorDelta=1，index0=0.0667），用浮点数作为数组下标访问mainColors[index0]会得到undefined（数组仅支持整数下标）。
• 调用c1.delta(c0)时，传入的c0是undefined，delta方法中尝试访问参数c1的r属性（即传入的c0），因此触发类型错误。

修复方案 #

将index0转为整数下标，使用Math.floor()取整：

var index0 = Math.floor(globalRel / colorDelta);

修复后完整代码 #

class Color{
    constructor(a1, a2, a3){
        this.r = a1;
        this.g = a2;
        this.b = a3;
    }

    delta(c1){
        var ret = new Color(this.r - c1.r, this.g - c1.g, this.b - c1.b);
        return ret;
    }
}

function createPalette(){
    var mainColors = [new Color(255, 0, 0), new Color(0, 255, 0)];
    var colors = [], steps = 16;
    var colorLength = mainColors.length;
    var colorDelta = 1 / (colorLength - 1);

    for(var i = 0; i < steps; i++){
        var globalRel = i / (steps - 1);
        var index0 = Math.floor(globalRel / colorDelta);
        var index1 = Math.min(colorLength - 1, index0 + 1);
        var localRel = (globalRel - index0 * colorDelta) / colorDelta;
        var c0 = mainColors[index0];
        var c1 = mainColors[index1];
        var dc = c1.delta(c0);
        var col = new Color(c0.r + localRel * dc.r,
            c0.g + localRel * dc.g,
            c0.b + localRel * dc.b);
        colors.push(col);
    }
    return colors;
}

palette = createPalette();

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