JavaScript引用タイプ(一)配列タイプの常用方法のまとめ
10326 ワード
一、検出配列:
ウェブページまたはグローバルスコープに対しては、instance ofオペレータを使用して、配列を検出することができます.
toLocale String():「、」で構成される文字列toStringを返します.「、」で構成される文字列valueOfを返します.戻りますか?それとも配列jin():異なる分割子で構成される文字列を返します.
js配列はスタックのように表現でき、挿入と削除項目のデータ構造を制限することができる.スタックはLIFOのデータ構造であり、最新の追加項目は最初に取り除かれる.スタックの中の項目の挿入と除去は、一つの位置のみに発生します.(後進先出)jsは、スタックのような挙動を実現するために、Push()とpop()の方法を提供する.
スタックデータ構造のアクセス規則はLIFO(後進先出)であり、キューデータ構造のアクセス規則はFIFO(先入先出)である.リストの端にアイテムを追加し、リストの前端からアイテムを削除します.shift()メソッドは、配列の最初の項目を削除し、このアイテムを返します.配列長は1を減らします.シフト()とプッシュ()方法を組み合わせると、行列を使うように配列を使うことができます.
配列の中には、直接に並べ替えに使用できる2つの方法があります.reverse()とsore().
reverse():使い方は簡単ですが、融通がきかないです.
concat()スティッチング配列:concat()方法は、現在の配列のすべての項目に基づいて新しい配列を作成することができます.具体的には、この方法は、現在の配列のコピーを作成し、その後、受信したパラメータをこのコピーの末尾に追加し、最後に新たに構築された配列を返します.
slice()メソッドはパラメータを受信すると、そのパラメータ指定位置から現在の配列の最後までの要素を返します.
削除:任意の数の配列要素を削除できます.2つのパラメータを指定するだけです.削除する1つの位置と削除する個数.
七、位置方法:indexOf()とlaset IndexOf():要素の索引を見る
indexOf():2つのパラメータを受け入れ、検索する項目と検索する始点位置を示す索引(オプション)です.配列の先頭(位置0)から後方検索が開始されます.
八、反復方法forEach()、map()、filter()、every()、some()
forEach():配列を巡回して、配列ごとに与えられた関数を実行します.forEach()は戻りません.デフォルトの3つのパラメータ:配列ごとに、配列インデックス、配列自体
ECMAScript 5はまた、二つの規格配列の方法を追加しました.reduce()とreduceRight().これらの2つの方法はすべての項目を繰り返して、最終的な戻り値を構築します.この中で、reduce()方法は、配列の第一項から順に最後まで巡回する.reduceRight()は配列の最後の項目から、前へ第一項を遍歴します.
両方の方法は、2つのパラメータを受信します.1つは、各項目で呼び出された関数と、(オプション)は、正規化ベースの初期値として機能します.
reduce()とreduceRight()に送る関数は、4つのパラメータを受信します.前の値、現在の値、項目のインデックス、および配列オブジェクトです.
reduce():この関数が返した任意の値は、最初のパラメータとして自動的に次の項目に渡されます.第一の反復は配列の第二項において行われるので、第一のパラメータは配列の第一項であり、第二のパラメータは配列の第二項である.
以上は配列の基本的な使い方です.
ES 6の配列方法:
1、Aray.of():すべてのパラメータ値からなる配列を返します.パラメータがなければ空の配列を返します.
5、ES 6拡張演算子・・統合配列:ES 6の文法がより分かりやすいので、現在の統合配列は多く採用されています.・・・演算子はcancatの栗ごとに、より簡潔で高度にカスタムされた配列要素の位置を実現する効果があります.
ES 5:forEach、every、some、fliter、map、reduce、reduceRight、ES 6:find、findIndex、keys、values、entries
ウェブページまたはグローバルスコープに対しては、instance ofオペレータを使用して、配列を検出することができます.
var arr = [1,2,3];
if(arr instanceof Array){
//
}
instance ofオペレータの問題は、グローバル実行環境が一つしかないと仮定することにある.ウェブページに複数のフレームが含まれている場合、実際には2つ以上の異なるグローバル実行環境が存在し、2つ以上の異なるバージョンのArayコンストラクタが存在する.1つのフレームから別のフレームに1つの配列が伝達されると、入力された配列は、2番目のフレームの中で生成された配列とはそれぞれ異なる構造関数を有する.この問題を解決するES 5に、Aray.isAray()方法が追加されました.この値は配列ではなく、そのグローバル実行環境で作成されたものであっても、例えば、var arr = [1,2,3];
if(Array.isArray(arr)){
//
}
二、変換方法:toLocale String():「、」で構成される文字列toStringを返します.「、」で構成される文字列valueOfを返します.戻りますか?それとも配列jin():異なる分割子で構成される文字列を返します.
let arr = [1,2,3];
console.log(arr.toLocaleString()); // 1,2,3
console.log(arr.toString()); // 1,2,3
console.log(arr.valueOf()); // [1,2,3]
console.log(arr.join('|')); // 1|2|3
三、スタック方法:push()とpop()方法js配列はスタックのように表現でき、挿入と削除項目のデータ構造を制限することができる.スタックはLIFOのデータ構造であり、最新の追加項目は最初に取り除かれる.スタックの中の項目の挿入と除去は、一つの位置のみに発生します.(後進先出)jsは、スタックのような挙動を実現するために、Push()とpop()の方法を提供する.
var arr = [1,2,3];
arr.push(4,5,6); // 4,5,6 ,length=6
console.log(arr); // [1,2,3,4,5,6]
var arr1 = ['a','b','c'];
arr1.pop(); // , length= 2
console.log(arr1); // ['a','b']
四、行列の方法:shiftとunshiftスタックデータ構造のアクセス規則はLIFO(後進先出)であり、キューデータ構造のアクセス規則はFIFO(先入先出)である.リストの端にアイテムを追加し、リストの前端からアイテムを削除します.shift()メソッドは、配列の最初の項目を削除し、このアイテムを返します.配列長は1を減らします.シフト()とプッシュ()方法を組み合わせると、行列を使うように配列を使うことができます.
let arr2 = []; //
let arr3 = arr2.push("red","green"); // ,
console.log(arr3); // length = 2;
console.log(arr2); // ["red","green"]
console.log(arr2.shift()); // red length-1
console.log(arr2); // ["green"]
unshift()は、配列の前から任意の項目を追加し、新しい配列の長さを返します.unshift()とpop()の組み合わせは、行列の先端からアイテムを追加し、配列の後端からアイテムを除去する逆の方法から列をシミュレートすることができる.let arr = [" "]; // length =1;
let arr1 = arr.unshift(" "," "," "); // , length=4
console.log(arr1); // length 4
console.log(arr); // [" ", " ", " ", " "]
console.log(arr.pop()); // , length-1 length 3
console.log(arr); // [" ", " ", " "]
五、並べ替え方法:reverse()とsore()配列の中には、直接に並べ替えに使用できる2つの方法があります.reverse()とsore().
reverse():使い方は簡単ですが、融通がきかないです.
var values = [1,2,3,4,5];
values.reverse();
console.log(values); // [5, 4, 3, 2, 1]
sore():昇順に並べ(小さいから大きいまで)sore()方法は、各配列項目のtoString()変換方法を呼び出し、その後、得られた文字列を比較して並べ替えを決定します.配列の各項目が数値であっても、ソート()方法の比較は文字列です.var values = [0,1,5,10,15];
values.sort();
console.log(values); // [0, 1, 10, 15, 5]
このように、例の値の順序に問題がなくても、sort()メソッドは、試験文字列の結果に応じて元の順序を変更することができる.数値5は10より小さいが、文字列比較を行う場合、「10」は「5」の前にあるので、配列の順序は修正されます.言うまでもなく、この順序付けは多くの場合、最良のスキームではない.したがって、ソート()法は、どの値がどの値の前にあるかを指定するために、比較関数をパラメータとして受信することができる.比較関数は2つのパラメータを受信し、最初のパラメータが2番目の前にあるべきなら負の値を返し、2つのパラメータが等しいなら0を返し、最初のパラメータが2番目の後にあるべきなら正の値を返します.以下は簡単な比較関数です.var values = [0,1,5,10,15];
function compare(n1,n2) {
return n1 - n2; //
// return n2 - n1 //
}
console.log(values.sort(compare))
六、操作方法:concat()、slice()、splice()concat()スティッチング配列:concat()方法は、現在の配列のすべての項目に基づいて新しい配列を作成することができます.具体的には、この方法は、現在の配列のコピーを作成し、その後、受信したパラメータをこのコピーの末尾に追加し、最後に新たに構築された配列を返します.
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2)
console.log(arr3); // [1, 2, 3, 4, 5, 6]
slice()切り取り配列:slice()は、配列から下付きから下付きまでの要素を指定して新しい配列を構成します.slice()方法は、2つのパラメータ、要素の開始位置および終了位置を受信することができる.slice()メソッドはパラメータを受信すると、そのパラメータ指定位置から現在の配列の最後までの要素を返します.
var arr = [1,2,3,4,5,6,7,8,9,10];
arr1 = arr.slice(1);
console.log(arr1); // [2,3,4,5,6,7,8,9,10]
slice()メソッドは2つのパラメータを受け入れると、先頭と終了位置の間の要素を返しますが、終了位置の要素は含まれません.var arr = [1,2,3,4,5,6,7,8,9,10];
arr1 = arr.slice(2,5)
console.log(arr1); // [3,4,5]
splice()の強い配列方法は、いろいろな使い方があります.削除、挿入、置換ができます.削除:任意の数の配列要素を削除できます.2つのパラメータを指定するだけです.削除する1つの位置と削除する個数.
var arr = [1,2,3,4,5,6,7,8,9,10];
var arr1 = arr.splice(1,4); // ,
console.log(arr1); // 2,3,4,5
挿入:指定された位置に任意の数の要素を挿入できます.3つのパラメータを提供するだけで、位置、0、挿入する要素を挿入し、空の配列に戻ります.var arr = [1,2,3,4,5];
var arr1 = arr.splice(2,0,"HTML","CSS","JavaScript"); // , ,
console.log(arr1); // [];
console.log(arr); // [1,2,"HTML","CSS","JavaScript"];
代替:指定された位置に任意の数の項目を挿入し、任意の数の項目を同時に削除するには、パラメータが必要です.置換される位置、置換される項目の個数は、上の内容(複数可)に置き換えられます.置換された項の数は、削除された項の数に等しい必要はない.var arr = [1,2,3,4,5];
var arr1 = arr.splice(2,1," "); // 、 ,
console.log(arr1); //
console.log(arr); // [1, 2, " ", 4, 5]
splice()方法は常に1つの配列を返します.この配列には元の配列から削除された項目が含まれています.削除されていない場合は空の配列を返します.七、位置方法:indexOf()とlaset IndexOf():要素の索引を見る
indexOf():2つのパラメータを受け入れ、検索する項目と検索する始点位置を示す索引(オプション)です.配列の先頭(位置0)から後方検索が開始されます.
var arr = [1,2,3,4,5];
var arr1 = arr.indexOf(3,1); // 3, 1 , //2
console.log(arr1) // 3 2
lastIndexOf():2つのパラメータを受け取り、検索する項目と検索開始位置を示すインデックスがあります.配列の最後から前へ検索します.var arr = [1,2,3,4,5];
var arr1 = arr.lastIndexOf(5);
console.log(arr1); // 4
この2つの方法は、検索する項目の配列内の位置を返します.あるいは見つからない場合は-1を返します.最初のパラメータと配列の各項目を比較するときは、フルクラスのオペレータが使用されます.八、反復方法forEach()、map()、filter()、every()、some()
forEach():配列を巡回して、配列ごとに与えられた関数を実行します.forEach()は戻りません.デフォルトの3つのパラメータ:配列ごとに、配列インデックス、配列自体
var numbers = [1,2,3,4,5];
var forEachRes = numbers.forEach(function(item,index,arr){ // forEach() , , for
//
})
map():「マップ」という意味で、配列中の各動作に与えられた関数を返します.呼び出しのたびに新しい配列を構成します.基本的な使い方はforEachと同じです.違いはmap()が戻り値を持ち、forEach()は戻り値がありません.var numbers = [1,2,3,4,5];
var mapRes = numbers.map(function(item,index,arr){ // map() ,
return item * 2;
})
console.log(mapRes); // [2,4,6,8,10]
filter():条件に合った配列項目を返す(不適合な項目をフィルタリングする)var numbers = [1,2,3,4,5,6,7,8,9];
var filterRes = numbers.filter(function(item,index,arr){ // filter
return item > 2
})
console.log(filterRes); // [3,4,5,6,7,8,9]
every():着信した関数はどれに対してもtrueに返さなければなりません.この方法はtrueに戻ります.そうでないとfalseに戻ります.var numbers = [1,2,3,4,5];
var everyRrs = numbers.every(function(item,index,array) { // every(); true
return item > 0;
})
console.log(everyRrs); // true
some():入力した関数は配列の中のいずれかに対してtrueに戻り、trueに戻ります.そうでなければfalseに戻ります.var numbers = [1,2,3,4,5];
var everyRrs = numbers.some(function(item,index,arr){ // some(); true
return item > 4
})
console.log(everyRrs); // true
九、帰結方法:reduce()とreduceRight()ECMAScript 5はまた、二つの規格配列の方法を追加しました.reduce()とreduceRight().これらの2つの方法はすべての項目を繰り返して、最終的な戻り値を構築します.この中で、reduce()方法は、配列の第一項から順に最後まで巡回する.reduceRight()は配列の最後の項目から、前へ第一項を遍歴します.
両方の方法は、2つのパラメータを受信します.1つは、各項目で呼び出された関数と、(オプション)は、正規化ベースの初期値として機能します.
reduce()とreduceRight()に送る関数は、4つのパラメータを受信します.前の値、現在の値、項目のインデックス、および配列オブジェクトです.
reduce():この関数が返した任意の値は、最初のパラメータとして自動的に次の項目に渡されます.第一の反復は配列の第二項において行われるので、第一のパラメータは配列の第一項であり、第二のパラメータは配列の第二項である.
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev,cur,index,arr){ // : 、 、 、 ;
return prev + cur
})
console.log(sum)
reduceRight()関数を使うのは,reduce()法と同じで,主にどちらから配列を遍歴するかによって決まる.それ以外は全く同じです.以上は配列の基本的な使い方です.
ES 6の配列方法:
1、Aray.of():すべてのパラメータ値からなる配列を返します.パラメータがなければ空の配列を返します.
var arr = Array(3); // [undefined,undefined,undefined] length = 3
var arr = Array.of(3); // [3] length = 1;
Array.of() ,
2、Aray.from():2種類のオブジェクトを本物の配列に変換する(元のオブジェクトを変えずに新しい配列に戻る)最初のパラメータ(必須):真の配列のオブジェクトに変換します.第二のパラメータ(オプション):類似の配列のmap方法は、各要素を処理し、処理後の値を返す配列に入れる.3番目のパラメータ(オプション):thisを結合するために使用します.let obj = {0:'a',1:'b',2:'c',3:'d',4:'e',length:5} // 1. length
let arr = Array.from(obj);
console.log(arr); // ['a','b','c','d','e'];
// 2. Iterator : 、Set、NodeList
let arr = Array.from('hellow');
console.log(arr); // ['h','e','l','l','o','w']
3、copyWithin():指定された位置のメンバーを他の場所にコピーする;三つのパラメータはいずれも数値です.そうでないと自動的に数値になります.ターゲット(必要):この位置からデータを交換します.負の値であれば、逆数を表します.start(オプション):この位置からデータを読み込み、デフォルトは0です.負の値であれば、逆数を表します.end(オプション):この位置に行く前にデータの読み込みを停止します.デフォルトは配列長に等しいです.負の数を使って配列の最後から位置を指定できます.ブラウザ対応(MDN):chrome 45、Edge 12、Firefox 32、Opera 32、Safari 9、IEはサポートされていません.たとえば、複製配列の前の2つの要素は第3および第4の位置にあります.var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2); // :Banana,Orange,Banana,Orange,Kiwi,Papaya
4、fill():充填配列定義:与えられた値を使って、配列を埋める.引数:最初の要素(必須):配列の値の2番目の要素(オプション):パディングの開始位置、デフォルト値は0の3番目の要素(オプション):パディングの終了位置、デフォルトはthis.lengthです.5、ES 6拡張演算子・・統合配列:ES 6の文法がより分かりやすいので、現在の統合配列は多く採用されています.・・・演算子はcancatの栗ごとに、より簡潔で高度にカスタムされた配列要素の位置を実現する効果があります.
let a = [2, 3, 4, 5]
let b = [ 4,...a, 4, 4]
console.log(a,b); // [2, 3, 4, 5] [4,2,3,4,5,4,4]
jsの配列を遍歴しても、元の配列を変えない方法は全部で12個あります.ES 5:forEach、every、some、fliter、map、reduce、reduceRight、ES 6:find、findIndex、keys、values、entries
ES6:find()& findIndex()
find() : , , , undefined。
findIndex() : , , -1。
この二つの方法:let new_array = arr.find(function(currentValue, index, arr), thisArg)
let new_array = arr.findIndex(function(currentValue, index, arr), thisArg)
ES 6 keys()&values()&entries()はキー名を遍歴し、キー名+キー値の定義を遍歴します.三つの方法はいずれも新しいアラーIteratorオブジェクトに戻ります.オブジェクトは方法によって異なります.構文:パラメータ:なし.array.keys()
array.values()
array.entries()