JavaScriptの配列と疑似配列の違い

6141 ワード

JavaScriptでは、5つの元のデータタイプを除いて、他のすべてが対象であり、関数(Function)が含まれています.
基本データタイプ:String、bootlean、Number、Unidefined、 Null
参照データタイプ:Object(Aray,Date,RegExp,Funct)
この前提の下で、私達は更にJavaScriptの対象を討論します.
1、オブジェクトを作成する
var obj = {}; //       ,         (Object Literal)
var obj = new Object(); //        , {}  
より多くの作成対象の知識は、「JavaScript権威ガイド(第6版)」第6章を参照してください.
2、配列の作成
var arr = [];//         (Array Literal)    
var arr = new Array();//    Array()       
 配列の作成に関する詳細は、「JavaScript権威ガイド(第6版)」第7章を参照してください.
3、オブジェクトと配列の関係
違いを言う前に、他の知識に言及する必要があります.JavaScriptの原型継承です.JavaScriptの内蔵構造関数はすべてObject.prototypeから継承されています.これを前提として、new Aray()または[]を用いて作成された配列オブジェクトは、いずれもObject.prototypeの属性値を持つと理解できる.
問題主の問題については、
var obj = {};//   Object.prototype    
var arr = [];
//            ,  Array.prototype       Object.prototype,
//  ,      Array.prototype Object.prototype    
オブジェクトと配列の最初の違いを得ることができます.オブジェクトには、配列Aray.prototypeの属性値がありません.
4、行列とは何ですか
配列は最も基本的な特徴を持っています.索引は対象にないものです.
var obj = {};
var arr = [];

obj[2] = 'a';
arr[2] = 'a';

