Tag: 結合

ジャバスクリプトで配列を結合(マージ)する良い方法(javascript)

配列を結合する便利な三つのやり方(concat(), …spread, push())

ジャバスクリプトを使ってデータを扱うことが多くなり、配列を使用する仕組みも増えていきます。

その中、マージ（結合）についてちらっと調べてみますね。


配列(array)はインデックスを持つ要素を順に並べる構造です。

一つの配列ならインデックスまたはメソッド（unshift(), push(), shift(), pop(), splice(), find(), includes(), join(), indexOf()など）を使って配列中のデータを便利に操作することができます。

配列間のマージ方法も同じくconcat(), push(), …spreadなどが存在します。

一つづつ確認してみます。

1. 配列結合の三つ方法

concat

concatenate(連結する意味)の略字であるconcat()は意味通り配列両方を繋ぎます。

次のように扱うので、サンプルから確認してみます。

  • [array1].concat([array2]…..)

  • [].concat([array1], [array2]……)

    • const color1 = ['blue', 'pink', 'white'];
const color2 = ['black', 'orange', 'yellow'];
const num1 = [100, 200, 300];
const num2 = [400, 500, [600, 700]];

const allColor = color1.concat(color2); 
//['blue', 'pink', 'white', 'black', 'orange', 'yellow']
console.log(allColor); 

const colorPlus = color1.concat('gold', ['silver', 'bronze']); 
//['blue', 'pink', 'white', 'gold', 'silver', 'bronze']
console.log(colorPlus);

const colorAndNum = color1.concat(num1);   
//['blue', 'pink', 'white', 100, 200, 300]
console.log(colorAndNum); 

const allNum = num1.concat(num2);   
//[100, 200, 300, 400, 500, [600, 700]]
console.log(allNum);

    concatは一つ以上の配列を結合し、一つの配列にします。

    配列中のデータの形式（タイプ）にかかわらず結合できるし、ネストされている配列（配列中にまた配列がある構造）の結合もできます。


    …spread スプレッド

    ES6から追加された文法の一つであるスプレッド構文は配列或はオブジェクトを速くて安全にコピーすることができます。

    深いコピー(deep copy)方法でコピーするので、既存のデータとは違うメモリーアドレスを使いますね。

    なので配列の結合方法の中では一番いい方法だと言えます。

    const musician = ['Chet Baker', 'Miles Davis'];
const actor = ['Clint Eastwood', 'George Clooney'];

const favorites = [...musician, ...actor];    
// ['Chet Baker', 'Miles Davis', 'Clint Eastwood', 'George Clooney'];
console.log(favorites); 

const favoritesReverse = [...actor, ...musician];
// ['Clint Eastwood', 'George Clooney', 'Chet Baker', 'Miles Davis'];
console.log(favoritesReverse)

    また、スプレッド構文は次のように非構造化ではよくつかわれています。

    const myColor = ['beige', 'burgundy', 'charcoal', 'ivory'];

const [color1, color2, ...others  ] = myColor;
console.log(color1);   // 'beige'
console.log(color2);   // 'burgundy'
console.log(others);   // ['charcoal', 'ivory']

    push

    push()は配列の最後に要素を追加するときよく使うメソッドです。

    push()メソッドとスプレッド構文を一緒に使うと配列の結合ができます。

    でもこの方法は既存データの上に新しいデータを上書きするので既存データの変更に注意する必要があります。

    const pizza = ['dough', 'cheese', 'meat', 'source'];
const pizzaAdd = ['parmesan', 'tabasco'];

pizza.push(...pizzaAdd);   

// ['dough', 'cheese', 'meat', 'source', 'parmesan', 'tabasco'];
console.log(pizza);

    2. 総合

    配列を結合する方法の中concat(), …spread, push()について調べてみました。

    状況により必要な方法が違うので、システムやロジックを考えた上で選んだら問題はないと思います。

    あざーす！