javascript - 多维数组对象分配

Question

到目前为止，我正在尝试创建一个二维 JSON 数组来在一系列“框架”内保存一系列形状。到目前为止，我以为我已经有了它，但我只能将形状推送到 frame[0]；一旦我传递它frame[1]，我就会收到错误Uncaught TypeError:无法读取未定义的属性“shape”。

为什么我的浏览器无法将 frame[1] 识别为 frame 数组的潜在下一个存储区域？这与我初始化 JSON 数组的方式有关吗？

目前相关代码:

function Obj(type, x, y, w, h, r) {
"use strict";
this.type = type || null; //rect, crcl, line, text
this.x = x || null;
this.y = y || null;
this.w = w || null; //used for rect, line
this.h = h || null; //used for rect, line
this.r = r || null; //used only for crcl
}
var keyframes = {
    'frame': [{
        'shape': []
    }]
};

var shape1 = new Obj('rect', 20, 20, 20, 20, 0);
var shape2 = new Obj('crcl', 20, 20, 0, 0, 20);

keyframes.frame[0].shape.push(shape1);
keyframes.frame[1].shape.push(shape2);

Answer 1

它确实将 frame[1] 识别为放置某些内容的潜在位置，但您还没有在那里放置任何内容。您的代码期望 frame[1] 是对对象的引用，但您仅以这种方式初始化第一个元素。

keyframes.frame[1] = { shape: [] };

将初始化下一个元素。如果没有初始化，keyframes.frame[1] 是未定义。