Question

我编写了下面的代码，以及更多，以快速构建3屏幕Web应用程序的原型。不打算用它来生产。该项目即将完成，但有一个问题困扰着我。我收到错误 - Cannot read property 'first_name' of undefined，即使首先检查对象是否将属性报告为未定义。实现代码不是一个如何处理这些事情的例子，但为什么它不起作用？为了防止上下文的困难，我甚至克隆了数组 - 可能是不必要的。导致未定义错误的原因是什么？

    $.ajax({
        url: '/api/v1/departures/' + routeID + '/',
        method: 'GET',
        headers: {
            'Authorization': 'Token '+ owner_token]
        },
        contentType:'application/json',
        success: function(departures) {
            console.log('departures: ' + JSON.stringify(departures));
            if ( departures && ( 0 < departures.length)) {
                var template = '';
                for ( var j = 0; j < departures.length; j++) {
                    if (departures[j].route == routeID) {
                        var seats = (departures[j].seats).slice(0);
                        for ( var i = 0; i < seats.length; i++) {
                            template  += '<div class="right-seat" data-id="' + seats[i].seat + '">' +
                                 '<div class="right-seat-place">SEAT ' + seats[i].seat + '</div>' +
                                 '<div class="right-seat-name">' +
                                 seats[i].hasOwnProperty('passenger') ? seats[i].passenger.first_name + ' ' + seats[i].passenger.last_name : '' +
                                 '</div>' +
                                 '<div class="right-seat-reserved"><i class="glyphicon glyphicon-check"></i>&nbsp;' +
                                 seats[i].hasOwnProperty('passenger') ? 'Reserved' : 'Available'  +
                                 '</div>' +
                                 '</div>';
                        }
                    }
                }
                $('div.right-top-controls').after(template);
            }
        },
        error: function() {
            alert('error!');
        }
    });

请告知。

谢谢。

Answer 1

hasOwnProperty只检查对象是否具有该名称的属性。它不会检查该值是什么。该值可以是undefined。

＆＃13;

// Doesn't have the property and accessing it returns undefined
var A = {};
console.log(A.hasOwnProperty('prop'));
console.log(A.prop);


// Has the property and the value is not undefined
var B = {
  prop: 1
};
console.log(B.hasOwnProperty('prop'));
console.log(B.prop);

// Has the property AND it's value is undefined
var C = {
  prop: undefined
};
console.log(C.hasOwnProperty('prop'));
console.log(C.prop);

＆＃13;

这意味着seats[i]可能具有passenger属性，但其值仍可能为undefined。

还有你使用ternary operation during string concatenation.的问题基本上，+的优先级高于?:，这会导致在条件限制之前发生连接评估。要解决此问题，请将三元组包装在括号中。

template  += '<div class="right-seat" data-id="' + seats[i].seat + '">' +
               '<div class="right-seat-place">SEAT ' + seats[i].seat + '</div>' +
               '<div class="right-seat-name">' +
                 (seats[i].hasOwnProperty('passenger') ? seats[i].passenger.first_name + ' ' + seats[i].passenger.last_name : '') +
               '</div>' +
               '<div class="right-seat-reserved"><i class="glyphicon glyphicon-check"></i>&nbsp;' +
                 (seats[i].hasOwnProperty('passenger') ? 'Reserved' : 'Available')  +
               '</div>' +
             '</div>';

混淆hasOwnProperty

1 个答案: