2.JavaScript Aray

9691 ワード
この文章はArayをまとめるためのあらゆる方法に使われます.
JavaScriptの中で、Objectを除いて一番多く使われているのは配列Arayです.次に,配列Arayのすべての方法をまとめます.
まず、Arrayの属性をまとめます.
  • Array.length:戻り行列の長さ.
    • 次に、Arrayの方法をまとめます.
  • Array.from（arrayLike ,function）:この方法は2つのパラメータを受け取り、最初のパラメータは1つのクラスの配列オブジェクトを受け入れ、2番目のパラメータは1つのマッピング関数を受け入れる.この方法は、arrayLikeを本物の配列に変換し、第二のパラメータがあると、第一のパラメータの各要素をfunctionで繰り返し、結果を返して、新しい配列を構成し、その後、行列に戻ります.具体的な操作は以下の通りです.
    function arr(){
 return  Array.from(arguments, function(num){return num*2});   
}
arr(1,2,3,4);//[2, 4, 6, 8]
  • Array.isArray(obj):入力の値が行列かどうかを判定し、もしそうでなければtrueを返します.
  • false:配列を作成する方法であり、各パラメータは新しい構成配列の要素として受け入れられる.この方法は構築済みの配列を返します.Array.of()作成配列とは少し違っています.具体的には下記の通りです.
    Array.of(2);       // [2] 
Array.of(1, 2, 3); // [1, 2, 3]
Array(2);          // [ , ]  [undefined × 2]
Array(1, 2, 3);    // [1, 2, 3]
    最後にArray()例の方法、つまりArrayの方法を要約する.
  • array.prototype:この方法は、2つ以上の配列を結合するために使用され、元の配列を変更することなく、新しい配列を返す.
    • var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr1.concat(arr2);//["a", "b", "c", "d", "e", "f"]
arr1.concat(1,2,3)//["a", "b", "c", 1, 2, 3]
  • concat():この方法は3つのパラメータを受け入れ、第1のパラメータは目標位置(必須)、第2は開始位置(オプション)、第3は終了位置(オプション)である.この方法の役割は、指定された要素の一部を同じ配列で指定された位置にコピーして置換し、配列に戻すことです.具体的なコードは以下の通りです.
    • //  3          2     1   ， 5
[1,2,3,4,5,6].copyWithin(3,-2,-1)//[1,2,3,5,5,6]
//  0        2  4   ， 3,4
[1,2,3,4,5,6].copyWithin(0,2,4)//[3,4,3,4,5,6]
  • copyWithin(target, start = 0, end = this.length):入力された配列をローズマリーオブジェクトに変更し、entries()またはnext()ループを使用することができる.具体的なコードは以下の通りです.
    • var a = ['a', 'b', 'c'];
var iterator = a.entries();
console.log(iterator.next()); //Object {value: Array(2), done: false}
for (let e of iterator) {
  console.log(e);
}
// [1, 'b']
// [2, 'c']
  • for of:この方法はパラメータとしての関数を受け入れ、この関数は3つのパラメータを持つことができ、最初のパラメータは現在処理されている配列の要素であり、2番目のパラメータは現在の要素のインデックスであり、3番目のパラメータはその配列自体である.この方法の主な役割は、各要素を遍歴し、各要素がevery(function)の試験に合格できるかどうかを確認することであり、もし全部通過すれば、functionに戻り、一つが通過していない限り、trueに戻る.具体的なコードは以下の通りです.
    • [1,2,3,4,5,6].every(function(item,index){
   return item>5
})//false
[1,2,3,4,5,6].every(function(item,index){
   return item>0
})//true
  • false:some(function)と同様です.条件を満たす要素がある限り、every(function)に戻り、条件を満たす要素は一つもなく、trueに戻る.
    • [1,2,3,4,5,6].some(function(item,index){
   return item>5
})//true
[1,2,3,4,5,6].some(function(item,index){
   return item>9
})//false
  • false:この方法は3つのパラメータを受け入れ、最初のパラメータはパディングの値、2番目のパラメータおよび3番目のパラメータはfill(value, start = 0, end = this.length)と同様である.具体的なコードは以下の通りです.
    • // 3     2     1   ， 5
