カタログ
序文
前へ 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つです。
複合アレイ
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分で学ぶフロントエンド・メガアーキテクチャー
日本語 
繁體中文 
English 
简体中文 
한국어 
Español