多次元JavaScript配列を作成する方法。 アレイの詳細を削除します。 配列へのカスタムプロパティの追加

JavaScriptや他のプログラミング言語では、配列を操作するためにさまざまなメソッドが使用されます。

メソッドを使用すると、ロジックの構築とスクリプトへの実装が容易になります。

以下は 基本メソッド JSで配列を操作します。

押す

push()メソッドは、配列の最後に値を追加します。

arr =;とします。 arr.push(312); コンソールログ(arr); //→

ポップ

pop()メソッドは、配列から最後の要素を削除するか、その値を返します。

arr =;とします。 arr.pop(); コンソールログ(arr); //→

例として配列の最後の要素の値を取得する機能を使用すると、画像形式を取得できます。

img = "https://example.com/img/name.png"; format = img.split( "。")。pop();とします。 コンソールログ(フォーマット); //→pngconsole.log(img.split( "。")); //→["https:// example"、 "com / img / name"、 "png"]

シフト解除

unshift()メソッドは、配列の先頭に要素を追加します。

arr =;とします。 arr.unshift(312); コンソールログ(arr); //→

シフト

shift()メソッドは、配列から最初の要素を削除します。

arr =;とします。 arr.shift(); コンソールログ(arr); //→;

シフトメソッドとシフト解除メソッドを使用する場合、配列の各要素がそのインデックスを変更することを理解する必要があります。 配列が大きい場合、これによりプログラムの実行が遅くなる可能性があります。

スプリット

split()メソッドは、文字列を配列に変換するために使用されます。 Splitは、指定されたパラメーターで文字列(文字列)を分割します。

str = "Anya、Masha、Sasha、Dasha"; //これは文字列ですletarr = str.split( "、"); コンソールログ(arr); //→["Anya"、 "Masha"、 "Sasha"、 "Dasha"]は配列です

加入

join()メソッドは、パラメーターで指定された区切り文字を使用して、配列の要素を文字列に結合します。

arr = ["Notpad ++"、 "Sublime"、 "VSCode"]; //これは配列ですletstr = arr.join( "、"); console.log( "コードエディタ:" + str); //→「コードエディタ:Notpad ++、Sublime、VSCode」

スライス

スライス()メソッドは、メソッドに渡された最初のパラメーターのインデックスを持つ要素から始めて、2番目のパラメーターのインデックスを持つ要素にソースから要素をコピーする新しい配列を作成します。

例:slice(3、7)は、インデックス3、4、5、6の要素を返します。インデックス7の要素は、配列に含まれません。

負の値を持つパラメーターがslice()に渡されると、パラメーターで指定された要素数で新しい配列が返されますが、元の配列の最後から既に取得されています。

スライスメソッドは元の配列を変更しません。

以下は、slice()メソッドがどのように機能するかの例です。

arr = ["A"、 "B"、 "C"、 "D"、 "E"、 "F"、 "G"]; // 2〜5のインデックスを持つ要素を含む配列を返しますconsole.log(arr.slice(2、5)); //→["C"、 "D"、 "E"] // 3からarr.lengthまでのインデックスを持つ要素を含む新しい配列を返しますconsole.log(arr.slice(3)); //→["D"、 "E"、 "F"、 "G"] //元の配列のコピーを返しますconsole.log(arr.slice()); //→["A"、 "B"、 "C"、 "D"、 "E"、 "F"、 "G"] //で構成される新しい配列を返します 最後の3つ元のconsole.log(arr.slice(-3));の要素 //→["E"、 "F"、 "G"]

スプライス

splice()メソッドは、既存の要素を削除したり、新しい要素を追加したりして、配列の内容を変更します。

構文:

Array.splice(start、deleteCount [、item1 [、item2 [、...]]])

パラメーター:

  • 始める-配列の変更を開始するインデックス。 配列の長さより大きい場合、実際のインデックスは配列の長さに設定されます。 負の場合、要素の最後からのインデックスを指定します。
  • deleteCount-配列から削除される古い要素の数を示す整数。 deleteCountが0の場合、要素は削除されません。 この場合、少なくとも1つの新しい要素を指定する必要があります。 deleteCountの場合 より多くの量インデックスの開始から配列に残っている要素は、配列の最後までのすべての要素が削除されます。
  • itemN-オプションのパラメータ。 配列に追加する要素。 要素を指定しない場合、splice()は単に配列から要素を削除します。

戻り値

説明

挿入するように指定された要素の数が削除される要素の数と異なる場合、配列は呼び出されたときに長さが変更されます。

arr = [バルカ、シャフタール、マンチェスターユナイテッド、ミラン、レアルマドリード、アヤックス、ユベントス]; nax = arr.splice(2、3); arr.splice(2、3); コンソールログ(nax); //→["ManUtd"、 "Milan"、 "Real"] console.log(arr); //→["Bars"、 "Shakhtar"] arr.splice(1、0、 "Zenith"、 "CSKA"、 "Spartak"); コンソールログ(arr); //→[バルカ、ゼニト、CSKA、スパルタク、シャフタール]

逆行する

reverse()メソッドは、配列要素の順序を逆にします。 その結果、配列の最初の要素が最後になり、最後の要素が最初になります。

