検索
ホームページウェブフロントエンドjsチュートリアルJavaScript の Array.prototype.slice.call_javascript 手法に関する簡単な説明

書く前に

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;
  }
}

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい