浅谈javascript的Array.prototype.slice.call

2024-10-02 13:07:42

写字前面

在js中我们经常会看到Array.prototype.slice.call(arguments,0)的写法，当然，这个方法的作用也许大家都明白，那就是把类数组对象转换成一个真正的数组。关于这个方法，我说说自己的理解。

这里涉及到slice()方法和call()方法，所以先简单说说这两个方法。

slice()方法

数组和字符串都有这个slice方法，这个方法的作用是截取一段数据。它接收两个参数，第一个参数是要截取的位置索引，第二参数可选，表示要截取到的结束位置，但是不包括结束位置。在数组中，该方法的返回值是包含截取元素的组成的数组，在字符串中，该方法的返回值是包含截取字符串组成的字符串。

该方法也可以传入负数值，当参数为负数的时候，将参数和数组或字符串的长度相加得到的正数作为实际的参数。

如下：

[1,2,3,4,5,6].slice(2,4);

[1,2,3,4,5,6].slice(-4,-2);

返回值均为[3,4]，为数组。

'everything'.slice(2,4);

'everything'.slice(-4,-2);

返回值分别为'er'和'hi'，为字符串。

如果之传入一个参数的话，那就是输出从开始位置到结束位置的所有元素。不再举例。

字符串的其他类似方法

在字符串中，和slice()方法类型的还有两个方法：

substring()和substr()方法。

其中，substring()方法表示返回从开始位置到结束位置的字符串，substr()接收两个参数，第一个参数表示开始位置，第二个参数表示要截取的字符个数，和前两个方法略有不同。

当传入方法的参数为负数时，这三种方法又略有不同。

当传入方法的参数为负数时：

slice()像上面说的，是负数加上字符串的长度得出相应的正值；

substring()方法的参数均置为零；

substr()方法的第一个参数为负值加上字符串长度得到的正值，第二个参数置为零。

call()和apply()方法

call()和apply()方法主要是用来扩充函数的作用域。

call()和apply()方法接收两个参数：

apply()：第一个参数是作用域，第二个是参数数组，其中第二个参数可以是数组实例，也可以是arguments对象。

call()方法也接收两个参数，仅仅在于和apply()的传参方式不同：传递函数的参数必须逐个写入。

鉴于这里不是重点，在这里就不再赘述。

Array.prototype.slice.call(arguments,0)

在Array.prototype.slice.call(arguments,0)中，Array.prototype.slice调用的是Array的原型方法，对于正真的数组是有slice()方法，但是对于像arguments或者自己定义的一些类数组对象虽然存在length等若干属性，但是并没有slice()方法，所以对于这种类数组对象就得使用原型方法来使用slice()方法，即Array.prototype.slice（如果在自定义中的类数组对象中自定义了slice()方法，那么自然可以直接调用）。

所以，Array.prototype.slice.call(arguments,0)的意思就可以这样理解：对于arguments类数组，我们调用Array.prototype.slice原型方法，并用call()方法，将作用域限定在arguments中，这里Array.prototype就可以理解为arguments，同参数0为slice()方法的第一个参数，即开始位置索引。通过这种方法就将arguments类数组转换成了真数组。

当然，把arguments转换为数组也可以用遍历，那样代码自然就会多一些，而且不够直接。

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

 var a={length:2,0:'first',1:'second'};
 Array.prototype.slice.call(a);// ["first", "second"]
 var a={length:2};
 Array.prototype.slice.call(a);// [undefined, undefined]

可能刚开始学习js的童鞋并不是很能理解这句为什么能实现这样的功能。比如我就是一个，所以，来探究一下。

首先，slice有两个用法，一个是String.slice,一个是Array.slice，第一个返回的是字符串，第二个返回的是数组，这里我们看第2个。

Array.prototype.slice.call(arguments)能够将arguments转成数组，那么就是arguments.toArray().slice();到这里，是不是就可以说Array.prototype.slice.call(arguments)的过程就是先将传入进来的第一个参数转为数组，再调用slice？

再看call的用法，如下例子

 var a = function(){
   console.log(this);  // 'littledu'
   console.log(typeof this);   // Object
   console.log(this instanceof String);  // true
 }
 a.call('littledu');

