温故jsシリーズ(16)-配列&配列方法使用詳細

先端学習:先端教程&開発モジュール化/規範化/工程化/最適化&ツール/デバッグ&注目すべきブログ/Git&面接-先端資源まとめ
ティises斧を歓迎します.配列と配列の方法は詳しく説明します.
Arayオブジェクト
以前は温故jsシリーズで、新しいことを知りたいと思っていましたが、最近は業務の要求に応じて、移動WEBをしています.だから、今のように暇な時にだけ、暖かい生活が続けられます.祖国の母の誕生日、祖国の繁栄と繁栄を祈っています.
JavaScriptではArayは配列を構成するための大域オブジェクトであり、高次のような秩序リストのオブジェクトであり、JavaScript内蔵オブジェクトの中で非常に重要なオブジェクトである.
配列を作成:
配列文字数

var arr = []; 
var arr = [1, 2, 3];
var arr = [[1],2,[2,[123]]];        

配列構造関数

var arr = new Array();  //[]
var arr = new Array(1,2,3); //[1, 2, 3]
var arr = new Array(3);  //[undefined,undefined,undefined]   3   length
var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]

配列の字面量の方式を使うことを提案して、性能は良くて、コードは少なくて、簡潔で、結局コードは少ないです.
Aray属性length属性
length属性は、配列の長さを返します.変数属性であり、配列中の要素の個数を表します.配列のインデックスは0から始まるので、1つの配列の最初と最後の値はそれぞれ制限されています.arr[0]とarr[arr.length-1].

var arr = [1,2,3];
arr.length // 3
arr.length = 2; //    length，      
arr // [1,2],  arr.length 2。         length     （  ，  ）
arr.length = 4;
arr // // [1,2,undefined,undefined],  arr.length 2,    undefined

prototype属性prototype属性はオブジェクトタイプのプロトタイプの参照に戻り、すべての配列例はこの属性を継承し、すべての配列方法はAray.prototypeに定義されている.一般的に、私たちはしばしばプロタイプの属性で配列方法を拡張します.

//        ，         
Array.prototype.max = function() {
    return Math.max.apply(null,this); 
}
[1,2,3,4].max(); //4

//        ，     
Array.prototype.unique = function() {
    return this.filter((item, index, arr) => arr.indexOf(item) === index);
}
[11,2,1,1,2,3,1,2,4,5,23,2].unique(); //[11, 2, 1, 3, 4, 5, 23]

配列の重さ:行列を繰り返します.constructor属性constructor属性は、作成対象の関数、すなわち構造関数を返します.以下のとおりです

var arr = [1,2,3];
arr.constructor  //function Array() { [native code] }
arr.constructor === Array  //true    new Array
var a = new Array();
a.constructor === Array  //true

配列にとっては、この属性はまだまれに使用されます.
配列判定
Aray.isAray()Array.isArray()方法は、ある値がArayであるかどうかを判断するために使用される.もしそうなら、trueに戻ります.そうでなければfalseに戻ります.

Array.isArray([]);  //true
Array.isArray([1,2,3]);  //true
Array.isArray(new Array());  //true
Array.isArray();  //false
Array.isArray({});  //false
Array.isArray(123);  //false
Array.isArray('xzavier');  //false

属性を利用して自分で書く方法Array.isArray()はES 5まではサポートしていません.自分で書きます.でも、今はES 6になりました.もう大丈夫です.

Array.prototype.isArray = Array.prototype.isArray || function() {
    return Object.prototype.toString.call(this) === "[object Array]";
}
[1,2,3].isArray(); //true

配列巡回
これらの遍歴文の詳細については、参考にしてください.温故jsシリーズ(8)-フロー制御
クラシックfor

for (var index = 0; index < arr.length; index++) {
    console.log(arr[index]);
}

このような書き方は経典的です.つまり、文が多いですが、性能がいいです.
ES 5のforEach

arr.forEach(function (value) {
    console.log(value);
});

このような書き方は簡潔であるが、この方法にも小さな欠陥がある.break文を使ってサイクルを中断したり、return文を使って外層関数に戻すこともできない.
提案しないfor-in

