惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

WordPress大学
WordPress大学
Application and Cybersecurity Blog
Application and Cybersecurity Blog
G
GRAHAM CLULEY
P
Privacy International News Feed
L
LINUX DO - 热门话题
C
Cisco Blogs
T
Tor Project blog
AWS News Blog
AWS News Blog
K
Kaspersky official blog
C
Cybersecurity and Infrastructure Security Agency CISA
Cyberwarzone
Cyberwarzone
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
CERT Recently Published Vulnerability Notes
P
Proofpoint News Feed
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
L
Lohrmann on Cybersecurity
C
CXSECURITY Database RSS Feed - CXSecurity.com
Project Zero
Project Zero
Attack and Defense Labs
Attack and Defense Labs
Latest news
Latest news
The Last Watchdog
The Last Watchdog
Apple Machine Learning Research
Apple Machine Learning Research
Simon Willison's Weblog
Simon Willison's Weblog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
Cloudbric
Cloudbric
Last Week in AI
Last Week in AI
S
Security Affairs
Google DeepMind News
Google DeepMind News
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
有赞技术团队
有赞技术团队
V
Visual Studio Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
小众软件
小众软件
P
Palo Alto Networks Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
S
Security @ Cisco Blogs
V
V2EX
S
Secure Thoughts
人人都是产品经理
人人都是产品经理
月光博客
月光博客
博客园_首页
T
Troy Hunt's Blog
爱范儿
爱范儿
N
News and Events Feed by Topic
Hugging Face - Blog
Hugging Face - Blog
雷峰网
雷峰网
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
P
Privacy & Cybersecurity Law Blog
V
Vulnerabilities – Threatpost

静水深流's blog

探索 SSE:服务器推送技术的魅力与应用 | 静水深流 图解DIFF算法介绍 | 静水深流 如何使用javascript实现复制出的文案带链接? | 静水深流 基于vuepress2搭建专属自己的博客,并集成各种常用功能 | 静水深流 听说你至今不晓得缓存淘汰算法?实现LRU、LFU和FIFO? | 静水深流 最长递增子序列及vue3.0中diff算法 | 静水深流 二进制之入门到应用实践 | 静水深流 常见算法学习 | 静水深流 CSS 形状的实现 | 静水深流 ajax取消接口请求 | 静水深流 前端常见的安全问题 | 静水深流 关于http服务端的学习&总结 | 静水深流 前端面试题总结 | 静水深流 javascript原生代码实现及代码总结 | 静水深流 LeetCode算法学习总结-简单 | 静水深流 LeetCode算法学习总结-困难 | 静水深流 LeetCode算法学习总结- 中等 | 静水深流 排序算法总结 | 静水深流 扫码登录的实现原理 | 静水深流 JavaScript各种继承方式和优缺点 | 静水深流 webpack开发、使用及优化总结 | 静水深流 从JavaScript中的拷贝开始思考 | 静水深流 vue原理、使用及面试方面的总结 | 静水深流 前端发展及选择 | 静水深流 css面试总结 | 静水深流 JavaScript 数组展开(扁平化)和underscore的 flatten | 静水深流 首页 | 静水深流 学习网站收藏 | 静水深流 文章列表 | 静水深流
Javascript之常见类型判断汇总 | 静水深流
shaolibao · 2021-04-01 · via 静水深流's blog

基本类型的判断

typeof

typeof操作符返回一个字符串,表示未经计算的操作数的类型,其返回结果对比如下

1234567
UndefinedNullBooleanNumberStringObjectSymbol
undefinedObjectbooleannumberstringobjectsymbol
Object下还有细分类型为:ArrayDateRegExpError

需要注意的是以上的返回值都为小写的字符串

Object.prototype.toString

Object.prototype.toString能够检测出基本数据类型,及Object下细分类型,其返回形式是[object typeClass];例如:

console.log(Object.prototype.toString.call(undefined)) // [object Undefined]

此方法基本能够检测出所有类型了

类型判断

var classtype = {};

