reactプロジェクトでよく使われているES 6のいくつかの方法
3295 ワード
※あらすじ(本論文は『react進級の道』徐超著清華大学出版社より):ES 6はJavaScript言語の新世代標準であり、多くの新しい機能と文法が盛り込まれています.Reactのプロジェクトは一般的にES 6の文法で書かれていますが、これもフェイスブック公式のオススメです.本書の知識体系の完全性を保証するために、今回はReact応用の開発によく使われるES 6文法について簡単に紹介します.
1.let const letとconstは、変数を宣言するためにES 6に追加された2つのキーワードであり、letとconstはブロックレベルのスコープである.let宣言の変数は、letコマンドがあるコードブロック内でのみ有効です.constは読み取り専用の定数を宣言します.一旦宣言したら定数の値は変更できません.例えば:/letの例｛ var a=1 let b=2;｝a/1 b/ReferenceError:b is not defined./const例const c=3c=4;//TypeError:Asignment to constant variable.
2.矢印関数ES 6は、「矢印」(=>)を使用して関数を定義することができます.このように作成された関数は、Functionキーを必要とせず、returnキーワードを省略することもできる.同時に、矢印関数内のthisは、関数実行時のコンテキストオブジェクトではなく、関数定義時のコンテキストオブジェクトを指します.例えば、var f=a=>a+1;/var f=function(a){ return a+1;function foo(){ this.bar=1 this.f=(a)=>a+this.bar;//function foo()に相当します. this.bar=1 this.f=(function(a)｛ return a+this.bar }).ビnd(this);｝矢印関数のパラメータが1以上である場合、またはパラメータが必要でない場合は、1つの括弧を使用してパラメータ部分を表す必要があります.例えば、var f=()>>1、var f=(a,b)=>a＋b、関数に含まれる語句が複数ある場合は、大きい括弧で関数体を囲み、return文で返す必要があります. x＋＋＋ y–; return x+y;)
3.テンプレート文字列テンプレート文字列は拡張版の文字列で、逆引用符(
4.分配値ES 6は、一定のパターンに従って配列およびオブジェクトから値を抽出し、変数を分配することを可能にする.これは、分解と呼ばれる.例えば、／配列分解let[a,b,c]=[1,2,3];a/1 b/2 c/3 c/オブジェクト分解let name="Lily";let age=4;//オブジェクト展開の別の形態let person={name:‘Lily’,age:4};let｛name,age｝=person;name/“Lily”age/4関数のパラメータも、解構成値を使用することができます.例えば、／配列パラメータ解構成function sum(x,y)｛ return x+y;｝sum([1,2])///3/オブジェクトパラメータ解構成function sum({x,y}){ return x＋y;sum({x:1,y:2)、/3解は同様に嵌合構造の配列またはオブジェクトに適用されます.例えば、//ネスト構造の配列分解let[a,[b]={1,[2],a;/1 b;/2 c;/3/ネスティング構造のオブジェクトは、解解凍されています.Lily"age/4 foo/"foo"
5.restパラメータES 6は、argmentsオブジェクトの代わりに関数の余分なパラメータを取得するために、restパラメータを導入します.restパラメータは、配列の要素が余分なパラメータです.restパラメータの後に他のパラメータがないように注意してください.例:function lagges(lang,…types)｛ consolie.logs;langages(‘JavaScript’,‘Java’,‘Python’)/[[Java],[Python]
6.拡張演算子拡張演算子は、3つの点(…)であり、1つの配列をコンマで区切られたパラメータ系列に変換し、リセットパラメータの逆演算に類似します.例えば、function sum(a,b,c)｛ return a＋b＋c;｝let numbers=[1,2,3];sum(...numbers)、//6拡張演算子は、結合配列とデフォーカシング値との組み合わせにもよく使われます.例えば、/結合配列let arr 1=[a];let arr 2=[b]、‘c’、let 3=[ard];/再構築値と組み合わせたlet[a,…rest]=[a]、‘b’、‘c’;ret/[/b]、拡張演算子は、パラメータオブジェクトの全てのトラバース属性を取り出して、現在のオブジェクトにコピーするためにも使用されます.例えば、let bar={a:1,b:2}、let foo={bar}folso=
7.クラスES 6はクラスという概念を導入しています.新しいクラスの書き方は対象の原型の書き方をより明確にし、伝統的な対象向けプログラミング言語の書き方にも似ています. constructor(name,age)｛ this.name=name; this.age=age; } get Name(){ return this.name; } getAge(){ return this.age } }//クラス作成対象のlet person=new(「Lily」、4)に従って、クラス間でextendsキーワードによって継承を実現することができます.例えば、class Man extends Person｛ constructor(name,age)｛ super(name,age) } getGender(){ return‘male’ } } let man=new Man(ジャック、20)
8.import、export ES 6は、自身のモジュール化基準を実現しています.ES 6モジュールの機能は、主に2つのキーワードから構成されています.exportは、モジュールの外部暴露を規定するインターフェース、importは他のモジュールから提供されるインターフェースを導入するために使用されます.=>‘bar’;export default foo、/デフォルトインターフェースexport｛bar｝をエクスポートします./一般インターフェース/b.jsをエクスポートします.(a.jsと同じディレクトリの下で)a.jsのインターフェースを導入します./デフォルトインターフェースと一般インターフェースの導入書き方の違いに注意してください.
1.let const letとconstは、変数を宣言するためにES 6に追加された2つのキーワードであり、letとconstはブロックレベルのスコープである.let宣言の変数は、letコマンドがあるコードブロック内でのみ有効です.constは読み取り専用の定数を宣言します.一旦宣言したら定数の値は変更できません.例えば:/letの例｛ var a=1 let b=2;｝a/1 b/ReferenceError:b is not defined./const例const c=3c=4;//TypeError:Asignment to constant variable.
2.矢印関数ES 6は、「矢印」(=>)を使用して関数を定義することができます.このように作成された関数は、Functionキーを必要とせず、returnキーワードを省略することもできる.同時に、矢印関数内のthisは、関数実行時のコンテキストオブジェクトではなく、関数定義時のコンテキストオブジェクトを指します.例えば、var f=a=>a+1;/var f=function(a){ return a+1;function foo(){ this.bar=1 this.f=(a)=>a+this.bar;//function foo()に相当します. this.bar=1 this.f=(function(a)｛ return a+this.bar }).ビnd(this);｝矢印関数のパラメータが1以上である場合、またはパラメータが必要でない場合は、1つの括弧を使用してパラメータ部分を表す必要があります.例えば、var f=()>>1、var f=(a,b)=>a＋b、関数に含まれる語句が複数ある場合は、大きい括弧で関数体を囲み、return文で返す必要があります. x＋＋＋ y–; return x+y;)
3.テンプレート文字列テンプレート文字列は拡張版の文字列で、逆引用符(
） 。 ， ， ， 。 ： // React is wonderful!`/複数行文字列'JS is wonderful!React is wonderful!'/文字列に変数var name="React";Hello、{name}!';4.分配値ES 6は、一定のパターンに従って配列およびオブジェクトから値を抽出し、変数を分配することを可能にする.これは、分解と呼ばれる.例えば、／配列分解let[a,b,c]=[1,2,3];a/1 b/2 c/3 c/オブジェクト分解let name="Lily";let age=4;//オブジェクト展開の別の形態let person={name:‘Lily’,age:4};let｛name,age｝=person;name/“Lily”age/4関数のパラメータも、解構成値を使用することができます.例えば、／配列パラメータ解構成function sum(x,y)｛ return x+y;｝sum([1,2])///3/オブジェクトパラメータ解構成function sum({x,y}){ return x＋y;sum({x:1,y:2)、/3解は同様に嵌合構造の配列またはオブジェクトに適用されます.例えば、//ネスト構造の配列分解let[a,[b]={1,[2],a;/1 b;/2 c;/3/ネスティング構造のオブジェクトは、解解凍されています.Lily"age/4 foo/"foo"
5.restパラメータES 6は、argmentsオブジェクトの代わりに関数の余分なパラメータを取得するために、restパラメータを導入します.restパラメータは、配列の要素が余分なパラメータです.restパラメータの後に他のパラメータがないように注意してください.例:function lagges(lang,…types)｛ consolie.logs;langages(‘JavaScript’,‘Java’,‘Python’)/[[Java],[Python]
6.拡張演算子拡張演算子は、3つの点(…)であり、1つの配列をコンマで区切られたパラメータ系列に変換し、リセットパラメータの逆演算に類似します.例えば、function sum(a,b,c)｛ return a＋b＋c;｝let numbers=[1,2,3];sum(...numbers)、//6拡張演算子は、結合配列とデフォーカシング値との組み合わせにもよく使われます.例えば、/結合配列let arr 1=[a];let arr 2=[b]、‘c’、let 3=[ard];/再構築値と組み合わせたlet[a,…rest]=[a]、‘b’、‘c’;ret/[/b]、拡張演算子は、パラメータオブジェクトの全てのトラバース属性を取り出して、現在のオブジェクトにコピーするためにも使用されます.例えば、let bar={a:1,b:2}、let foo={bar}folso=
7.クラスES 6はクラスという概念を導入しています.新しいクラスの書き方は対象の原型の書き方をより明確にし、伝統的な対象向けプログラミング言語の書き方にも似ています. constructor(name,age)｛ this.name=name; this.age=age; } get Name(){ return this.name; } getAge(){ return this.age } }//クラス作成対象のlet person=new(「Lily」、4)に従って、クラス間でextendsキーワードによって継承を実現することができます.例えば、class Man extends Person｛ constructor(name,age)｛ super(name,age) } getGender(){ return‘male’ } } let man=new Man(ジャック、20)
8.import、export ES 6は、自身のモジュール化基準を実現しています.ES 6モジュールの機能は、主に2つのキーワードから構成されています.exportは、モジュールの外部暴露を規定するインターフェース、importは他のモジュールから提供されるインターフェースを導入するために使用されます.=>‘bar’;export default foo、/デフォルトインターフェースexport｛bar｝をエクスポートします./一般インターフェース/b.jsをエクスポートします.(a.jsと同じディレクトリの下で)a.jsのインターフェースを導入します./デフォルトインターフェースと一般インターフェースの導入書き方の違いに注意してください.