JavaScriptで配列の基本操作まとめ

2021年1月2日2021年5月3日JavaScript

JavaScriptの配列が理解できるようになると、できることが格段に増えていきます。
また、実用的なシステムを構築するために不可欠な知識になるので、しっかりと学んでいきましょう。

配列について

たとえば、がずお君の算数と、英語と日本語のテスト点数を次のように3つで書くことができます。

'use strict';

  {
    const scoreMath = 80;
    const scoreEnglish =  40;
    const scoreJapanese = 45;
  }

でも同じテストの点数という内容なので、できればグループ化したいですね。

このような場合JavaScriptの配列を使うことで、グループ化することができます。

'use strict';
{
  const scores = [80, 40, 45];
  console.log(scores);//[80, 40, 45]
}

上の例の場合、コンソールに表示してみると、0,1,2という順番を表している数字と合わせて表示されます。
その数字のことをインデックス番号（添え字）といいます。
インデックス番号は1からではなく0から始まるので注意しましょう。

配列の名前は、英語の複数形で書くようにしましょう。
複数形の名前にしていると、あとで個々で要素を取り出したりするときに単数形を使ってわかりやすく管理することができます。

配列の要素にアクセスする方法

配列の要素には、定数名[インデックス番号]と指定することでアクセスできます。

'use strict';
  {
    const scores = [80, 40, 45];
    console.log(scores[0]);//80
  }

定数は再代入できないませんが、配列の要素には再代入できます。
下のようなことは可能になるので、間違わないように記憶を整理しておこう。

'use strict';
      {
        const scores = [80, 40, 45];
        scores[0] = 35;
        console.log(scores);//[35, 40, 45]
      }

lengthプロパティ

lengthを使うと、配列個数を確認することができます。

'use strict';
  {
    const scores = [80, 40, 45];
    console.log(scores.length); //3
  }

配列とループ処理

配列の値を下のように表示したいとします。

'use strict';
  {
    const scores = [80, 40, 45];
    console.log(`テスト結果: ${scores[0]}`);
    console.log(`テスト結果: ${scores[1]}`);
    console.log(`テスト結果: ${scores[2]}`);
}

ただ、これが何十個もあるととても大変です。
繰り返ししている動作があれば、for文で繰り返し処理をして楽をしましょう。

'use strict';
  {
    const scores = [80, 40, 45];
    //console.log(`テスト結果: ${scores[0]}`);
    //console.log(`テスト結果: ${scores[1]}`);
    //console.log(`テスト結果: ${scores[2]}`);
    
    for (let i = 0; i < scores.length; i++) {
      console.log(`テスト結果${i}: ${scores[i]}`);
    }
}

配列数が変わったときにいちいち直さないといけないので、lengthを使って配列個数分繰り返し処理するようにしましょう。

このように配列でも繰り返し文を使うことができます。
配列でグループにまとめて、それぞれの値を別々に取り出して情報を加工することはよくあります。
繰り返されているという法則性を見つけた場合、繰り返し文を活用しましょう。

配列の要素を変更する

unshift(), push(), shift(), pop()メソッドで削除・追加：オリジナルの配列を変更する

上の配列は図解化すると、次のようになっています。

• unshift()→先頭に要素を挿入
• push()→末尾に要素を挿入
• shift()→先頭の要素を削除
• pop()→末尾の要素を削除

追加するunshiftとpushは複数の値を挿入できます。
削除するshiftとpopは一つずつなので、()は空です。

• unshift(42,21)
• push(23,23)
• shift()
• pop()

'use strict';
  {
    const scores = [20, 30, 40 ,50];
    scores.unshift(0, 10); //先頭に0,10を追加
    scores.shift(); // 最後の50を削除
    scores.push(60, 70);// 最後に60,70を追加

    for (let i = 0; i < scores.length; i++) {
      console.log(`テスト${i}の点数は${scores[i]}です。`);
    }
  }

slice()メソッドでの配列を切り取り：オリジナルの配列に影響なし

{
let arr = ['あ','い','う','え','お'];

//slice() オリジナルの配列を変更しない
console.log(arr.slice(2));// (3) ["う", "え", "お"]
console.log(arr.slice(2,4));// (2) ["う", "え"]
console.log(arr.slice(-2));//["え", "お"]
console.log(arr.slice(-1));//["お"]
console.log(arr.slice(1, -1));// (3) ["い", "う", "え"]
console.log(arr.slice());//Shallow copyが作れる['あ','い','う','え','お']
console.log([...arr]);//Shallow copyはスプレッド構文と全く同じ結果
}

