Java 配列。 第6部 10回のブログ投稿で初級者から上級者までのJavaScriptコース

これは、初心者から上級者までを対象とした JavaScript ブログ投稿シリーズのパート 6 です。 このシリーズの終わりまでに、JavaScript でコーディングを開始するために知っておく必要があるすべての基本を理解できます。 早速、6 番目のチュートリアルから始めましょう。

Java 配列 – 目次:

1. 配列 – 基本情報
2. Java 配列への項目の追加
3. 配列からアイテムを削除する
4. 配列の長さを調べる
5. 配列のソート
6. 配列内の要素の反転
7. それぞれについて
8. 配列に含める

このチュートリアルでは、コーディング環境が既にセットアップされていることを前提としています。 以前のチュートリアルに従っている場合は、既に開いているはずです。 何らかの理由でセットアップを終了した場合は、これらのシリーズのパート 4 で完全なセットアップ手順を見つけることができます。 そのチュートリアルでは、コーディングのために Google Chrome スニペット環境をセットアップする方法について説明します。

Google Chrome の使用にある程度慣れている場合は、このチュートリアルをセットアップするための簡単な方法を次に示します。それ以外の場合は、パート 4 を参照して、コーディング環境のセットアップ方法に関する段階的な手順の完全なセットを確認してください。

Mac を使用している場合、コンソールを開くためのキーボード ショートカットは、Chrome を開いた後に「Option + Command + J」を押すことです。 Windows デバイスを使用している場合は、Chrome を開いた後、「Control + Shift + J」のキーボード ショートカットを使用して JavaScript コンソールを開くことができます。 または、上部のメニューに移動して、[表示] -> [開発者] -> [JavaScript コンソール] に移動することもできます。 コンソールを開くと、「コンソール」のすぐ隣にある「ソース」タブをクリックできます。 これで、スニペットが表示されます。 以前に使用し始めたスニペットでコーディングを続けるか、[+ 新しいスニペット] ボタンをクリックして新しいスニペットを作成できます。 練習できるこのチュートリアル用のコーディングがセットアップされている限り、問題はありません。

Java配列 - 基本情報

配列は多くのプログラミング言語で頻繁に使用されており、JavaScript も例外ではありません。 それには正当な理由があります。 しかし、そもそも配列とは何なのか疑問に思われるかもしれません。 配列は基本的に、特定の定義済みメソッドでアクセスおよび操作できる関連データのコレクションです。 より完全に理解するために、配列の例をいくつか見てみましょう。

const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const testAnswers = [true, true, false, false, true];
const pets = ["dogs", "cats", "birds", "fishes"];

Java 配列を使用して、複数の異なる種類のデータを格納できます。 たとえば、上記のコードでは、いくつかの数値、ブール値、および文字列データ型を格納しています。

他の変数を作成するのと同じように、Java 配列を作成できます。const または let キーワードを左側に、配列の内容を式の右側に使用します。 注意すべきことの 1 つは、配列を作成するときに、上記のコードで行ったように、角括弧を使用して項目を囲むことです。 また、データ型に関係なく、各項目をカンマで区切ります。

このチュートリアルでは、このチュートリアルのすべてを順番にコピーして貼り付けたり、Chrome の JavaScript スニペットにすべてを入力したりできるようにコードを記述します。順序に従えば、期待どおりに動作します。 たとえば、これが意味することは、チュートリアルで一度 const キーワードを使用して変数を定義した場合、通常、まったく同じ名前の別の変数を再度定義することはできないということです。 そのため、コードの一部を部分的にコピーして貼り付ける場合は、コードでもそれらの変数を定義することをお勧めします。 提示された順序でチュートリアルに従っている場合、これは問題になりません。

Java 配列について最初に知っておくべきことの 1 つは、配列を作成したら、その要素にアクセスする必要があるということです。 配列には「番号付きインデックス」と呼ばれるものがあります。これが実際に意味することは、JavaScript で作成するすべての要素には、左から右へ、0 から Java 配列の長さまでの番号が関連付けられているということです。マイナス1。

