javascript類配列の深い理解


js配列は、みんなよりよく知っています。どこに行っても使えるからです。でも、「双子の弟」という配列があります。
何がクラス配列ですか
名前の通り、これは行列のような形をしていますが、行列のようなものではありません。それは一体何ですか?実はそれはオブジェクトで、長い行列の対象です。
配列との違い
その配列と配列は何の違いがありますか?
1、全部length属性があります。
2、クラスの配列もfor循環遍歴できます。ある種類の配列はfor ofエルゴードを通してもいいです。
3、クラス配列は配列のプロトタイプ方法を備えていないので、クラス配列は関連する配列方法を呼び出すことができない(例えば、push、slic、concatなど)
どのような種類の配列がありますか?
一般的なクラス配列は
  • 関数のパラメータ
  • getElementsByTagName、getElements ByClass Name、getElements ByNameなどの方法で取得したdomリスト
  • QerySelectorAll()方式で取得されたノードリスト
  • これらの3種類の配列を見ましょう。
    アーグメンント
    アーグメンツはjavascriptのキーワードです。関数のパラメータセットは、関数のすべてのパラメータと他の属性を含んでいます。定義は必要なく、直接関数の中で使用できます。
    
    function args(a, b, c) {
    	console.log(arguments)
    	console.log(typeof arguments)
    	console.log({}.toString.call(arguments))
    }
    
    args('a', 'b', 'c')
    
    出力結果を見てみます。

    argmentsは全てのパラメータを含み、length属性があることが分かります。同時に彼のタイプはobjectであり、stringに変換した後はobject Agmentsであり、代表はAgmentsオブジェクトであることが分かります。また、彼はもう一つの属性を持っています。この属性の値は私達が定義したこの関数体のようです。出力してみます。
    
    function args(a, b, c) {
    	console.log(arguments.callee)
    }
    
    args('a', 'b', 'c')
    

    出力は確かに私たちの関数です。表示されている自分は、この属性を勝手に呼び出さないでください。一旦呼び出したら、自分を呼び起こして、死ぬまでループします。次のように
    
    function args (a, b, c) {
     console.log(123)
     arguments.callee()
    }
    
    args('a', 'b', 'c')
    

    domリスト(HTMLCollection)
    このクラスは、getElementsByTagNameまたはgetElementsByClass NameまたはgetElements ByNameによって取得されたdomリストの集合を意味する。
    
    <div>       </div>
    <div>     </div>
    <script>
     var domList = document.getElementsByTagName('div')
     console.log(domList)
     console.log(typeof domList)
     console.log({}.toString.call(domList))
    </script>
    

    domListにもlength属性があることがわかる。そして、stringに変換した後は、object HTMLCollectです。代表はHTMLCollectionの対象です。
    ノードリスト(ノードリスト)
    Dcument.querySelectorAll()によって取得されたノードのセット
    
    <div class="abc">       </div>
    <div class="abc">     </div>
    <script>
     var nodeList = document.querySelectorAll('div')
     console.log(nodeList)
     console.log(typeof nodeList)
     console.log({}.toString.call(nodeList))
    </script>
    

    nodeListは同様にlength属性があり、stringに変換された後、Object NodeListであり、代表はNodeListオブジェクトであることがわかる。このオブジェクトはIteratorインターフェースの仕様に合うオブジェクトです。だから、forされます。
    特徴
    クラスの配列には配列のプロトタイプ方法がありませんが、クラスの配列が配列方法を呼び出して何かをする必要がある場合は、次のようにしてもいいです。
  • call、appyを利用して、配列のそれぞれの方法を借ります。
  • は、クラス行列を行列に変換する。次に、配列方法
  • を呼び出します。
    call、appyの貸し出し方法
    実は私達もこの方法を使ったことがあります。クラスの配列が文字列に変わる時、私達の上は対象のString()の方法を借りましたか?
    次はもっと並べます。
    
    function args(a, b, c) {
     Array.prototype.push.call(arguments, '123')
     console.log(arguments)
     Array.prototype.splice.call(arguments, 0, 1)
     console.log(arguments)
     Array.prototype.unshift.apply(arguments, [1,2,3])
     console.log(arguments)
    }
    
    args('a', 'b', 'c')
    

    クラス行列行列
    クラスの配列を行列に変換すると、勝手にそれぞれの配列方法を呼び出すことができます。クラスの配列はどうやって配列に変えられますか?
    利用可能な配列のいくつかの方法で新しい配列を生成します。
    
    function args(a, b, c) {
     let arr = Array.prototype.slice.call(arguments)
     console.log(arr)
     arr = Array.prototype.concat.apply([], arguments)
     console.log(arr)
    }
    
    args('a', 'b', 'c')
    

    ES 6新規方法を利用して配列に変換します。
    ES 6はAray.from法を追加して、クラス配列を配列に変えることができます。また、1つの配列の中で直接的にクラス配列を展開することができる展開演算子を提供します。
    
    function args(a, b, c) {
     let arr = Array.from(arguments)
     console.log(arr)
     arr = [...arguments]
     console.log(arr)
    }
    
    args('a', 'b', 'c')
    

    はい、クラスの配列はここまでです。ご検討ください。
    締め括りをつける
    ここでは、javascriptクラスの配列についての記事を紹介します。javascript類の配列の内容については、以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。