从jquery源码中看类型判断和数组的一些操作

在深入看jquery源码中,大家会发现源码写的相当巧妙。那我今天也通过几个源码中用到的技巧来抛砖引玉,希望大家能共同研究源码之精华,不要囫囵吞枣。

1.将类数组转化成数组

我想大家首先想到的方法是for in循环,这是很对的,也是行之有效的。但是并非是效果最优的。因为需要循环,然后把循环出来的值push进新数组里,估计怎么也得10行代码吧。。。

那么jquery中是怎么用的呢? Array原型上的slice方法。

我们在控制台中打上Array.prototype.slice 那么会出来一个完整的slice方法。同样,如果打上Array.prototype.push ,也会出来一个完整的push方法。那么我们可以认定,数组的这些方法都是定义在Array 的prototype上的。

现在定义一个类数组。至于什么是类数组,我在这里就不赘述了,忘了的同学可以查查资料。

var obj={0:‘zhangsan‘,1:24,2:‘male‘,length:3};

ok,大家知道,类数组有lengh属性,与数组类似,但是两者的最大区别就是:类数组无法使用数组上的方法。那么怎么办呢?这时主角要出场了,热烈欢迎!!

Array.prototype.slice.call()

看一下完整的解决方法,然后再分析:

var obj={0:‘zhangsan‘,1:24,2:‘male‘,length:3};

var res = Array.prototype.slice.call(obj);

console.log(res); //["zhangsan", 24, "male"]

就这么简单的一行,结果就出现了,是不是比循环的十几行要优化多了?

好了,现在详细方希Array.prototype.slice.call()

首先看call方法,大家可能都知道,call是会让调用它的方法里的this关键字指向发生变化

function tests(){
    alert(this);
}
tests.call(‘test‘); // test

好,那么通过上面这个例子,我们可以知道Array.prototype.slice.call() 改变的是数组原型的slice方法中的this值。

纠结的事情来了,这个this在哪啊?明明没有看到this啊。 这就对应了一句话:所见并非即所得。

虽然我们在这句话中没有见到this,但是可以想象在js源码的slice方法中一定有this。

既然slice里的this关键字改成obj了,那么obj可以用slice方法了。

现在再解释一下slice方法,是从一个起始点到终点,如slice(0)就代表从第0项到最后。

那么完整解释一下这句话: Array.prototype.slice.call(obj) 就是把obj从第0项到最后一项的值存到一个新数组中,如何判断哪个是最后一项?length属性,看length等于3,那么最后一项就是索引为2的那一项。

现在再看obj

var obj={0:‘zhangsan‘,1:24,2:‘male‘,length:3};

很明显,第0项就是zhangsan,第1项是24,第2项是male,第2项是最后一项。

所以结果是:["zhangsan", 24, "male"]

希望我的分析能给大家一点点别样的灵感。下面的分析就不这么细了

2.将一个数组合并到另一个数组: Array.prototype.push.apply(arr1,arr2)

var arr1 = [1,2,3];
var arr2 = [4,5,6];
arr1.push(arr2) //[1,2,3,[4,5,6]]

这显然不是我们想要的,

var arr1 = [1,2,3];
var arr2 = [4,5,6];
Array.prototype.push.apply(arr1,arr2);
console.log(arr1) //[1,2,3,4,5,6]

这样就能完美的解决。但这个方法不是万能的,当要插入的数组数值很大时就会出现错误。所以我们用时要注意。

3.判断变量的详细类型

Object.prototype.toString.call(obj)

用这个方法可以详细的判断出类型到底是object 还是array还是date 等,而原生的typeof  instanceof 都有缺点,无法正确判断。

时间关系,先写这些

时间: 2024-11-05 23:33:18

从jquery源码中看类型判断和数组的一些操作的相关文章

js便签笔记(9)——解读jquery源码时记录的一些知识点

