使用三元运算符检查 null

发布于 2024-12-13 04:21:43 字数 554 浏览 1 评论 0原文

在下面的代码中，我传递一个 HMTL 元素并使用三元运算符检查传递的参数是否为 null。如果它不为 null，我将更改传递元素的 className。

var changeColorTo = {

  grey: function(e){
    e ? (e.className = "grey") : "" ;
  },
  red: function(e){
    e ? (e.className = "red") : "" ;
  },
  green: function(e){
    e ? (e.className = "green") : "" ;
  },
  blue: function(e){
    e ? (e.className = "blue") : "" ;
  }
};

上面的代码工作正常，除非我传递任何随机字符串，例如

changeColorTo.grey("random");

It 不会造成任何伤害。但我想知道上面的代码正确吗？我错过了什么吗？或者有没有更好的方法来达到相同的结果？

谢谢。

原文

In below code, I pass an HMTL element and check whether parameter passed is null or not using ternary operator. If it is not null, I change the className of the passed element.

var changeColorTo = {

  grey: function(e){
    e ? (e.className = "grey") : "" ;
  },
  red: function(e){
    e ? (e.className = "red") : "" ;
  },
  green: function(e){
    e ? (e.className = "green") : "" ;
  },
  blue: function(e){
    e ? (e.className = "blue") : "" ;
  }
};

The above code works fine except when I pass any random string like

changeColorTo.grey("random");

It doesn't cause any harm. But I am wondering is above code correct? Do I miss anything? or is there any better way to achieve the same result?

Thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怪我太投入 2024-12-20 04:21:43

您可以将条件从 e 扩展到 (e && e.className)。这应该可以防止由于传入随机垃圾甚至非元素节点而导致脚本错误。

更好的是，将该条件实现为 function hasClassName(e) { return ... } 并使用 hasClassName(e) 作为测试。

编辑：替换了不太完全兼容的 (typeof e=="object") && ('className' in e) 条件，根据评论。另请参阅如何我检查一个对象是否有 JavaScript 中的属性？

回复收藏 0 原文

也只是曾经 2024-12-20 04:21:43

如果您传入一个字符串，代码就可以工作。但是，如果您想确保只传入 DOM 元素（最好严格一点），您可以将代码修改为：

function isNode(o){
  return (
    typeof Node === "object" ? o instanceof Node : 
    typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string"
  );
}    

function isElement(o){
  return (
    typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
    typeof o === "object" && o.nodeType === 1 && typeof o.nodeName==="string"
  );
}

var changeColorTo = {
    grey: function(e) {
        isNode(e) || isElement(e) ? (e.className = "grey") : "" ;
    },
    ...
}

有关 isNode 和 的详细信息>isElement 工作，看看这个stackoverflow回答。此代码还将确保您不会尝试更改 null 或 undefined 变量的 className 属性，因为每个条件中的第一个条件这些函数（o instanceof Node 和 o instanceof HTMLElement）将失败，这确保 isNode 和 isElement 将返回false 表示 null 和未定义值。

The code as it stands, will work if you pass in a string. However, if you want to be sure that you're only passing in a DOM element (it's better to be strict), you can modify your code to this:

function isNode(o){
  return (
    typeof Node === "object" ? o instanceof Node : 
    typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string"
  );
}    

function isElement(o){
  return (
    typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
    typeof o === "object" && o.nodeType === 1 && typeof o.nodeName==="string"
  );
}

var changeColorTo = {
    grey: function(e) {
        isNode(e) || isElement(e) ? (e.className = "grey") : "" ;
    },
    ...
}

For more information on how isNode and isElement work, take a look at this stackoverflow answer. This code will also ensure that you won't try to change the className attribute of a null or undefined variable since the first condition in each of those functions (o instanceof Node and o instanceof HTMLElement) will fail, which ensures that isNode and isElement will return false for null and undefined values.