[1,2,3,4,5,6].fill(3,-2,-1)//[1,2,3,4,3,6]
// 0   2  4   ， 3,4
[1,2,3,4,5,6].fill(0,2,4)//[1,2,0,0,5,6]
  • copyWithin():この方法のfilter(function)パラメータはfunctionと同様であり、この方法はeveryによって試験された要素からなる新しい配列を返す点で異なる.具体的なコードは以下の通りです.
    • [1,2,3,4,5,6].filter(function(item,index){
   return item>5
})//[6]
[1,2,3,4,5,6].filter(function(item,index){
   return item>2
})//[3,4,5,6]
  • function:この方法のfind(function)パラメータはfunctionと同様であるが、この方法はeveryによって試験された最初の要素を返す点で、もしすべて通過しなかったらfunctionに戻る.具体的なコードは以下の通りです.
    • [1,2,3,4,5,6].find(function(item,index){
   return item>5
})//6
[1,2,3,4,5,6].find(function(item,index){
   return item>2
})//3
  • undefined:この方法のfindIndex(function)パラメータはfunctionと同様であるが、この方法はeveryによって試験された最初の要素のインデックスを返す点で、もしすべて通過しなかったらfunctionに戻る.具体的なコードは以下の通りです.
    • [1,2,3,4,5,6].findIndex(function(item,index){
   return item>5
})//5
[1,2,3,4,5,6].findIndex(function(item,index){
   return item>2
})//2
  • -1:この方法のforEach(function)パラメータはfunctionと同様であるが、この方法は戻り値がないので、配列の各要素を関数に一度だけ作用させる点が異なる.具体的なコードは以下の通りです.
    • var arr = [];
[1,2,3,4,5,6].forEach(function(item,index){
  if(item>2){ arr.push(item); }
})
console.log(arr)//[3, 4, 5, 6]
  • every:この方法は、2つのパラメータを受け入れる.最初のパラメータは、探している要素であり、第2のパラメータは、任意の位置から探し始める.見つかったら、includes(element,fromIndex = 0)に戻ります.見つからなかったら、trueに戻ります.具体的なコードは以下の通りです.
    var arr = [1,2,3]
arr.includes(2);//true
arr.includes(5);//false
arr.includes(2,2)//false
  • false:この方法は、2つのパラメータを受け入れる.最初のパラメータは、探している要素であり、第2のパラメータは、任意であり、どの位置から探し始めるかを示す.現在の要素を返す位置が見つかりました.もし見つけられなかったら、indexOf(element,fromIndex = 0)に戻ります.具体的なコードは以下の通りです.
    var arr = [1,2,3]
arr.indexOf(2);//1
arr.indexOf(5);//-1
arr.indexOf(2,2)//-1
  • -1:この方法は、2つのパラメータを受け入れる.最初のパラメータは、探している要素であり、第2のパラメータは、任意であり、どの位置から探し始めるかを示す.見つかったら、与えられた要素の最後の出現位置を返します.もし見つけられなかったら、lastIndexOf(element,fromIndex = 0)に戻ります.具体的なコードは以下の通りです.
    • var arr = [1,2,3,1]
arr.lastIndexOf(2);//3
arr.lastIndexOf(5);//-1
arr.lastIndexOf(2,2)//-1
  • -1:この方法は、1つのパラメータ(オプション)を受け取り、配列のすべての要素をjoin(separator = ',')に接続して文字列として返します.具体的なコードは以下の通りです.
    • var a = ['a', 'b', 'c'];
a.join();      // 'a,b,c'
a.join(', ');  // 'a, b, c'
a.join(' + '); // 'a + b + c'
a.join('');    // 'abc'
  • separator:この方法は、keys()と同様に、オブジェクトを反復可能なオブジェクトに変更する役割を果たしているが、まだ異なる.具体的なコードは以下の通りです.
    • var a = ['a', 'b', 'c'];
