JavaScriptの配列の操作方法(検索、追加、結合、取得、削除)

JavaScript

JavaScriptの配列とは?

JavaScriptの配列は、複数の値を1つの変数にまとめて保持するためのデータ構造です。

配列内の要素は、0から始まるインデックス番号によってアクセスされます。

これにより、特定の位置にある要素を迅速に取得できます。

JavaScriptの配列では、異なるデータ型を混在させて格納することができます。

配列の要素数は可変で、動的に変更することができます。

要素の追加や削除が容易です。

基本的な配列操作

配列の作成と初期化

JavaScriptの配列は、次のようにして作成されます。

// リテラルで記述
const arr = ['aaa','bbb','ccc'];

// Array() コンストラクターで記述
const arr = new array('aaa','bbb','ccc');

// split() を使用
const arr = 'aaa,bbb,ccc'.split(',');

配列の長さ

配列の長さは、`length` プロパティを介して取得できます。

const arr = ['aaa','bbb','ccc',’ddd’];

console.log(arr.length);  // 配列の長さ: 4

インデックスが範囲外の要素にアクセスしようとすると、`undefined` が返されます。

console.log(arr[5]);  // undefined を表示

要素の追加と削除

配列内の要素を追加したり削除したりします。

Array.push(要素) 要素の追加

配列に要素を追加するには、`push()` メソッドを使用します。これは、配列の末尾に新しい要素を追加します。

以下では、配列arrの末尾に新しい要素’ddd’を追加します

const arr = ['aaa','bbb','ccc'];

arr.push('ddd');  

console.log(arr); //  ['aaa', 'bbb', 'ccc', 'ddd']

Array.splice(配列の位置、削除する要素の数、挿入する要素・・・・)

配列の任意の位置に要素を追加する場合は、`splice()` メソッドを使用します。

const arr = ['aaa','bbb','ccc',’ddd’];

arr.splice(2, 0, 'xxx');  // インデックス2に 'xxx' を挿入
console.log(arr);  //  ['aaa', 'bbb', 'xxx', 'ccc', 'ddd']

上の例では第2引数に0を指定しているのでインデックス2の位置に挿入され
第2引数に1を指定した場合はcccが削除され挿入されます
第2引数に2を指定した場合はccc,dddの2項目が削除されxxxが挿入されます

要素の削除

要素を削除するには、pop() メソッドを使用します。
これは、配列の末尾の要素を削除します。

const arr = ['aaa','bbb','ccc',’ddd’];

arr.pop();  // 末尾の 'ddd' を削除
console.log(arr);  //  ['aaa', 'bbb',  'ccc']

特定の位置にある要素を削除する場合は `splice()` メソッドを利用します。

const arr = ['aaa','bbb','ccc',’ddd’];

arr.splice(2, 1);  // インデックス2の要素 'ccc' を削除
console.log(arr);  //  ['aaa', 'bbb', 'ddd']

このようにして、push()pop() メソッドを使った末尾操作、そして splice() メソッドを用いた中間の要素の挿入や削除など、配列の要素操作が可能です。

要素へのアクセス

配列内の要素にアクセスするには、インデックスを使用します。
JavaScriptのインデックスは0から始まります。

const arr = ['aaa','bbb','ccc',’ddd’];

console.log(arr[0]);  // aaa
console.log(arr[1]);  // bbb

要素の更新

特定の位置の要素を更新するには、インデックスを指定して新しい値を代入します。

const arr = ['aaa','bbb','ccc',’ddd’];

arr[2] = 'yyy';  // インデックス2の要素を 'yyy' で更新
console.log(arr); // (3) ['aaa', 'bbb', 'yyy',’ddd’]

配列の反復処理

`for`ループ、`forEach`メソッド、`map`メソッドを使った反復処理について。

`for`ループによる反復

forループを使用して配列の要素を反復処理する方法です。
インデックスを操作して各要素にアクセスします。

const arr = ['aaa','bbb','ccc',’ddd’];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

`forEach`メソッドの活用

forEachメソッドは、配列の各要素に対して関数を適用するための手法です。
コードがシンプルで読みやすくなります。

const arr = ['aaa','bbb','ccc',’ddd’];

arr.forEach(function(arrs) {
  console.log(arrs);
});

aaa
bbb
ccc
ddd
を表示

 `map`メソッドによる新しい配列の生成

`map`メソッドは、元の配列の各要素を変換し、新しい配列を生成する際に便利です。

const arr = ['aaa','bbb','ccc',’ddd’];

const arrnew = arr.map(function(arra) {
  return arra + '01';
});
console.log(arrnew); // (4) ['aaa01', 'bbb01', 'ccc01',’ddd01’]

mapメソッドとforEachメソッドの違い
mapメソッドとforEachメソッドは、どちらも配列内の要素に関数を適用しますが、mapメソッドは新しい配列を生成して返します。一方、forEachメソッドは新しい配列を生成しません。

