JavaScriptのES6オブジェクト - Reactホワイトペーパーキャンペーン02

react-vernacular-campaign-02 JavaScript ES6 Object

序文

前へ JavaScript ES6の導入

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

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

  1. オブジェクトのデストラクチャリング
  2. オブジェクト・リテラル・エンハンスメント(OLE)
  3. 配列のデストラクチャリング
  4. スプレッドオペレーター

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フロントエンドの状態管理

 

投稿メッセージ

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ja日本語