for (var i in arr) { 
    console.log(arr[i]);
}

for-inは通常のオブジェクトのために設計されており、文字列タイプのキーを巡回することができますので、配列遍歴には適用されません.しかし、配列を巡回することができ、配列に作用するfor-in循環体は配列要素を巡回する以外に、またカスタム属性を巡回することができる.例を挙げると、エニュメレーション属性のarr.nameがある場合、ループは追加的に実行され、「name」というインデックスを巡回します.配列のプロトタイプチェーン上の属性までアクセスできます.ですから、使うことを勧めません.
ES 6のfor-of

for (var value of arr) {
    console.log(value); // 1 2 3 
}

これは最も簡潔で、最も直接的な配列要素を巡る文法です.この方法はfor-innサイクルの全ての欠陥を避けた.forEach()とは違って、break、continue、return文に正しく応答できます.

for (var value of arr) {
    if(value == 2){break;}
    console.log(value);  //1
}

配列方法の詳細splice挿入、削除、置換
splice()方法は、配列の要素を挿入、削除、または置換することができます.
1.要素を削除します.2つのパラメータを伝えます.1番目の項目の位置と2番目の削除すべき項目の数を削除します.挿入→配列の指定された位置に任意の要素を挿入します.三つのパラメータ、一つ目のパラメータ(位置)、二つ目のパラメータ(0)、三つ目のパラメータ(挿入の項目)3.置換-配列指定の位置に任意の要素を挿入しながら、任意の数の項目、三つのパラメータを削除します.最初のパラメータ(開始位置)、2番目のパラメータ(削除された項数)、3番目のパラメータ(任意の数の項目を挿入)

var arr = ["q","w","e"]; 
//   
var removed = arr.splice(1,1); 
console.log(arr); //q,e      
console.log(removed); //w ,       
//   
var insert = arr.splice(0,0,"r"); //  0        
console.log(insert); //      
console.log(arr); //r,q,e 
//   
var replace = arr.splice(1,1,"t"); //    ，     
console.log(arr); //r,t,e
console.log(replace); //q,       

並べ替え
sort()メソッドは配列の要素を元の位置に並べ替えて、この配列に戻ります.

var arr = [1,2,4,3,1,1,2];
console.log(arr.sort());//[1, 1, 1, 2, 2, 3, 4]

  ：
var arr = [1,2,10,4,3,1,1,2];
console.log(arr.sort());//[1, 1, 1, 10, 2, 2, 3, 4]

これは、sortの順序が不安定かもしれないので、デフォルトでは文字列のUnicodeコードの位置に従って並べ替えられます.
しかし、sort方法は、ある順序で並べられた関数を指定するための関数であるパラメータを受け入れる.省略すると、要素は変換された文字列の各文字のユニックポイントに従って並べ替えられます.

var arr = [1,2,10,4,3,1,1,2];
console.log(arr.sort(function(a,b){
    return a-b; 
})); // [1, 1, 1, 2, 2, 3, 4, 10]

この関数は私たち自身がコントロールしました.どのような順序でこのパラメータ関数の論理を変更すればいいですか?sort()傍受、変換argments疑似配列slice方法は、既存の配列から選択された要素配列を返すことができる.元の配列は変更されません.配列の一部だけを新しい配列にコピーし、この新しい配列を返します.
構文:slice()パラメータは正負であり得る.

start      。         。     ，                 。    ，-1        ，-2         ，    。
end        。         。                。         ，           start           。
                  ，                   。

var arr = [1,2,3,4,5];
arr.slice(0,3);    //  [1,2,3]
arr.slice(3);      //  [4,5]
arr.slice(1,-1);   //  [2,3,4]
arr.slice(-3,-2);  //  [3]
var arr1 = arr.slice(0); //         ，       ，      

arrayObject.slice(start,end)方法はしばしば1つの配列を切り取るために用いられるが、これはより一般的に擬似配列を真の配列に変換する.私たちの関数伝達のパラメータsliceは、通常は擬似配列であり、多くの配列の方法が使用できないので、擬似配列を本物の配列に変換する必要がある.

