Array.prototype.slice.apply可以轉換數組的原理

jsummer 發布于2019-08-23 11:51 / 3697人閱讀

摘要：同樣的，我們可以先輸出下函數內部的。可以看到，確實不是一個純數組。從該索引處結束提取原數組元素從開始。如果該參數為負數則表示在數組中的倒數第幾個元素結束抽取。在別的數組里修改這些字符串或數字或是布爾值，將不會影響另一個數組。

我們經常可以看到這種寫法。

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...

GPU云服務器云服務器 php數組的原理可以轉換視頻格式的軟件可以把語音轉換成文字的軟件二維數組轉換一維數組

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

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