- vừa được xem lúc

Blog#109: 🌸ES6スプレッドオペレータの7つの使い方を覚えるべきこと🌸

0 0 11

Người đăng: NGUYỄN ANH TUẤN

Theo Viblo Asia

この記事の主な目的は、日本語レベルを上げるのを手伝うことです。ソフトウェア開発に関連する概念や知識なとを紹介するために簡単な日本語を使います。ITの知識に関しては、インターネット上でもっとよく説明されているかもしれませんが、この記事の主な目標はまだ日本語を学ぶことです。


こんにちは、私はトゥアンと申します。東京からフルスタックWeb開発者です。 将来の有用で面白い記事を見逃さないように、私のブログをフォローしてください。

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値が含まれている場合は機能しません。

またLodashRamdaのようなライブラリを使うことで、配列やオブジェクトのディープコピーを作りながら、非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))lodashRamdaのようなライブラリを使用してディープコピーを作成する必要があります。

最後

いつもお世話になっています。この記事を楽しんで、新しいことを学べたら嬉しいです。

次の記事でお会いしましょう!この記事が気に入ったら、私を応援するために「いいね!」を押して登録してください。ありがとうございました。


この記事の主な目的は、日本語レベルを上げるのを手伝うことです。ソフトウェア開発に関連する概念や知識なとを紹介するために簡単な日本語を使います。ITの知識に関しては、インターネット上でもっとよく説明されているかもしれませんが、この記事の主な目標はまだ日本語を学ぶことです。

Ref

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 496

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 413

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 134

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 117

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 93

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 228