[原创]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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
JS & JQuery 动态添加 select option
Jun 08 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 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
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
python中lambda与def用法对比实例分析
2015/04/30 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
django中模板的html自动转意方法
2018/05/27 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
仓管岗位职责范本
2014/02/08 职场文书
市场营销求职信范文
2014/02/21 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
心理健康教育主题班会
2015/08/13 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
深入理解python多线程编程
2021/04/18 Python