在 For 循环中创建键值对数组答案

【问题标题】：Create Key Value Pair Array in For-Loop在 For 循环中创建键值对数组
【发布时间】：2020-05-16 11:33:40
【问题描述】：

我的 ajax 有这个响应

这是我的configs.objects

configs.objects    = ['Mexico','Brazil','Spain','Italy','USA'];

(7) [19, 51, 40, 69, 15, 77, 40]

我创建了一个 for 循环

var datasets = [];

for (i = 0; i < configs.objects.length; i++) {

    console.log(i);

    datasets[i]['borderWidth']      = 1;
    datasets[i]['hoverBorderWidth'] = 2;
    datasets[i]['hoverBorderColor'] = '#fff';
    datasets[i]['data']             = response[i];
    datasets[i]['label']            = configs.objects[i];


    // debugger;

}


console.log(datasets);

我一直在得到

未捕获的类型错误：无法设置未定义的属性“borderWidth”

为什么？我做错什么了吗？在过去的 2 个小时里，我一直在盯着这些代码。

我不知道为什么我一直收到这个错误。

【问题讨论】：

这能回答你的问题吗？ JavaScript - cannot set property of undefined

标签： javascript arrays

【解决方案1】：

datasets 是一个没有元素的空数组，你永远不会添加任何元素。只需确保 ith 元素被初始化为对象拳头：

datasets[i] = {};

您也可以稍微重构您的代码，并将 push 对象文字改为 datasets 以获得相同的结果：

datasets.push({
    borderWidth: 1,
    hoverBorderWidth: 2,
    hoverBorderColor: #fff,
    data: response[i],
    label: configs.objects[i]
});

【讨论】：

【解决方案2】：

在设置值之前，需要先将其初始化为一个对象：

datasets[i] = {};
datasets[i]['key'] = 'value';

延伸阅读：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

【讨论】：

【解决方案3】：

var datasets = [];

for (i = 0; i < configs.objects.length; i++) {

    let obj = {}

    obj['borderWidth']      = 1;
    obj['hoverBorderWidth'] = 2;
    obj['hoverBorderColor'] = '#fff';
    obj['data']             = response[i];
    obj['label']            = configs.objects[i];

    datasets[i] = obj;


    // debugger;

}

【讨论】：

【解决方案4】：

这是因为通过使用datasets[i]，您正在接近它，就好像该对象已经存在以从数组中抓取并修改一样；当您真正尝试将这些值作为对象存储在该空数组中时。

您的处理方式是创建一个变量来存储这些属性，然后将该对象推送到您的数组中，如下所示。

var datasets = [];

for(i = 0; i < configs.object.length; i++){
    var dataObject = {
        borderWidth: 1,
        hoverBorderWidth: 2,
        hoverBorderColor: '#fff',
        data: response[i],
        label: configs.objects[i]
    };

    datasets.push(dataObject);
}

console.log(datasets);

现在datasets 变量将包含具有您现在可以索引的属性和值的对象。

【讨论】：