はじめに
JavaScriptは、ウェブ開発において不可欠な言語です。
特に配列の操作は、日々の開発作業で頻繁に遭遇するため、その方法を習得することは極めて重要です。
この記事では、JavaScriptの配列に対する基本的な操作から、より高度なメソッドまでを網羅的に解説します。
-
-
初期化、検証方法などはコチラ【JavaScript】配列の基本を徹底解説！初期化、作成、追加、更新、削除、存在チェック
はじめに JavaScriptにおける配列は、複数の値を一つの変数に格納するための重要なデータ構造です。 この記事では、配列の初期化、作成、および検証方法について、初心者から上級者までが理解できるよう ...
続きを見る
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
配列への値の追加
配列への値の追加は、主にpushメソッドを使用して行います。
このメソッドは配列の末尾に一つ以上の要素を追加し、新しい配列の長さを返します。
ソースコード例
|
1 2 3 |
let fruits = ['apple', 'banana']; fruits.push('orange'); console.log(fruits); |
出力結果
['apple', 'banana', 'orange']
pushメソッドを使えば、簡単に配列の末尾に要素を追加できるんだね！-
-
他の追加方法はコチラ【JavaScript】配列に要素を追加する方法5選！push、unshift、splice、スプレッド演算子を使ってみよう
はじめに JavaScriptでの配列操作は、とてもよく行います！ 特に、配列に新しい要素を追加する方法は、データ構造を動的に管理する上で非常に重要です。 この記事では、push、unshift、co ...
続きを見る
配列の先頭への値の追加
配列の先頭に値を追加したい場合は、unshiftメソッドを使用します。
このメソッドは、配列の先頭に一つ以上の要素を追加し、新しい配列の長さを返します。
ソースコード例
|
1 2 3 |
let numbers = [2, 3, 4]; numbers.unshift(1); console.log(numbers); |
出力結果
[1, 2, 3, 4]
unshiftメソッドを使うと、先頭にも簡単に要素を追加できるんだ。
-
-
詳しくはコチラ【JavaScript】配列に要素を追加する方法5選！push、unshift、splice、スプレッド演算子を使ってみよう
はじめに JavaScriptでの配列操作は、とてもよく行います！ 特に、配列に新しい要素を追加する方法は、データ構造を動的に管理する上で非常に重要です。 この記事では、push、unshift、co ...
続きを見る
配列の値の修正
配列の特定の位置にある値を修正するには、インデックスを使って直接アクセスします。
配列のインデックスは0から始まるため、最初の要素を修正するにはインデックス0を指定します。
ソースコード例
|
1 2 3 |
let items = ['pen', 'pencil', 'eraser']; items[1] = 'marker'; // pencilをmarkerに修正 console.log(items); |
出力結果
['pen', 'marker', 'eraser']
配列から値の削除
配列から値を削除する方法はいくつかありますが、popメソッドとshiftメソッドが最も一般的です。
popメソッドは配列の最後の要素を削除し、その要素を返します。
一方、shiftメソッドは配列の最初の要素を削除し、その要素を返します。
ソースコード例
|
1 2 3 4 |
let colors = ['red', 'green', 'blue']; let lastColor = colors.pop(); console.log(colors); console.log('Removed color:', lastColor); |
出力結果
['red', 'green']
Removed color: blue
popとshift、どちらも使いどころがあって便利だね！この記事では、JavaScriptの配列操作の基本から応用まで幅広くカバーしています。次のセクションでは、mapメソッド、filterメソッド、配列のループ処理について詳しく解説していきます。
-
-
詳しくはコチラ【JavaScript】配列の要素の削除方法6選！クリア方法を徹底解説！
はじめに JavaScriptでの配列操作は開発において避けて通れない要素の一つです。 特に配列からの要素の削除を行うことは頻繁にあります。 この記事では、いろいろな配列の要素の削除方法を解説します。 ...
続きを見る
ループ処理で配列を操作する
配列の各要素に対して操作を行う基本的な方法の一つがループ処理です。
JavaScriptでは、forループやforEachメソッドを利用して配列の各要素を操作できます。
forループを使用した例
最も基本的なforループを使用して、配列の各要素を出力する例を見てみましょう。
ソースコード例
|
1 2 3 |
for(let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } |
出力結果
apple
banana
orange
forループは、配列の操作で最も基本的で強力なツールの一つだね。
forEachメソッドを使用した例
forEachメソッドは、配列の各要素に対して関数を一度ずつ実行します。
これはforループよりも簡潔に配列を処理できる方法です。
ソースコード例
|
1 2 3 |
fruits.forEach(function(item, index) { console.log(index, item); }); |
出力結果
0 apple
1 banana
2 orange
forEachメソッドを使うと、コードがより簡潔に、読みやすくなるよね。
mapメソッドで配列を変換する
mapメソッドは、配列の各要素に関数を適用し、その結果からなる新しい配列を作成します。
これはデータの一括加工や変換に非常に便利です。
ソースコード例
|
1 2 3 4 5 |
let numbers = [1, 2, 3, 4]; let squaredNumbers = numbers.map(function(num) { return num * num; }); console.log(squaredNumbers); |
出力結果
[1, 4, 9, 16]
mapメソッドは、配列の各要素に処理を施して新しい配列を作るのにめちゃくちゃ便利だね。
filterメソッドで配列から特定の要素を抽出する
filterメソッドは、テスト関数を満たすすべての要素からなる新しい配列を作成します。
これは特定の条件に一致する要素のみを選択したい場合に使用します。
ソースコード例
|
1 2 3 4 |
let filteredNumbers = numbers.filter(function(num) { return num % 2 === 0; }); console.log(filteredNumbers); |
出力結果
[2, 4]
filterメソッドは、条件に合う要素だけを簡単に抽出できて、とても役立つね。
まとめ
JavaScriptの配列操作は、ウェブ開発における基本的かつ重要なスキルです。
この記事では、配列に値を追加、修正、削除する方法から、map、filterメソッド、そしてループ処理による配列操作の基本まで、幅広く解説しました。
これらの操作をマスターすることで、データの操作がより柔軟に、効率的に行えるようになります。
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！
