[原创]javascript typeof id==='string'?document.getElementById(id):id解释


Posted in Javascript onNovember 02, 2016

一般来说想要理解这段代码,需要掌握如下两个函数

一个是 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://3water.com/article/50197.htm

2、表达式1?表达式2:表达式3

这是一个式子;他的运算过程是:先计算表达式1,如果为true,这个式子就取表达式2的运算结果,否则整个式子取值就是表达式3的运算结果,不懂的朋友可以参考这篇文章:https://3water.com/article/64237.htm

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

三水点靠木原创整理,转载请注明出处

Javascript 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 #Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 #Javascript
bootstrap基础知识学习笔记
Nov 02 #Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 #Javascript
Bootstrap table的使用方法
Nov 02 #Javascript
AngularJS指令用法详解
Nov 02 #Javascript
AngularJS表单和输入验证实例
Nov 02 #Javascript
You might like
php筛选不存在的图片资源
2015/04/28 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
python实现马丁策略的实例详解
2021/01/15 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
行政部岗位职责范本
2014/03/13 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
休假证明书
2015/06/24 职场文书
小学数学教学反思范文
2016/02/16 职场文书