こんにちは、私は東京からのフルスタックWebデベロッパーであるTUANです。
今後の便利で面白い記事を見逃さないように、私のブログをフォローしてください。
ES6スプレッドオペレータは、JavaScript開発者にとって強力なツールです。それは、配列、マップ、セット、オブジェクトなどの反復可能なオブジェクトの要素を「展開」するために使用できる3つの点（...）のセットです。
たとえば、arrという数字の配列がこのように見えるとします：[1, 2, 3, 4, 5]。配列をループし、各要素をconsole.logする代わりに、単にスプレッドオペレータを使用して配列を出力することができます：console.log(...arr) // 1 2 3 4 5
const arr = [ 1, 2, 3, 4, 5 ]
console.log(arr) // [ 1, 2, 3, 4, 5 ]
console.log(...arr) // 1 2 3 4 5
const { name, ...other } = { name: 'tuan', age: 100, luckyNumber: 6 }
console.log(name) // tuan
console.log(other) // { age: 100, luckyNumber: 6 }
しかし、スプレッドオペレータはそれだけではできることがたくさんあります！ここに使用できる他のトリックのいくつかがあります：
1. 配列のpush()メソッドを使用するより良い方法
すべての人は、push()メソッドが複数の不確定なパラメータを渡すことをサポートすることを知っています。
const arr = [ 'tuan', 'medium' ]
arr.push(...[ 'JavaScript', 'NodeJs' ])
console.log(arr) // ['tuan', 'medium', 'JavaScript', 'NodeJs']
この例では、配列['JavaScript', 'NodeJs']の要素をスプレッドオペレータで展開し、スプレッドした要素をpushメソッドの引数として使用して、複数の要素を一行でarrに追加できるようにしています。
2. 新しい配列をコピー（ディープコピー）
配列をコピーすることは、スプレッドオペレータの最も便利な機能の1つですが、スプレッドオペレータは配列自体をコピーするだけであり、要素をコピーしません。したがって、もとの配列がオブジェクトを含んでいる場合、コピーに対して行われた変更は、同じオブジェクトを参照しているため、元の配列にも影響を与えます。
const originalArray = [1, 2, {a: 1, b: 2}];
const copyArr = [...originalArray];
console.log(copyArr); // [1, 2, {a: 1, b: 2}]
copyArr[2].a = 3;
console.log(originalArray); // [1, 2, {a: 3, b: 2}]
もし配列の中身も含めた本当のコピーを作りたい場合、 JSON.parse(JSON.stringify(originalArray))などのディープコピー関数を使用することができます。
const originalArray = [1, 2, {a: 1, b: 2}];
const copyArr = JSON.parse(JSON.stringify(originalArray));
console.log(copyArr); // [1, 2, {a: 1, b: 2}]
copyArr[2].a = 3;
console.log(originalArray); // [1, 2, {a: 1, b: 2}]
ただし、この方法はJSONに準拠したデータのみに対応し、大きな配列を扱っている場合はパフォーマンスに問題が出る可能性があります。また、JSON.parse(JSON.stringify(originalArray))メソッドはoriginalArrayに関数やシンボル、undefined値が含まれている場合は機能しません。
またLodashやRamdaのようなライブラリを使うことで、配列やオブジェクトのディープコピーを作りながら、非JSONデータ型を保持することもできます。
3. 配列から重複した値を削除
重複した値の配列はsetデータ構造とスプレッドオペレータを使って削除することができます。
const arr = [ 'tuan', 'tuan', 'medium', 'medium' ]
const uniqueArray = [ ...new Set(arr) ]
console.log(uniqueArray) // ['tuan', 'medium']
4. 複数の配列を結合
スプレッドオペレータを使用して、複数の配列を連鎖して新しいデータを取得することができます。
const arr1 = [ 'tuan', 'medium' ]
const arr2 = [ 'JavaScript', 'NodeJs' ]
const arr = [ ...arr1, ...arr2 ]
console.log(arr) // ['tuan', 'medium', 'JavaScript', 'NodeJs']
5. NodeListを本物の配列に変換
スプレッドオペレータは、DOM要素のリストであるNodeListを本物の配列に変換するために使用できます。
// $divs is a NodeList
const $divs = document.querySelectorAll('div')
// $arrayDivs is An Array
const $arrayDivs = [ ...$divs ]
console.log(Array.isArray($divs), Array.isArray($arrayDivs)) // false true
6. デストラクチャ
スプレッドオペレータは、配列やオブジェクトをデストラクチャするためによく使用されます。見てみましょう！
Destructure array:
const [ num0, ...others ] = [ 1, 2, 3, 4, 5, 6 ]
console.log(num0) // 1
console.log(others) // [2, 3, 4, 5, 6]
Destructure object:
const obj = { name: 'tuan', age: 100, luckyNumber: 6 }
const { name, ...other } = obj
console.log(name) // tuan
console.log(other) // { age: 100, luckyNumber: 6 }
7. 文字列を配列に変換
このように文字列を配列に変換することができるということは驚きですよね？
const name = 'tuan'
const nameArray = [ ...name ] // ['t', 'u', 'a', 'n']
結論
プレッドオペレータ（...）は、コードをシンプルにし、効率的にするための強力なツールです。反復可能なオブジェクト、例えば配列、セット、マップ、オブジェクトの要素を展開することができます。配列をマージする、配列をコピーする、重複を削除する、配列やオブジェクトをデストラクチャする、NodeListや文字列を配列に変換するタスクに使用できます。
しかし、スプレッドオペレータは浅いコピーを作成するため、コピーされた配列に対して行われた変更は元の配列に影響します。そのため、必要に応じてJSON.parse(JSON.stringify(originalArray))やlodashやRamdaのようなライブラリを使用してディープコピーを作成する必要があります。
いつものように、この記事を楽しんで新しいことを学んでいただけたと思います。
ありがとうございました。次の記事でお会いしましょう！
この記事が気に入ったら、いいねをして購読してサポートしてください。ありがとうございます。