JavaScript - 配列の操作

配列の操作

配列の要素を操作するメソッドで注意しなければいけないのは、配列内の要素を変更してしまうメソッド (破壊的) と、新しい配列を返すメソッド (非破壊的) の違いです。配列の操作を行う場合は、どちらのメソッドであるかに注意してください。

配列の操作と変換
メソッド名説明破壊的 or 非破壊的
push / popスタックの生成 (先入れ後出し:LIFO)破壊的
unshift / shiftキューの生成 (先入れ先出し:FIFO)破壊的
concat末尾に複数要素を追加非破壊的
slice部分配列を取得非破壊的
splice指定場所に対する要素の追加・削除破壊的
copyWithin配列内で要素の置き換え破壊的
fill配列内を満たす破壊的
reverse順序を逆転させる破壊的
sort順序を並び替える破壊的
map配列内のすべての要素の変換非破壊的
filter条件を満たさない要素の削除非破壊的
reduce配列全体の凝縮非破壊的
join全要素をまとめてひとつの文字列にする非破壊的

push / pop / unshift / shift メソッド

配列 arr の先頭の要素は arr[0]、最後の要素は arr[arr.length-1] になります。メソッド push は配列の最後に要素を追加し pop は最後の要素を削除し、配列そのものを変更します。また shift は先頭の要素を削除し unshift は先頭に要素を追加し、配列そのものを変更します。

let arr = ["b", "c", "d"];

console.log(arr.push("e"));    // 4 (現在の要素数)
console.log(arr);              // [ 'b', 'c', 'd', 'e' ]

console.log(arr.pop());        // e
console.log(arr);              // [ 'b', 'c', 'd' ]

console.log(arr.unshift("a")); // 4 (現在の要素数)
console.log(arr);              // [ 'a', 'b', 'c', 'd' ]

console.log(arr.shift());      // a
console.log(arr);              // [ 'b', 'c', 'd' ]
先頭あるいは最後の要素に対する操作

concat メソッド

concat メソッドは複数の要素を配列の最後に追加し、配列のコピーを返します。

let arr = [1, 2, 3];
let arr2 = arr.concat(4, 5, 6);

console.log(arr);  // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 2, 3, 4, 5, 6 ]

arr2 = arr.concat([4, 5, 6]);
console.log(arr2); // [ 1, 2, 3, 4, 5, 6 ]

arr2 = arr.concat([4, 5], 6);
console.log(arr2); // [ 1, 2, 3, 4, 5, 6 ]

arr2 = arr.concat([4, 5], [6, 7]);
console.log(arr2); // [ 1, 2, 3, 4, 5, 6, 7 ]

arr2 = arr.concat([4, [5, 6]]);
console.log(arr2); // [ 1, 2, 3, 4, [ 5, 6 ] ]
複数要素の追加

slice メソッド

ある配列の部分からなる配列 (部分配列) を作る場合は slice メソッドを使います。slice には 2 個の引数を渡し、第 1 引数に指定した場所から第 2 引数に指定した場所の前までの要素からなる部分配列を戻します。ただし、第 2 引数を省略すると最後の要素までになります。引数に負の値を指定すると最後の要素から数えた場所を指定することになります。

let arr = [11, 12, 13, 14, 15];
let arr2 = arr.slice(3);

console.log(arr);  // [ 11, 12, 13, 14, 15 ]
console.log(arr2); // [ 14, 15 ]

arr2 = arr.slice(2, 4);
console.log(arr2); // [ 13, 14 ]

arr2 = arr.slice(-2);
console.log(arr2); // [ 14, 15 ]

arr2 = arr.slice(1, -2);
console.log(arr2); // [ 12, 13 ]

arr2 = arr.slice(-2, -1);
console.log(arr2); // [ 14 ]
複数要素の追加

splice メソッド

splice メソッドを使うと、配列の任意の場所を指定して内容を変更できます。第 1 引数には変更を開始する添字、第 2 引数には削除する要素の数 (0 を指定すると要素を削除しない)、第 3 引数以降に追加する要素を指定します。splice は取り除かれた要素からなる配列を返します。

let arr = [1, 5, 7];
let arr2 = arr.splice(1, 0, 2, 3, 4);

console.log(arr);  // [ 1, 2, 3, 4, 5, 7 ]
console.log(arr2); // []

arr2 = arr.splice(5, 0, 6);
console.log(arr);  // [ 1, 2, 3, 4, 5, 6, 7 ]
console.log(arr2); // []

