js配列メソッド-jsチュートリアル-php.cn

この記事の内容は js 配列メソッドです。これをあなたと共有し、困っている友達の参考としても使えます

配列作成

JavaScript2 つまず、Arrayコンストラクターを使用します。var

arr1 = var var

new

Array();

空の配列を作成します

arr2 =newArray(20) ;//配列を作成する20アイテムを含む

vararr3 =newArray("ユリ","、

「トム」

);//3文字列を含む配列を作成する配列を作成する 2 番目の基本的な方法は、配列リテラル表記を使用することです。123

arr4 = []//

空の配列を作成する項目を含む配列を作成します

var

arr5 = [20] ;//

vararr6 = ["ユリ"、

"ルーシー"、「トム」];//3文字列を含む配列を作成します

配列の値の読み取りと設定を行う場合は、角括弧を使用し、0:

に追加します

に基づいて対応する値の数値インデックスを指定します。3

vararr6 = [「ユリ」、「ルーシー」、」も「];//3文字列を含む配列を作成します

alert(arr6[0]);//lily

arr6[1] ="mary";//2 番目の項目をmary

arr6[3] ="sean"に変更します//4 番目の項目をsean

JavaScript の配列のlength属性は変更できます。以下の例を参照してください。

var ];

arr = ["lily"

,"lucy"

,"Tom"

//文字列を含む配列を作成するarr[arr.length] ="sean";//添字3に項目"sean"を追加しますarr.length = arr.length-1;//

配列の最後の項目を削除します

オブジェクトが配列オブジェクトかどうかを判断する必要がある場合、ECMAScript 5より前では、instanceof Arrayを使用して判断できましたが、instanceof演算子の問題は、それが次のことを前提としているということですグローバル実行環境は 1 つだけであるということです。 Web ページに複数のフレームが含まれている場合、実際には 3 つ以上の異なるグローバル実行環境が存在し、したがってArrayコンストラクターの 3 つ以上の異なるバージョンが存在します。あるフレームから別のフレームに配列を渡す場合、渡す配列には、2 番目のフレームでネイティブに作成された配列とは異なるコンストラクターが含まれます。

ECMAScript 5Array.isArray()メソッドを追加しました。このメソッドの目的は、値が作成されたグローバル実行コンテキストに関係なく、値が配列であるかどうかを最終的に判断することです。

配列メソッド

配列メソッドの紹介から始めましょう。配列メソッドには、配列プロトタイプメソッドと、

オブジェクトオブジェクトから継承されたメソッドが含まれます。ここでは、配列プロトタイプメソッドである配列のみを紹介します。主なプロトタイプメソッドは次のとおりです:

join()

push()
とpop()shift()
とunshift()sort()reverse()
concat()
slice()
splice()
indexOf()

とlastIndexOf()(ES5new)forEach()
(ES5)新規追加). ..新規追加)
some()(ES5新規)
reduce()とreduceRight()(
ES5新規)ES5
の場合新しいメソッドブラウザのサポート:Opera 11+Firefox 3.6+Safari 5+Chrome 8+
Internet Explorer 9+サポートされているブラウザのバージョンについては、Arを渡すことができます光線実現するプロトタイプ拡張。各メソッドの基本機能を以下に詳しく紹介します。

1、join()

join(separator):

省略された場合は

separator

を区切り文字として、配列の要素を文字列に結合します。使うデフォルトでは、カンマが区切り文字として使用されます。このメソッドは、区切り文字という 1 つのパラメータのみを受け取ります。

vararr = [1,2,3];

Console.log (Arr.Join ()); 1、 2,3

console.log(arr.join(

"-"));// 1-2-3

console.log(arr); 1, 2, 3]

(元の配列は変更されません)

join()

メソッドを使用して、文字列と数値を渡すだけで済みます。繰り返しの文字列を返します。関数は次のとおりです。

function RepeatString (str, n) {

Return

New

Aarray (n + 1). Join (str) "

, 3));

// abcabcabc

console.log(repeatString(

"こんにちは"

, 5));

2、push()、pop()

