JavaScriptでの配列に関する記事も今回で7回目となりました。今回は値を切り取ったり、合体させたり、差し替えたりする方法になります。値を動的に変更する時などに使えるメソッドになりますので、是非覚えておきたいところですね。  

Array.slice()

値の一部を切り取って別の配列を作成する時には「Array.slice()」が使えます。対象となる配列に対して実行し、引数には切り取る範囲の開始点のインデックスと、終了点直後のインデックスをそれぞれ指定します。 【javascript】

const arrayData = [ '1st', '2nd', '3rd', '4th', '5th' ];
const result = arrayData.slice(0, 3);
console.log(arrayData);
console.log(result);

  このような形で配列の一部が切り出されます。この際に元の配列は破壊されず、そのまま値が保持されます。開始点はわかりやすいのですが、終了点を指定する際には、直前のインデックスまで切り取られる対象になるという点に注意します。 【console】

[ "1st", "2nd", "3rd", "4th", "5th" ]   // arrayData
[ "1st", "2nd", "3rd" ]                 // result

  使う場面としては、APIなどで全記事を取得した際に最新の数記事だけ表示させるといった場合に使われます。また、似たようなメソッドに「String.slice()」というものがあります。これは文字列に対しての切り取りを実行するメソッドで、引数には切り取る範囲の対象となる文字の順番を指定します。 【javascript】

const stringData = 'クリームソーダ';
const resultBefore = stringData.slice(0, 4);
const resultAfter = stringData.slice(4, 7);
console.log(resultBefore);
console.log(resultAfter);

  文字列でもこんな感じで切り分けることができます。単語を複数に分けて使う時に便利ですね。 【console】

"クリーム" // resultBefore
"ソーダ"  // resultAfter

  配列か文字列かの違いはありますが、だいたい同じような感じで使うことができます。配列ではなく文字列の場合はこちらを使うようにします。  

Array.splice()

配列の一部の値を別の値に差し替える場合には「Array.splice()」を使います。イメージとしては、特定の値を削除し、その値の位置に新たな値を追加するという形になります。差し替え前の配列を用意し、その配列に対してメソッドを実行します。第一引数には差し替える位置のインデックスを指定します。そして第二引数で、差し替え位置から数えた削除する値の範囲を指定します。第三引数以降には、差し替えで追加される値を順番に入れていきます。 【javascript】

const arrayData = [ 'red', 'red', 'white', 'red', 'red' ];
const result = arrayData.splice(2, 1, 'red');
console.log(arrayData);
console.log(result);

  このようにメソッドを実行した元の配列では値が差し替えられているのが確認できます。つまり、Array.splice()では元のデータが破壊されてしまいますので注意が必要です。Array.splice()の返り値には差し替えで削除された値が返ってきます。 【console】

[ "red", "red", "red", "red", "red" ]  // arrayData
[ "white" ]                            // result

  また、Array.splice()を応用するといろんな要件に対応することができます。下記は特定の文字列を含むオブジェクトの値を検索して削除する場合のサンプルとなります。Array.forEach()、Array.findIndex()を併用することで実現しています。 【javascript】

const arrayObject = [
 { name: 'みかん', type: '果物' },
 { name: 'りんご', type: '果物' },
 { name: 'キャベツ', type: '野菜' },
 { name: 'メロン', type: '果物' },
 { name: 'ニンジン', type: '野菜' }
];
const keywords = [ 'キャベツ', 'ニンジン' ];
keywords.forEach(keyword) => {
 const index = arrayObject.findIndex(item) => item.name === keyword;
 arrayObject.splice(index, 1);
}
console.log(arrayObject);

  対象となる配列から、指定した文字列を含む値のインデックスを取得し、そのインデックスを持つ値を削除するという処理になります。それを指定した文字列の数だけ繰り返していく形です。 【console】

[
 { name: 'みかん', type: '果物' },
 { name: 'りんご', type: '果物' },
 { name: 'メロン', type: '果物' }
]

  このように元の配列から、条件に合う値が削除されました。元の配列を残して、新たに配列として作成したい場合には、Array.map()やArray.filter()などが使われることが多いのではないでしょうか？  

Array.concat()

複数の配列を合体し、一つの配列にする場合には「Array.concat()」を使います。対象となる元の配列に対してメソッドを実行し、追加する別の新しい配列を引数に指定します。 【javascript】

const defaultArray = [ '東京', '大阪', '名古屋' ];
const addArray = [ '横浜', '福岡', '札幌' ];
const result = defaultArray.concat(addArray);
console.log(result);

  このように2つの配列が合体し、1つの配列として生成されました。配列を合体させるというよりは1つにまとめるという方が使う場面としてはイメージしやすいかもしれません。 【console】

[ "東京", "大阪", "名古屋", "横浜", "福岡", "札幌" ]

   

まとめ

【配列にある一部の値を切り取る】 Array.slice( startIndex, endIndex );   【配列の値を差し替える】 Array.splice( startIndex, deleteCount, addValue, ...... );   【配列を合体する】 Array.concat( array );  

---

  今回は配列の値を切り取ったり、合体させるメソッドについてまとめてみました。javascriptには配列操作のための様々なメソッドが用意されており、これらを使いこなすことでいろんな処理の実装が可能になります。当サイトでは別記事にもいろんなメソッドをまとめていますので、そちらも是非ご参考にどうぞ。   （こちらの記事もどうぞ） JavaScriptで配列を扱う時によく使うメソッド＃1【配列の作成・値や総数の取得・空判定など】 JavaScriptで配列を扱う時によく使うメソッド＃2【配列の値に対して繰り返し処理を行う】 JavaScriptで配列を扱う時によく使うメソッド＃3【配列に値が含まれるか・値のインデックスを検索する】 JavaScriptで配列を扱う時によく使うメソッド＃4【配列から条件に合う値を取得・フィルタリングする】 JavaScriptで配列を扱う時によく使うメソッド＃5【配列の値から別の配列を作成・単一の値を算出する】 JavaScriptで配列を扱う時によく使うメソッド＃6【配列の値を追加・削除する】