arr =;とします。 console.log(arr.reverse()); //→console.log(["Alice "、" BG "、" GO "、" DDT "]。reverce()); //→["DDT"、 "GO"、 "BG"、 "Alice"]

地図

map()メソッドは、配列の要素を調べ、それらを使用して指定されたアクションを実行し、変更された要素を含む配列のコピーを返します。

以下の例では、配列の要素ごとに、この要素のインデックスの値(7 + 0、2 + 1、15 + 2、4 + 3、31 + 4)を追加します。

arr =;とします。 testMap = arr.map((element、index)=> element + index);とします。 console.log(testMap); //

または、配列の各値に、たとえば12を掛けます

arr =;とします。 testMap = arr.map(a => a * 12); console.log(testMap); //→

フィルター

filter()メソッドは、配列をフィルタリングするために使用されます。 配列を反復処理し、指定された条件に合格した要素のみを返します。

たとえば、21より大きい値のみを残して、数値から配列値をフィルタリングします

arr =;とします。 testFilter = arr.filter(element =>要素> 21);とします。 console.log(testFilter); //→

条件は21より大きいものを返すことであったため、21は配列の結果に含まれていなかったことに注意してください。21が配列に含まれるためには、条件は次の値以上に設定されます。要素> = 21

減らす

reduce()メソッドは、条件で指定された関数アクションに従って中間結果を累積しながら、配列要素を順番に調べます。 最終的には、1つの値のみが返されます。

多くの場合、このメソッドは、配列内のすべての数値の合計を見つけるために使用されます。 例:

arr =;とします。 summa = arr.reduce((acc、element)=> acc + element);とします。 コンソールログ(summa); //→370

選別

sort()メソッドは、指定されたパラメーターに従って配列の要素をソートするために使用されます。

例-数値の配列を取得し、昇順で並べ替えます。

arr =;とします。 testSortArr = arr.sort((a、b)=> a --b); console.log(testSortArr); //→

含む

include()メソッドは、配列に特定の要素が含まれているかどうかを判別し、それに応じてtrueまたはfalseを返します。

include()の使用例。

論理式は次のとおりです。

