ホームページ  >  記事  >  ウェブフロントエンド  >  js配列メソッド

js配列メソッド

不言
不言オリジナル
2018-04-04 11:35:361251ブラウズ

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


配列作成

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

arr1 = varvar

new

Array();

//

空の配列を作成します

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

var arr3 = new Array("ユリ","

「トム」

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

arr4 = [] //

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

var

arr5 = [20] ; //

1

var arr6 = ["ユリ"

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

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

に追加します

1

2

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

4

var arr6 = [「ユリ」「ルーシー」」も「 ]; // 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 5 Array.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を渡すことができます光線実現するプロトタイプ拡張。各メソッドの基本機能を以下に詳しく紹介します。

1join()

join(separator):

省略された場合は

separator

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

1

2

3

4

var arr = [1,2,3];

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

console.log(arr.join(

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

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

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

join()

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

functionRepeatString (str, n) {

Return

New

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

, 3));

// abcabcabc

console.log(repeatString(

"こんにちは"

, 5));

2push()pop()

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

1

2

3

4

5

6

7

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

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

console.log(count); // 5

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

var item = arr.pop();

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

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

3shift() unshift()

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

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

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

メソッドは各配列項目の

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

45var

arr1 = [

1

2

3

4

5

6

7

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

var count = ,"ショーン");

console.log(count);

// 5

console.log(arr);

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

var item = 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

7

8

9

10

11

関数

compare(value1, value2) {

if

(値1

return

-1;

}

else if (value1 > value2) {

戻る 1;

} else

{

return 0;

}

}

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) {

return 1;

} if (value1 > value2) { return

-1;}

else {return

0 ;}

}

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

console.log(arr2.sort(compare))

// [51, 24, 13, 3]

, reverse()reverse()

: 配列項目の順序を逆にします。

1var

2

3

arr = [13, 24, 1、3];console.log ( arr.reverse());

//[3, 51, 24, 13]

console.log(arr);変わりました

)

6concat()

concat() : 元の配列にパラメータを追加します。このメソッドは、まず現在の配列のコピーを作成し、次に受け取ったパラメーターをコピーの末尾に追加し、最後に新しく構築された配列を返します。 concat() メソッドに引数を渡さずに、現在の配列をコピーしてそのコピーを返すだけです。

1

2

3

4

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

var arrCopy = 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 に追加されます。

7slice()

slice(): 元の配列の指定された開始インデックスから終了インデックスまでの項目で構成される新しい配列を返します。 slice() メソッドは、返される項目の開始位置と終了位置である 1 つまたは 2 つのパラメーターを受け入れることができます。パラメーターが 1 つだけある場合、 slide() メソッドは、このパラメーターで指定された位置から始まり、現在の配列の末尾で終わるすべての項目を返します。 2 つの引数が指定された場合、このメソッドは開始位置と終了位置 - の間の項目を返しますが、終了位置は含まれません。

1

2

3

var arrCopy2 = 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

var arr = [1,3,5,7,9,11];

var arrCopy = arr.slice(1);

var arrCopy2 = arr.slice(1,4);

var arrCopy3 =​​ヴァル

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)と同等になります。

8splice()

splice(): 非常に強力な配列メソッドで、削除、挿入、置換を実現できます。

削除: 2 パラメータ: 削除する最初の項目の位置と削除する項目の数を指定することで、任意の数の項目を削除できます。たとえば、 splice(0,2) は配列内の最初の 2 つの項目を削除します。

挿入: 3 パラメーター: 開始位置、 0 (削除する項目の数) および挿入する項目を指定することにより、指定された位置に任意の数の項目を挿入できます。たとえば、 splice(2,0,4,6) は、現在の配列位置 2 から始めて 46 を挿入します。
置換: 指定した位置に任意の数の項目を挿入し、同時に任意の数の項目を削除できます。指定する必要があるのは、 3 パラメーター: 開始位置、置換する項目の数だけです。削除でき、任意の数の項目を挿入できます。挿入されるアイテムの数は、削除されるアイテムの数と同じである必要はありません。たとえば、splice (2,1,4,6)は、現在の配列位置 2 にある項目を削除し、位置 2 から始まる46を挿入します。

splice() メソッドは常に、元の配列から削除された項目を含む配列を返します。項目が削除されなかった場合は空の配列を返します。

indexOf()

1

2

3

4

5

6

7

8

9

10

var arr = [1,3,5,7,9,11];

var arr削除されました= arr.splice(0,2);

console.log(arr); //[5, 7, 9, 11]

console.log(arrRemoved); 1, 3]

var arrRemoved2 = arr.splice(2,0,4,6);

console.log(arr);

// [5, 7, 4, 6, 9, 11]

console.log(arrRemoved2);

// []

var arrRemoved3 = 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"

));

10forEach()

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

1

2

3

4

5

6

7

8

9

10

var arr = [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

11map()

map(): 地図」 、配列内の各項目に対して指定された関数を実行し、各関数呼び出しの結果で構成される配列を返します。

次のコードは、mapメソッドを使用して、配列内の各数値を二乗します。

12filter()

filter(): "Filter" 関数、配列内の各項目は指定された関数を実行し、それをフィルタリングするフィルター条件の配列を満たします。

1

2

3

4

5

var arr = [1, 2, 3, 4 , 5];

var arr2 = arr.map(function(item){

return item*item;

});

console.log(arr2); //[1, 4, 9, 16, 25]

2

1

2

3

4

5

var arr = [1, 2, 3, 4 、5、6、7、8、9、10];

var arr2 = arr.filter(function(x,index) {

return dindex%3 === 0 ||]すべての項目が条件を満たした場合にのみ、tru​​e

が返されます。

1

34

56 7

8

9

var

arr = [1, 2, 3, 4, 5];

var

arr2 = arr.every(

関数

) (x) {

return

x

});console.log(arr2);

var arr3 = 編曲。すべて(関数(x) {

return x

});

console.log(arr3); /偽

14some()

some(): 条件を満たす項目が配列内にあるかどうかを判定します。1 つの項目が条件を満たす限り、それは を返します。本当

1

2

3

4

5

6

7

8

9

var arr = [1, 2, 3, 4, 5];

var arr2 = arr.some(関数) (x) {

return x

});

console.log(arr2); arr3 = 編曲。 some(

function(x) {return x

});console.log(arr3); /偽

15reduce()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];

var sum =values.reduceRight(function(prev, cur, Index, array){

return pre v + cur ;

},10);

console.log(sum); //25

この記事はhttp://www.jb51から転載されました。 net/article/ 87930.htm

関連する推奨事項:

JS 配列の並べ替え

js 関数のカプセル化



以上がjs配列メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。