4

我目前正在一个大型 Javascript 代码库中工作，代码库中到处都是诉诸异常进行流控制的代码

function getChecklistUrl() {
    try {
        return dataLayerObject.config.checklist;
    } catch (e) {
        try {
            console.error('dataLayer', e);
        } catch (ignore) {}
    }
}

我可能喜欢条件逻辑，例如相同功能的这种实现

function getChecklistUrl() {
    if(typeof dataLayerObject == 'object'        &&
       'config' in dataLayerObject               &&
       typeof dataLayerObject.config == 'object' &&
       'checklist' in dataLayerObject.config     &&
       typeof dataLayerObject.config.checklist == 'object') {
        return dataLayerObject.config.checklist;
    }
    return null;
}

虽然后者感觉冗长，但当然可以编写一个辅助函数来减少此类检查的样板。

前者是 Javascript 的惯用语吗？后者是否脆弱（跨浏览器/场景）并且最好留给try/catch无论如何？还是前者只是懒惰的证据？

编辑

这些对象被假定为“普通”对象，var obj = {}所以我不相信我关心这里的原型链。

4

4 回答 4

6

在 javascript 中检查对象属性的正确方法是Object.hasOwnProperty()方法。

例子：

var Person = {
  first_name: 'Fred',
  last_name: 'Flintstone'
};

if ( 'object' === typeof Person && Person.hasOwnProperty('first_name' ) {
  window.alert('the property exists!');
}

编辑

要检查嵌套对象属性，您可以尝试以下操作：

function checkNested(obj /*, level1, level2, ... levelN*/) {
  var args = Array.prototype.slice.call(arguments, 1);

  for (var i = 0; i < args.length; i++) {
    if (!obj || !obj.hasOwnProperty(args[i])) {
      return false;
    }
    obj = obj[args[i]];
  }
  return true;
}

var test = {level1:{level2:{level3:'level3'}} };

checkNested(test, 'level1', 'level2', 'level3'); // true
checkNested(test, 'level1', 'level2', 'foo'); // false
于 2015-11-12T16:10:04.483 回答
2

首先，您不需要同时检查 property in object&& typeof obj[property] == 'object'，您只能使用typeof来处理这两项检查。原因是，如果obj.property不存在，typeof将返回undefined.

因此，您可以通过编写一个检查某物是否为对象的小型实用函数来模块化您的方法：

function isObject(o) {
    return typeof o == 'object' && o !== null; // take care of the corner case that typeof null == 'object'
}

然后只需在必要的对象链上使用它，通过检查其所有拥有的对象是否存在来查找属性：

function getChecklistUrl() {
    if(isObject(dataLayerObject) && 
       isObject(dataLayerObject.config) &&  
       isObject(dataLayerObject.config.checklist)) { 

        return dataLayerObject.config.checklist;
    }
    return null;
}


var dataLayerObject = {
    config: {
         checklist: ['array of stuff']
    }
}

function isObject(o) {
  return typeof o == 'object' && o !== null;
}

function getChecklistUrl() {
  if (isObject(dataLayerObject) &&
    isObject(dataLayerObject.config) &&
    isObject(dataLayerObject.config.checklist)) {

    return dataLayerObject.config.checklist;
  }
  return null;
}

console.log(getChecklistUrl()[0]);

恕我直言，这使代码更有条理且更易于阅读。

您还可以为您的对象执行类似 getter 的操作，该对象采用点分隔的字符串并返回属性，如果属性不存在，则返回 null：

function getObjProperty(obj, propString) {
    if(!isObject(obj) || !propString || typeof propString != 'string') {
        return null;                                 // make sure obj is an object and propString is a non-empty string
    } 

    var props = propString.split('.');
    for (var i = 0, l = props.length; i < l; i++) {
        var p = props[i];
        if(!isObject(obj[p])) { return null; }       // if current property isn't an object, return null
        obj = obj[p];                                // otherwise update the object to the next one down the property chain
    }
    return obj;
}

你会像这样使用它：getObjProperty(dataLayerObject, 'config.checklist');

var dataLayerObject = {
  config: {
    checklist: ['array of stuff']
  }
};

function isObject(o) {
  return typeof o == 'object' && o !== null;
}

function getObjProperty(obj, propString) {
  if (!isObject(obj) || !propString || typeof propString != 'string') {
    return null;
  }

  var props = propString.split('.');
  for (var i = 0, l = props.length; i < l; i++) {
    var p = props[i];
    if (!isObject(obj[p])) {  // 
      return null;
    } // if current property isn't an object, return null
    obj = obj[p]; // otherwise update the object to the next one down the property chain
  }
  return obj;
}

console.log(getObjProperty(dataLayerObject, 'config.checklist'));

或者您可以使用相当简单的递归方法来实现这一点

注意：

上面的例子也检查了原型链。如果您不希望这样做，则应hasOwnProperty在检查属性是否为对象时使用，同时检查该属性是否存在于测试对象上。

Prefix 的回答显示了这种方法的一种变体。

于 2015-11-12T16:25:43.670 回答
0

如果你想让它变短，你可以做这样的事情，但它不会检查 dataLayer 是否是一个对象，所以如果它是一个带有配置和清单的函数，它也会返回它。但由于它是自定义对象，因此可能不是问题。如果需要，您可以添加“in”或“hasOwnProperty”检查，或者如果您愿意，可以使用三元。

var getChecklistUrl = function getChecklistUrl() {
    return dataLayerObject && dataLayerObject.config && dataLayerObject.config.checklist || null;
}
于 2015-11-12T16:15:50.983 回答
0

您总是可以通过利用强制转换来缩短它：

if ( typeof dataLayerObject == 'object' &&
     dataLayerObject.config &&
     dataLayerObject.config.checklist &&
     typeof dataLayerObject.config.checklist == 'object') {
  // do something
}

如果你真的不需要检查 checklist 实际上是一个对象，你可以去掉最后一个typeof. 第一个typeof是必需的，因为您的变量看起来可能是全局的。

于 2015-11-12T16:16:04.713 回答