Slice無參調用可以將類數組對象（含有length屬性）轉化成數組

MudOnTire 發布于2019-08-22 18:31 / 1364人閱讀

摘要：首先，有兩個用法，一個是一個是，第一個返回的是字符串，第二個返回的是數組，這里我們看第個。最后，附個轉成數組的通用函數據說這樣比快

Array.prototype.slice.call(arguments)

根據call的使用方法，我們可以猜測以下可能相等：

[].slice.call(arguments)  => arguments.slice()

我帶著好像少了一個必需參數的疑問去查資料后得知：
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的內部實現，如下

1 Array.prototype.slice = function(start,end){
2      var result = new Array();
3      start = start || 0;
4      end = end || this.length; //this指向調用的對象，當用了call后，能夠改變this的指向，也就是指向傳進來的對象，這是關鍵
5      for(var i = start; i < end; i++){
6           result.push(this[i]);
7      }
8      return result;
9 }

大概就是這樣吧，理解就行，不深究。

最后，附個轉成數組的通用函數

var toArray = function(s){
 2     try{
 3         return Array.prototype.slice.call(s);
 4     } catch(e){
 5             var arr = [];
 6             for(var i = 0,len = s.length; i < len; i++){
 7                 //arr.push(s[i]);
                   arr[i] = s[i];  //據說這樣比push快
 8             }
 9              return arr;
10     }
11 }

云服務器 GPU云服務器 php數字轉化成數組 php數組轉化成集合 json對象數組轉化 byte數組轉化成字符串

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95959.html

詳解call bind apply - 區別/使用場景/es6實現/es3實現

摘要：的區別接收數組一連串參數返回一個函數的使用場景將類數組含有屬性的對象轉化為數組類數組例如通過獲取的元素含有屬性的對象具有屬性，并且可以通過下標來訪問其中的元素，但是沒有中的等方法。 call,apply,bind的區別 apply接收數組 func.apply(obj, [arus]) call一連串參數 func.call(obj, param1, param2....) bind...

Alex 2019-08-23 17:07 評論0 收藏0
把玩 JavaScript 中的 bind

摘要：此模式調用函數的時候，被綁定到全局對象。構造器調用模式如果在一個函數前面帶上來調用，那么背地里將會創建一個連接到該函數的成員的新對象，同時會被綁定到新對象上。前言今天閑著無聊隨便逛了逛MDN，忽而看到一個方法Function.prototype.bind(),突然發現除了使用這個方法之外都沒有仔細琢磨過這個方法。于是乎，找到了kill time的事情-寫博客。基礎知識簡介 ...

shenhualong 2019-08-21 10:33 評論0 收藏0
理解javascript類數組

摘要：也就是說，為一些常規對象增加一些屬性可以使其變成類數組對象。實際上，類數組的定義只有一條，具有屬性。在中，所有的數組方法都是通用的。什么是類數組 javascript中一些看起來像卻不是數組的對象，叫做類數組。也就是說，為一些常規對象增加一些屬性可以使其變成類數組對象。類數組的特征：有索引（數字）屬性和length屬性的對象不具有數組的方法。間接調用數組的一些方法，比如pus...

yzzz 2019-08-22 15:01 評論0 收藏0
JavaScript數組方法總結

摘要：如重排序方法它的原理是先調用數組的方法，之后再進行字符串的比較。長度為的數組。返回的是被刪除的項，如果沒刪除則返回空數組，而且之前的數組也被改變位置方法可以檢測變量，它的兩個參數是第一個是要查找的值或變量，第二個是從哪開始找。 length屬性方法數組的length屬性不單單是只讀的，還可以寫入var color = [‘red’,’blue’,’black’];Color.leng...

Forest10 2019-08-23 10:36 評論0 收藏0
js基礎篇

摘要：安全防范機制未聲明變量聲明未初始化變量使用來做安全防范機制可以預防報錯數組數組可以容納任何類型的值。因此與進行操作即可截取中的位數位。安全防范機制未聲明變量undeclared、聲明未初始化變量undefined var a b typeof a //undefined typeof b //undefined 使用typeof來做安全防范機制可以預防報錯 if(typeof...

solocoder 2019-08-21 11:26 評論0 收藏0