動物= "犬"; if(animal == "cat" || animal == "dog" || animal == "lion" || animal == "horse")(// ........)

includeメソッドを使用すると、次のように記述できます。

動物= "犬"; const animal = ["猫"、 "犬"、 "ライオン"、 "馬"]; if(animals.includes(animal))(// ...........)

jsで配列のインデックスを作成し、それらの要素を削除および追加する方法を学びます。

JavaScriptの配列は、値のリストを格納するように設計されたグローバルオブジェクトです。

あらゆるタイプのデータを格納できるという点で、他の変数と似ています。 ただし、配列には変数との重要な違いが1つあります。それは、一度に複数の要素を格納できることです。

配列は、順序付けられた値のコレクションです。 各値は要素と呼ばれ、インデックスと呼ばれる独自の番号を持っています。

配列内の要素は、どのタイプでもかまいません。 さらに、1つの配列の要素は次のようになります。 他の種類:数値、文字列、ブール値、さらにはオブジェクトやその他の配列。

配列要素の順序は0から始まります。 配列のインデックスオフセットは常に1であることがわかります。最初の要素のインデックスは0、2番目の要素のインデックスは1というようになります。

さまざまなタイプの要素を持つ配列の例を次に示します。

配列の作成(宣言)

配列には必要なだけのデータを格納できるため、配列は非常に便利です。 js配列の可能な最大サイズは232要素です。

配列を作成することをJavaScriptに伝える必要があります。 これには2つのオプションがあります:角括弧内の値または キーワード新着。

省略形:角かっこを使用する

角かっこで囲まれた値のコンマ区切りリスト。

var myArray = ["Jack"、 "Sawyer"、 "John"、 "Desmond"];

配列の内容は、角括弧の間にあるものによって決まります。 各値はコンマで区切られます。

値は単純な変数と同じ方法で設定されます。つまり、文字列は引用符などで囲まれて宣言する必要があります。

空の配列を宣言するには、括弧を空のままにします。

var myArray =;

長い注:Array()コンストラクターの使用

var lostArray = new Array( "Jack"、 "Sawyer"、 "John"、 "Desmond"); var twinPeaksArray = new Array( "Laura"、2、["Bob"、 "Leland"、 "Dale"]);

newキーワードは、値がパラメーターとして渡される新しい配列を作成するようにJavaScriptに指示します。

配列に含まれる要素の数が事前にわかっている場合は、この値をコンストラクターにすぐに渡すことができます。

var myArray = new Array(80);

上記の式は、未定義の値を持つ80スロットの空の配列を作成します。

空の配列宣言:

var myArray = new Array();

配列要素へのアクセス

各要素のインデックスを使用して、配列内の任意のデータを操作し、演算子を使用してそれらにアクセスできます。

var myArray = ["Jack"、 "Sawyer"、 "John"、 "Desmond"]; コンソールログ(myArray); //「ジャック」を出力しますconsole.log(myArray); //「Desmond」を出力します

配列は複数のレベルを持つことができます。つまり、各要素自体を配列にすることができます。 結果は2次元のjs-arrayです。 他の配列の内部にあるこれらの配列を参照する方法-" 多次元配列»?

たとえば、ファミリを表す配列について考えてみましょう。 この家族の子供たちは、メインの子供たちの中に別の配列で記録されます。

var familyArray = ["Marge"、 "Homer"、["Bart"、 "Lisa"、 "Maggie"]];

次のように表すことができます。

値「リサ」を参照するには:

varlisa = familyArray; コンソールログ(リサ); //「リサ」を出力します

これはほぼ無期限に継続でき、ネストされたデータセットを配列に格納し、インデックスを使用してそれらにアクセスできます。

配列への要素の追加

それぞれのインデックスを使用して、配列の要素にアクセスする方法を理解しました。 同様に、次のように宣言することで要素を追加(または変更)できます。

var myArray = ["Kate"、 "Sun"]; myArray = "ジュリエット"; コンソールログ(myArray); //「Kate、Sun、Juliet」を出力します

その前に他の要素がないインデックスで要素を宣言するとどうなりますか? 配列自体が欠落しているすべての要素を作成し、それらに未定義の値を割り当てます。

var myArray = ["Kate"、 "Sun"]; myArray = "ジュリエット"; console.log(myArray.length); //「6」を出力しますconsole.log(myArray); // ["Kate"、 "Sun"、undefined、undefined、undefined、 "Juliet"]を出力します

長さプロパティを使用して、js配列の長さを確認できます。 上記の例では、配列に6つの要素があり、そのうちの3つには値が指定されていません。これらは、未定義としてマークされています。

push()メソッド

push()メソッドを使用すると、js配列に1つ以上の要素を追加できます。 Push()は無制限の数のパラメーターを受け入れ、それらすべてが配列の最後に追加されます。

var myArray = ["Kate"、 "Sut"]; myArray.push( "Juliet"); //要素 "Juliet"を配列の最後に追加しますmyArray.push( "Libby"、 "Shannon"); //要素 "Libby"と "Shannon"を配列の最後に追加しますconsole.log(myaArray ); // ["Kate"、 "Soon"、 "Juliet"、 "Libby"、 "Shannon"]を出力します

unshift()メソッド

unshift()メソッドは、配列の先頭に要素を追加することを除いて、push()と同じように機能します。

var myArray = ["Kate"、 "Sun"]; myArray.unshift( "Juliet"); //要素 "Juliet"を配列の先頭に追加しますmyArray.unshift( "Libby"、 "Shannon"); //要素「Libby」と「Shannon」を配列の先頭に追加しますconsole.log(myArray); //出力["Libby"、 "Shannon"、 "Juliet"、 "Kate"、 "Sun"]

配列要素の削除

pop()およびshift()メソッド

pop()メソッドとshift()メソッドは、それぞれ配列の最後の要素と最初の要素を削除します。

var myArray = ["Jack"、 "Sawyer"、 "John"、 "Desmond"、 "Kate"]; myArray.pop(); //要素「Kate」を削除しますmyArray.shift(); //要素「Jack」を削除しますconsole.log(myArray); //出力["Sawyer"、 "John"、 "Desmond"]

splice()メソッド

splice()メソッドを使用すると、要素の正確なインデックスを指定しながら、要素を削除したり、配列に追加したりできます。

次の例では、splice()メソッドはインデックス2( つまり、3番目の要素から):

var FruitArray = ["apple"、 "peach"、 "orange"、 "lemon"、 "lime"、 "cherry"]; FruitArray.splice(2、0、 "melon"、 "banana"); console.log(fruitArray); //出力["apple"、 "peach"、 "melon"、 "banana"、 "orange"、 "lemon"、 "lime"、 "cherry"]

splice()メソッドの最初のパラメーターはインデックスです。 要素を追加/削除する位置を指定します。 この例では、インデックス2( 「オレンジ」を意味する).

2番目のパラメーターは、削除する要素の数です。 値0を指定したため、何も削除されません。

次のパラメータはオプションです。 それらは配列に新しい値を追加します。 この場合、インデックス2から「メロン」と「バナナ」を追加する必要があります。

配列は次のように操作できます さまざまな方法配列コンストラクターによって提供されます。

pop / pushおよびshift / unshiftメソッド

pop()メソッドとpush()メソッドについて考えてみます。 これらのメソッドを使用すると、配列をスタックのように扱うことができます。 スタックは、要素へのアクセスがLIFOの原則(英語の後入れ先出し、「後入れ先出し」)に従って編成されたデータ構造です。 スタックの原理は、プレートのスタックと比較できます。上から2番目を取得するには、一番上のプレートを削除する必要があります。 それがどのように機能するかを図に示します。

それでは、push()メソッドとpop()メソッドに戻りましょう。 push()メソッドは、配列の最後に1つ以上の新しい要素を追加し、その新しい長さを返します。 pop()メソッドは、配列の最後の要素を削除し、配列の長さを減らし、削除した値を返します。 これらのメソッドは両方とも、配列の変更されたコピーを作成するのではなく、その場で配列を変更することに注意してください。

var foo =; // foo:foo.push(1,2); // foo:2を返しますfoo.pop(); // foo:2を返しますfoo.push(3); // foo:2を返しますfoo.pop(); // foo:3を返しますfoo.push(); // foo:] 2を返しますfoo.pop()// foo:foo.pop();を返します // foo:1つのvarfruitsを返します= ["pears"、 "bananas"、 "apples"]; 選んだ変数= fruits.pop(); document.write( "あなたは私の" +を選んだ); 試す "

shift()メソッドとunshift()メソッドは、配列の先頭で要素を挿入および削除することを除いて、pop()およびpush()とほとんど同じように動作します。 unshift()メソッドは、既存の要素をより高いインデックスにシフトして新しい要素用のスペースを確保し、配列の先頭に1つ以上の要素を追加して、配列の新しい長さを返します。 shift()メソッドは、配列の最初の要素を削除してその値を返し、後続のすべての要素をシフトして占有します フリースペース配列の先頭。

Var f =; // f:f.unshift(1); // f:戻り値:1 f.unshift(22); // f:戻り値:2 f.shift(); // f:戻り値:22 f.unshift(3、); // f:、1]戻り値:3 f.shift(); // f:[、1]戻り値:3 f.shift(); // f:戻り値:f.shift(); // f:戻り値:1

結合メソッド

Array.join()メソッドは、配列要素を1つの文字列に結合するために使用されます。 オプションの文字列引数をメソッドに渡すことができます。これは、文字列内の要素を区切るために使用されます。 区切り文字が指定されていない場合、メソッドが呼び出されたときのデフォルトの区切り文字はコンマになります。

Var a = ["Wind"、 "Rain"、 "Fire"]; var myVar1 = a.join(); // "Wind、Rain、Fire" var myVar2 = a.join( "、"); // "風、雨、火" var myVar3 = a.join( "+"); // "風+雨+火" document.write(myVar1 + "
"+ myVar2 +"
"+ myVar3);試してください»

Array.join()メソッドは、String.split()メソッドの逆であり、文字列をチャンクに分割して配列を作成します。

逆の方法

Array.reverse()メソッドは、配列内の要素の順序を逆にして、要素が再配置された配列を返します。 このメソッドは、要素が並べ替えられた新しい配列を作成しませんが、既存の配列で要素を並べ替えます。

Var myArr = ["one"、 "two"、 "three"]; document.write(myArr.reverse()); 試す "

concateメソッド

Array.concat()メソッドは、concat()メソッドが呼び出された元の配列の要素を含む新しい配列を作成して返し、concat()メソッドに渡されたすべての引数の値が順番に埋め込まれます。 これらの引数のいずれかがそれ自体が配列である場合、そのすべての要素が追加されます。 配列名は引数として使用され、要素が連結される順序で指定されます。

Var a =; a.concat(4、5)// a.concat();を返します。 //同じ-a.concat(、)を返します//戻ります

ソート方法

Array.sort()メソッドは、配列の要素を所定の位置に並べ替え、並べ替えられた配列を返します。 sort()メソッドが引数なしで呼び出された場合、配列の要素をアルファベット順にソートします(比較を実行するために一時的に文字列に変換します)。 引数として、sort()メソッドは、要素のソート順を決定する比較関数を受け取ることができます。

Var a = ["Kiwi"、 "Oranges"、 "Pears"]; a.sort(); vars = a.join( "、"); //オレンジ、梨、キウイdocument.write(s); //数字の例varmyArr =; myArr.sort(); document.write(myArr); // 1,10,2お試し»

おそらく、数値の並べ替えとは少し異なる結果が表示されることを期待していました。 この並べ替えは、sort()メソッドが要素を文字列に変換して並べ替えるために発生します。 したがって、取得する順序は文字列です。結局のところ、「10」です。

アルファベット順以外の順序で並べ替えるには、sort()メソッドの引数として比較関数を渡すことができます。 ただし、比較関数は自分で作成する必要があることに注意してください。 この関数は、2つの引数のどちらがソート済みリストの最初に表示されるかを指定するため、2つのパラメーターが必要です。 このような関数の理解と記述を容易にするために、要素の順序を決定するためのいくつかのルールがあります。

  • 最初の引数が2番目の引数の前になければならない場合、比較関数は負の数を返します(
  • 最初の引数が2番目の引数の後に続く必要がある場合、比較関数は正の数を返します(a> bの場合)
  • 2つの値が同等である場合(つまり、それらの順序は重要ではありません)、比較関数は0を返します(a == bの場合)

比較のために、関数は引数として配列要素を使用します。

Function foo(a、b)(//テスト関数を定義するif(a b)return 1; return 0; // if a == b)var a =; a.sort(foo); //関数の名前のみが引数として渡されますdocument.write(a.join( "、")); //同じ変数をショートカットしますa =; a.sort(function(a、b)(//無名関数を使用してa --bを返す; //関数は0を返す)); document.write(a); // 1,2,5,10お試し»

例の最初のエントリは、このように記述されているため、どのように機能するかを理解しやすくなっています。 2番目のスニペットで無名関数を使用することがいかに便利であるかに注目してください。 一度だけ呼び出されるので、名前を付ける必要はありません。

注:配列に未定義の要素がある場合、それらは配列の最後に移動されます。

スライス法

Array.slice()メソッドは、指定されたスライスを配列からコピーするために使用され、コピーされた要素を含む新しい配列を返します。 元の配列は変更されません。

メソッド構文:

array_name.slice(begin、end);

Array_nameは、新しい配列の特定の要素セットを抽出する配列の名前に置き換える必要があります。 このメソッドは、返される配列セクションの開始と終了を定義する2つの引数を取ります。 このメソッドは、配列のセクションを最初から最後までコピーします。終了は含まれません。 引数が1つだけ指定されている場合、返される配列には、指定された位置から配列の最後までのすべての要素が含まれます。 負のインデックスを使用できます-それらは配列の最後から数えられます。

Var arr =; arrスライス(0,3); // arr.slice(3);を返します // arr.slice(1、-1);を返します // arr.slice(-3、-2);を返します //戻り値

スプライス方式

Array.splice()メソッドは、配列を操作するための汎用メソッドです。 これは、slice()メソッドやconcat()メソッドのように新しい変更された配列を返すのではなく、その場で配列を変更します。 スプライスメソッドは、配列から要素を削除したり、新しい要素を挿入したり、要素を置き換えたりすることができます-一度に1つずつ同時に。 削除された要素で構成される配列を返します。削除された要素がない場合は、空の配列を返します。

メソッド構文:

array_name.splice(index、count、elem1、...、elemN);

最初の引数は、要素の挿入または削除を開始する配列内のインデックスを指定します。 2番目の引数は、最初の引数で指定されたインデックスから始まる配列から削除される要素の数を指定します。2番目の引数が0の場合、要素は削除されません。 2番目の引数を省略すると、配列のすべての要素が、指定されたインデックスから配列の最後まで削除されます。 負の位置番号を使用する場合、要素は配列の最後から数えられます。

Varフルーツ= ["オレンジ"、 "リンゴ"、 "梨"、 "ブドウ"]; 削除された変数= fruits.splice(2,2); // ["pears"、 "grapes"]を返しますdocument.write(deleted); var arr =; arr.splice(4); // 戻り値 ; 配列は次のようになりました:arr.splice(1,2); // 戻り値 ; 配列は次のようになりました:arr.splice(1,1); // 戻り値 ; 配列は次のようになりました:試してください»

splice()メソッドの最初の2つの引数は、削除する配列の要素を指定します。 これらの2つの引数の後には、最初の引数で指定された位置から開始して、配列に挿入する要素を指定する任意の数の追加の引数を続けることができます。

Varフルーツ= ["オレンジ"、 "リンゴ"]; Fruits.splice(2,0、 "スイカ"); // document.write(fruits);を返します // ["オレンジ"、 "リンゴ"、 "スイカ"になりました] var arr =; arr.splice(2,0、 "a"、 "b"); // 戻り値 ; arr.splice(2,2、);になりました // ["a"、 "b"];を返します 、3,4,5になりました]試してみてください»

concat()とは異なり、splice()メソッドは、引数として渡された配列を個別の要素に分割しないことに注意してください。 つまり、配列が挿入するメソッドに渡されると、その配列の要素ではなく、配列自体が挿入されます。

toStringメソッド

toString()メソッドは、区切り文字としてコンマを使用して、配列の要素を文字列に変換します。

Var arr = ["Milk"、 "Bread"、 "Cookies"]; var food = arr.toString(); document.write(food); //ミルク、パン、クッキー試してみてください»

このメソッドは、引数なしで呼び出された場合、join()メソッドと同じ文字列を返すことに注意してください。

indexOfおよびlastIndexOf

indexOfメソッドは、引数としてメソッドに渡された値と等しい値を持つ要素のインデックスを返します。

indexOf()およびlastIndexOf()メソッドの構文:

array_name.indexOf(search_element、index)array_name.lastIndexOf(search_element、index)

メソッドの最初の引数は、インデックスが検索される要素の値を指定し、2番目の引数(オプション)は、検索を開始するインデックスを示します。 同一のオカレンスが複数ある場合は、最小の(最初の)インデックスが選択されます。 目的の値の要素が見つからない場合、メソッドは-1を返します。 メソッド内では、厳密な比較(===)が検索に使用されます。

Var a =; a.indexOf(3); // 2を返しますa.indexOf(3,4); // 6を返しますa.indexOf(35); // -1を返します:この値を持つ要素はありませんa.indexOf(2); // 1

lastIndexOf()メソッドは、引数としてメソッドに渡された値と等しい値を持つ要素のインデックスも返します。 唯一の違いは、lastIndexOf()メソッドが最も高い(最後の)インデックスを選択することです。

Var a =; a.lastIndexOf(3); // 7を返しますa.lastIndexOf(35); // -1を返します:この値を持つ要素はありませんa.lastIndexOf(2); // 6

イテレータメソッド

以下に説明するメソッドはイテレータです。 全部で 最新のブラウザ配列を操作するために、要素を反復処理してさまざまなアクションを実行するように設計されたメソッドがあります。 これらは、forEach()、map()、filter()、every()、some、reduce()、reduceRight()メソッドです。

配列の要素を0から長さ-1まで繰り返し、要素が存在する場合は、それをコールバックハンドラー関数に渡します。

forEach

メソッド構文:

array_name.forEach(callback、thisArg)

最初の引数は、forEach()メソッドが配列の各要素に対して呼び出すコールバック関数です。 呼び出されたハンドラー関数の実装を自分で作成する必要があります。 呼び出される関数には3つのパラメーターが必要です。最初のパラメーターは引数として-配列要素の値、2番目は-要素のインデックス、3番目は-配列自体を取ります。 ただし、配列要素の値のみを使用する場合は、1つのパラメーターのみを使用して関数を記述できます。 2番目の引数thisArg(オプション)は、this値として渡されます。

Var arr =; function foo(value)(var sum = value * this; return document.write(sum + "
");)arr.forEach(foo、5); // 2番目の引数は値として渡されますこの// 3つのパラメーターを持つ例vara =; a.forEach(function(el、idx、a)(document.write( "a [" + idx + "] =" + el + "in [" + a + "]
"); )); 試す "

フィルター

メソッド構文:

array_name.filter(callback、thisObject)

filter()メソッドは、コールバック関数がtrueを返す配列の要素のみを含む新しい配列を作成して返します。

Function isBig(element、index、array)(// 10以上の数値を返しますreturn(element> = 10); //要素の値が10以上の場合、式はtrueを返します) varfiltered = .filter(isBig); //フィルタリング

地図

map()メソッドは、新しい配列を作成して返します。この配列は、各配列要素に対してcallback(item、idx、ar)関数を呼び出した結果で構成されます。

Var a =; var b = a.map(function(item、idx、arr)(return item * item;)); // b =

ありとあらゆる

配列のすべての要素について、それらをチェックするために使用される指定された関数がtrueを返す場合、every()メソッドはtrueを返します。

some()メソッドは、指定された関数でのテスト中に1つ以上の要素がtrueを返す場合にtrueを返します。

Var a =; a.every(function(x)(return x 10;))// true:1つの数値> 10

削減およびreduceRight

メソッド構文:

array_name.reduce(callback、initialValue)array_name.reduceRight(callback、initialValue)

reduce()メソッドは、指定された関数(コールバック)を配列内の2つの値に一度に適用し、中間結果を維持しながら要素を左から右にループします。

コールバック関数の引数:(previousValue、currentItem、index、array)

  • previousValue-コールバック関数の戻り結果(別名中間結果)
  • currentItem-配列の現在の要素(要素は左から右に順番に並べ替えられます)
  • index-現在の要素のインデックス
  • array-処理される配列

initialValue(初期値)-コールバック関数への最初の呼び出しの最初の引数として使用されるオブジェクト。 簡単に言えば、最初の呼び出しでのpreviousValueの値はinitialValueと同じです。 initialValueがない場合、それは配列の最初の要素と等しく、反復は2番目の要素から始まります。

Var a =; function foo(prevNum、curNum)(sum = prevNum + curNum; alert(sum); return sum;)var result = a.reduce(foo、0); document.write(result); 試す "

この例がどのように機能するかを見てみましょう。 foo関数の最初の引数は次のとおりです。

  • prevNum = 0(initialValueが0であるため)
  • curNum = 1(現在の要素は配列の最初の要素です)

数値0に1が加算されます。この結果(合計:1)は、次に関数が実行されるときにprevNumとして渡されます。 最後の要素に到達するまで、以下同様です。 返される結果は、前回の実行の合計である15(1 + 2 + 3 + 4 + 5)です。

reduceRightメソッドはreduceメソッドと同様に機能しますが、配列を右から左に繰り返します。

Var a = ["h"、 "o"、 "m"、 "e"]; function bar(prevStr、curItem)(return prevStr + curItem;)document.write(a.reduceRight(bar)); // emoh

  • 翻訳
  • I.実際の配列を反復処理する
    1. forEachメソッドおよび関連するメソッド
    2. forループ
    3. 正しい使い方 for ...ループ内
    4. for ... of loop(イテレータの暗黙的な使用)
    5. イテレータの明示的な使用
    1. 実配列反復法の使用
    2. 実配列に変換
    3. ランタイムオブジェクトに関する注記

I.実際の配列を反復処理する

現在、実配列の要素を反復処理する方法は3つあります。
  1. メソッドArray.prototype.forEach;
  2. クラシックforループ;
  3. 「整形式」のfor ... inループ。
さらに、まもなく、新しいECMAScript 6(ES 6)標準の出現により、さらに2つの方法が期待されます。
  1. for ... of loop(イテレータの暗黙的な使用);
  2. イテレータの明示的な使用。

1.forEachメソッドと関連するメソッド

プロジェクトがECMAScript5(ES5)標準の機能をサポートするように設計されている場合は、その革新的な機能の1つであるforEachメソッドを使用できます。

使用例:
var a = ["a"、 "b"、 "c"]; a.forEach(function(entry)(console.log(entry);));
一般に、forEachを使用するには、このメソッドをネイティブでサポートしていないブラウザー用のes5-shimエミュレーションライブラリを含める必要があります。 これらにはIE8以降が含まれます 初期のバージョン現在も使用されています。

forEachの利点は、現在の配列要素のインデックスと値を格納するためにローカル変数を宣言する必要がないことです。これらは引数としてコールバック関数に自動的に渡されるためです。

各要素のコールバックを呼び出すために発生する可能性のあるコストについて心配している場合は、心配しないでこれを読んでください。

ForEachは、配列のすべての要素を反復処理するように設計されていますが、それに加えて、ES5は、要素のすべてまたは一部を反復処理し、それらを使用して何かを実行するための、より便利なメソッドをいくつか提供します。

  • 配列の各要素について、コールバックがtrueと評価される値を返す場合、every-はtrueを返します。
  • some-配列の少なくとも1つの要素について、コールバックがtrueと評価される値を返す場合はtrueを返します。
  • filter-コールバックがtrueを返す元の配列の要素を含む新しい配列を作成します。
  • map-コールバックによって返された値で構成される新しい配列を作成します。
  • reduce-最初の配列要素から順番に各配列要素にコールバックを適用することにより、配列を単一の値に縮小します(配列要素と他のサマリー関数の合計を計算するのに役立ちます)。
  • reduceRight-reduceと同様に機能しますが、要素を逆の順序で繰り返します。

2.forループ

岩に古き良き:

Var a = ["a"、 "b"、 "c"]; var index; for(index = 0; index< a.length; ++index) { console.log(a); }
配列の長さがループ全体で変化せず、ループ自体がパフォーマンスが重要なコードに属している場合(可能性は低いです)、配列の長さを格納するforの「より最適な」バージョンを使用できます。

Var a = ["a"、 "b"、 "c"]; var index、len; for(index = 0、len = a.length; index;< len; ++index) { console.log(a); }
理論的には、このコードは前のコードよりも少し速く実行されるはずです。

要素の反復順序が重要でない場合は、最適化の観点からさらに進んで、反復順序を逆にすることで配列の長さを格納するための変数を取り除くことができます。

Var a = ["a"、 "b"、 "c"]; var index; for(index = a.length --1; index> = 0; --index)(console.log(a);)
ただし、最近のJavaScriptエンジンでは、このような最適化されたゲームは通常何の意味もありません。

3. for ... inループの適切な使用

for ... inループを使用するようにアドバイスされている場合は、配列を反復処理することは意図されたものではないことに注意してください。 一般的な誤解とは異なり、for ... inループは配列インデックスを反復処理しませんが、オブジェクトの列挙可能なプロパティを反復処理します。

ただし、以下の例に示すように、予防策を講じている限り、スパース配列の反復処理など、for ... inが役立つ場合があります。

// a-スパース配列vara =; a = "a"; a = "b"; a = "c"; for(var key in a)(if(a.hasOwnProperty(key)&& / ^ 0 $ | ^ \ d * $ /。test(key)&& key<= 4294967294) { console.log(a); } }
この例では、ループの各反復で2つのチェックが実行されます。

  1. 配列にはkeyという名前の独自のプロパティがあります(プロトタイプから継承されていません)。
  2. そのキーは、値が4294967294未満の整数の10進表記を含む文字列です。 最後の番号はどこから来たのですか? ES5の配列インデックスの定義から、配列内の要素が持つことができる最高のインデックスは(2 ^ 32-2)= 4294967294であることを意味します。
もちろん、このようなチェックはループの実行時に余分な時間がかかります。 ただし、スパース配列の場合、このメソッドはforループよりも効率的です。この場合、配列で明示的に定義されている要素のみが繰り返されるためです。 したがって、上記の例では、forループの10001に対して、3回の反復のみが実行されます(インデックス0、10、および10000の場合)。

配列を反復処理する必要があるたびにこのような面倒なチェックコードを記述しないようにするために、別の関数として記述できます。

関数arrayHasOwnIndex(array、key)(return array.hasOwnProperty(key)&& / ^ 0 $ | ^ \ d * $ /。test(key)&& key<= 4294967294; }
次に、例のループの本体が大幅に削減されます。

For(key in a)(if(arrayHasOwnIndex(a、key))(console.log(a);))
上記で検討したチェックのコードは普遍的であり、すべての場合に適しています。 ただし、その代わりに、正式には完全に正しくはありませんが、それでもほとんどの場合に適した、より短いバージョンを使用できます。

For(key in a)(if(a.hasOwnProperty(key)&& String(parseInt(key、10))=== key)(console.log(a);))

4. for ... ofループ(イテレータの暗黙的な使用)

ES6はまだドラフト状態ですが、JavaScriptにイテレーターを導入する必要があります。

イテレータ は、一連の値(有限または無限)を取得するための標準的な方法を定義する、オブジェクトで実装されたプロトコルです。
イテレータは、next()メソッドを定義するオブジェクトです。これは、次の2つのプロパティを持つオブジェクトを返す引数のない関数です。

  1. done(boolean)-イテレータが反復可能なシーケンスの最後に到達した場合はtrue。 それ以外の場合はfalseです。
  2. value-イテレータによって返される値を定義します。 doneプロパティがtrueに設定されている場合、未定義(欠落)になる可能性があります。
多くの組み込みオブジェクト(含む)。 実際の配列には、デフォルトでイテレータがあります。 実際の配列でイテレータを使用する最も簡単な方法は、新しいfor ... of構造を使用することです。

for ... ofの使用例:

Varval; var a = ["a"、 "b"、 "c"]; for(val of a)(console.log(val);)
上記の例では、for ... ofループは、Arrayオブジェクトのイテレータを暗黙的に呼び出して、配列内の各値を取得します。

5.イテレータの明示的な使用

イテレータを明示的に使用することもできますが、この場合、コードはfor ... ofループに比べてはるかに複雑になります。 これは次のようになります。

Var a = ["a"、 "b"、 "c"]; var it = a.entries(); varエントリ; while(!(entry = it.next())。done)(console.log(entry.value);)
この例では、Array.prototype.entriesメソッドは、配列の値を表示するために使用されるイテレーターを返します。 各反復で、entry.valueには[key、value]の形式の配列が含まれます。

II。 配列のようなオブジェクトを反復処理する

実際の配列に加えて、JavaScriptには 配列のようなオブジェクト 。 それらが実際の配列と共通しているのは、長さプロパティと、配列の要素に対応する数値の形式の名前を持つプロパティがあることです。 例としては、NodeListコレクションのDOMや、任意の関数/メソッド内で使用可能な引数の疑似配列があります。

1.メソッドを使用して実際の配列を反復処理する

すべてではないにしても、少なくともほとんどの場合、実際の配列を反復処理するためのメソッドを使用して、配列のようなオブジェクトを反復処理できます。

forおよびfor ... in構文は、実際の配列とまったく同じ方法で配列のようなオブジェクトに適用できます。

ForEachおよびその他のArray.prototypeメソッドは、配列のようなオブジェクトにも適用されます。 これを行うには、Function.callまたはFunction.apply呼び出しを使用する必要があります。

たとえば、forEachをNodeオブジェクトのchildNodesプロパティに適用する場合は、次のようにします。

Array.prototype.forEach.call(node.childNodes、function(child)(//子オブジェクトで何かを行う));
この手法を再利用するのに便利なように、Array.prototype.forEachメソッドへの参照を別の変数で宣言し、それを省略形として使用できます。

//(以下のすべてのコードが同じスコープ内にあると想定)var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes、function(child)(//子オブジェクトで何かを行う));
配列のようなオブジェクトにイテレータがある場合は、実際の配列の場合と同じように、明示的または暗黙的にオブジェクトを反復処理するために使用できます。

2.実配列に変換します

配列のようなオブジェクトを反復処理する別の非常に単純な方法もあります。それを実際の配列に変換し、上記のメソッドのいずれかを使用して実際の配列を反復処理します。 変換には、ジェネリックメソッドArray.prototype.sliceを使用できます。これは、任意の配列のようなオブジェクトに適用できます。 以下の例に示すように、これは非常に簡単に実行されます。

Var trueArray = Array.prototype.slice.call(arrayLikeObject、0);
たとえば、NodeListコレクションを実際の配列に変換する場合は、次のようなコードが必要になります。

Vardivs = Array.prototype.slice.call(document.querySelectorAll( "div")、0);
アップデート:コメントに記載されているように

配列は、最も一般的に使用されるタイプの変数の1つであり、多くの連続した値を「1つの場所」に格納できます。 ただし、JavaScriptに関しては、改善の余地があります。

この記事では、配列を操作するときに適用できる、あまり知られていない3つの手法について説明します。

1.配列にカスタムプロパティを追加する

検索を使用してJavaScript言語内の配列の定義を見つける場合、ほとんどのソースは、このタイプの変数値がオブジェクトとして表されていると主張します。

一般的に言って、JavaScriptで見られるものの多くはオブジェクトです。 言語には「プリミティブ」データ型もあると言っても過言ではありませんが、それらの値はオブジェクト内のプロパティで何らかの形で使用されています。

2.ループ内の配列要素へのアクセス

配列インデックスは正の値しかとることができないため、カウントはゼロから始まります。 その後、このインデックスを使用して、ループの特定の反復で配列要素にアクセスできます。

ECMAScript6では、インデックスを使用せずに、新しいfor ... ofループを介して配列をループする方法が導入されました。

for ... ofループは、要素のインデックスに影響を与えることなく、配列の要素を反復処理するように設計されています。

var ary = ["orange"、 "apple"、 "lychee"]; for(let item of ary)(console.log(item);)// "orange"、 "apple"、 "lychee"比較のために:forループでアイテムインデックスを表示します。 var ary = ["orange"、 "apple"、 "lychee"]; for(var item = 0; item< ary.length; item++){ console.log(item); } // 0, 1, 2

3.要素の数は配列の次元ではありません

配列の次元について話すとき、それは通常、配列に格納されている要素の数を意味すると思います。 実際、これは完全に正しいわけではありません。長さプロパティは、要素の最大インデックスに応じて計算されます。

長さのプロパティは非常にあいまいです。 これを確認するには、次の操作を確認してください。

バリアント=; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6

最後の例では、要素を5番目の位置に配置するだけで十分でした。その結果、配列の長さは6になりました。0から4までのインデックスが自動的に作成されると考えると、間違いになります。 。 これは、in演算子を使用して確認できます。

バリアント=; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 console.log(0 in ary); // false

この場合、ary配列を「スパース」と呼ぶのが妥当です。

長さプロパティを操作して配列をトリミングすることもできます。 次の例は、ary配列のlengthプロパティの値をデクリメントすることにより、インデックス5での要素の「損失」を示しています。

バリアント=; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 ary.length = 2; console.log(ary.length); // 2 console.log(ary); // 未定義

トピックの続き:
インターネット

半導体ダイオードは、新しいキャリア分布がすぐには確立されないため、電流または電圧の十分に急速な変化に対して不活性です。 どのように...