在很多时候经常看到Array.prototype.slice.call()方法,比如Array.prototype.slice.call(arguments),下面讲一下其原理:

1、基本讲解

  • 1.在JS里Array是一个类 slice是此类里的一个方法 ,那么使用此方法应该Array.prototype.slice这么去用

    slice从字面上的意思很容易理解就是截取(当然你不是英肓的话) 这方法如何使用呢?

    arrayObj.slice(start, [end]) 很显然是截取数组的一部分。

  • 2.我们再看call

 call([thisObj[,arg1[arg2[[argN]]]]]) 

thisObj是一个对象的方法

arrg1~argN是参数

那么Array.prototype.slice.call(arguments,1);这句话的意思就是说把调用方法的参数截取出来。

如:

 function test(a,b,c,d)
{
var arg = Array.prototype.slice.call(arguments,1);
alert(arg);
}
test("a","b","c","d"); //b,c,d

2、疑惑解答

先给个例子,这是jqFloat插件里的代码:

if (element.data('jDefined')) {
if (options && typeof options === 'object') {
methods.update.apply(this, Array.prototype.slice.call(arguments, 1));
}
} else {
methods.init.apply(this, Array.prototype.slice.call(arguments, 1));
}

多次用到 Array.prototype.slice.call(arguments, 1),不就是等于 arguments.slice(1) 吗?像前者那样写具体的好处是什么?这个很多js新手最疑惑的地方。那为什么呢?

因为arguments并不是真正的数组对象,只是与数组类似而已,所以它并没有slice这个方法,而Array.prototype.slice.call(arguments, 1)可以理解成是让arguments转换成一个数组对象,让arguments具有slice()方法。要是直接写arguments.slice(1)会报错。

typeof arguments==="Object" //而不是 "Array"

3、真正原理

Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组,除了IE下的节点集合(因为ie下的dom对象是以com对象的形式实现的,js对象与com对象不能进行转换)

如:

var a={length:2,0:'first',1:'second'};//类数组,有length属性,长度为2,第0个是first,第1个是second
console.log(Array.prototype.slice.call(a,0));// ["first", "second"],调用数组的slice(0); var a={length:2,0:'first',1:'second'};
console.log(Array.prototype.slice.call(a,1));//["second"],调用数组的slice(1); var a={0:'first',1:'second'};//去掉length属性,返回一个空数组
console.log(Array.prototype.slice.call(a,0));//[] function test(){
console.log(Array.prototype.slice.call(arguments,0));//["a", "b", "c"],slice(0)
console.log(Array.prototype.slice.call(arguments,1));//["b", "c"],slice(1)
}
test("a","b","c");

补充:

将函数的实际参数转换成数组的方法

方法一:var args = Array.prototype.slice.call(arguments);

方法二:var args = [].slice.call(arguments, 0);

方法三:

var args = [];
for (var i = 1; i < arguments.length; i++) {
args.push(arguments[i]);
}

最后,附个转成数组的通用函数

var toArray = function(s){
try{
return Array.prototype.slice.call(s);
} catch(e){
var arr = [];
for(var i = 0,len = s.length; i < len; i++){
//arr.push(s[i]);
arr[i] = s[i]; //据说这样比push快
}
return arr;
}
}

版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226

