Array.prototype.slice.apply可以转换数组的原理

jsummer 发布于2019-08-23 11:51 / 3489人阅读

摘要：同样的，我们可以先输出下函数内部的。可以看到，确实不是一个纯数组。从该索引处结束提取原数组元素从开始。如果该参数为负数则表示在数组中的倒数第几个元素结束抽取。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

我们经常可以看到这种写法。

function test(){　 
　//将参数转为一个数组　 
　var args = Array.prototype.slice.apply(arguments);
  console.log(args)
}

一般我们网上看到解释都是，对于js中的arguments来说，并不是一个真正的数组，可以叫它伪数组，通过Array.prototype.slice.apply方法，可以将其转化成数组，那让我们调用这个函数，看下函数中的参数数组。

test(11,22);  //[11,12]

同样的，我们可以先输出下函数内部的arguments。

console.log(arguments);     //[11,12,callee:,length:2]

可以看到，arguments确实不是一个纯数组。那么slice方法在将处理arguments并返回一个参数数组这个过程中，具体做了什么呢。让我们先了解下slice这个方法。
slice()方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象，且原始数组不会被修改。
语法

array.slice(begin,end);

参数
begin 可选,从该索引出开始提取原数组中的元素(从0开始)。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。如果省略begin,则slice从索引0开始。
end 可选。从该索引处结束提取原数组元素(从0开始)。slice会提取原数组中索引从begin到end的所有元素(包含begin,但不包含end)。
slice(1,4)提取原数组中的第二个元素开始直到第四个元素的所有元素(索引为1,2,3的元素)。
如果该参数为负数,则表示在数组中的倒数第几个元素结束抽取。slice(-2,-1)表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)
另外:如果end被省略,则slice会一直提取到数组末尾。
如果end大于数组长度,slice也会一直提取到原数组末尾。
返回值
一个含有提取元素的新数组。
关于基本的slice的使用，我相信很容易理解也很容易使用。但是slice有两个特殊的地方.slice不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝:
1、如果该元素是个对象引用(不是实际的对象),slice会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中这个元素也会发生改变。这个很好理解，看一个例子就明白。

var aa_aa = {x:1};
var aa_arr = [1,2,aa_aa];
aa_aa.x = 2;
console.log(aa_arr.slice(-1)); //[{x:2}]

2、对于字符串、数字及布尔值来说(不是String、Number或者Boolean对象),slice会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。这个也很容易理解，可参考我之前的文章，对引用类型和基本类型的介绍。
如果向两个数组任一个添加了新元素，则另一个不会受到影响。
以上内容来自MDN关于slice方法的介绍。
那现在我们知道，slice方法拥有将原数组中的元素浅复制到新数组中，并返回一个新数组的能力。那对于这里的函数。首先，利用apply方法让当前的函数内的arguments可以使用slice方法，然后slice方法将arguments中的11和12两个元素浅复制到新数组，并返回，这就实现了从arguments到数组的转变

function test(){　 
　//将参数转为一个数组　 
　var args = Array.prototype.slice.apply(arguments);
  console.log(args)
} 
test(11,12);

参考链接：
https://developer.mozilla.org...

专线服务云服务器 php数组的原理可以转换视频格式的软件可以把语音转换成文字的软件二维数组转换一维数组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97577.html

bind()、call()、apply()理解及用法

摘要：首先，我们判断是否存在方法，然后，若不存在，向对象的原型中添加自定义的方法。指向调用它的对象。总之三个的使用区别都是用来改变函数的对象的指向的第一个参数都是要指向的对象都可以利用后续参数传参是返回对应函数，便于稍后调用，是立即调用 apply和call都是为了改变某个函数运行时的上下文而存在的（就是为了改变函数内部this的指向），Function对象的方法，每个函数都能调用；使用a...

hoohack 2019-08-23 15:31 评论0 收藏0
关于JavaScript函数柯里化问题探索

摘要：函数柯里化关于函数柯里化的问题最初是在忍者秘籍中讲闭包的部分中看到的，相信很多同学见过这样一道和柯里化有关的面试题实现一个函数，使得如下断言能够能够通过简单说就是实现一个求值函数，能够将所有参数相加得出结果。方法返回一个表示该对象的字符串。函数柯里化关于函数柯里化的问题最初是在《JavaScript忍者秘籍》中讲闭包的部分中看到的，相信很多同学见过这样一道和柯里化有关的面试题：...

vboy1010 2019-08-21 17:49 评论0 收藏0
常用数组操作方法

摘要：是对象内置的方法参数是字符串是的数组参数有函数和默认初始值函数有四个参数上一次的返回值当前值当前值索引当前数组求和替换方案求和，利用截取改变数组再利用递归求和合并方法用于合并两个或多个数组。来源于：阿贤博客在日常的开发中离不开前端对数据的处理，在这里整理下ES6/ES7/ES8...新的数组api。扁平化n维数组 Array.flat() -- ES10 方法会按照一个可指定的...

vvpale 2019-08-23 16:43 评论0 收藏0
面对对象（五)this使用注意点

摘要：绑定回调函数的对象前面的按钮点击事件的例子，可以改写如下。方法有一些使用注意点。上面代码中，方法会调用回调函数。但是，方法的回调函数内部的却是指向全局对象，导致没有办法取到值。 4.1避免多层 this由于this的指向是不确定的，所以切勿在函数中包含多层的this。 var o = { f1: function () { console.log(this); var f2 = fu...

hearaway 2019-08-26 10:09 评论0 收藏0
《JavaScript语言精粹修订版》读书笔记

摘要：于是我就先把这本薄的经典书语言精粹修订版豆瓣读书本书简介总共章，除去附录，才页，读完并记录了一些笔记。读书笔记还可以分享给别人看。编程语言第版定义了的标准。程序检查时丢弃值为函数的属性。之前看到这篇文章，前端网老姚浅谈：怎么学JavaScript？，说到怎么学习JavaScript，那就是看书、分析源码。10本书读2遍的好处，应该大于一本书读20遍。看书主动学习，看视频是被动学习。看...

EscapedDog 2019-08-20 18:15 评论0 收藏0