"Boolean Number String Function Array Date RegExp Object Error Symbol Set Map".split(" ").map(function(item) {
    classtype["[object " + item + "]"] = item.toLowerCase();
})

function type(obj) {
  // 解决IE6下null和undefined会被Object.prototype.toString识别成[object Object]
  if (obj == null) {
      return obj + "";
  }

  //当typeof判断出类型为object|functin时调用Object.prototype.toString.call方法
  return typeof obj === "object" || typeof obj === "function" ?
      classtype[Object.prototype.toString.call(obj)] || "object" :
      typeof obj;
}

空对象的判断

对于一下对象按照空对象null,undefind,[],空字符串,true or false,{},number类型,new Preson()构造函数

jQuery实现

for循环一旦执行,则判断为非空属性

function isEmptyObject( obj ) {
  var name;
  // for in 方法是可以遍历原型链的……
  for ( name in obj ) {
      return false;
  }
  return true;
}

lodash实现

function isEmpty(value) {
  if (value == null) {
    return true;
  }
  // 判断类数组,如果length等于0,则说明是空的类数组
  if (isArrayLike(value) &&
      (isArray(value) || typeof value == 'string' || typeof value.splice == 'function' ||
        isBuffer(value) || isTypedArray(value) || isArguments(value))) {
    return !value.length;
  }
  var tag = getTag(value);
  if (tag == mapTag || tag == setTag) {
    return !value.size;
  }
  // 判断value 是否是一个原型对象
  if (isPrototype(value)) {
    return !baseKeys(value).length;
  }
  for (var key in value) {
    //对象中存在key且不是原型链里的
    if (hasOwnProperty.call(value, key)) {
      return false;
    }
  }
  return true;
}

数组判断

当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes

isArray = Array.isArray || function(array){
  return Object.prototype.toString.call(array) === '[object Array]';
}

类数组判断

定义

所谓类数组就是指含有指向对象的数字索引下标,及length属性标志个数,类数组不含有push、concat等数组的方法

条件如下:

  • 是数组
  • length有,且必须为数字
  • length-1必须存在,这是为了检测数组最后一个值是否存在

常见的类数组:arguments,document.querySelectAll()等获取dom的方法

实现

function likeArray(obj) {
  // obj必须存在且含有lenght属性
  var length = !!obj && 'length' in obj && obj.length,
  // 获取obj的数据类型
    type = type(obj)
  // 不能是function类型,不能是window
  // 如果是array则直接返回true
  // 或者当length的数据类型是number,且大于0,存在最后一个属性
  return 'function' !== type && !isWindow(obj) && 
  ('array' === type || length === 0 || (typeof length === 'number' && length > 0 && (length - 1) in obj))
}

注:

length === 0认为是数组,是为了判断如下情况:

function test(){
  console.log(likeArray(arguments))
}
test()

underscore的实现

underscore对类数组的实现比较简单宽松,其判断依据是:`length为数字,且取值范围在0<=length<=MAX_ARRAY_INDEX

//js 中能精确表示的最大数字
var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
var getLength = property('length');
var isArrayLike = function(collection) {
  var length = getLength(collection);
  return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};

NaN的判断

NaN的产生:当算术运算返回一个未定义的或无法表示的值时,NaN就产生了。但是,NaN并不一定用于表示某些值超出表示范围的情况。将某些不能强制转换为数值的非数值转换为数值的时候,也会得到NaN。

判断一个数是不是NaN不能单纯地使用 === 这样来判断, 因为NaN不与任何数相等, 包括自身

//loadsh的实现
function isNaN(value) {
  return isNumber(value) && value != +value;
}

DOM元素判断

//loadsh的实现
function isObjectLike(value) {
  return value != null && typeof value == 'object';
}
function isElement(value) {
  return isObjectLike(value) && value.nodeType === 1
}

window对象判断

判断依据:window对象又一个window属性指向自身,及window === window.windowMDNopen in new window

function isWindow( obj ) {
  return obj != null && obj === obj.window;
}