たとえば、上記のペットのコードでは、変数の名前を書き留めて角括弧を開き、アクセスしたいアイテムのインデックスを入れて角括弧を閉じることで、「犬」の最初の要素にアクセスできます。 :

alert(pets[0]);

同様に、より大きな数値を入力すると、表示しているアラート ボックスに他の要素が表示されます。

alert(pets[1]);
alert(pets[2]);
alert(pets[3]);

ペット配列には 4 つの要素があり、インデックスを 0 から開始したため、配列の最後の項目は、配列の全長より 1 少ない pets[3] でアクセスされます。 この時点で、配列を作成し、その配列から項目にアクセスできるようになったので、その配列を変更するにはどうすればよいか疑問に思われるかもしれません。 新しいアイテムの追加、既存のアイテムの変更、またはアイテムの削除はどうですか? それでは、順を追って、新しい項目を配列に追加するところから始めましょう。

Java 配列への項目の追加

配列にさまざまな項目を追加する方法は複数あります。 新しいアイテムを配列の最後に追加したいことがわかっている場合は、「プッシュ」メソッドを使用できます。 これは、新しいアイテムを配列にプッシュすることとも呼ばれます。 プッシュされたアイテムは配列の最後に来ることに注意してください。 例えば：

pets.push("snakes");
// lets verify that we have snakes as the last item
// by displaying the array contents
alert(pets);

アイテムを最初の要素として Java 配列に追加したいことがわかっている場合は、キーワード「unshift」を使用できます。 例でそれを見てみましょう：

//running this code will shift all the values
// to one side and will add the first pet of dragon
pets.unshift(“dragons”); 
//lets verify this by displaying the contents of the array
alert(pets);

配列の末尾または配列の先頭に項目を追加できるのは素晴らしいことですが、何らかの理由で配列の特定の位置に項目を挿入したい場合はどうすればよいでしょうか。 タートルを 3 番目の位置に追加したいとしましょう。 それは可能ですか？ はい、そうです。 配列にアイテムを注入するために、配列のその部分を作成し、配列の特定の部分に値を割り当てるのと同じように定義できます。 また、値を挿入する際にインデックス値を使用することを忘れないでください。 実用的な観点からは、次のようになります。

pets[2] = "turtles";
// lets verify that we have turtles as the third item
// by displaying the contents of the array
alert(pets);

配列からアイテムを削除する

この時点で、配列からアイテムを削除するのはどうだろうかと疑問に思うかもしれません。 それにも複数の方法があります。 おそらく最も有名なのは「ポップ」メソッドを使用することです。 これは、ある意味で、配列から最後のアイテムを取り出します。 // これにより、配列の最後のアイテムが削除されます Pets.pop(); // 配列の内容を表示して結果を確認しましょう alert(pets);

ご覧のとおり、pop メソッドを使用して、ペット配列からヘビの最後のペット アイテムを削除しました。

Java 配列から項目を削除する別の方法は、「shift」キーワードを使用することです。 シフトを使用すると、最初の要素が削除され、残りのインデックス値がそれらに適応します。 例えば：

// this will delete the first item
// and will shift the other items into their new index values
// which will be one lower than the previous index values
pets.shift();
// let's also verify this by displaying the array
alert(pets);

「シフト」という名前は、実際にはコンピューターのメモリ内でメモリ割り当てがどのように機能するかに由来しています。 したがって、最初は比較的直感的でない場合でも、まったく問題ありません。 今のところ、shift メソッドを使用して配列から最初の項目を削除できることを知っておく必要があります。

配列の長さを調べる

実生活で配列を扱っているとき、配列項目の数を数えたいことがたくさんあります。 これは、to do リスト、学校や職場の参加者リストなど、さまざまな場所で必要になる可能性があります。 それを実現するために、「長さ」と呼ばれる組み込みの配列プロパティがあり、配列の全長を教えてくれます。 例えば：

alert(pets.length);

配列のソート

