AIブログ JavaScript

【JavaScript】JavaScriptの配列の使い方を学ぼう!! 値の追加、修正、削除、mapメソッド、filterメソッドなどの使い方を解説します!

この記事はChatGPTで画像の挿入、ソースコードの形式も含めて

90%~100%作成されています。作り方は画像をクリック!

<h2>JavaScriptの配列を学びましょう</h2> <p>JavaScriptの配列は、多数の値を格納して管理するためのデータ構造です。<br> これから配列の基本的な使い方や、配列と一緒に使われることが多いループ処理、そして配列を扱うための便利なメソッドについて見ていきましょう。</p>

サルモリ
それでは一緒に学んでいきましょう!

<h3>配列の作成と要素の取得</h3> <p>JavaScriptの配列を作成するには、[](角括弧)を使います。<br> 配列の要素にアクセスするには、配列名に続けて[]内にインデックス番号(0から始まる)を指定します。</p>

ソースコード例

<pre class="lang:javascript decode:true "> let fruits = ['apple', 'banana', 'cherry']; console.log(fruits[0]); // 'apple' console.log(fruits[1]); // 'banana' console.log(fruits[2]); // 'cherry' </pre>

サルモリ
わかりやすい!配列の要素には0から順にアクセスできるんだね。

<h3>配列の長さを取得する</h3> <p>配列の長さ(要素の数)を取得するには、配列名.lengthを使います。<br> これは、ループ処理と組み合わせてよく使います。</p>

ソースコード例

<pre class="lang:javascript decode:true "> let fruits = ['apple', 'banana', 'cherry']; console.log(fruits.length); // 3 </pre>

サルモリ
なるほど、配列の要素数を知りたいときはこれを使うんだね。

[/st-midasibox]

サルモリ
新しいフルーツを追加したくなったら、pushメソッドで簡単に追加できるんだね!

<h3>配列の要素を修正する</h3> <p>配列の要素を修正するには、直接インデックスを使ってアクセスして、新しい値を代入します。</p>

ソースコード例

<pre class="lang:javascript decode:true "> let fruits = ['apple', 'banana', 'cherry']; fruits[1] = 'kiwi'; console.log(fruits); // ['apple', 'kiwi', 'cherry'] </pre>

サルモリ
バナナをキウイに変更できたね!これで配列の要素を自由に修正できるね。

<h3>配列の要素を削除する</h3> <p>配列の要素を削除するには、spliceメソッドを使います。<br> spliceメソッドは、指定したインデックスから指定した数の要素を削除します。</p>

ソースコード例

<pre class="lang:javascript decode:true "> let fruits = ['apple', 'banana', 'cherry']; fruits.splice(1, 1); console.log(fruits); // ['apple', 'cherry'] </pre>

サルモリ
指定した位置のフルーツを削除できたね。これで配列の要素を自由に削除できるね。

<h3>配列の要素をループで処理する</h3> <p>配列の全ての要素に対して同じ処理をするためには、forループを使います。<br> ル

ープ内で、配列の要素にアクセスして、処理を行います。</p>

ソースコード例

<pre class="lang:javascript decode:true "> let fruits = ['apple', 'banana', 'cherry']; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } // apple // banana // cherry </pre>

サルモリ
全部のフルーツを順番に表示できたね!

<h3>mapメソッドを使って配列の要素を変換する</h3> <p>配列の全ての要素に対して、同じ変換を適用したい場合、mapメソッドを使います。<br> mapメソッドは、指定した変換処理を全ての要素に適用した新しい配列を返します。</p>

ソースコード例

<pre class="lang:javascript decode:true "> let numbers = [1, 2, 3, 4, 5]; let doubledNumbers = numbers.map(function (number) { return number * 2; }); console.log(doubledNumbers); // [2, 4, 6, 8, 10] </pre>

サルモリ
全ての数値を2倍にした新しい配列ができたね!

<h3>filterメソッドを使って配列の要素をフィルタリングする</h3> <p>配列の要素のうち、特定の条件を満たす要素だけを抽出したい場合、filterメソッドを使います。<br> filterメソッドは、指定した条件を満たす要素のみを含む新しい配列を返します。</p>

ソースコード例

<pre class="lang:javascript decode:true "> let numbers = [1, 2, 3, 4, 5]; let evenNumbers = numbers.filter(function (number) { return number % 2 === 0; }); console.log(evenNumbers); // [2, 4] </pre>

サルモリ
偶数だけを抽出して新しい配列を作れたね!

<h2>まとめ</h2> <p>今回はJavaScriptの配列について、要素の追加、修正、削除、ループ処理との組み合わせやmapやfilterなどを使う方法について学びました。<br> 配列は複数のデータを一つの変数で扱うことができる便利な機能です。JavaScriptでプログラミングを行う際には、頻繁に配列を使用するので、ぜひ理解して活用してください。</p>

<p>また、各ソースコードの動作を確認するためには、ブラウザの開発者ツールのコンソールを利用すると良いでしょう。具体的な動作を確認しながら学ぶことで、理解が深まるはずです。</p> <p>最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです!<br />

サルモリ
最後まで読んでくれてありがとう!!
</p>

この記事はChatGPTで画像の挿入、ソースコードの形式も含めて

90%~100%作成されています。作り方は画像をクリック!

JavaScriptをさらに学びたい方へ

JavaScriptの参考書を新しく執筆致しました!

JavaScriptの配列、連想配列、アロー関数などを学びたい方にオススメの本となっています。演習問題をたくさん用意しているので、実践形式で理解しやすい内容となっています。

下記の画像をクリック!!kindleunlimitedの会員であれば無料で見れます!

JavaScriptをさらに学びたい方へ

JavaScriptの参考書を新しく執筆致しました!

JavaScriptの配列、連想配列、アロー関数などを学びたい方にオススメの本となっています。演習問題をたくさん用意しているので、実践形式で理解しやすい内容となっています。

下記の画像をクリック!!kindleunlimitedの会員であれば無料で見れます!

-AIブログ, JavaScript

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock