ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptの擬似配列とは何ですか

JavaScriptの擬似配列とは何ですか

青灯夜游
青灯夜游オリジナル
2021-10-19 16:47:152778ブラウズ

JavaScript では、配列のようなオブジェクトとも呼ばれる擬似配列は、インデックスに従ってデータを格納し、長さ属性を持つ配列のようなオブジェクトです。オブジェクトであるため、擬似-array には、array.()、forEach() およびその他のメソッドのプッシュはありません。

JavaScriptの擬似配列とは何ですか

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

擬似配列の定義と特徴

擬似配列 (ArrayLike)、配列状とも呼ばれます。インデックスに従ってデータを格納し、長さプロパティを持つ配列のようなオブジェクトです。 しかし、次のような特徴があります。

  • #インデックスによるデータの保存

    0: xxx、1: xxx、2: xxx...

  • length 属性があります

    ただし、

    length 属性は動的ではないため、メンバーが変化しても変化しません

  • 配列を使用しない、push() や forEach() などのメソッド
  • arrayLike.__proto__ === Object.prototype;   //true 
    arrayLike instanceof Object; //true 
    arrayLike instanceof Array; //false

  • jQuery の $() を通じて取得される DOM 要素のセットを含む、一般的な典型的な疑似配列、関数引数オブジェクトと String オブジェクト。

例:

    var arrLike = {
        0: 'a',
        1: 'b',
        2: 'c',
        length: 3,
    }
    arrLike[1]; //'a'
    arrLike.length; //3
    arrLike.push('d'); //Uncaught TypeError: arrLike.push is not a function

疑似配列を実際の配列に変換する方法

    var arrLike = {
        0: 'a',
        1: 'b',
        2: 'c',
        length: 3,
    };

1. 空の配列をトラバースして追加します

    var arr = [];
    for(var i = 0; i < arrLike.length; i++){
        arr.push(arrLike[i]);
    }
比較的シンプルでわかりやすいですが、手順が少し面倒です。

2. 配列のスライス() メソッドを使用する [推奨]

    ;[].slice.call(arrLike);
または

    Array.prototype.slice.apply(arrLike);

新しい配列を返すには、slice() を使用します。 call() または apply() は、そのスコープを疑似配列に指します。

インデックス値以外の追加の属性は、返された配列には保持されないことに注意してください。

たとえば、jQuery の $() で取得した DOM 擬似配列の context 属性は、このメソッドで変換すると保持されません。

slice() の内部実装をシミュレートする

    Array.prtotype.slice = function(start, end){
        var result = new Array();
        var start = start | 0;
        var end = end | this.length;
        for(var i = start; i < end; i++){
            result.push(this[i]);
        }
        return result;
    }

3. プロトタイプ ポインターを変更する

    arrLike.__proto__ = Array.prototype;
このようにして、arrLike は Array のメソッドを継承します。 .prototype では、push()、unshift() などのメソッドを使用でき、長さの値も動的に変更されます。

さらに、プロトタイプ チェーンを直接変更するこの方法では、インデックス値ではない属性を含むすべての属性も擬似配列に保持されます。

4. ES2015 の Array.from() メソッド

Array.from() メソッドは、配列のようなオブジェクトまたは反復可能なオブジェクトから新しい配列インスタンスを作成します。 。

    var arr = Array.from(arrLike);

得られる結果は 2 番目の方法と似ており、インデックス値内の属性のみが保持されます。

[推奨学習:

JavaScript 上級チュートリアル

]

以上がJavaScriptの擬似配列とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。