JavaScript专题之类型判断(下) about blog HOT 45 OPEN

@F-happy 也可以呀，不过两者稍微有一点区别，文章中的方法用的是 for in ，而这种方法用的是 Object.keys 两者的主要区别在于 for in 还会遍历原型上的属性，这也就意味着：

function Person(){}
Person.prototype.name = "111"
var person = new Person();
console.log(isEmptyObject(person))

如果用文中的方法就会是 false，用这种方法结果就会是 true，无所谓对错，看设计者想设计成什么样哈。

除此之外， Object.keys 是一个 ES5 的方法哈~

from blog.

其实我觉得这段代码是有问题的：

var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;

var isArrayLike = function(collection) {
    var length = getLength(collection);
    return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};

typeof length == 'number'这一个判断中，比如说typeof 2.3 == 'number'也是成立的，有点不严谨的地方就是length不应该是小数。JavaScript权威指南中判断的方法我觉得会更好一些：

function isArrayLike(o) {
    if (o && // o is not null, undefined, etc
        // o is an object
        typeof o === "object" &&
        // o.length is a finite number
        isFinite(o.length) &&
        // o.length is non-negative
        o.length >= 0 &&
        // o.length is an integer
        o.length === Math.floor(o.length) &&
        // o.length < 2^32
        o.length < 4294967296) //数组的上限值
      	return true;
    else 
      	return false;
}

from blog.

这样是不是也可以判断是否是空对象呢？

function isEmptyObject(obj) {
    return !!obj ? (Object.keys(obj).length === 0) : true;
}

from blog.

@xiaobinwu 心历过程？先挑个简单的看，然后搜索看有没有人写过这个东西的源码解析或者精简版的实现，然后边看源码边看文章，不知道算不算……

from blog.

@foxpsd 出于兼容性的考虑，使用 toString 打印的结果在各个浏览器还不一样：

from blog.

@mqyqingfeng 判断isPlainObject那个方法的最后一句

return typeof Ctor === "function" && hasOwn.toString.call(Ctor) === hasOwn.toString.call(Object);

是否可以写成

return typeof Ctor === "function" && Ctor.toString() === class2type.constructor.toString();

from blog.

@magentaqin isElement 函数用来判断元素是否是 Element，结果只有两种，true 或者 false。

举个例子：

var isElement = function(obj) {
    return !!(obj && obj.nodeType === 1);
};
var a;
isElement(a)

如果 obj 不存在的话，直接写就变成了返回 undefined

from blog.

@tr2v 你要是写一个 API，将这种类型也算为类数组对象，也可以的，重点还是说在实际开发中对于类数组对象的处理是否符合业务需求，比如写业务中就是会出现这种对象，而我又需要跟数组一样处理，那它就是被允许的

from blog.

这里 应该是length 大于0的number类型的吧

from blog.

@NewNewKing 非常感谢指出~ 确实是写错了

from blog.

有一个地方有点疑惑，isWindow方法也会放过一个 window 属性指向自身的普通对象。用 toString 方法得到的[object Window]是不是更好呢？

from blog.

@mqyqingfeng 原来如此····
顺便问一句，楼主这个结构是自己试的还是在什么资料站看到哒？

from blog.

@foxpsd 出自 jQuery 的源码

from blog.

看来要花些时间去多看源码，楼主对于看源码有没有心历过程呀？

from blog.

@sarazhang123 可以的，如果非要说两种方法有什么区别的话，可能是前者速度会更快些……

from blog.

isElement里面为什么多加一个判断obj是否存在呢? 直接obj.nodeType === 1不可以么?

from blog.

@zhangruinian 举个例子：

var isElement = function(obj) {
    return !!(obj.nodeType === 1);
};

console.log(isElement()) // 报错
console.log(isElement(a)) // 报错
console.log(isElement(undefined)) // 报错

from blog.

你好我想问问isWindow的判断原理是判断传入的对象是否有window属性，如果我创造一个对象，
给对象一个window属性指向window，这样isWindow不是也会返回true吗。

from blog.

@MillionQW

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

应该是创造一个对象，将这个对象的 window 属性指向自己

如果要刻意创造这样一个对象，这也没有办法呀~

from blog.

isElement里!!(obj && obj.nodeType === 1)为什么不能直接写成obj && obj.nodeType === 1

from blog.

因为 || 和 && 的返回值实际上不是布尔值，而是返回比较中的两个值中的一个，用 !! 是做强制类型转换，将值转换为布尔值。
一点愚见，还是要请博主回答。(^○^)

from blog.

看来两遍只能说看懂了代码想表达什么，要我自己写的话肯定会懵逼。
还有~~为什么没有直接点下一篇的链接啊哈哈哈

from blog.

from blog.

数组最后一个元素要有值这个好像吐槽了好久的一个梗.

from blog.

@ClarenceC 这个梗不知道哎~😂

from blog.

意思是这种就不算类数组对象吗。
var arrLike = { 0: 1, length: 3 }
好难理解啊，类数组的定义要求的吗