push():は任意の数のパラメータを受け取り、それらを配列の最後に1つずつ追加できます。変更された配列の長さを返します。
pop(): 配列の末尾から最後の項目を削除し、配列の長さの値を減らし、削除された項目を返します。

vararr = ["リリー","ルーシー","トム"];

varcount = arr.push("ジャック","ショーン");

console.log(count);// 5

console.log(arr);// ["リリー", "ルーシー", 「トム」、「ジャック」、「ショーン」]

varitem = arr.pop();

console.log(item)// ショーン

コンソール.log(arr);// [「リリー」、「ルーシー」、「トム」、「ジャック」]

3、shift()、unshift()

shift(): 元の配列の最初の項目を削除し、削除された要素の値を返します。配列が空の場合は、未定義のを返します。
unshift:元の配列の先頭にパラメータを追加し、配列の長さを返します。

このメソッドのセットは、上記のpush()メソッドとpop()メソッドに正確に対応します。1 つは配列の先頭を操作するもので、もう 1 つは配列の末尾を操作するものです。配列。

4並べ替える場合、sort()

toString()変換メソッドを呼び出し、結果の文字列を比較して並べ替え方法を決定します。配列内の各項目が数値であっても、sort()メソッドは文字列を比較するため、次の状況が発生します。

45var

メソッドは各配列項目のarr1 = [

vararr = ["リリー","ルーシー","トム"];

varcount =,"ショーン");

console.log(count);

// 5

console.log(arr);

//["ジャック", "ショーン", 「リリー」、「ルーシー」、「トム」]

varitem = arr.shift();

console.log(item)

// Jack

console .log(arr);

// [「ショーン」、「リリー」、「ルーシー」、「トム」]

"a"

、

"d" 、

「ち」

、

"b"

];

console.log(arr1.sort());

// ["a", "b", "c", "d"]

arr2 = [ 13, 24, 51, 3];

console.log(arr2.sort())// [13, 24, 3, 51]console.log(arr2); //[13, 24, 3, 51](メタ配列が変更されました)

上記の問題を解決するために、sort()メソッドはパラメータとして比較関数を受け取ることができるため、どの値がどの値の前にあるかを指定できます。比較関数は 2 つのパラメーターを受け取り、最初のパラメーターが 2 番目のパラメーターの前にある必要がある場合は負の数値を返し、2 つのパラメーターが等しい場合は0を返し、最初のパラメーターが 2 番目のパラメーターの後にある必要がある場合は 1 を返します。番号。以下は単純な比較関数です。6

関数

compare(value1, value2) {

(値1

return

-1;

}

elseif(value1 > value2) {

戻る1;

}else

{

return0;

}

arr2 = [ 13、24、51、3];

console.log(arr2.sort(compare));// [3, 13, 24, 51]

比較関数を通じて降順に並べ替えられた結果を生成する必要がある場合は、比較関数によって返された値を交換するだけです:

5

1
2
3
4
5
6
7
8
9
10
11

関数比較(値1 , value2) {
if(value1 < value2) {
return1;
}if(value1 > value2) {return
-1;}
else{return
0 ;}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare))
// [51, 24, 13, 3]

,reverse()reverse()
: 配列項目の順序を逆にします。
1 var

2
3
arr = [13, 24, 1、3];console.log ( arr.reverse());
//[3, 51, 24, 13]
console.log(arr);変わりました
)
6、concat()
concat(): 元の配列にパラメータを追加します。このメソッドは、まず現在の配列のコピーを作成し、次に受け取ったパラメーターをコピーの末尾に追加し、最後に新しく構築された配列を返します。concat()メソッドに引数を渡さずに、現在の配列をコピーしてそのコピーを返すだけです。

1
2
3
4

vararr = [1,3,5,7];
vararrCopy = arr.concat(9,[11,13]);
console.log(arrCopy)//[1, 3, 5, 7, 9, 11, 13] ]
console.log(arr);// [1, 3, 5, 7](元の配列は変更されていません)