近来一直利用业余时间在看jquery2.1.1源码,大约看了两千行了.平时看的时候,做了一些笔记,贴出来分享. 1. Array.prototype.slice.call 可以将伪数组转化为真正的数组 其实,这里所谓的"伪数组"就是有length属性,并且有"0"."1"."2"等这些属性的对象,如下代码: var obj = { 0: "A", 1: "B", 2: "C&q

jQuery源码分析系列(36) : Ajax - 类型转化器

什么是类型转化器? jQuery支持不同格式的数据返回形式,比如dataType为 xml, json,jsonp,script, or html 但是浏览器的XMLHttpRequest对象对数据的响应只有 responseText与responseXML 二种 所以现在我要定义dataType为jsonp,那么所得的最终数据是一个json的键值对,所以jQuery内部就会默认帮你完成这个转化工作 jQuery为了处理这种执行后数据的转化,就引入了类型转化器,如果没有指定类型就依据响应头Con

jQuery源码学习11——动画

jQuery.setAuto这个方法实在看不出来到底有啥用,而且到后面的版本就把这个方法去掉了 直接看speed方法 jQuery.extend({ speed: function(s,o) { o = o || {}; if ( o.constructor == Function ) o = { complete: o }; var ss = { slow: 600, fast: 200 }; o.duration = (s && s.constructor == Number ? s

Jquery源码分析与简单模拟实现

前言 最近学习了一下jQuery源码,顺便总结一下,版本:v2.0.3 主要是通过简单模拟实现jQuery的封装/调用.选择器.类级别扩展等.加深对js/Jquery的理解. 正文 先来说问题: 1.jQuery为什么能使用$的方式调用,$是什么.$()又是什么.链式调用如何实现的 2.jQuery的类级别的扩展内部是怎样实现的,方法级别的扩展有是怎样实现的,$.fn又是什么 3.jQuery选择器是如何执行的,又是如何将结果包装并返回的 带着这些问题,我们进行jquery的模拟实现,文章下方有

Jquery源码分析

1.概述 jQuery是一个非常优秀的Js库,与prototype,YUI,Mootools等众多的Js类库相比,它剑走偏锋,从web开发最实用的角度出发,抛除了一些中看但不实用的东西,为开发者提供一个短小精悍的类库.由于其个短小精悍,使用简单方便,性能相对高效.众多的开发者都选择Jquery来进行辅助的web开发. 在使用jquery时开发,我们也会时常碰到许多的问题,但是jquery的代码很晦涩,难起看懂,当开发时出现了问题,看不懂源码,不知道如何去排错. John Resig,Jquery

jquery源码分析(二)——结构

再来复习下整体架构: jQuery源码分析(基于 jQuery 1.11 版本,共计8829行源码) (21,94)                定义了一些变量和函数jQuery=function(){} (96,280)        给jQuery添加一些方法和属性,jQuery.fn=jQuery.prototype(285,347)        extend:        jQuery的一些继承方法        更容易进行后续的扩展                       

jquery 源码学习(四)构造jQuery对象-工具函数

jQuery源码分析-03构造jQuery对象-工具函数,需要的朋友可以参考下. 作者:nuysoft/高云 QQ:47214707 EMail:[email protected] 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 读读写写,不对的地方请告诉我,多多交流共同进步,本章的的PDF等本章写完了发布. jQuery源码分析系列的目录请查看 http://nuysoft.iteye.com/blog/1177451,想系统的好好写写,目前还是从我感兴趣的部分开始,如果大家有对哪

jQuery源码分析系列(38) : 队列操作

Queue队列,如同data数据缓存与Deferred异步模型一样,都是jQuery库的内部实现的基础设施 Queue队列是animate动画依赖的基础设施,整个jQuery中队列仅供给动画使用 Queue队列 队列是一种特殊的线性表,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队).队列的特点是先进先出(FIFO-first in first out),即最先插入的元素最先被删除. 为什么要引入队列? 我们知道代码的执行流有异步与同步之分,例如 var a

jquery源码之工具方法

jQuery 作为时下前端的"霸主".它的强大已毋庸置疑.简洁,效率,优雅,易用等优点让人很容易对它珍爱有加. 作为js的小菜,为了提升自我等级,根据各大神博客精辟的解析,硬啃了jQuery源码.在此,并不是要解析啥源码啥的(也没到那个级别哈),读书笔记,仅此而已. 所谓磨刀不误砍柴功,jQuery在大展神通之前也做了许多准备工作.比如说他的一些工具方法: 首当其冲的是他的继承扩展方法: jQuery.extend 其实也不是传统意义的继承,说mixin可能更恰当一些. // 首先看看