[原创]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 相关文章推荐
JavaScript中的字符串操作详解
Nov 12 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python快速从注释生成文档的方法
2016/12/26 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
python队列Queue的详解
2019/05/10 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
python如何修改文件时间属性
2021/02/05 Python
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
行政专员工作职责
2013/12/22 职场文书
一分钟演讲稿
2014/04/30 职场文书
给校长的一封检讨书
2014/09/20 职场文书
家长学校教学计划
2015/01/19 职场文书
信息技术课教学反思
2016/02/23 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python