javascript - 将 JSON 数据值键传递给函数

Question

我正在使用 JSON 对象提供的数据在 Canvas 上绘制线条:

var data = { values:[
{ X: "04-28", Xt: "7:45 pm", Ys: 116, Yd: 74, Yp: 0},
{ X: "04-29", Xt: "2:00 am", Ys: 112, Yd: 73, Yp: 0},
//

使用一些 jQuery 来画线:

c.lineWidth = 4;
c.strokeStyle = '#f00';
c.beginPath();
c.moveTo(getXPixel(0), getYPixel(data.values[0].Ys));
for(var i = 1; i < data.values.length; i ++) {
    c.lineTo(getXPixel(i), getYPixel(data.values[i].Ys));
}
c.stroke();

要绘制多条线(处理“Yd”和“Yp”，以及以后可能需要的任何其他线)，我想将该位移动到一个函数中，我可以调用它:

drawLine(4, '#f00', 'Ys');

我试过的功能:

function drawLine(width, style, d) {
    c.lineWidth = width;
    c.strokeStyle = style;
    c.beginPath();
    c.moveTo(getXPixel(0), getYPixel(data.values[0].d));
    for(var i = 1; i < data.values.length; i ++) {
        c.lineTo(getXPixel(i), getYPixel(data.values[i].d));
    }
    c.stroke();
}

不起作用。没有错误，但没有画线。如果我将“Ys”直接放在函数中，它确实有效。我如何将该位作为参数传递？

Answer 1

您不需要values[i] 的d 属性，您需要d 持有的字符串值的属性。您需要使用 obj[d]，而不是像这样的 obj.d:

function drawLine(width, style, d) {
    c.lineWidth = width;
    c.strokeStyle = style;
    c.beginPath();
    c.moveTo(getXPixel(0), getYPixel(data.values[0][d]));
    for(var i = 1; i < data.values.length; i ++) {
        c.lineTo(getXPixel(i), getYPixel(data.values[i][d]));
    }
    c.stroke();
}

例如:

var obj = { a:1, b:2, c:3 };
console.log(obj.a);    // 1
console.log(obj['a']); // 1    
var a = 'b';
console.log(obj.a);    // 1, still
console.log(obj[a]);   // 2, because the var a == 'b' as if:
console.log(obj['b']); // 2