arr2 = arr.splice(1, 2)
console.log(arr);  // [ 1, 4, 5, 6, 7 ]
console.log(arr2); // [ 2, 3 ]

arr2 = arr.splice(2, 1, 'a', 'b');
console.log(arr);  // [ 1, 4, 'a', 'b', 6, 7 ]
console.log(arr2); // [ 5 ]
途中の要素の削除や途中への要素の追加

copyWithin メソッド

copyWithin メソッドは、配列からの一連の要素を指定し、それらを配列の他の部分にコピーし、そこに以前あった要素を上書きします。第 1 引数はどこにコピーするか、第 2 引数はどこからコピーするか、第 3 引数はオプションでコピーを終了する場所を指定します。slice と同様、第 2 引数と第 3 引数には負の値を指定することができ、この場合配列の最後の要素から数えられます。

let arr = [11, 12, 13, 14];
let arr2 = arr.copyWithin(1, 2);

console.log(arr);  // [ 11, 13, 14, 14 ]
console.log(arr2); // [ 11, 13, 14, 14 ]

console.log(arr.copyWithin(2, 0, 2));   // [ 11, 13, 11, 13 ]
console.log(arr.copyWithin(0, -3, -1)); // [ 13, 11, 11, 13 ]

console.log(arr2); // [ 13, 11, 11, 13 ]
配列内の要素の削除や置換

fill メソッド

fill メソッドを使うと複数の要素の値を一度に指定することができます。Array コンストラクタと一緒に使えば、複数の要素の初期値を指定することができます。配列の一部だけの値を指定することもできます。

let arr = new Array(5).fill(1);
console.log(arr);  // [ 1, 1, 1, 1, 1 ]

let arr2 = arr.fill("a");
console.log(arr);  // [ 'a', 'a', 'a', 'a', 'a' ]
console.log(arr2); // [ 'a', 'a', 'a', 'a', 'a' ]

console.log(arr.fill("b", 1));    // [ 'a', 'b', 'b', 'b', 'b' ]
console.log(arr.fill("c", 2, 4)); // [ 'a', 'b', 'c', 'c', 'b' ]
console.log(arr.fill(5.5, -4));   // [ 'a', 5.5, 5.5, 5.5, 5.5 ]
console.log(arr.fill(0, -3, -1)); // [ 'a', 5.5, 0, 0, 5.5 ]
配列を特定の値で埋める

reverse / sort メソッド

reverse メソッドは配列の要素を逆順に並び替えます。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.reverse();

console.log(arr);  // [ 5, 4, 3, 2, 1 ]
console.log(arr2); // [ 5, 4, 3, 2, 1 ]

arr.reverse();
console.log(arr);  // [ 1, 2, 3, 4, 5 ]
console.log(arr2); // [ 1, 2, 3, 4, 5 ]
配列の要素を並び替える

sort は配列の要素の並び替えをします。

let arr = [5, 3, 2, 4, 1];
let arr2 = arr.sort();

console.log(arr);  // [ 1, 2, 3, 4, 5 ]
console.log(arr2); // [ 1, 2, 3, 4, 5 ]

arr2.reverse();
console.log(arr);  // [ 5, 4, 3, 2, 1 ]
console.log(arr2); // [ 5, 4, 3, 2, 1 ]
配列の要素を並び替える

sort には並び替える関数を指定することもできます。

let arr = [{ name: "Suzanne" }, { name: "Jim"    },
           { name: "Trevor"  }, { name: "Amanda" }];
           
console.log(arr);

arr.sort((a, b) => a.name > b.name); // name でソート
console.log("------");
console.log(arr);

arr.sort((a, b) => a.name[1] < b.name[1]); // name の 2 文字目で逆順にソート
console.log("------");
console.log(arr);

/* 実行結果
[ { name: 'Suzanne' },
  { name: 'Jim' },
  { name: 'Trevor' },
  { name: 'Amanda' } ]
------
[ { name: 'Amanda' },
  { name: 'Jim' },
  { name: 'Suzanne' },
  { name: 'Trevor' } ]
------
[ { name: 'Suzanne' },
  { name: 'Trevor' },
  { name: 'Amanda' },
  { name: 'Jim' } ]
*/
配列の要素を並び替える

map / filter メソッド

