JavaScript の Array.prototype.slice.call_javascript 手法に関する簡単な説明-jsチュートリアル-php.cn

JavaScript の Array.prototype.slice.call_javascript 手法に関する簡単な説明

WBOY

リリース： 2016-05-16 15:41:39

オリジナル

1083 人が閲覧しました

書く前に

js では、Array.prototype.slice.call(arguments,0) というメソッドをよく見かけます。もちろん、このメソッドの役割は、配列のようなオブジェクトを実際の配列に変換することであることは誰もが理解していると思います。。この方法について、私の理解をお話しさせていただきます。

これには、slice() メソッドと call() メソッドが関係するため、最初にこれら 2 つのメソッドについて簡単に説明します。

slice() メソッド

配列と文字列の両方にこのスライスメソッドがあります。このメソッドの機能は、データの一部をインターセプトすることです。 2 つのパラメーターを受け取ります。最初のパラメーターはインターセプトされる位置インデックスであり、2 番目のパラメーターはインターセプトされる終了位置を示しますが、終了位置は含まれません。配列の場合、このメソッドの戻り値は、インターセプトされた要素を含む配列になります。文字列の場合、このメソッドの戻り値は、インターセプトされた文字列を含む文字列になります。

このメソッドは負の値を渡すこともできます。パラメーターが負の数値の場合、パラメーターと配列または文字列の長さを加算して得られる正の数値が実際のパラメーターとして使用されます。

は次のとおりです:

[1,2,3,4,5,6].slice(2,4);

[1,2,3,4,5,6].slice(-4,-2);

ログイン後にコピー

戻り値はすべて[3,4]の配列です。

'everything'.slice(2,4);

'everything'.slice(-4,-2);

ログイン後にコピー

戻り値はそれぞれ「er」と「hi」であり、文字列です。

パラメータを渡すと、開始位置から終了位置までのすべての要素が出力されます。これ以上の例はありません。

文字列に対するその他の同様のメソッド

文字列には、slice() 型のメソッドが他に 2 つあります:

substring() メソッドと substr() メソッド。

このうち、substring()メソッドは、開始位置から終了位置までの文字列を返すことを意味します。substr()は、最初のパラメータで開始位置を示し、2番目のパラメータで文字数を返します。最初の 2 つのメソッドは若干異なります。

メソッドに渡されるパラメータが負の数の場合、これら 3 つのメソッドは若干異なります。

メソッドに渡されるパラメータが負の数の場合:

slice() は、前述のように、文字列の長さに負の数値を加算して、対応する正の値を取得します。

substring() メソッドのパラメータはすべて 0 に設定されます。

substr() メソッドの最初のパラメータは、負の値と文字列の長さを加算して得られる正の値で、2 番目のパラメータは 0 に設定されます。

call() メソッドと apply() メソッド

call() メソッドと apply() メソッドは主に関数のスコープを拡張するために使用されます。

call() メソッドと apply() メソッドは 2 つのパラメータを受け取ります:

apply(): 最初のパラメータはスコープ、2 番目のパラメータは配列インスタンスまたは引数オブジェクトです。

call() メソッドも 2 つのパラメータを受け取りますが、パラメータを渡す方法は apply() とは異なります。渡された関数のパラメータは 1 つずつ書き込む必要があります。

これは焦点ではないので、ここでは詳細には触れません。

Array.prototype.slice.call(arguments,0)

ログイン後にコピー

Array.prototype.slice.call(arguments,0) では、Array.prototype.slice は Array のプロトタイプメソッドを呼び出しますが、実際の配列の場合は、slice() メソッドがありますが、arguments や self などの場合は、 -define 配列のようなオブジェクトには長さなどのいくつかの属性がありますが、slice() メソッドがありません。したがって、そのような配列のようなオブジェクトの場合は、slice() メソッドを使用するプロトタイプメソッドを使用する必要があります。は、Array.prototype.slice (カスタマイズ中の場合、slice() メソッドは配列のようなオブジェクトでカスタマイズされているため、直接呼び出すことができます)。

Array.prototype.slice.call(arguments,0) の意味は次のように理解できます。引数クラス配列の場合、Array.prototype.slice プロトタイプメソッドを呼び出し、call() メソッドを使用して範囲を引数に制限します。ここでの Array.prototype は引数として理解でき、パラメータ 0 は、slice() メソッドの最初のパラメータであり、開始位置のインデックスです。このようにして、引数のクラス配列が実数の配列に変換されます。

もちろん、トラバーサルを使用して引数を配列に変換することもできるため、コードは当然、より直接的ではなくなります。

Array.prototype.slice.call(arguments) は、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 には 2 つの使い方があり、1 つは String.slice で、もう 1 つは Array.slice です。1 つ目は文字列を返し、2 つ目は配列を返します。

Array.prototype.slice.call(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的内部实现，如下

 Array.prototype.slice = function(start,end){
   var result = new Array();
   start = start || 0;
   end = end || this.length; //this指向调用的对象，当用了call后，能够改变this的指向，也就是指向传进来的对象，这是关键
   for(var i = start; i < end; i++){
      result.push(this[i]);
   }
   return result;
 }

ログイン後にコピー

大概就是这样吧，理解就行，不深究。

最后，附个转成数组的通用函数

var toArray = function(s){
  try{
    return Array.prototype.slice.call(s);
  } catch(e){
      var arr = [];
      for(var i = 0,len = s.length; i < len; i++){
        //arr.push(s[i]);
        arr[i] = s[i]; //据说这样比push快
      }
       return arr;
  }
}

ログイン後にコピー