console.log(obj[2]); //    a
console.log(arr[2]); //    a
console.log(obj.length); //    undefined
console.log(arr.length); //    3
このテストによって、Obj[2]とarr[2]は共に'a'を出力しますが、出力lengthには明らかな違いが見られます.これはなぜですか?
obj[2]とarr[2]の違い
  • obj[2]出力'a'は、対象が通常のキーパッド値であるため、アクセスデータ
  • 、arr[2]出力'a'は、配列がインデックスによってデータにアクセスし、arr[2]が'a'を出力するのは、配列arrインデックス2の位置にデータ
  • が格納されているからである.
    OB J.lengthとarr.lengthの違い
  • obj.lengthは配列の特性を持たず、Objは属性lengthを保存していないので、undefined
  • が自然に出力されます.
  • は、配列に対して、lengthは配列の内蔵属性であり、配列はインデックス長に応じて、lengthの値を変更する.
  • どうしてarr.lengthは1ではなく3を出力しますか?
  • これは、配列の特殊な実現メカニズムによるもので、通常の配列に対して、インデックスが0から連続している場合、lengthの値は、配列中の要素の個数
  • に等しくなります.
  • は、上記の例ではarrに対して、配列に要素を追加する際に、連続的なインデックスに従って追加されていないので、配列のインデックスが不連続になると、インデックス長が要素の個数より大きいことになり、疎配列と呼ばれる.
  • まばらな配列の特性に関してはこれ以上議論しません.「JavaScript権威ガイド(第6版)」7.3節を参照してください.
    5、疑似配列
    定義:
    1、length属性を持っています.他の属性(索引)は負でない整数です.(対象の索引は文字列として処理されます.ここでは負でない整数列として認識できます.)2、配列を持たない方法です.
    疑似配列とは、配列のようにlength属性があり、0123などの属性のオブジェクトがあり、配列のように見えるが、配列ではない.
    var fakeArray = {
        length: 3,
        "0": "first",
        "1": "second",
        "2": "third"
    };
    
    for (var i = 0; i < fakeArray.length; i++) {
        console.log(fakeArray[i]);
    }
    
    Array.prototype.join.call(fakeArray,'+');
    
    一般的なパラメータのパラメータargments、DOMオブジェクトリスト(例えば、document.getElements ByTagsで得られたリスト)、jQueryオブジェクト(例えば、「div」)).
    擬似配列はObjectであり、実際の配列はArayである.
    fakeArray instanceof Array === false;
    Object.prototype.toString.call(fakeArray) === "[object Object]";
    
    var arr = [1,2,3,4,6];
    arr instanceof Array === true;
    Object.prototype.toString.call(arr) === "[object Array]"
    
    「javascript権威ガイド」には、オブジェクトが「クラス配列」に属するかどうかを判断するコードが与えられています.以下のとおりです
    // Determine if o is an array-like object.
    // Strings and functions have numeric length properties, but are 
    // excluded by the typeof test. In client-side JavaScript, DOM text
    // nodes have a numeric length property, and may need to be excluded 
    // with an additional o.nodeType != 3 test.
    function isArrayLike(o) {    
    	if (o &&                                // o is not null, undefined, etc.
    	        typeof o === 'object' &&            // o is an object
    	        isFinite(o.length) &&               // o.length is a finite number
    	        o.length >= 0 &&                    // o.length is non-negative
    	        o.length===Math.floor(o.length) &&  // o.length is an integer
    	        o.length < 4294967296)              // o.length < 2^32
    	        return true;                        // Then o is array-like
    	else
    	        return false;                       // Otherwise it is not
    }
    
     でも、もっと簡単な方法で判断します.Array.isArrayを使います.
    Array.isArray(fakeArray) === false;
    Array.isArray(arr) === true;
    
     外観からは偽造行列を見ても、行列との違いが見えません.JavaScriptに内蔵されているオブジェクトによくある擬似配列は有名なaugumentsです.
    (function() {
      console.log(typeof arguments); //    object,        
    }());
    
     また、DOMオブジェクトでは、childNodesも疑似配列である.
    console.log(typeof document.body.childNodes); //    object
    
    この他にも、よく使われている擬似配列がたくさんあります.いちいち列挙しません.
    擬似配列が存在するという意味は、配列を通常のオブジェクトにも使用できる多くのアルゴリズムである.
    var arr = Array.prototype.slice.call(arguments)
    
      
    var arr = Array.prototype.slice.call(arguments, 0); //  arguments            
    
    Array.prototype.forEach.call(arguments, function(v) {
      //   arguments  
    });
    
     Aray.prototype.slice.calを使う以外に、あなたも簡単に[].slite.calを使って代用することができます.また、bindを使用してプロセスを簡単にすることができます.
    var unboundSlice = Array.prototype.slice;
    var slice = Function.prototype.call.bind(unboundSlice);
    
    function list() {
      return slice(arguments);
    }
    
    var list1 = list(1, 2, 3); // [1, 2, 3]
    
    length属性を持つオブジェクトを配列オブジェクトに変換し、argmentsは各関数が実行中に自動的に得られる近似配列のオブジェクトである(着信関数のパラメータは0から数字で並べられ、lengthがある).
    例えば、あなたがfunc('a','b','c')をすると、funcの中で獲得したargments[0]は'a'で、argments[1]は'b'で、順に類推します.しかし問題はこのargmentsの対象は実はArayではないので、sliceの方法がないということです.Aray.prototype.slice.calは間接的にsliceの効果を実現できます.そして戻ってきた結果は本当のArayです.
    IE 9以前のバージョン(DOM実装はCOMベース)については、makeArayを使用して実現できます.
    //         
    var makeArray = function(obj) {    
    	if (!obj || obj.length === 0) {        
    		return [];
    	}    
    	//      ,      
    	if (!obj.length) {        
    		return obj;
    	}    
    	//   IE8   DOM COM  
    	try {        
    		return [].slice.call(obj);
    	} catch (e) {        
    		var i = 0,
    	    	j = obj.length,
    	    	res = [];        
    		for (; i < j; i++) {
    			res.push(obj[i]);
    		}
    		return res;
    	}
    
    };
    
     より多くの擬似配列に関する知識は、「JavaScript権威ガイド(第6版)」7.11節を参照してください.
    6、まとめ
  • オブジェクトは配列Aray.prototypeの属性値がなく、タイプはObjectであり、配列タイプはArayである.
  • 配列はインデックスに基づいて実現され、lengthは自動的に更新され、オブジェクトはキーペアである.
  • オブジェクトを使用して疑似配列を作成することができ、疑似配列は配列の大部分の方法を正常に使用することができる.