ES6 JavaScript ES6 Object - React用語キャンペーン02

序文

前へ JavaScript ES6の導入

let、const、var 違い
テンプレート・リテラル
アロー関数

今日も引き続き、JavaScript ES6 のその他の新しい構文を紹介する。

オブジェクトのデストラクチャリング
オブジェクト・リテラル・エンハンスメント（OLE）
配列のデストラクチャリング
スプレッドオペレーター

ES6 オブジェクトのデストラクチャリング

デストラクチャリング・アサインメントは、オブジェクトの特定の値を抽出して使用することを可能にする。

また、前の記事で紹介したアローファンクションを使って、それを分解することもできる。

解体工事が行われない状況

				
					const person = { person_name: "Hogan"、電話: "0123456789"、電子メール: "hoganlin.tech@gmail.com" } const showInfo = () => { console.log(`name: ${person.person_name}\ nphone: ${person.phone}`) } showInfo() //名前: ホーガン //電話: 0123456789

脱構築の利用

				
					const person = { person_name: "Hogan"、電話: "0123456789"、電子メール: "hoganlin.tech@gmail.com" } const showInfo = ({ person_name, 電話 }) => { console.log(`name: ${ person_name}\nphone: ${phone}`) } showInfo(person) //名前: ホーガン //電話: 0123456789

ES6オブジェクトリテラルの強化

オブジェクト・リテラル・エンハンスメントは、変数をオブジェクトにグループ化する逆解体と考えることができる。

				
					const person_name = "ホーガン"; const 電話 = "0123456789"; const printEmail = () => { console.log(`email: ${person.email}`) } const person = { person_name, 電話, email, printEmail } console.log(`名前: ${person.person_name}\nphone: ${person.phone}`) //名前: ホーガン / /電話: 0123456789

配列のデストラクチャリング

オブジェクトだけでなく、配列もカンマで値を取得できるような構造にすることができる。

				
					const [firstName] = ["ホーガン", "ピピ", "フィフィ", "ボボ"] console.log(firstName) //ホーガン const [, , , fourName] = ["ホーガン", "ピピ", "フィフィ" " ", "ボボ"] console.log(fourthName) //ボボ

ES6 スプレッド・オペレーター

Spread Operatorの構文は、3つの節から構成されています。Spread Operatorは、いくつかの関数を実装するために購入することができ、現代言語で最も一般的に使用されている文法の1つです。

複合アレイ

extension演算子を使えば、animal1とanimal2を組み合わせて動物として指定できる。

				
					const Animal1 = ["猫", "犬"] const Animal2 = ["象", "ジブラ"] const Animal = [...animal1, ...animal2] console.log(animal); //[ 'cat '、'犬'、'象'、'ジブラ' ]

コピー配列

配列の値を取得する際に、配列を変更したい場合があります。このような場合、配列を素早く複製したいことがあります。たとえば、配列の最後の値を取得したい場合は、拡張演算子を使います。

reverse()を実行した後、プログラムが元の配列を変更するのがわかる。

				
					const anime = ["cat", "dog"] const [last] = anime.reverse(); // 犬 console.log(animal); 】

一方、拡張演算子を使えば、元の配列を変更せずに新しい配列をコピーできる。

				
					const anime = ["cat", "dog"] const [last] = [...animal].reverse(); // 犬 console.log(animal); '、 '犬' ]

結語

前回のES6構文の紹介に続き、今回はES6におけるデコンストラクション、オブジェクト・エンハンスメント、エクステンションの各演算子の使い方を紹介する。このうち、デコンストラクションとエクステンションはReactの実装でよく使われる。

ご意見、ご質問がございましたら、お気軽にコメントをお寄せください！

この連載が気に入ったら、より多くの人に見てもらえるよう、遠慮なく「いいね！」やシェアをお願いします！

引用

https://www.w3schools.com/js/js_es6.asp

https://www.javascripttutorial.net/es6/

https://developer.mozilla.org/en-US/docs/Web/JavaScript

その他の記事

React ホワイトペーパーキャンペーン 01-JavaScript ES6

なぜ大企業はNxを使うのか？モノレポツール 5分のクイックセットアップ

モノレポを本当に知っていますか？ 5分で学ぶフロントエンド・メガアーキテクチャー

Zustandとは？ Reactフロントエンドの状態管理

序文