配列のソートは、JavaScript では非常に一般的な操作です。 JavaScript でアイテムを並べ替えるには、さまざまな固有の実装があります。 これらの特定の実装は、一般にソート アルゴリズムと呼ばれます。 並べ替えアルゴリズムが異なれば、長所と短所も異なります。 たとえば、ソート アルゴリズムが別のアルゴリズムよりも選択される場合があります。これは、別のアルゴリズムと比較して、コードでの実装がはるかに簡単であるためです。ただし、パフォーマンスがわずかに優れている場合があります。 パフォーマンスを最適化するためのさまざまな並べ替えアルゴリズムについて聞いたことがあるかもしれません。このチュートリアルでは、JavaScript によって提供される組み込みの並べ替え方法を利用します。 並べ替えは、特に Web 開発ではよくある問題です。 たとえば、e コマース Web サイトを構築している場合、ユーザーが選択できるさまざまな並べ替え状況を実装する必要があります。 視聴者に提供すべきオプションや機能に関する厳密な規則はありませんが、Web サイト ビルダーとして期待されるかなり一般的な基準があります。 たとえば、ユーザーとして、いくつかの店舗アイテムを価格の上昇と下降の両方でリストしたい可能性が高いとします。 これらのタスクの並べ替えを実装するときは、ユーザーが検索結果を T シャツ、帽子、バッグなどの他の特定のカテゴリにも限定できることを考えると、実装方法に留意する必要があります。 末尾に「.sort()」を追加することで、配列をソートできます。

pets.sort();
alert(pets);

配列内の要素の反転

並べ替えと組み合わせるには、配列を逆にする方がおそらく一般的です。 この場合、これらのコードも上から下に実行しているため、配列を並べ替えた後に反転も適用しています。 その末尾に「.reverse()」を追加することで、反転して配列できます。 ペット.リバース(); アラート（ペット）;

前の手順で配列を並べ替えたので、並べ替えと反転の両方が行われた配列ができたことがわかります。

それぞれについて

配列を扱う場合、JavaScript は「.forEach()」を使用して配列項目をループする便利な方法を提供します。 本当にやりたい場合は、通常の for ループを使用して配列をループすることもできます。 実際、配列をループする for ループを構築する方法を最初に見てから、forEach() の使用法を見てみましょう。

// this will alert us 4 times to feed our pet
for (let a = 0; a < pets.length; a++) {
    alert("Time to feed my pet");
}

forEach を使用して同じ結果を達成することもできます。

pets.forEach(alert("Time to feed my pet"));

for ループまたは For each の使用を比較すると、好みや特定の状況に応じて、どちらか一方を使用することを好む場合があります。 本質的に、どちらもコード内の異なるスタイルで同じ出力を実現します。 ForEach は比較的簡単で、読み書きするコード行を節約できますが、最終的にはそれを選択することになります。 あなたは今そのような選択をする必要はなく、それに固執する必要もありません. コードを書いているときは、プログラミングの旅を進めながら、さまざまなアプローチを使用して同じ問題を解決することを試すことができます。

配列に含める

項目が Java 配列内に存在するかどうかを確認することもできます。 このメソッドの実際の使用例の 1 つは、非公開イベントに招待リストに人物の名前が含まれているかどうかです。 実際の実装も非常に簡単です。 最初に配列の名前を書きます。この場合は、pets 配列を操作しています。 次に、さまざまな配列のプロパティとメソッドにアクセスするためにドットを配置し、「includes」と書き、開き括弧と閉じ括弧を書き、チェックしたい項目の名前を入力します。 これは、配列に存在することがわかっているアイテムをチェックする例です。

alert(pets.includes("dogs"));

Java 配列に存在しないことがわかっているアイテムで同じことを試みた場合、答えとして false を受け取ることが期待されます。 その場合の例も見てみましょう。

alert(pets.includes("puppy"));

ペットの配列には子犬がなかったので、予想どおり false になります。 次のチュートリアルでは、プログラミングの世界と JavaScript の両方における別の主要な概念について説明します。

10 のブログ投稿で初心者から上級者までの JavaScript コース:

1. JavaScript でコーディングを開始するには?
2. JavaScript の基本
3. JavaScript の変数とさまざまなデータ型
4. スニペットと制御構造
5. while ループと for ループ
6. Java 配列
7. JavaScript 関数
8. JavaScript オブジェクト
9. JavaScript メソッドなど
10. JavaScriptコースのまとめ