javascript - 如果对象不存在，如何不破坏 JavaScript 代码？

Question

我正在玩一些YQL ，并获取以 JSON 形式返回的返回结果。因此我尝试使用一些 JavaScript 来运行它。一切工作正常，但当涉及到我想要抓取的单个元素时，我的 JavaScript 代码就崩溃了。

这是我的 JSON 的一部分:

cbfunc({
    "query": {
        "count": 30,
        "created": "2011-12-22T20:48:45Z",
        "lang": "en-US",
            "diagnostics": {
                "publiclyCallable": "true",
                "url": {
                    "execution-start-time": "1",
                    "execution-stop-time": "2214",
                    "execution-time": "2213",
                    "proxy": "DEFAULT",
                    "content": "http://www.example.com"
                },
                "user-time": "2254",
                "service-time": "2213",
                "build-version": "24402"
            },
            "results": {
                "li": [
                    {
                        "class": "item",
                        "div": [
                            {
                                "class": "onsale",
                                "p": {
                                    "class": "product-image",
                                    "a": {
                                        "href": "http://www.example.com",
                                        "title": "linktitle",
                                        "img": {
                                            "src": "http://www.example.com/image.jpg",
                                        }
                                    }
                                }
                            },
                            {
                                "class": "price-box",
                                "span": {
                                    "class": "normal-price",
                                    "span": {
                                        "class": "price",
                                        "content": "900,-"
                                    }
                                }
                            }
                        ],
                        "h5": {
                            "a": {
                                "href": "http://www.example.com",
                                "content": "Link content"
                            }
                        },
                    },
                    {
                        "class": "item",
                        "div": [
                            {
                                "class": "onsale",
                                "p": {
                                    "class": "product-image",
                                    "a": {
                                        "href": "http://www.example.com/2.html",
                                        "title": "Link title",
                                        "img": {
                                            "src": "http://www.example.com/image2.jpg",
                                        }
                                    }
                                }
                            },
                            {
                                "class": "price-box",
                                "span": {
                                    "class": "normal-price",
                                        "span": {
                                            "class": "price",
                                            "content": "812,-"
                                        }
                                    }
                                }
                            ],
                            "h5": {
                                "a": {
                                    "href": "http://www.example.com/2.html",
                                    "content": "Link 2 content"
                                }
                            },
                        }
etc.

我正在使用以下 JavaScript 代码来获取我想要的内容。

function cbfunc(o){
    var items = o.query.results.li;
    var output = '';
    var no_items=items.length;
    for(var i=0;i<no_items;i++){
        var img = items[i].div[0].p.a.img.src;
        var price1 = items[i].div[1];
        var price = price1.span.span.content;
        var title = items[i].h5.a.content;
        var link = items[i].h5.a.href;
        var desc = items[i].description;
        output += "<img src='" + img + "' /><h3><a href='" + link + "'>"+title+"</a></h3>" + price + "<hr/>";
    }
    // Place product in div tag
    document.getElementById('results').innerHTML = output;
}

正如您可能看到的，我正在遍历所有 li，并尝试打印出每个 li 的图像、链接，标题和价格。几乎一切都正常，但是当我试图获取每种产品的价格时，我的 JavaScript 崩溃了。我发现我正在迭代的一两个 li 没有 span.span.content，相反，它们已经得到一个p.span.content。这意味着在某些情况下，代码无法找到 span.span.content，然后就会中断。

为什么会发生这种情况？有什么办法可以让我不至于崩溃吗？是否可以对没有 span.span.content 或类似内容的项目进行某种默认后备？

Answer 1

无法解释为什么会出现这样的情况，但这可以解决这种情况:

var price = price1.span ? price1.span.span.content : price1.p.span.content;

或者稍微更紧凑:

var price = (price1.span ? price1.span : price1.p).span.content;

或者，如果您想避免其他类型的跨度并且需要更彻底:

var price = price1.span && price1.span.span && price1.span.span.content ? price1.span.content : (price1.p && price1.p.span && price1.p.span.content ? price1.p.span.content : null);

或者，如果这太多了，你可以将其从三元中分解出来:

var price;

if (price1.span && price1.span.span && price1.span.span.content) {
    price = price1.span.content;
} else if (price1.p && price1.p.span && price1.p.span.content) {
    price = price1.p.span.content;
} else {
    price = null;
}

最后，如果您同意价格未定义，您可以使用以下命令稍微缩短上面的内容:

var price;

if (price1.span && price1.span.span) {
    price = price1.span.content;
} else if (price1.p && price1.p.span) {
    price = price1.p.span.content;
} else {
    price = null;
}