【JavaScript】例外処理とは？try...catch...finally文・throw文
takahide
初心者がITを楽しむブログ
【JavaScript】concatを使って配列・文字列の結合をしよう
takahide
おはようございます。タカヒデです。
「配列Aと配列Bをまとめたいなー」
そんなことはありませんか？
今は無くとも、きっといつかあるはずです。
本日はそんな時に使う、「JavaScriptでconcatメソッドを使った『配列・文字列の結合』」について紹介します。
こんな人にオススメ
- JavaScriptにおける『配列・文字列の結合』をしたい
- 『concatメソッド』の記載方法を知りたい
ぜひ本記事を参考にしてください。
concatメソッドで配列を結合
さっそく配列の結合方法を見ていきましょう。
配列の結合には、『concatメソッド』を使用します。
このconcatメソッドでは「元の配列に対し、追加したい配列を結合する」という処理を行います。
実際の記載方法を見てみましょう。
//記載方法
元の配列 .concat ( 追加する配列1 , 追加する配列2 )そしてこちらが記載例です。
let listA = ["A", "B", "C"];
let listB = ["D", "E", "F"];
let listC = ["G", "H", "I"];
let listD = listA.concat(listB, listC);
console.log(listD);
//実行結果：['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']配列Aに対し、配列B・配列Cを追加した配列Dを新たに作成しました。
「A～I」までの値が配列Dに含まれていることが分かりますね。
今回、配列B・配列Cの2つの配列を追加しましたが、もちろん追加する配列は一つでも問題ありません。
concatメソッドで配列に値を結合
続けて、「配列に値を結合する方法」を見てみましょう。
先ほどが配列を結合していたのに対し、今回は値を結合する方法です。
こちらも先ほどと同じく、concatメソッドを使用します。
まずは記載方法からです。
//記載方法
元の配列 .concat ( 追加する値1 , 追加する値2 )こちらも記載例を見てみましょう。
let listX = [1, 2, 3];
let listY = listX.concat(4, [5, 6]);
console.log(listY);
//実行結果：[1, 2, 3, 4, 5, 6]配列Xに「4」そして[5,6]という値を追加した配列Yを新たに作成しました。
ちなみにこの配列に値を結合する処理ですが、実は他のメソッドでも似たような処理ができるのです。
それが「pushメソッド」です。
pushメソッドとconcatメソッドの違い
ここで、pushメソッドとconcatメソッドの違いを見ておきましょう。
『pushメソッド』『concatメソッド』結果としては同じに思われますが、実はそれぞれ異なる処理をしています。
- push…元の配列を直接変更
- concat…元の配列に変化はなく新しい配列を作る
■pushの場合
const arr = [1, 2, 3]
arr.push(4)
console.log(arr)
//実行結果：[1, 2, 3, 4]■concatの場合
const arr = [1, 2, 3]
const newArr = arr.concat(4)
console.log(newArr)
//実行結果：[1, 2, 3, 4]
console.log(arr)
//実行結果：[1, 2, 3]concatの場合は元の配列に変化が無いことが分かりますね。
「元の配列が変化するか否か」という点に違いがあることを認識しておきましょう。
concatメソッドで文字列を結合
最後に「文字列を結合する方法」です。
こちらももちろん『concat』メソッドが使用できます。
記載方法から見てみましょう。
//記載方法
元の文字列 .concat (追加する文字列 )そして以下が記載例です。
let test1 = "Good";
let test2 = "Morning";
console.log(test1.concat(test2));
//実行結果：GoodMorning『test1』と『test2』の文字列を結合し、「GoodMorning」という文字列ができました。
さらに、「元の文字列と追加する文字列の間に値を挟むこと」も可能です。
//記載方法
元の文字列 .concat (間の値 , 追加する文字列 )実際にやってみるとこんな感じ。
let testA = "Good";
let testB = "Morning";
console.log(testA.concat("-", testB));
//実行結果：Good-Morning『testA』と『testB』の間に『-』を挟んだ上で「Good-Morning」という文字列が完成していますね。
まとめ
以上が「JavaScriptでconcatメソッドを使った『配列・文字列の結合』」でした。
まとめ
- concatメソッド：配列・文字列の結合が可能
- concatメソッドでは配列に値を結合することもできる
- pushメソッドと違い元の配列を変化させるわけではない点に注意
この記事が誰かの参考になれば幸いです。
お疲れさまでした。
ABOUT ME
通信会社の企画職で働く30代
非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中
IT初心者が楽しいと思えるように発信することを目指しています
↓Xもやっているのでフォローしてね