function test() {
    var arr = arguments;
    arr.push('xza');
    console.log(JSON.stringify(arr));
}
test(1,2,3);  //arr.push is not a function(…)        push  

   ：
function test() {
    var arr = Array.prototype.slice.call(arguments);
    arr.push('xza');
    console.log(JSON.stringify(arr));
}
test(1,2,3); //[1,2,3,"xza"]

argumentsフィルタリングfilter方法は、指定された関数を使用して、すべての要素をテストし、テストされたすべての要素を含む新しい配列を作成する.単純に言えば、配列をフィルタリングし、フィルタリングされた配列を返します.
文法:filter()

function(currentValue, index,arr)      。  ，                

       :currentValue  ，      ； index  ，        ； arr  ，           
thisValue      。            ，     ，   "this"   。      thisValue ，"this"     "undefined"

// filter        ，     
Array.prototype.unique = function() {
    return this.filter((item, index, arr) => arr.indexOf(item) === index);
}
[11,2,1,1,2,3,1,2,4,5,23,2].unique(); //[11, 2, 1, 3, 4, 5, 23]

array.filter(function(currentValue,index,arr), thisValue)は、空配列を検出せず、元の配列を変更しない.filter()接続配列

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2);  //[1, 2, 3, 4, 5, 6]
arr3.concat(7); //[1, 2, 3, 4, 5, 6, 7]

私たちは普段このように使っていますが、もし二つの配列の要素を接続する必要があるなら、中間的に要素を挿してもいいです.

var arr3 = arr1.concat('xzavier', arr2); //[1, 2, 3, "xzavier", 4, 5, 6]

パラメータを加算しないとコピーに相当します.行列のコピー配列を返します.新しい配列です.元の配列を指すわけではありません.

var arr4 = arr1.concat(); //[1,2,3]
var arr5 = arr1;
arr4 === arr1; //false
arr5 === arr1; //true

削除の挿入
前に述べたconcatは、削除要素を配列の任意の位置に挿入することができます.ここでは、最初の端にのみ削除方法を挿入することができます.
配列の最後に削除を挿入します.

push()             ，             ，           。
pop()                ，     length ，         。

var arr  = [1,2,3];
arr.push(4);  //    length 4
arr.pop();   //        4
arr  //[1, 2, 3]

配列ヘッドに削除を挿入:

unshift()              
shift()             

var arr  = [1,2,3];
arr.unshift(4);  //    length 4
arr.shift();   //        4
arr  //[1, 2, 3]

その他の方法

                    
concat()                   ，     。
join()                          。              。
reverse()                  。
toString()                ，     。
toLocaleString()           ，     。
valueOf()                  
map()                                             。
every()                                。
some()                                 。

リトルテスト:(補充と斧問題を歓迎し、より多くの方法を拡張して読む:ES 6配列の拡張)

ar arr = ['xzavier',123,'jser'];
console.log(arr.valueOf());  //['xzavier',123,'jser']
console.log(arr.toString());  //xzavier,123,jser
console.log(arr.toLocaleString());  //xzavier,123,jser
var arr = ['xzavier',123,'jser'];
console.log(arr.join(','));     //xzavier,123,jser
var arr = [1,2,3];
console.log(arr.reverse());     //[3,2,1]
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt); //[1,2,3]
numbers //[1,4,9]
roots // [1,2,3]
[2, 5, 1, 4, 3].some(function (element, index, array) {
    return (element >= 10);
});  //false
[2, 5, 1, 4, 13].some(function (element, index, array) {
    return (element >= 10);
});  //true
[2, 5, 1, 4, 13].every(function (element, index, array) {
    return (element >= 10);
});  //false
[2, 5, 1, 4, 13].every(function (element, index, array) {
    return (element >= 0);
});  //true

趣味の探求

[1,2] + [3,4] == "1,23,4";  //true
++[[]][+[]]+[+[]] == '10';  //true
console.log ([] == ![]);    //true