Array.prototype.slice.call()方法详解的更多相关文章

  1. [转] 对Array.prototype.slice.call()方法的理解

    在看别人代码时,发现有这么个写法:[].slice.call(arguments, 0),这到底是什么意思呢? 1.基础 1)slice() 方法可从已有的数组中返回选定的元素. start:必需.规 ...

  2. 对Array.prototype.slice.call()方法的理解

    在看别人代码时,发现有这么个写法:[].slice.call(arguments, 0),这到底是什么意思呢? 1.基础 1)slice() 方法可从已有的数组中返回选定的元素. start:必需.规 ...

  3. 对Array.prototype.slice.call()方法的理解在看别人代码时,发现有这么个写法:[].slice.call(arguments, 0),这到底是什么意思呢?

    1.基础 1)slice() 方法可从已有的数组中返回选定的元素. start:必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说,-1 指最后一个元素,-2 指倒数第 ...

  4. JavaScript中的Array.prototype.slice.call()方法学习

    JavaScript中的Array.prototype.slice.call(arguments)能将有length属性的对象转换为数组(特别注意: 这个对象一定要有length属性). 但有一个例外 ...

  5. Array.prototype.slice.call()方法的理解

    1.基础1)slice() 方法可从已有的数组中返回选定的元素. start:必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说,-1 指最后一个元素,-2 指倒数第二 ...

  6. 【笔记】js Array.prototype.slice.call(arguments) 将函数的参数转换为数组方法的见解

    我们知道函数里面的参数实际上是一个以数组形式储存的对象 但它并非一个数组 如果我们要将它转换为数组可以调用Array.prototype.slice() 这个方法 分析一下这个方法: Array.pr ...

  7. 理解Array.prototype.slice.call(arguments)

    在很多时候经常看到Array.prototype.slice.call()方法,比如Array.prototype.slice.call(arguments),下面讲一下其原理: 1.基本讲解 1.在 ...

  8. classlist和array.prototype.slice.call

    1.classlist document.getElementById("myDIV").classList.add("mystyle"); classList ...

  9. 详解 Array.prototype.slice.call(arguments)

    首先,slice有两个用法,一个是String.slice,一个是Array.slice,第一个返回的是字符串,第二个返回的是数组 在这里我们看第二个方法 1.在JS里Array是一个类 slice是 ...

随机推荐

  1. OpenCV——PS 滤镜, 曝光过度

    算法原理可以参考: PS 滤镜,曝光过度 #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include <io ...

  2. 内核调试神器SystemTap — 简介与使用(一)

    a linux trace/probe tool. 官网:https://sourceware.org/systemtap/ 简介 SystemTap是我目前所知的最强大的内核调试工具,有些家伙甚至说 ...

  3. 拆轮子之Fish动画分析

    概述 最近发现一个很好玩的动画库,纯代码实现的而不是通过图片叠加唬人的,觉得很有意思看了下源码https://github.com/dinuscxj/LoadingDrawable, 这个动画效果使用 ...

  4. 【47】java的类之间的关系:泛化、依赖、关联、实现、聚合、组合

    java的类之间的关系:泛化.依赖.关联.实现.聚合.组合 泛化: • 泛化关系(Generalization)也就是继承关系,也称为"is-a-kind-of"关系,泛化关系用于 ...

  5. The 13th tip of DB Query Analyzer, powerful processing EXCEL file

    The 13thtip of DB Query Analyzer, powerful processing EXCEL file MA Genfeng (Guangdong UnitollServic ...

  6. PyCharm导入pymysql包运行报错问题解决:No module named 'PyMySQL'

    import pymysql # 导入包 # 报错问题显示: ImportError: No module named 'PyMySQL' 出现该问题提示:找不到该包名. 解决办法如下: ①先下载Py ...

  7. tomcat6 高并发配置 与优化

    server.xml配置 1.  <Connectorport="8080"protocol="HTTP/1.1" 2.  maxThreads=&quo ...

  8. R实战 第七篇:网格(grid)

    grid包是R底层的图形系统,可以绘制几乎所有的图形.除了绘制图形之外,grid包还能对图形进行布局.在绘图时,有时候会遇到这样一种情景,客户想把多个代表不同KPI的图形分布到同一个画布(Page)上 ...

  9. CSS布局之--各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  10. 终端字形logo

    网上有很多的项目都有一个自己的字形logo,而我也在开发一个小的项目,也想要生成一个终端字形的logo,于是找到这款小工具,分享给大家:FIGlet “FIGlet is a program for ...