JS進階篇--函數實際參數轉換成數組的方法[].slice.call(arguments)

rubyshen 發布于2019-08-21 12:10 / 3087人閱讀

摘要：實際參數在函數中我們可以使用對象獲得注形參可通過獲得，雖然對象與數組形似，但仍不是真正意義上的數組。我們可以通過數組的方法將對象轉換成真正的數組。方法在其原型對象中，而就是的原型對象，在控制臺中輸入，結果是所以第一段代碼可以順利執行。

實際參數在函數中我們可以使用 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中函數參數的作用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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