JS进阶篇--函数实际参数转换成数组的方法[].slice.call(arguments)

rubyshen 发布于2019-08-21 12:10 / 3086人阅读

摘要：实际参数在函数中我们可以使用对象获得注形参可通过获得，虽然对象与数组形似，但仍不是真正意义上的数组。我们可以通过数组的方法将对象转换成真正的数组。方法在其原型对象中，而就是的原型对象，在控制台中输入，结果是所以第一段代码可以顺利执行。

实际参数在函数中我们可以使用 arguments 对象获得（注：形参可通过 arguments.callee 获得），虽然 arguments 对象与数组形似，但仍不是真正意义上的数组。

我们可以通过数组的 slice 方法将 arguments 对象转换成真正的数组。

方法一：通过Array.prototype属性调用slice方法

var args = Array.prototype.slice.call(arguments);

Array 本身是没有 slice 方法，它的方法在 Array.prototype中，而我们在调用 slice 方法的时候，如果在 Array 本身没有找到 slice 方法的话，会通过它的原型链往上查找。

方法二：通过调用[]的slice方法

var args = [].slice.call(arguments, 0);

方法三：通过遍历arguments,返回数组

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

注：一般的函数的 arguments.length 都在 10 以内，方法二有优势；
方法二的代码量上也比第一种少，至少可以减小一点字节

实例：

function revse(){
    try{
        return Array.prototype.slice.call(arguments);
    }
    catch(e){
        var newarr=[];
        for(var i=arguments.length-1;i>=0;i--){ 
          //newarr.push(arguments[i]);
          newarr[i] = arguments[i]; //这样比push快？
        }
        return newarr;
    }
}      
var s = revse("a","b","c");
console.log(s); //["a", "b", "c"]

跟arguments问题相关题目
在某些场景下，需要将函数的 arguments 参数作为一个数组调用，但是 arguments 是一个奇异对象，所以试着将 arguments 转化为一个数组，例如下面例子：

function argToArr(){
    return [].slice.call(arguments, 0);
}
console.log(argToArr(1,2,3));    //[1,2,3]

function argToArr(){
    return Array.slice.call(arguments, 0);
}
console.log(argToArr(1,2,3));    //Uncaught TypeError: Cannot read property "call" of undefined

这是为什么呢？
第二段代码报错是因为Array是构造函数，不是对象，打开控制台，输入 typeof Array，结果是 function。
slice()方法在其原型对象中，而[]就是Array的原型对象，在控制台中输入 Array.prototype，结果是[],所以第一段代码可以顺利执行。

第二段代码如下修改就可以了:

function argToArr(){
    return Array.prototype.slice.call(arguments, 0); // 改这一行
}
console.log(argToArr(1,2,3));

云服务器 GPU云服务器 arguments转换成数组 js 集合转换成数组 js 方法数组参数 js中函数参数的作用

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

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

JS进阶篇--JS中的反柯里化( uncurrying)

摘要：最后，我们反过来看，其实反柯里化相当于把原来的形式，转换成了，使得的使用范围泛化了。更抽象地表达，反柯里化，使得原来调用，可以转成形式的调用。反柯里化相反，反柯里化的作用在与扩大函数的适用性，使本来作为特定对象所拥有的功能的函数可以被任意对象所用.即把如下给定的函数签名， obj.func(arg1, arg2) 转化成一个函数形式，签名如下： func(obj, arg1, ar...

LdhAndroid 2019-08-22 10:54 评论0 收藏0
【进阶3-3期】深度解析 call 和 apply 原理、使用场景及实现

摘要：之前文章详细介绍了的使用，不了解的查看进阶期。不同的引擎有不同的限制，核心限制在，有些引擎会抛出异常，有些不抛出异常但丢失多余参数。存储的对象能动态增多和减少，并且可以存储任何值。这边采用方法来实现，拼成一个函数。之前文章详细介绍了 this 的使用，不了解的查看【进阶3-1期】。 call() 和 apply() call() 方法调用一个函数, 其具有一个指定的 this 值和分...

godlong_X 2019-08-23 14:31 评论0 收藏0
Array.slice 8种不同用法

摘要：而对于一个普通的对象来说，如果它的所有名均为正整数，同时也有相应的属性，那么虽然该对象并不是由构造函数所创建的，它依然呈现出数组的行为，在这种情况下，这些对象被称为类数组对象。为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ JS数组slice方法是JS语言中最强大、最常用的内建函数之一。随着React和其他面向功能的J...

张春雷 2019-08-23 18:35 评论0 收藏0
Vue 进阶系列（二）之插件原理及实现

摘要：示例输出第一步先不考虑插件，在已有的中是没有这个公共方法的，如果要简单实现的话可以通过钩子函数来，即在里面验证逻辑。按照插件的开发流程，应该有一个公开方法，在里面使用全局的方法添加一些组件选项，方法包含一个钩子函数，在钩子函数中验证。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）showImg(https://segmen...

wuaiqiu 2019-08-23 12:41 评论0 收藏0
JavaScript 系列--JavaScript一些奇淫技巧的实现方法（二）数字格式化；类数组转数

摘要：一前言之前写了一篇文章系列一些奇淫技巧的实现方法一简短的函数，获取时间戳介绍了函数和获取时间戳的方法。，和对象的构造函数是对象的属性。缺点低版本，无法处理集合的转数组。一、前言之前写了一篇文章：JavaScript 系列--JavaScript一些奇淫技巧的实现方法（一）简短的sleep函数，获取时间戳 https://www.mwcxs.top/page/74... 介绍了sle...

Jrain 2019-08-23 17:59 评论0 收藏0