可以看出，call了后，就把当前函数推入所传参数的作用域中去了，不知道这样说对不对，但反正this就指向了所传进去的对象就肯定的了。
到这里，基本就差不多了，我们可以大胆猜一下slice的内部实现，如下

 Array.prototype.slice = function(start,end){
   var result = new Array();
   start = start || 0;
   end = end || this.length; //this指向调用的对象，当用了call后，能够改变this的指向，也就是指向传进来的对象，这是关键
   for(var i = start; i < end; i++){
      result.push(this[i]);
   }
   return result;
 }

大概就是这样吧，理解就行，不深究。

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

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;
  }
}

js使用Array.prototype.sort()对数组对象排序的方法

本文实例讲述了js使用Array.prototype.sort()对数组对象排序的方法.分享给大家供大家参考.具体分析如下: 在讲对数组对象进行排序时,我们先来简单的了解一下Array.prototype.sort().sort方法接受一个参数--Function,function会提供两个参数,分别是两个进行比较的元素,如果元素是String类型则通过Unicode code进行比较,如果是Number类型则比较值的大小.如果比较的函数中返回1则两个元素交换位置,0和-1不交换位置.先看一个例
js老生常谈之this,constructor ,prototype全面解析

前言 javascript中的this,constructor ,prototype,都是老生常谈的问题,深入理解他们的含义至关重要.在这里,我们再来复习一下吧,温故而知新! this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向. 先看一个在全局作用范围内使用this的例子: console
JS中prototype的用法实例分析