var iterator = a.keys();
console.log(iterator.next()); //Object {value: 0, done: false}
for (let e of iterator) {
console.log(e);
}
//1
//2
  • entries():この方法のmap(function)パラメータはfunctionと同様であり、この方法はeveryによって機能した新しい配列を返す点で異なる.具体的なコードは以下の通りです.
    • [1,2,3,4,5,6].map(function(item,index){
return item*2
})//[2, 4, 6, 8, 10, 12]
  • function:この方法は最後の要素を削除し、要素に戻り、削除された要素の配列長はpop()を低減する.具体的なコードは以下の通りです.
    • var arr = [1, 2, 3];
arr.pop();//3
console.log(arr); // [1, 2]
  • 1:この方法は最後に要素を追加し、配列のpush(element)に戻る.具体的なコードは以下の通りです.
    • var arr = [1, 2, 3];
arr.push(4);//4
console.log(arr); // [1,2,3,4]
  • length:この方法は、reduce(function)をパラメータとして受け入れ、配列の要素を順次functionに入れ、得られた結果もパラメータとしてfunctionに伝えられ、すべての要素の役割が完了するまで、最終結果を返す.具体的なコードは以下の通りです.
    • var arr = [1,2,3,4,5,6]
arr.reduce(function(element1,element2){
    return element1+element2
})//21
  • function:この方法はreduceRight(function)と同様であるが、実行順序は右から左にある.具体的なコードは以下の通りです.
    • var arr = [1,2,3,4,5,6]
arr.reduceRight(function(element1,element2){
    return element1+element2
})//21
  • reduce()は、配列内の要素を順番に反転させ、配列に戻す方法である.具体的なコードは以下の通りです.
    • var arr = [1,2,3,4,5,6]
arr.reverse()
  • reverse():この方法はshift()と同様であるが、pop()は最後の要素を削除し、popは最初の要素を削除する.
    • var arr = [1, 2, 3];
arr.shift();//1
console.log(arr); // [2, 3]
  • shift():この方法は、2つのパラメータ、1つの開始位置、1つの終了位置(終了位置を含まない)を受け入れる.配列のこの部分を選択して、新しい配列オブジェクトにコピーし、新しい配列を返します.元の配列は変わりません.具体的なコードは以下の通りです.
    • var arr = [1,2,3,4,5,6]
//   2  4， 3,4
arr.slice(2,4)//[3,4]
console.log(arr)// [1,2,3,4,5,6]
  • slice(start = 0,end=this.length):この方法は3つのパラメータを受け入れ、最初のパラメータは修正の開始位置であり、2番目のパラメータはオプションであり、除去する配列の個数を表し、3番目のパラメータは参加する要素である.この方法は削除された配列を返し、元の配列が変更されます.具体的なコードは以下の通りです.
    • var arr = [1,2,3,4,5,6,7,8]
//  2  ，  4   ，   moonburn   
arr.splice(2,4,'moonburn')//[3,4,5,6]
console.log(arr)// [1,2,'moonburn',7,8]
  • splice(start = 0, deleteCount, element ...):この方法は、1つのパラメータ(オプション)を受け入れる.パラメータが入力されていない場合は、自然に配列に並べ替えられますが、デフォルトの順序は文字列Unicodeに従っています.sort(compareFunction)に参加して、自分で並べ替えることもできます.具体的なコードは以下の通りです.
    • var arr = [1,20,3,40,5,60]
arr.sort(function(element1,element2){
    return element1>element2
})
console.log(arr)// [1, 3, 5, 20, 40, 60]
  • compareFunction:配列のtoLocaleString()は、すべての要素を1回toLocaleString()として作用させ、文字列として連結する.具体的には以下の通りです.
    • var arr = [123,new Date(),'string']
arr.toLocaleString()//"123,2017-6-8 11:04:50,string"
  • toLocaleString()とtoString()は似ていますが、地域の特色がないだけです.具体的には以下の通りです.
    • var arr = [123,new Date(),'string']
arr.toString()//"123,Thu Jun 08 2017 11:08:24 GMT+0800 (      ),string"
  • toLocaleString():1つ以上の要素を配列の先頭に追加します.新しい配列のunshift(element····)を返します.具体的なコードは以下の通りです.
    • var arr = [1,2,3,4];
arr.unshift('a','b');//6
console.log(arr);//["a", "b", 1, 2, 3, 4]
    Javascriptは画像のプリロードを実現します.