が見つかります上記のテスト結果から: 入力が配列でない場合は、パラメーターを配列に直接追加します。入力が配列の場合は、配列内の各項目を配列に追加します。しかし、2 次元配列が渡された場合はどうなるでしょうか?
上記のコードでは、arrCopy2配列の5番目の項目は2つの項目を含む配列です。つまり、concatメソッドは、次の場合にのみ受信配列内の各項目を配列に追加できます。受信配列内の一部の項目が配列である場合、この配列項目も項目としてarrCopy2に追加されます。
7、slice()
slice(): 元の配列の指定された開始インデックスから終了インデックスまでの項目で構成される新しい配列を返します。slice()メソッドは、返される項目の開始位置と終了位置である 1 つまたは 2 つのパラメーターを受け入れることができます。パラメーターが 1 つだけある場合、slide()メソッドは、このパラメーターで指定された位置から始まり、現在の配列の末尾で終わるすべての項目を返します。 2 つの引数が指定された場合、このメソッドは開始位置と終了位置-の間の項目を返しますが、終了位置は含まれません。

1
2
3

vararrCopy2 = arr.concat 9,[11,13]]);
console.log(arrCopy2);//[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); ]

1
2
3
4
5
6
7
8
9
10

vararr = [1,3,5,7,9,11];
vararrCopy = arr.slice(1);
vararrCopy2 = arr.slice(1,4);
vararrCopy3 =ヴァル
arrCopy4 = arr.slice(-4,-1);
console.log(arr);//[1, 3, 5, 7, 9, 11](
元の配列は変更されました
)console.log(arrCopy);//[3, 5, 7, 9, 11]
console.log(arrCopy2); 7]console.log(arrCopy3);
//[3, 5, 7]console.log(arrCopy4);
arrCopyはパラメータを1つだけ設定します。つまり、開始添字は1であるため、返される配列は、末尾から始まる添字1(添字1を含む)になります。配列。
arrCopy2は 2 つのパラメータを設定し、開始インデックス (1を含む) から終了インデックス (4を除く) までの部分配列を返します。
arrCopy3は、終端添字が負の数値である場合、その負の数値を配列の長さの値 (6) に加算して、その位置の数値を置き換えます。つまり、1から4までのサブ配列になります(排他的)。
arrCopy4のパラメータはどちらも負の数なので、配列の長さ6を加算することで正の数に変換されるため、slice(2,5)と同等になります。
8、splice()
splice(): 非常に強力な配列メソッドで、削除、挿入、置換を実現できます。
削除:2パラメータ: 削除する最初の項目の位置と削除する項目の数を指定することで、任意の数の項目を削除できます。たとえば、splice(0,2)は配列内の最初の 2 つの項目を削除します。
挿入:3パラメーター: 開始位置、0(削除する項目の数) および挿入する項目を指定することにより、指定された位置に任意の数の項目を挿入できます。たとえば、splice(2,0,4,6)は、現在の配列位置2から始めて4と6を挿入します。
置換: 指定した位置に任意の数の項目を挿入し、同時に任意の数の項目を削除できます。指定する必要があるのは、3パラメーター: 開始位置、置換する項目の数だけです。削除でき、任意の数の項目を挿入できます。挿入されるアイテムの数は、削除されるアイテムの数と同じである必要はありません。たとえば、splice (2,1,4,6)は、現在の配列位置2にある項目を削除し、位置2から始まる4と6を挿入します。。
splice()メソッドは常に、元の配列から削除された項目を含む配列を返します。項目が削除されなかった場合は空の配列を返します。
indexOf()

1
2
3
4
5
6
7
8
9
10

vararr = [1,3,5,7,9,11];
vararr削除されました= arr.splice(0,2);
console.log(arr);//[5, 7, 9, 11]
console.log(arrRemoved); 1, 3]
vararrRemoved2 = arr.splice(2,0,4,6);
console.log(arr);
// [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2);
// []
vararrRemoved3 = arr.splice(1,1,2,4);
console.log(arr);
//[5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3);
9
、