条件に基づいた操作

`filter`メソッド、`find`メソッド、`some`メソッド、`every`メソッドを使った条件に基づいた操作について。

`filter`メソッドによる要素の絞り込み

`filter`メソッドは、特定の条件を満たす要素を抽出して新しい配列を生成します。

const arr = ['aaa','bbb','ccc',’ddd’];

const filtered = arr.filter(function(alphabet) {
  return alphabet > 'aaa';
});

console.log(filtered);  // ['bbb', 'ccc',’ddd’]

`find`メソッドで特定の要素を検索

`find`メソッドは、配列内の要素のうち最初に条件に合致する要素を返します。

const arr = ['aaa','bbb','ccc',’ddd’];

const result = arr.find(function(alphabet) {
  return alphabet === 'bbb';
});

console.log(result);  // 'bbb'

filterメソッドとfindメソッドの違い
filterメソッドは条件に合致する複数の要素を抽出して新しい配列を生成しますが、findメソッドは条件に合致する最初の要素を1つだけ返します。

`some`と`every`メソッドの活用

someメソッドは、少なくとも1つの要素が条件を満たす場合にtrueを返します。
一方、everyメソッドは、すべての要素が条件を満たす場合にのみtrueを返します。

const arr = ['aaa','bbb','ccc','ddd'];
const large = arr.some(function(maxl) {
  return maxl >= 'ccc';
});

console.log(large);  // true
const arr = ['aaa','bbb','ccc','ddd'];
const large = arr.every(function(maxl) {
  return maxl >= 'ccc';
});

console.log(large);  // false

配列の項目の要素を検索’indexOf’

indexOfで項目の位置する要素を得ることが出来ます

const alphabet = ['aaa', 'bbb', 'ccc', 'ddd'];
console.log(alphabet.indexOf('ccc')); // 2

配列の変形と結合

map`と`filter`の活用による配列の変形

`map`と`filter`メソッドの組み合わせ、`reduce`メソッド、`concat`メソッド、スプレッド演算子を使った配列の変形と結合について

const numbers = [1, 2, 3, 4, 5];

const result = numbers
  .filter(number => number % 2 === 0) // 偶数のみ抽出
  .map(number => number * 2); // 各要素を2倍に変換

console.log(result);  // [4, 8]

`reduce`メソッドによる要素の集計

`reduce`メソッドは、配列内の要素を集計するための方法です。

const numb = [1,2,3,4,5];

const totalS = numb.reduce(function(total, numb) {
  return total + numb;
}, 0);

console.log(totalS);  // 15

`concat`メソッドとスプレッド演算子による配列の結合

const first = ['aaa', 'bbb'];
const second = ['ccc', 'ddd'];

const combined = first.concat(second);
console.log(combined);  // ['aaa', 'bbb', 'ccc', 'ddd']

スプレッド演算子を使用しても同様の結果を得ることができます。

const combined = [...first, ...second];
console.log(combined);  // ['aaa', 'bbb', 'ccc', 'ddd']

多次元配列とネスト

多次元配列とは、配列の中に別の配列が含まれている配列のことを指します。

2次元配列の操作方法

2次元配列は、行列やテーブルのようなデータを表現するために使用されます。
要素にアクセスするには、行と列のインデックスを使用します。

const dimension = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(dimension[1][2]);  // 6

ネストされた配列のフラット化と再構築

ネストされた配列をフラットにするには、`flat()`メソッドを使用します。

const mlayers = [1, [2, 3], [4, [5, 6]]];

const flatArr = mlayers.flat(2);
console.log( flatArr);  // [1, 2, 3, 4, 5, 6]

配列のソート

配列内の要素をソートする方法や、要素の順序を逆にする方法
sortメソッド、reverseメソッド、およびカスタムソート関数の実装

`sort`メソッドによる配列のソート

`sort`メソッドは、配列内の要素をソートするための基本的な手法です。

const alphabet  = ['bbb', 'aaa', 'ddd', 'ccc'];

alphabet .sort();  // アルファベット順にソート
console.log(alphabet);  // ['aaa', 'bbb', 'ccc', 'ddd']

数値の配列をソートする際は、ソート関数を指定することもできます。

const numbers = [10, 2, 8, 4, 6];

numbers.sort(function(a, b) {
  return a - b;
});

console.log(numbers);  // [2, 4, 6, 8, 10]

`reverse`メソッドでの逆順配列の生成

`reverse`メソッドは、配列の要素の順序を逆にするための方法です。

const alphabet  = ['bbb', 'aaa', 'ddd', 'ccc'];

const reversalp = alphabet.reverse();
console.log(reversalp); ['ccc', 'ddd', 'aaa', 'bbb']

他にも配列を利用して出来ることは沢山用意されています

またの機会に他の利用法も紹介できればと思います

今回は以上です

コメント