JavaScript创建儿童玩具商城玩具数组的代码错误排查

首先，咱们先看你写的代码里的错误点：

1. 数组初始化的语法错误 #

你在定义cars和tractors对应的数组时，用了0 : ['name', ...]这种写法——这是对象的键值对语法，但数组是有序的集合，不需要显式声明索引，直接把元素依次放进数组里就行，JS会自动给它们分配从0开始的索引。

2. 嵌套结构的访问方式错误 #

• toys是一个包含两个对象的数组，第一个对象才是包含cars属性的那个，所以你不能直接写toys[cars]，得先通过索引[0]拿到第一个对象，再访问它的cars属性（用toys[0].cars或者toys[0]['cars']都可以）。
• 另外，你写的[name]会被JS当成一个变量，但你并没有定义name这个变量，所以会报错。如果保持你原来的数组结构（每个玩具是一个数组），要取第一个玩具的name，得用索引[0]（因为name是数组的第一个元素）；如果改成对象结构，用.name会更直观。

修正后的代码（保持你原来的数组结构） #

// 去掉数组里多余的索引声明，直接放元素
var toys = [
  {
    'cars': [
      ['赛车', '遥控', '红色', 'car_red.jpg'],
      ['卡车', '惯性', '蓝色', 'car_blue.jpg'],
      ['跑车', '合金', '黄色', 'car_yellow.jpg']
    ]
  },
  {
    'tractors': [
      ['农用拖拉机', '惯性', '绿色', 'tractor_green.jpg'],
      ['工程拖拉机', '遥控', '橙色', 'tractor_orange.jpg'],
      ['迷你拖拉机', '合金', '黑色', 'tractor_black.jpg']
    ]
  }
];

// 正确访问第一个cars玩具的name
document.write(toys[0].cars[0][0]);

更推荐的结构（把每个玩具做成对象，可读性更高） #

如果你想让代码更清晰、后续维护更方便，建议把每个玩具定义成带属性的对象，这样访问的时候不用记索引，直接用属性名就行：

var toys = [
  {
    category: 'cars',
    items: [
      {name: '赛车', type: '遥控', color: '红色', image: 'car_red.jpg'},
      {name: '卡车', type: '惯性', color: '蓝色', image: 'car_blue.jpg'},
      {name: '跑车', type: '合金', color: '黄色', image: 'car_yellow.jpg'}
    ]
  },
  {
    category: 'tractors',
    items: [
      {name: '农用拖拉机', type: '惯性', color: '绿色', image: 'tractor_green.jpg'},
      {name: '工程拖拉机', type: '遥控', color: '橙色', image: 'tractor_orange.jpg'},
      {name: '迷你拖拉机', type: '合金', color: '黑色', image: 'tractor_black.jpg'}
    ]
  }
];

// 访问第一个cars玩具的name，是不是直观多了？
document.write(toys[0].items[0].name);

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