from blog.

@tr2v 没有要求，看 API 设计者想设计成什么样

from blog.

// obj 必须有 length属性
var length = !!obj && "length" in obj && obj.length; !!obj为什么要这样判断

from blog.

@xwcp

首先要理解 a || b 和 a && b 返回的值不一定是布尔值，而是 a 和 b 其中一个值。

所以假定 obj === 0 时：

var length = !!obj // 此时 length === false
var length = obj   // 此时 length === 0

from blog.

判断是否为window

function isWindow( obj ) {
    return obj != null && obj === obj.window;
}
let fakeWindow = {}
fakeWindow.window = fakeWindow
isWindow(fakeWindow) // true

为什么不用这种方法，是存在什么缺陷吗？

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

@mqyqingfeng 请楼主解惑

from blog.

针对isArrayLike函数会将var obj = {length: 0, b: 1}这样的对象也判断为数组的问题，给这个函数的开始加一个这样的判断感觉可以解决问题，不知道会不会有其他的影响：

function isArrayLike(obj) {
    if (Object.keys(obj).indexOf('length') > -1) return false
   // 后面的代码省略
}

因为如果这里忽略这个问题，我看了后面的underscore的文章中，假如我要遍历一个，这样的对象：

var obj = {
  length: 0,
  a: 1,
  b: 2
}

用_.each(obj, callback)是没有效果的

from blog.

来两遍只能说看懂了代码想表达什么，要我自己写的话肯定会懵逼。
还有~~为什么没有直接点下一篇的链接啊哈哈哈

推荐chrome的插件 Octotree 😄

from blog.

window.a = 1;
function isWindow( obj ) {
return obj != null && obj === obj.window;
}
isWindow(a) //false
请问是window.a 还是说{} {}.window={} 这种赋值的window对象呢？

from blog.

@mqyqingfeng 判断isPlainObject那个方法的最后一句

return typeof Ctor === "function" && hasOwn.toString.call(Ctor) === hasOwn.toString.call(Object);

是否可以写成

return typeof Ctor === "function" && Ctor.toString() === class2type.constructor.toString();

那最后一句是否可以写成

return Ctor === Object;

from blog.

@sarazhang123 可以的，如果非要说两种方法有什么区别的话，可能是前者速度会更快些……

为什么前者Ctor是函数类型，本可以Ctor.toString，却非要调用call来调用？
是不是也可以return typeof Ctor === "function" && Ctor.toString() === Object.toString();

from blog.

这里应该是window.obj吧

from blog.

这里应该是window.obj吧

当然只有obj等于window时才会返回true啦
window.window === window //true

from blog.

空对象判断，isEmptyObject(100)也会返回true，这个合理吗

from blog.

判断是否为window

function isWindow( obj ) {
    return obj != null && obj === obj.window;
}
let fakeWindow = {}
fakeWindow.window = fakeWindow
isWindow(fakeWindow) // true

为什么不用这种方法，是存在什么缺陷吗？

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

@mqyqingfeng 请楼主解惑

我觉得应该是在node环境下，window没有定义的话，会报错的

from blog.

Array.isArray函数个人感觉这么写更好些：

const MAX_ARRAY_INDEX = Math.pow(2, 53) - 1; //避免内存溢出

function isArrayLike(obj) {
  if (isWindow(obj) || type(obj) === "function") {
    return false;
  }

  const length =
    !!obj &&
    typeof obj.length === "number" &&
    obj.length >= 0 &&
    obj.length <= MAX_ARRAY_INDEX &&
    obj.length;

  if (isElement(obj) && length) {
    return true;
  }

  return (
    Array.isArray(obj) || length === 0 || (length > 0 && length - 1 in obj)
  );
}

from blog.

!obj || toString.call(obj) !== "[object Object]" 中!obj可以不用判断吧，toString 就能判断吧

from blog.

typeof Ctor === "function" && hasOwn.toString.call(Ctor) === hasOwn.toString.call(Object);可以直接判断构造函数和Object吗

Ctor === Object

from blog.

这样是不是也可以判断是否是空对象呢？

function isEmptyObject(obj) {
    return !!obj ? (Object.keys(obj).length === 0) : true;
}

Object.keys 拿不到原型链上的属性吧

from blog.

typeof Ctor === "function" && hasOwn.toString.call(Ctor) === hasOwn.toString.call(Object);可以直接判断构造函数和Object吗

Ctor === Object

同问，直接判等是不是有没有什么说法呢

from blog.

/**
* 以下判断通过 new Object 方式创建的对象
* 判断 proto 是否有 constructor 属性，如果有就让 Ctor 的值为 proto.constructor
* 如果是 Object 函数创建的对象，Ctor 在这里就等于 Object 构造函数
*/
Ctor = hasOwn.call(proto, "constructor") && proto.constructor;
请问这里为什么要判断两次，只用proto.constructor或者只用hasOwn.call(proto, "constructor") 可以吗

from blog.