在日常开发中,我们经常需要判断某个对象是否是数组类型的,在js中检测对象类型的常见的方法有几种:
1、typeof操作符。对于Function、String、Number、Undefined这几种类型的对象来说,不会有什么问题,但是针对Array的对象就没什么用途了:
3、对象的constructor属性。除了instanceof,我们还可以利用每个对象都具有constructor的属性来判断其类型,于是乎我们可以这样做:
var arr = [];
alert(arr.constructor == Array); // true
貌似后两个解决方案是无懈可击的,但真的是这样么?天有不测风云,当你在多个frame中来回穿梭的时候,令人沮丧的问题出现了:
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]
// 哎呀!
arr instanceof Array; // false
// 哎呀呀!
arr.constructor === Array; // false
由于每个iframe都有一套自己的执行环境,跨frame实例化的对象彼此是不共享原型链的,因此导致上述检测代码失效!怎么办怎么办??嗯,javascript是动态语言,或许万金油“鸭式辨型”(duck type)可以助我们一臂之力“如果它走起路来像鸭子,叫起来也像鸭子,那就当他是鸭子吧”,同理,可以检测某些数组对象特有的能力来做判断,这个法子已经有人用了,比如Prototype框架,来看看它实现的Object.isArray方法:
isArray:”object,你有splice、join这两个数组特有的方法吗?”
object:“嗯,没错我有!”
isArray:“好吧,那你就是个数组了,哪怕你是冒充的,囧……”
var trickster = { splice: 1, join: 2 };
Object.isArray(trickster); // 假冒成功,耶
没错,这个解决方案给人的感觉有点别扭,任何一个具有'splice'和'join'属性的对象都能通过这个检测!怎么办怎么办怎么办??别着急,仔细想想,其实我们需要的是一个能取得对象实际类型,而且又能跨frame使用的方法即可。这不,细心的老外在翻阅ECMA262标准的时候发现了这个(btw,我也看了,怎么就没发现这个用途呢,囧):
ECMA-262 写道
Object.prototype.toString( ) When the toString method is called, the following steps are taken:
1. Get the [[Class]] property of this object.
2. Compute a string value by concatenating the three strings “[object “, Result (1), and “]”.
3. Return Result (2)
上面的规范定义了Object.prototype.toString的行为:首先,取得对象的一个内部属性[[Class]],然后依据这个属性,返回一个类似于"[object Array]"的字符串作为结果(看过ECMA标准的应该都知道,[[]]用来表示语言内部用到的、外部不可直接访问的属性,称为“内部属性”)。利用这个方法,再配合call,我们可以取得任何对象的内部属性[[Class]],然后把类型检测转化为字符串比较,以达到我们的目的。还是先来看看在ECMA标准中Array的描述吧:
ECMA-262 写道
new Array([ item0[, item1 [,…]]])
The [[Class]] property of the newly constructed object is set to “Array”.
于是乎,可以改写之前的isArray函数以利用这个特性,如下:
call改变toString的this引用为待检测的对象,返回此对象的字符串表示,然后对比此字符串是否是'[object Array]',以判断其是否是Array的实例。也许你要问了,为什么不直接o.toString()?嗯,虽然Array继承自Object,也会有toString方法,但是这个方法有可能会被改写而达不到我们的要求,而Object.prototype则是老虎的屁股,很少有人敢去碰它的,所以能一定程度保证其“纯洁性”:)
相关推荐
1 JavaScript速览:进入JavaScript的世界 阅读 2 编写代码:更进一步 3 函数简介:养成函数思维 4 让数据排排坐:数组 5 理解对象:对象镇之旅 6 与网页交互:了解DOM 7 类型、相等、转换等:系统...
《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码,书中详细说明了作为团队一分子,应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面...
《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码,书中详细说明了作为团队一分子,应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面...
在《JavaScript语言精粹》中,您将会发现一门美丽的、优雅的、轻量级的和非常富有表现力的语言,它使您创建高效的代码,不管您编写代码的目的是管理对象库还是仅仅使Ajax运行得更快。如果您为web开发站点或应用程序...
数组字面量 JSON 正则表达式字面量 基本值类型包装器 错误对象 小结 第4章 函数 背景 回调模式 返回函数 自定义函数 即时函数 即时对象初始化 初始化时分支 函数属性——备忘模式 ...
Javascript Basic 1、Javascript 概述(了解) Javascript,简称为 JS,是一款能够运行在 JS解释器/引擎 中的脚本语言 JS解释器/引擎 是JS的运行环境: 1、独立安装的JS解释器 - NodeJS 2、嵌入在浏览器中的JS...
JavaScript:定义行为和动作 (基于对象和事件驱动的客户端脚本语言;也是一种广泛应用于客户端Web开发的脚本语言) 基于对象:网页中的一切...22.全局函数:不用任何对象点(.)就可以调用--可用于所有的 JavaScript ...
我将从闭包开始,这是一种在 JavaScript 中创建私有变量和函数的强大方法。然后,我this详细解释关键字。 接下来,我将深入探讨原型继承,这是 JavaScript 的一个关键特性,它允许对象从其他对象继承属性和方法。...
4.6.2 编写函数 110 第5章 动态修改Web页面 115 5.1 修改Web页面:概览 116 5.2 理解文档对象模型 117 5.2.1 选择页面元素 118 5.2.2 给页面添加内容 122 5.2.3 再谈月球测验 123 5.2.4 DOM的问题 126 5.3 ...
数组字面量 JSON 正则表达式字面量 基本值类型包装器 错误对象 小结 第4章 函数 背景 回调模式 返回函数 自定义函数 即时函数 即时对象初始化 初始化时分支 函数属性——备忘模式 配置对象 Curry 小结 第5章 对象...
3.1 我能用什么来编写脚本--适合编写JavaScript的文本编辑器 3.2 来自浏览器的支持 3.3 集成开发环境 3.4 调试工具--提升开发效率的利器 3.5 定位代码和调用堆栈 3.6 浏览器捕获异常 3.7 ...
问题1 :清理房间函数:给定[1,2,4,591,392,391,2,5,10,2,1,1,1,20,20]的输入,做一个将这些函数组织成有序的单个数组的函数。 例如, answer(ArrayFromAbove)应该返回: [[1,1,1,1],[2,2], 4,5,10,[20,20], 391, ...
数组和对象是同一件事,但是仍然有两个不同的文字可以帮助您编写它们。 没有变数。 只有常量。 数组可以变异。 没有行尾字符,例如:分号,逗号。 实验的东西 常数 let name = "Luke" let age = 26 显式类型 let ...
Coding_challenge-6 挑战是什么? 解决以下3个javascript难题。 这项挑战的目标是练习我们的逻辑技能... 问题2:编写一个JavaScript函数,该函数需要一个数字数组和一个目标数字。 该函数应在数组中找到两个不同的数字
JS算法的挑战此回购包含解决算法难题的解决方案,目的是更好地了解Javascript。 目标:100个挑战里程碑:解决了50个挑战参考:I =中级,E =简单,V =非常简单C50:数组中数字元素的总和数组可以与各种类型混合使用。...
即[1,“ 2”,“ 3”,2]应该返回[[1,2],[“ 2”,“ 3”]] 问题2:编写一个JavaScript函数,该函数需要一个数字数组和一个目标数字。 该函数应在数组中找到两个不同的数字,这些数字加在一起后即可得出目标数字...
Coding_Challenge_6 解决以下3个javascript难题。... 问题2 :编写一个JavaScript函数,该函数需要一个数字数组和一个目标数字。 该函数应在数组中找到两个不同的数字,这些数字加在一起后即可得出
您将编写四个函数: driversWithRevenueOver -这个函数的阵列driver JavaScript对象作为第一个参数和一个字符串称为revenue作为第二个参数。 它返回具有revenue属性大于传递的revenue参数的driver对象数组。 ...
使用$.isPlainObject()函数检测对象是否为原始对象 使用$.contains()函数检测两个节点是否包含 使用$.param()进行数组元素序列化 使用函数$.extend()扩展工具函数 使用函数$.proxy()改变事件函数的作用域 使用...