javascript - 为什么我的数组已定义但其中的元素未定义？

Question

我在 JavaScript 中创建了这段代码：

var finalTimeline = [];
var holdingCell = [];

//LIKING RATING TASK - SET 1

var likingScale = [
  "1 (Strongly Dislike)",
  "2",
  "3",
  "4",
  "5",
  "6 (Strongly Like)"
]; //create rating scale for the liking rating task

var likingRatingTask_1 = {
  timeline: [{
    type: 'image-button-response-with-name',
    stimulus: jsPsych.timelineVariable('food'),
    choices: likingScale,
    prompt: "I would like to eat this food right now, in its presented quantity.",
    render_on_canvas: true,
    name: jsPsych.timelineVariable('name'),
    save_trial_parameters: {
      name: true
    }
  }],
  timeline_variables: [{
      food: "Images/small_salad.jpeg",
      name: 'salad'
    },
    {
      food: "Images/small_pear.jpeg",
      name: 'pear'
    },
    {
      food: "Images/small_lollipop.jpeg",
      name: 'lollipop'
    },
    {
      food: "Images/small_grapes.jpeg",
      name: 'grapes'
    },
    {
      food: "Images/small_cotton_candy.jpeg",
      name: 'cotton candy'
    },
    {
      food: "Images/small_cookie.jpeg",
      name: 'cookie'
    },
    {
      food: "Images/small_carrot.jpeg",
      name: 'carrot'
    },
    {
      food: "Images/small_cake.jpeg",
      name: 'cake'
    },
    {
      food: "Images/small_brownie.jpeg",
      name: 'brownie'
    },
    {
      food: "Images/small_apple.jpeg",
      name: 'apple'
    },
    {
      food: "Images/large_salad.jpeg",
      name: 'salad'
    },
    {
      food: "Images/large_pear.jpeg",
      name: 'pear'
    },
    {
      food: "Images/large_lollipop.jpeg",
      name: 'lollipop'
    },
    {
      food: "Images/large_grapes.jpeg",
      name: 'grapes'
    },
    {
      food: "Images/large_cotton_candy.jpeg",
      name: 'cotton candy'
    },
    {
      food: "Images/large_cookie.jpeg",
      name: 'cookie'
    },
    {
      food: "Images/large_carrot.jpeg",
      name: 'carrot'
    },
    {
      food: "Images/large_cake.jpeg",
      name: 'cake'
    },
    {
      food: "Images/large_brownie.jpeg",
      name: 'brownie'
    },
    {
      food: "Images/large_apple.jpeg",
      name: 'apple'
    }
  ],
  randomize_order: true,
  on_timeline_finish: function() {
    var imageNames = ['salad', 'pear', 'lollipop', 'grapes', 'cotton candy', 'cookie', 'carrot', 'cake', 'brownie', 'apple']; //list the category names
    for (let i = 0; i < imageNames.length; i++) {
      var responseData = jsPsych.data.getLastTimelineData().filter({
        name: imageNames[i]
      }).select('response').sum(); //for each image category, sum the responses
      var pictureData = jsPsych.data.getLastTimelineData().filter({
        name: imageNames[i]
      }).select('stimulus').values; //for each image category, retrieve the image paths
      holdingCell.push({
        rating: responseData,
        picture1: pictureData[0],
        picture2: pictureData[1]
      });
    }
  }
};
finalTimeline.push(likingRatingTask_1);
console.log(holdingCell);
console.log(holdingCell[0]);

问题是holdingCell即使数组本身已定义，数组元素似乎也未定义。也就是说，该函数console.log(holdingCell)返回一个由 10 个对象组成的数组，正如它应该的那样。但是，该函数console.log(holdingCell[0])返回undefined. 就好像数组只作为一个整体存在，不可能访问数组中的任何单个元素。

有没有人遇到过这个问题？如果是这样，请您详细说明您是如何解决的？