配列関連の操作する map メソッドは配列内の要素を変換します。例えば、数字を保持しているオブジェクトに対して map を使うことで簡単に取得できます。また、mapfilter はコピーを返すため、オリジナルの配列は変更されません。

const cart = [{ 名前: "iPhone",  価格: 54800},
              { 名前: "Android", 価格: 49800}];
               
const names = cart.map(x => x.名前);
console.log(names); // [ 'iPhone', 'Android' ]

const prices = cart.map(x => x.価格);
console.log(prices); // [ 54800, 49800 ]

const discountPrices = prices.map(x => x*0.8);
console.log(discountPrices); // [ 43840, 39840 ]

const lcNames = names.map(x => x.toLowerCase());
console.log(lcNames); // [ 'iphone', 'android' ]
map メソッド

指定した関数が呼び出されるとき、その関数には、要素、要素の添字、配列の 3 つが渡されます。以下の例では要素 x と添字 i を利用して 2 つの配列を組み合わせています。添字 i は配列 items の要素と、配列 prices の要素を関連付けています。

const items = ["iPhone", "Android"];
const prices = [54800, 49800];
const cart = items.map((x, i) => ({ 名前: x, 価格: prices[i]}));

console.log(cart);
// [ { '名前': 'iPhone', '価格': 54800 }, { '名前': 'Android', '価格': 49800 } ]
map メソッド

filter は、配列から不要な要素をフィルターする働きをします。map 同様、条件にマッチしない要素が削除された配列を戻します。

function isBigEnough(value) {
    return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// [12, 130, 44] (10 未満の配列要素が取り除かれている)
filter メソッド

reduce メソッド

reduce メソッドは配列全体を変換します。例えば、配列の全要素の合計を計算したり、平均を計算してひとつの値に変換します。reduce メソッドも関数を指定することができます。ただし、他のメソッドとは異なり reduce メソッドで指定する関数はアキュムレータ (accumulator) となります。アキュムレータは最終的な配列の変換先です。残りの引数は、現在の配列要素、現在の添字、および配列そのものです。関数を受け取るほかに reduce メソッドにはオプションでアキュムレータの初期値を指定することができます。次の例は配列の要素の合計を計算するものです。

const arr = [5, 7, 2, 4];
const sum = arr.reduce((a, x) => a += x, 0);

console.log(sum); // 18
reduce メソッド

reduce メソッドに渡される関数は 2 つの引数を取ります。ひとつはアキュムレータ a、もうひとつは配列要素 xです。上記の例ではアキュムレータの初期値は第 2 引数の 0 です。

  1. 関数が配列の最初の要素 5 について呼ばれます。a の初期値は 0x の値は 5 です。この関数は ax (5) の合計を戻しますが、この値が次のステップの a の値となります。
  2. 関数が配列の 2 番目の要素 7 に対して呼び出されます。a の値は前のステップの終わりで 5 になっており x の値は 7 です。この関数は ax の合計 (12) を戻し、これがこのステップの終了時の a の値となります。
  3. 関数が配列の 3 番目の要素 2 に対して呼び出されます。a の値は前のステップの終わりで 12 となっており x の値は 2 です。この関数は ax の合計 (14) を戻し、これがこのステップの終了時の a の値となります。
  4. 関数が配列の最後の要素 4 に対して呼び出されます。a の値は前のステップの終わりで 14 となっており x の値は 4 です。この関数は ax の合計 (18) を戻し、これがこのステップの終了時の a の値となり reduce が戻す値となります。この値が変数 sum に代入されます。

アキュムレータの初期値が undefined の場合、reduce は配列の最初の要素を初期値として取り、2 番目の要素から関数を呼び出します。

const arr = [5, 7, 2, 4];
const sum = arr.reduce((a, x) => a += x);

console.log(sum); // 18
reduce メソッド

join メソッド

配列の各要素をまとめてひとつの文字列を作りたい場合は join を使用します。第 1 引数はセパレータです。デフォルト値は ,です。削除された要素や nullundefined の要素は空文字列になります。

const arr = [1, null, "hello", "world", true, undefined];

result = arr.join('');
console.log(result); // 1helloworldtrue

result = arr.join(',');
console.log(result); // 1,,hello,world,true,
join メソッド

関連記事

JavaScript のまとめページはプログラミング JavaScript 入門を参照してください。

Category:
プログラミング
公開日:
更新日:
Pageviews:
45
Shares:
0
Tag:
JavaScript
hatebu icon
hatebu