JavaScriptで２つの配列を比較して重複を削除したい

Question

###実現したいこと

以下aとbから重複を削除して

result = ["a", "イヌ", "ネコ", "b", "c"]

を得たいです。

var a = [ 'a', 'イヌ', 'ネコ', 'b' ];
var b = [ 'c', 'ネコ', 'イヌ' ];

まずaを全てresultに追加し、bの方はaにすでにあればresultには追加しない、という流れです。

###発生している問題
result = ["a", "イヌ", "ネコ", "b", "c", "c", "c", "c"]

となってしまい、cが追加され続けてしまいます。

ループで比較していますが、breakで抜けることができないせいでしょうか？

###該当のソースコード

var a = [ 'a', 'イヌ', 'ネコ', 'b' ];
var b = [ 'c', 'ネコ', 'イヌ' ];
var result = [], ai, bi;

for ( ai=0; ai<a.length; ai++ ) {
	result.push( a[ai] );
}

for ( ai=0; ai<a.length; ai++ ) {
	for ( bi=0; bi<b.length; bi++ ) {
		if ( a[ai] !== b[bi] ) {
    	result.push( b[bi] );
			break;
		}
	}
}

console.log( result );

###試したこと

forが2回あるから break 2; にしてみたり、または return; とかを試したのですができません。
特殊な方法が必要でしょうか？

jQueryでも構わないので、解決策をご指南頂けましたら幸いです。

Answer 1

以下のようなコードで実装できます！
短くわかりやすい書き方なので調べて出てくるのとは少し違うかもしれません

const a = [ 'a', 'イヌ', 'ネコ', 'b' ];
const b = [ 'c', 'ネコ', 'イヌ' ];

const result = Array.from(new Set([...a, ...b]));
console.log(result);

簡単な説明:
[...a, ...b] で配列をつなげる
new Set()で重複禁止の配列のようなものにする
Array.fromで配列のようなものから配列に戻す

Comments

[gonsy]

ドットを３つ書いてカンマでつなげると、array_mergeの効果があるのですか？しかもnew_Setで勝手に重複が削除されるとは。
まさに求めていたものでした。ありがとうございます。

[mouse_484]

スプレッド構文というものですね
例の下の方にあるArray を連結するを見てみてください

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Examples

[gonsy]

ありがとうございます。勉強しておきます。

[shinji709]

const result = [...new Set([...a, ...b])]; にするともう少し短い

Answer 2

以下でできました。しかし結果はresultという変数で得たいので、もしそういった方法があれば引き続きご回答お待ちしております。

var a = [ 'a', 'イヌ', 'ネコ', 'b' ];
var b = [ 'c', 'ネコ', 'イヌ' ];

for ( i=0; i<b.length; i++ ) {
  if ( ! a.includes(b[i]) ) {
    a.push( b[i] );
  }
}

console.log( a );