slice()メソッドはshallow copyをつくるだけ、オリジナルの配列にはなんの影響も与えません。

splice()メソッドで途中の文字を削除・追加：オリジナルの配列を変更する

次は、配列の途中に要素を追加したり、削除できる方法をみていきましょう。
splice()を使うことで、配列の途中の要素も追加、削除できるようになります。

まずはシンプルな例からみていきましょう。

文字の削除

//splice() オリジナルの配列を変更する
let arr = ['あ','い','う','え','お'];
console.log(arr.splice(2));// (3) ["う", "え", "お"]
console.log(arr);//(2) ["あ", "い"]オリジナルの配列がこのように変化する

//splice()  最後の文字を削除
arr = ['あ','い','う','え','お'];
arr.splice(-1);
console.log(arr);//['あ','い','う','え'];
}

それに対し、splice()メソッドはオリジナルの配列から指定したものを取り除きます。そのため、オリジナルの配列は変化します。

途中の文字を削除

{
//splice()  途中の文字を削除
let arr = ['あ','い','う','え','お'];

arr.splice(1, 2);
console.log(arr);//(3) ["あ", "え", "お"]
}

途中の要素を削除したい場合は次のように書きします。

• splice(変化が開始する位置, 削除する数)
• splice(変化が開始する位置, 削除する数, 追加する要素, …)

それぞれ、次のように指定するルールがあります。

• 変化が開始する位置には、インデックス番号を書く
• 削除する数には、開始位置から削除したい個数を指定する
• 要素を追加する場合、削除する数の後に追加したい値を書く
• 削除したい値がなく、要素を追加したい場合、削除する数は0と書く

このように削除する場合は、個数を指定して、追加する場合は、追加したい値を書きます。

splice()メソッドで削除と追加の両方を行う

  'use strict';
  {
    const numbers = [20, 30, 40, 50];
//numbersのインデックス番号2から２つ(40,50)を削除して、60,70を追加する
    numbers.splice(2, 2, 60, 70); 
    console.log(numbers);
  //(4) [20, 30, 60, 70]
  }

40，50を削除したい場合、40のインデックス番号である2が第一引数になります。
そこから削除する個数、を指定します。今回は40,50の2つなので、第二引数は2になります。
そして、追加したい要素を記述します。今回は60と70の2つなので、第三引数に60、第四引数に70をいれています。
結果、(40,50)を削除して、60,70を追加した[20, 30, 60, 70]という配列ができあがります。

reverse()メソッドで反転：オリジナルの配列を変更する

{
  //reverse() 配列順序を反転させる。オリジナルも変更される。
  let arr = ['あ','い','う','え','お'];
  let arr2 = ['か','き','く','け','こ'];
console.log(arr2.reverse());// (5) ["こ", "け", "く", "き", "か"]
console.log(arr2);// (5) ["こ", "け", "く", "き", "か"]
}

reverse()メソッドは、配列順序を反転させるときに使います。そして注意点としては、オリジナルの配列まで反転します。

concat() メソッドで配列をくっつける：オリジナルの配列に影響なし

{
  //concat() 配列をくっつける オリジナルの配列に影響なし
  let arr = ['あ', 'い', 'う', 'え', 'お'];
  let arr2 = ['か', 'き', 'く', 'け', 'こ'];

  // concat()
  const letters = arr.concat(arr2);
  console.log(letters);
  //(10) ["あ", "い", "う", "え", "お", "か", "き", "く", "け", "こ"]

  // スプレッド構文
  const letters2 = [0, ...arr, 1, ...arr2];
  console.log(letters2);
  //(10) [0,"あ", "い", "う", "え", "お",1, "か", "き", "く", "け", "こ"]
}

concat()メソッドは、配列をくっつけることができます。
また、[]でくくってスプレッド構文でもconcat()メソッドと同様のことが可能です。
両方ともオリジナルの配列に影響はありません。

スプレッド構文は、concat()と全く同じことが可能です。
また、前方や後方に要素を追加することもできるので、スプレッド構文のほうが自由度が高いです。
配列でのスプレッド構文の使い方は以下の記事を参照ください。

join() メソッドで指定した文字でつなげる：オリジナルの配列に影響なし

{
//join() 指定した文字でつなげる オリジナルの配列に影響なし
let arr = ['あ','い','う','え','お'];
let arr2 = ['か','き','く','け','こ'];
  const letters = [...arr, ...arr2];
  console.log(letters.join(' - '));
  // あ - い - う - え - お - か - き - く - け - こ
}

join()メソッドは指定した文字でつなげることができます。また、オリジナルの配列に影響はありません。