Question

我设法创建了一个连接到API的对象。所以我有一个函数loadColors（）

loadColors = function() {

            var Colors = [];
            for (var i =0; i < array.length; i++) {

                Card.get({cardName: array[i].object_name}, function(data) {

                    Colors.push(data.data[0].color);

                });

            }
            return {Colors};
        };
        var Colors = loadColor();

并且在那里我能够通过console.log（Colors）看到结果：

    Object {Colors: Array[0]}
    Colors: Array[4]
    0: "green"
    1: "red"
    2: "yellow"
    3: "blue"
    length: 4
    __proto__: Array[0]
    __proto__: Object

当我尝试访问console.log之类的值[Colors [0]];我得到了不确定。我在做什么呢？

Answer 1

为什么要在Colors中将{}包裹在退货声明中？

只需执行return Colors;，您就可以直接从返回结果访问索引数组项。

由于您当前正在返回包含该数组的对象，因此您必须通过Colors.Colors[0]访问该对象。

<强>更新

我意识到除了在返回之前将结果包装在对象中之外，由于Card.get的异步性质，您还返回一个未在返回点填充项目的数组。

这个问题实际上非常适合于一个名为Promises的概念，但不是在此时引入另一个新概念，我将说明如何手动解决这个问题。（IE doensn没有原生的Promise支持，有一些框架可以解决这个问题，但你可能不需要一个完整的新框架.jQuery有一个名为Deferreds的东西，但他们来自subtly different来自承诺规范）。

来自Card.get的回调应该调用向前移动代码的函数，而不是从函数返回结果。它应该只在数组填充后执行此操作，而不是每次回调一次。

Card.get({ your options }, function(data) {
    Colors.push(data.data[0].color);
    if(Colors.length == array.length) {
        allColorsLoaded(Colors);
    }
});

所以，如果您的逻辑目前是：

var Colors = loadColors();
alert(Colors.length);

需要进行更新，以便通过回调启动依赖于Colors的所有内容：

var allColorsLoaded = function(Colors) {
   alert(Colors.length);
};
loadColors();

Answer 2

从问题中发生的事情是如此清楚，但是从我的理解，当你尝试时

console.log(Colors[0])

在函数外部返回undefined，而在函数内部返回＆＃39;绿色＆＃39;？

如果是这样，你应该改变：

return {Colors};

是：

return Colors;

在javascript中访问对象数组的值

2 个答案: