JavaScript中三元运算符与typeof判断实现简易ID选择器

JavaScript三元运算符与typeof判断实现简易ID选择器

要理解这段代码，首先需要掌握两个关键概念：

一个是 typeof 运算符，另一个是三元运算符。

在了解上述基础知识后，再来看下面的代码实现就会更加清晰。

以下是常见的函数代码示例：

function $(id){ return typeof id==='string'?document.getElementById(id):id;}

var GetBy = function (id) {
      return "string" == typeof id ? document.getElementById(id) : id;
    };

这些代码的功能是一致的。

该函数的作用在于简化后续使用ID选择器的操作。其判断逻辑为：如果传入的参数是字符串，则返回 document.getElementById(id)；否则直接返回参数本身。这只是一个获取页面DOM元素的简易版本，尚不够完善。

1、这是一段JavaScript代码 $ 是一个标识符，也可以使用 getID 等名称。如果页面中已经使用了 jQuery，建议不要使用 $，因为 jQuery 默认使用的就是 $。 ？：是三元运算符。 return "string" == typeof id ? document.getElementById(id) : id; 也可以写成如下形式：

if("string" == typeof id )
  return document.getElementById(id);
else
  return id; 

有人可能会问，为什么上面的代码不用 {} 括起来？因为代码只有一行且比较简单，所以不需要使用大括号。

如下所示：

if("string" == typeof id )   {
  return document.getElementById(id);
  }
else {
  return id; 
   }

具体可以参考这篇文章：https://www.jb51.net/article/50197.htm

2、表达式1？表达式2：表达式3

这是一个三元表达式；其运算过程是：先计算表达式1，如果结果为 true，则整个式子取表达式2的运算结果；否则，整个式子的取值就是表达式3的运算结果。不懂的朋友可以参考这篇文章：https://www.jb51.net/article/64237.htm

在你这个例子中，表达式1是 "string" == typeof id，功能是判断 id 的数据类型是否为 string，== 就是判断是否相等的运算符。 表达式2是 document.getElementById(id)，用于获取ID为参数 id 的值的HTML元素。 表达式3 就是 id 这个变量（一般来说这个变量多为 object）。如果是对象，就不需要调用 document.getElementById，可以直接使用。

本站原创整理，转载请注明出处