、
lastIndexOf()indexOf(): 検索する項目と (オプション) の開始点の 2 つのパラメータを受け取ります。検索場所のインデックス。このうち、は配列の先頭(位置0
)から逆方向に検索します。lastIndexOf: 検索する項目と (オプション) 検索の開始点を示すインデックスの 2 つのパラメーターを受け取ります。このうち、は配列の末尾から順方向に検索します。両方のメソッドは、配列内で見つかる項目の位置を返します。見つからない場合は
-1を返します。等価演算子は、最初の引数を配列内の各項目と比較するときに使用されます。
1
2

3
4
5
6
var
arr = [1, 3,5,7,7,5,3,1];

console.log(arr.indexOf(5));//2console.log(arr.lastIndexOf(5) );
//5console.log(arr.indexOf(5,2)); //2
console.log(arr.indexOf("5"
));
10、forEach()
forEach(): 配列をループし、配列内の各項目に対して指定された関数を実行します。このメソッドには戻り値がありません。パラメータはすべてfunction型で、デフォルトで渡されるパラメータは次のとおりです: 走査された配列の内容、および配列自体。

1
2
3
4
5
6
7
8
9
10

vararr = [1, 2, 3, 4, 5];
arr.forEach(関数)(x, インデックス, a ){
console.log(x +'|'+インデックス +'|'+ (a === arr));
});
//出力は次のとおりです:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3 | true
// 5|4|true

11、map()
map():「地図」”、配列内の各項目に対して指定された関数を実行し、各関数呼び出しの結果で構成される配列を返します。
次のコードは、mapメソッドを使用して、配列内の各数値を二乗します。
12、filter()
filter():"Filter"関数、配列内の各項目は指定された関数を実行し、それをフィルタリングするフィルター条件の配列を満たします。

1
2
3
4
5

vararr = [1, 2, 3, 4 , 5];
vararr2 = arr.map(function(item){
returnitem*item;
});
console.log(arr2);//[1, 4, 9, 16, 25]

2

1
2
3
4
5

vararr = [1, 2, 3, 4 、5、6、7、8、9、10];
vararr2 = arr.filter(function(x,index) {
returndindex％3 === 0 ||]すべての項目が条件を満たした場合にのみ、true
が返されます。
1

34
567
8

9
var
arr = [1, 2, 3, 4, 5];
var
arr2 = arr.every(
関数
)(x) {
return
x

});console.log(arr2);
vararr3 = 編曲。すべて(関数(x) {
returnx
});
console.log(arr3); /偽
14、some()
some(): 条件を満たす項目が配列内にあるかどうかを判定します。1 つの項目が条件を満たす限り、それはを返します。本当。

1
2
3
4
5
6
7
8
9

vararr = [1, 2, 3, 4, 5];
vararr2 = arr.some(関数)(x) {
returnx
});
console.log(arr2);arr3 = 編曲。 some(
function(x) {returnx
});console.log(arr3); /偽
15、reduce()、reduceRight()
どちらのメソッドも、配列のすべての項目を反復処理して、最終的な戻り値を構築します。reduce()メソッドは、配列の最初の項目から開始され、1 つずつ最後まで移動します。そして、reduceRight()は、配列の最後の項目から開始し、最初の項目まで前方に移動します。
どちらのメソッドも 2 つのパラメーターを受け取ります。1 つは各項目で呼び出される関数、もう 1 つはマージの基礎として使用される (オプションで) 初期値です。
reduce()
とreduceRight()に渡される関数は、4引数:前の値、現在の値、項目のインデックス、および配列オブジェクトを受け取ります。この関数によって返された値はすべて、最初の引数として次の項目に自動的に渡されます。最初の反復は配列の 2 番目の項目に対して行われるため、最初の引数は配列の最初の項目、2 番目の引数は配列の 2 番目の項目になります。
次のコードは、reduce()を使用して、配列の先頭に初期値10を追加します。

1
2
3
4
5

var値 = [1,2,3 ,4 ,5];
varsum =values.reduceRight(function(prev, cur, Index, array){
returnpre v + cur ;
},10);
console.log(sum);//25

この記事はhttp://www.jb51から転載されました。 net/article/ 87930.htm
関連する推奨事項:
JS 配列の並べ替え
js 関数のカプセル化