本文实例讲述了JS中prototype的用法.分享给大家供大家参考.具体分析如下: JS中的phototype是JS中比较难理解的一个部分本文基于下面几个知识点: 1 原型法设计模式在.Net中可以使用clone()来实现原型法原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A. 2 javascript的方法可以分为三类: a 类方法 b 对象方法 c 原型方法例子如下: function People(name
Javascript中的Prototype到底是什么

Javascript也是面向对象的语言,但它是一种基于原型Prototype的语言,而不是基于类的语言.在Javascript中,类和对象看起来没有太多的区别. 什么是prototype: function定义的对象有一个prototype属性,prototype属性又指向了一个prototype对象,注意prototype属性与prototype对象是两个不同的东西,要注意区别.在prototype对象中又有一个constructor属性,这个constructor属性同样指向一个constr
JavaScript中String.prototype用法实例

本文实例讲述了JavaScript中String.prototype用法.分享给大家供大家参考.具体如下: // 返回字符的长度,一个中文算2个 String.prototype.ChineseLength=function() { return this.replace(/[^\x00-\xff]/g,"**").length; } // 判断字符串是否以指定的字符串结束 String.prototype.EndsWith = function(str) { return this.
聊一聊JS中的prototype

什么是prototype: function定义的对象有一个prototype属性,prototype属性又指向了一个prototype对象,注意prototype属性与prototype对象是两个不同的东西,要注意区别.在prototype对象中又有一个constructor属性,这个constructor属性同样指向一个constructor对象,而这个constructor对象恰恰就是这个function函数本身. //判断是否是数组 function isArray(obj) { ret
js实现prototype扩展的方法(字符串,日期,数组扩展)

本文实例讲述了js实现prototype扩展的方法.分享给大家供大家参考,具体如下: String.prototype.isEmpty = function () { return !(/.?[^/s ]+/.test(this)); } //检测字符串是否为空 // 替换字符 String.prototype.reserve = function(type) { if (type == 'int') return this.replace(/^/d/g, ''); // 替换字符串中除了数字以
浅谈javascript的Array.prototype.slice.call

写字前面在js中我们经常会看到Array.prototype.slice.call(arguments,0)的写法,当然,这个方法的作用也许大家都明白,那就是把类数组对象转换成一个真正的数组.关于这个方法,我说说自己的理解. 这里涉及到slice()方法和call()方法,所以先简单说说这两个方法. slice()方法数组和字符串都有这个slice方法,这个方法的作用是截取一段数据.它接收两个参数,第一个参数是要截取的位置索引,第二参数可选,表示要截取到的结束位置,但是不包括结束位置.在数组
浅谈javascript中的prototype和__proto__的理解

在工作中有时候会看到prototype和__proto__这两个属性,对这两个属性我一直比较蒙圈,但是我通过查阅相关资料,决定做一下总结加深自己的理解,写得不对的地方还请各位大神指出. 跟__proto__属性相关的两个方法判断属性是存在实例对象中,还是存在原型对象中的方法获取或遍历对象中属性的几种方法 1.prototype 每个函数都有一个prototype属性,该属性是一个指针,指向一个对象. 而这个对象的用途是包含由特定类型的所有实例共享的属性和方法.使用这个对象的好处就是可以让所有
javascript Array.prototype.slice使用说明

除了正常用法,slice 经常用来将 array-like 对象转换为 true array. 名词解释:array-like object – 拥有 length 属性的对象,比如 { 0: 'foo', length: 1 }, 甚至 { length: 'bar' }. 最常见的 array-like 对象是 arguments 和 NodeList. 查看 V8 引擎 array.js 的源码,可以将 slice 的内部实现简化为: 复制代码代码如下: function slice(s
javascript Array.prototype.slice的使用示例

经常的,可以看到Array.prototype.slice(arguments, 0); 这个写法可以用于function() {} 内,这样可以将函数的参数列表转换成一个真正的数组.请看一个例子: 复制代码代码如下: var slice = Array.prototype.slice;var toString = Object.prototype.toString;(function() { var args = arguments; console.log(args, toString
浅谈JavaScript的内置对象和浏览器对象

在javascript中对象通常包括两种类型:内置对象和浏览器对象,此外,用户还可以自定义对象. 对象包含两个要素: 1. 用来描述对象特性的一组数据,也就是若干变量,通常称为属性. 2. 用来操作对象特性的若干动作,也就是若干函数,通常称为方法. 浏览器对象对象含义 anchor 当前文档中设置了name属性的超链接 applet 当前文档中的小程序 area 客户端图形映射中的区域 button 表单中的按钮 checkbook 表单中的复选框 document 当前窗口中的HTML文档
浅谈javascript中的constructor

constructor,构造函数,对这个名字,我们都不陌生,constructor始终指向创建当前对象的构造函数. 这里有一点需要注意的是,每个函数都有一个prototype属性,这个prototype的constructor指向这个函数,这个时候我们修改这个函数的prototype时,就发生了意外.如 function Person(name,age){ this.name = name; this.age = age; } Person.prototype.getAge = function
浅谈javascript中的Function和Arguments

javascript的Function 属性: 1.Arguments对象 2.caller 对调用单前函数的Function的引用,如果是顶层代码调用, 则返回null(firefox返回undefined). 注:只有在代码执行时才有意义 3.length 声明函数是指定的命名参数的个数(函数定义是,定义参数的个数) 4.prototype 一个对象,用于构造函数,这个对象定义的属性和方法由构造函数创建的所有对象共享. 方法: applay() --> applay(this,[])
浅谈javascript中new操作符的原理

javascript中的new是一个语法糖,对于学过c++,java 和c#等面向对象语言的人来说,以为js里面是有类和对象的区别的,实现上js并没有类,一切皆对象,比java还来的彻底 new的过程实际上是创建一个新对象,把新象的原型设置为构造器函数的原型,在使用new的过程中,一共有3个对象参与了协作,构造器函数是第一个对象,原型对象是二个,新生成了一个空对象是第三个对象,最终返回的是一个空对象,但这个空对象不是真空的,而是已经含有原型的引用(__proto__) 步骤如下: (1) 创建一
浅谈Javascript中的函数、this以及原型

关于函数在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明
浅谈JavaScript 覆盖原型以及更改原型

覆盖原型 //囚犯示例 //1.定义原型对象 var proto = { sentence : 4, //监禁年限 probation: 2 //缓刑年限 }; //2.定义原型对象的构造函数 var Prisoner = function(name, id) { this.name = name; this.id = id; }; //3.将构造函数关联到原型 Prisoner.prototype = proto; //4.实例化对象--采用工厂函数实例化对象 var makePrisoner

浅谈javascript的Array.prototype.slice.call

相关推荐

随机推荐