JS基礎ノート(二)9.配列

40791 ワード

配列の概要
JSオブジェクトは、内蔵オブジェクトホストオブジェクトカスタムオブジェクト配列(Array)に分けられます.
  • 配列もオブジェクト
  • である.
  • 通常のオブジェクト機能と同様に、いくつかの値を格納するための
  • です.
  • は、通常のオブジェクトが属性名として文字列を使用するのとは異なり、配列が数値のインデックス操作要素
  • を使用する.
  • インデックス:0から始まる整数がインデックス
  • です.
  • 配列のストレージ性能は通常のオブジェクトよりも優れており、開発ではいくつかのデータ
  • を格納するために配列を使用することが多い.
    		//       
    		var arr = new Array();
    		console.log(typeof arr);
    		//         
    		//   :  [  ] =  
    		arr[0] = 10;
    		arr[1] = 33;
    

    配列内の要素構文の読み込み:配列[インデックス]存在しないインデックスを読み込むと、エラーを報告せずにundefinedに戻ります.
    console.log(arr[1]);
    console.log(arr[3]);
    

    配列の長さを取得するには、lengthプロパティを使用して配列の長さ(要素の個数)構文を取得します.配列.lengthは要素の連続する配列に対して、lengthを使用して配列の長さ(要素の個数)を取得します.要素の非連続配列の場合、lengthを使用すると配列の最大インデックス+1が取得され、非連続配列は作成されないようにします.
    console.log(arr.length);
    

    配列の長さを変更変更元の長さより大きいlengthを変更すると、複数の部分が空になります.変更したlengthが元の長さより小さい場合、複数の要素が削除されます.
    arr.length = 10;
    console.log(arr.length);
    

    配列の最後の位置に要素構文を追加する:配列[配列.length]=値;
    arr[arr.length] = 70;
    console.log(arr.length);
    

    配列文字数
    字面量を使用した配列構文の作成:[]
    var arr = [];
    

    字面量を使用して配列を作成する場合、配列内の要素を作成時に指定できます.
    var arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
    

    コンストラクション関数を使用して配列を作成する場合は、要素を同時に追加し、追加する要素をコンストラクション関数のパラメータとして渡し、要素間をカンマで区切ることもできます.
    var arr2 = new Array(1, 2, 3, 4, 5, 6);
    

    長さ10の配列を作成
    arr3 = new Array(10);
    

    配列内の要素は任意のデータ型であってもよい
    arr4 = ["hello", 1, true, null, undefined];
    

    オブジェクトであってもよい
    var obj = {"name":"   "};
    arr4[arr4.length] = obj;
    arr4 = [{"name":"   "},{"name":"   "},{"name":"  "}];
    console.log(arr4[1].name);
    

    関数であってもよい
    arr4 = [function(){console.log("nb");},function(){console.log("np");}];
    console.log(arr4);
    arr4[0]();
    

    配列にも配列を置くことができます.次のような配列を2次元配列と呼びます.
    arr5 = [[1,2,3],[4,5,6],[7,8,9]];
    console.log(arr5);
    console.log(arr5[0]);
    

    配列の4つの方法
    push()
  • この方法は、配列の末尾に1つまたは複数の要素を追加し、配列の新しい長さ
  • を返すことができる.
  • は、追加する要素をメソッドのパラメータとして渡すことができ、これらの要素は配列の末尾
  • に自動的に追加される.
  • この方法は、配列の新しい長さを戻り値として
  • に返す.
    var result = arr.push("  ");
    console.log(result);
    console.log(arr);
    

    pop()
  • この方法は、配列の最後の要素を削除する、削除された要素を戻り値として
  • に返すことができる.
    var result = arr.pop();
    console.log(arr);
    console.log(result);
    

    unshift()
  • 配列の先頭に1つ以上の要素を追加し、新しい配列長
  • を返します.
  • 要素を前に挿入すると、他の要素インデックスは
  • に順次調整されます.
    var un = arr.unshift("  ","  ");
    console.log(arr);	
    console.log(un);
    

    shift()
  • は配列の最初の要素を削除し、削除された要素を戻り値として
  • を返すことができる.
    result = arr.shift();
    console.log(arr);
    console.log(result);
    

    配列の遍歴
    配列を巡るのは、配列のすべての要素を取り出すことです.
    var arr = [2,3,6,7,8,9];
    for (var i=0;i<arr.length;i++) {
    	console.log(arr[i]);
    }
    

    foreachサイクル
    一般にforループループ配列を用い,JSでは配列をループする方法も提供している.
  • この方法はIE 8以上のブラウザIE 8および以下のブラウザのみをサポートしているので、IE 8との互換性が必要な場合はforEarchを使用するかforループを使用してforEach()メソッドを遍歴するにはパラメータ
  • として関数が必要である.
  • このような関数は、私たちが作成したが、私たちが呼び出すことはできません.私たちはコールバック関数
  • と呼ばれています.
  • 配列のいくつかの要素関数では、実パラメータとして何回か実行されます.これらのコンテンツ
  • を読み取るために、パラメータを定義することができます.
  • ブラウザはコールバック関数で3つのパラメータの最初のパラメータを渡します.これは、現在遍歴中の要素の2番目のパラメータです.現在遍歴中の要素のインデックスの3番目のパラメータです.遍歴中の配列
  • です.
    var arr = [1, 2, 3, 4, 5, 6, 7];
    arr.forEach(function(value, index, obj) {
    			// console.log("hello");
    			console.log("value=" + value);
    			console.log("index=" + index);
    			console.log("obj=" + obj);
    			console.log(obj == arr);
    });
    

    配列のsliceとsplice
    slice()
  • は、配列から指定要素
  • を抽出するために使用することができる.
  • この方法は、元の配列を変更することなく、切り取った要素を新しい配列にカプセル化して
  • を返す.
  • パラメータ:1.開始位置のインデックスを切り取り、開始インデックスを含む2.終了位置のインデックスを切り取り、終了インデックス
  • を含まない
  • の2番目のパラメータは、書き込みを省略することができ、インデックスの開始後のすべての要素
  • が切り取られる.
  • インデックスは、負の値を渡すことができ、負の値を渡すと、-1の逆数の最初の-2の逆数の2の
  • が後から計算される.
    var arr = ["   ","   ","   ","   "];
    var result = arr.slice(0,2);
    console.log("result="+result);//result=   ,   
    
    result = arr.slice(2);
    console.log("result="+result);//result=   ,   
    
    result = arr.slice(-1);
    console.log("result="+result);//result=   
    
    result = arr.slice(1, -1);
    console.log("result="+result);//   ,   
    

    splice()
  • は、配列内の要素
  • を削除するために使用することができる.
  • splice()を使用すると元の配列に影響し、指定した要素が元の配列から削除され、削除された要素が戻り値として
  • に戻る.
  • パラメータ:1番目、開始位置を示すインデックス2番目、削除数3番目以降、これらの要素は自動的に開始位置インデックスの前の
  • に挿入されます.
    var arr = ["   ","   ","   ","   "];
    result = arr.splice(0,1,"   ");
    console.log(result);//["   "]
    console.log(arr);//["   ", "   ", "   ", "   "]
    

    練習:配列の重量除去
    //       
    		var arr = [1,2,3,2,1,3,4,2,5];		
    		//           
    		//           
    		for (var i = 0;i<arr.length;i++) {
    			/*              */
    			console.log(arr[i]);
    			for (var j = i+1 ;j<arr.length;j++) {
    				console.log("---"+arr[j]);
    				//             
    				if (arr[i] == arr[j]) {
    					//              ,      j
    					arr.splice(j,1);
    					//       j       ,         
    					//              ,        j        
    					// j  
    					j--;
    				}
    			}
    		}
    		console.log(arr);
    

    配列の残りの方法
    concat()は、2つ以上の配列を接続し、新しい配列を返すことができます.
  • この方法は元の配列に影響を及ぼさない
  • var arr  = ["   ","   ","   "];
    var arr2 = ["   ","  ","   "];
    var arr3 = ["   ","  ","  "];
    var result = arr.concat(arr2,arr3,"  ","jianmo");
    console.log(arr.concat(arr2));//"   ","   ","   ","   ","  ","   "
    console.log(result);//"   ","   ","   ","   ","  ","   ","   ","  ","  ","  ","jianmo"
    

    join()
  • この方法は配列を1つの文字列
  • に変換することができる.
  • この方法は元の配列に影響を及ぼさず、変換後の文字列を結果として
  • に返す.
  • join()ではパラメータとして文字列を指定できます.この文字列は配列内の要素のコネクタになります.コネクタを指定しない場合、デフォルトではカンマをコネクタ
  • として使用します.
    var arr  = ["   ","   ","   "];
    result = arr.join("@-@");
    console.log(result);//   @-@   @-@   
    console.log(typeof result);//string
    

    reverse()
  • この方法は配列(前の方は後ろ、後ろの方は前)
  • を反転するために用いる.
  • この方法は、元の配列
  • を直接修正する.
    var arr  = ["   ","   ","   "];
    arr.reverse();
    console.log(arr);//"   ", "   ", "   "
    

    sort()
  • は、配列をソートするために使用することができる
  • .
  • も元の配列に影響し、デフォルトではUnicode符号化に従って
  • がソートされます.
    var arr  = ["   ","   ","   "];
    arr.sort();
    console.log(arr);//"   ", "   ", "   "
    
  • 純数値の配列に対してsort()を用いてソートしてもUnicode符号化に従ってソートされるので、数値をソートすると、エラーの結果が得られる可能性があります.ソートのルールを自分で指定することができます.sortでコールバック関数を指定するには、2つのパラメータを定義する必要があります.
  • ブラウザは、配列内の要素をそれぞれ実パラメトリックコールバック関数として使用します.0より大きい値を返すと、要素は位置を交換します.0より小さい値を返すと、要素の位置は変わりません.0の値を返すと、2つの要素が等しいと考えられます.要素の位置は
  • 変わりません.
    arr = [3,4,11,2,5];
    /* 
          
     */
    arr.sort(function(a,b){
    /* if (a > b) {
    	return 1;
    	}else if (a < b) {
    	return -1
    	}else{
    	return 0;
    } */
    //  
    // return  a - b;
    //   
    return b-a;
    });
    console.log(arr);//[11, 5, 4, 3, 2]
    

    callとapply()
    callとapply()
  • この2つのメソッドはいずれも関数オブジェクトのメソッドであり、
  • を関数オブジェクトによって呼び出す必要がある.
  • 関数に対してcall()とapply()を呼び出すと、関数は
  • を実行する.
  • callとapplyを呼び出すと、オブジェクトを最初のパラメータとして指定できます.このオブジェクトは関数実行時のthis
  • になります.
  • call()メソッドは、
  • をオブジェクトの後に順次渡すことができる.
  • apply()メソッドは、配列統合伝達
  • に実パラメータをカプセル化する必要がある.
    thisの場合:1.関数として呼び出す場合、thisは常にwindowである2.メソッドとして呼び出す場合、thisはメソッドを呼び出すオブジェクトである3.コンストラクション関数で呼び出す場合、thisは新しく作成されたオブジェクトである4.callとapplyで呼び出す場合、thisは指定されたオブジェクトである
    arguments
    関数を呼び出すと、ブラウザは毎回2つの隠れたパラメータを呼び出します.1.関数コンテキストオブジェクトthis 2.実パラメータをカプセル化するオブジェクトarguments
  • argumentsはクラス配列オブジェクトであり、インデックスによってデータを操作することもできるし、長さ
  • を取得することもできる.
  • 関数を呼び出すと、私たちが渡した実パラメータはargumentsの
  • にカプセル化されます.
  • arguments.lengthは、実パラメータの長さ
  • を取得するために使用することができる.
  • 我々は、パラメータを定義しなくてもargumentsによって実パラメータを使用することができるが、比較的面倒なarguments[0]は、最初の実パラメータargumentsを表す[1]は、2番目の実パラメータがこのように推す
  • を表す.
  • 現在指向されている関数のオブジェクト
  • に対応する属性calleeがあります.
    function fun(a,b){
    			console.log(arguments.length);//3
    			console.log(arguments[0]);//he
    			console.log(arguments[1]);//true
    			console.log(arguments.callee);//fun
    			console.log(arguments.callee == fun);//true
    		}
    fun("he",true," ");