11種類は、ほとんどのチュートリアルJavaScriptのヒントで見つけることができません


各時間の節約に私はJavaScriptを学ぶために始めたときのヒントを、私は外で他の誰かのコードを私の場所を取った、コードのチャレンジチュートリアルでは、私がサイトを使用すると、すべての列のリストを発見しました。

この記事では、私はそれが11特に便利だと思うのヒントを共有します。この記事では、初心者のためですが、私も中間JavaScript開発者は、このリストに新しい何かを見つけることができることを願っています。

Mengchuo品質GitHubのブログ、高品質の記事のほぼ100の記事年はあなたを待ってくださいより多くの記事を読むに!

1。。ユニークな値フィルタリング
一緒に、我々は新しい配列のみ一意の値を作成するために使用することができます...セットオブジェクトの種類が展開操作で、ES6で導入されます。

アレイ=一定の[1 ,. 1,2 ,. 3 ,. 5 ,. 5 ,. 1] 
CONST uniqueArray = [...設定された新たな新しい(アレイ)]; 
はconsole.log(uniqueArray); //結果:〔1,2 ,. 3、。 5] 
ES6前に、唯一のコード値を分離することはこれよりはるかに含みます。

未定義、ヌル、ブール、文字列と数:この技術は、アレイの基本的なタイプを含むのに適しています。(オブジェクト、関数、または配列を含む他の配列を持っている場合は、別のアプローチが必要!)

と2 OR演算
次のように三項演算子は、簡単な(そして時にはないので、単純な)高速プロセス条件文を書くことです:

X> 100 '100以上':;? '100以下の' 
?100 X>は、(X> 200である:? '100〜200の間で' '200の上にある')。 '100以下';

しかし、時には三項演算子の処理が非常に複雑になります。代わりに、私たちは「と」&&と「または」論理演算子をより簡潔に書かする||表現を使用することができます。これは、しばしば「ショート」またはと呼ばれ、「短絡動作」

それがどのように動作する
と仮定我々は、二つ以上のオプションへの復帰をしたいです。

最初の条件を返し&&使用すると、偽の値です。各オペランドの計算値が真である場合には、最後に計算式を返します。

一= 1 LET、TWO = 2、三= 3; 
はconsole.log(スリーワン&& && TWO); //結果:. 3 
はconsole.log(ヌル&& 0); //結果:0 

最初のを返すために使用||条件が真の値です。各オペランドの演算結果が偽である場合は、最後に計算式が返されます。

ワン= 1 LET、TWO = 2、三= 3;。。
はconsole.log(スリーワン|| || TWO); //結果:. 1 
はconsole.log(ヌル|| 0); //結果:nullの

実施形態
と仮定我々私は、変数の長さを返すようにしたいが、私たちは、変数の型を知りません。

FOOの種類を確認するには、/ else文が許容される場合我々は使用することができますが、それは非常に面倒になることができます。または実行は、私たちは作業を簡素化することができます

。リターン(FOO || [])の長さを
変数fooがtrueの場合、それが返されます。それ以外の場合は、長さの空の配列を返す:0。

例二
あなたは、ネストされたオブジェクトのプロパティへのアクセスに問題を経験したことがありますか?どこオブジェクトやイライラエラーが発生する可能性がありサブプロパティ、があるかどうか、あなたは知らないかもしれません。

取得要求の前に成功したリターン我々はthis.stateにデータと呼ばれるプロパティにアクセスしたいとしますが、私たちのプログラムでは、データは不定です。

私たちは、その場所に応じて、我々のアプリケーションの実行を妨げる可能性this.state.dataを呼び出して使用します。この問題を解決するために、我々はさらに決定することができます:

(this.state.data)のIF { 
  this.state.dataを返す; 
} {それ以外の
  リターンは、「データのフェッチ」; 
} 
それが繰り返されそうです。オペレータは、よりエレガントなソリューションを提供して「または」:

リターン(this.state.dataは||「データのフェッチ」); 
新機能:オプションのチェーン
オブジェクトのプロパティチェーンを呼び出して過去をプロパティではないので、それは簡単です。未定義のエラーの財産XXXを読み取ることができません鉛の存在の後に起こります。

そのオプションの連鎖がだから一人のオペレータ?。追加され、それは最初、それがnullまたは未定義の場合、エンドそれを呼び出し、前の値を決定不定返します。

たとえば、私たちは)(上記の例ではthis.state.data?。で再構築することができます。私たちは状態が定義されているかどうかに焦点を当てる場合は、我々はthis.state返すことができますか?.DATA。

提案は、実験的な機能として、フェーズ1で現在あります。あなたは、あなたが今の@バベル/プラグイン・提案・オプションの追加、バベルであなたのJavaScriptを使用することができ、それを読むことができ -chainingをご.babelrcファイルに。

3.ブール値に変換する
「truthy」または「falsy」などの他のすべての値はまた、真と偽の従来のブール値に加えJavaScriptを。

特に定義しない限り、JavaScriptですべての値は、ヌル、未定義「」、0に加えて、「truthy」であり 、NaNの、 もちろん、偽の、これらは「falsy」は、

我々は簡単に否定演算子を使用してカウントすることができます真と偽の間で切り替え。また、「ブール」型に変換されます。

isTrue 0 =定数;! 
CONST = IsFalse 1 ;!。
constのalsoFalse !! = 0; 
にconsole.log(isTrue); //結果:真に
(typeofをtrueに)はconsole.log; //結果: "ブール"           
4.に変換文字列
迅速数値を文字列に変換するには、我々は空の引用符+のセットに続いて連結演算子を使用することができます「」

ヴァル+ 1 = CONST ""; 
はconsole.log(ヴァル); //結果: "1" 
はconsole.log(typeof演算ヴァル); //結果:"
すぐに逆の効果を得ることができ、加算演算子を使用して+。

int型= LET "15"; 
int型= INT +; 
にconsole.log(int型); //結果:15 
はconsole.log(typeof演算int型);結果: "番号" 
、次のようにまた、デジタルブール値に変換するために使用することができます示すよう

 にconsole.log(trueに+); //戻り:. 1 
 (falseに+)にconsole.log; //戻り値:0 
いくつかの文脈において、+連結演算子ではなく、加算演算子として解釈されます。~~:これは(あなたが整数ではなく浮動を返したい)発生した場合、次の2つのチルダを使用することができます。

二つの連続波を効果的に、操作を否定なぜなら- ( - N - 1) - 1 = N + 1 - 1 = N。-16〜15に換言すれば、等しいです。

= ~~ int型のconstの「15」
はconsole.log(int型); //結果:15 
はconsole.log(typeof演算int型);結果:「番号」
私は多くのユースケースと考えることができますが、ビットごとのNOT演算子を使用することもできますブール上:偽〜=真-2と〜= -1。

6.操作の良好な性能
開始ES7からは、調製Math.pow(2、3)よりも速いパワー指数演算子**省略形として使用することができます。これは非常に単純なことですが、多くはないのチュートリアルは、この演算子を更新しているため、それがリストに表示された理由は、あります。

console.log(2 ** 3)。

これは通常、混乱キャレットを表す指標に使用するべきではありませんが、JavaScriptでそれは排他的論理和演算ビット単位です。

ES7前に、塩基として2の電力のみをビット単位の左シフト演算子<<使用して、わずかに存在する

Math.pow(2、N-); 
2 <<(N - 1); 
2 ** N-、
例えば、2 << 16 3 = 2 ** 16 = 4に等しいです。

高速7を整数に浮動小数点
所望の浮動小数点変換整数場合、Math.floor()、Math.ceil()または恐らくMath.round()を使用することができます。(ビット単位のOR演算子)整数に切り捨てフロートします|しかし、使用することができます高速化する方法があります。

console.log(23.9 | ;: 0)// 23結果
-23 :; |結果//はconsole.log(-23.9 0)
の場合は、処理動作に依存正または負であるので、それが唯一の特定の最高です|このショートカットを使用して下。

nが正の場合、nは| 0は効果的に切り捨て。nが負の場合、効果的な上方丸め。より正確には、このアクションは、小数点以下の整数に切り捨てられた浮動小数点を何も削除されます。

〜あなたは、事実上すべてのビットの浮動小数点演算は整数を強制的に、前述したように、同じ丸め効果を得るために使用することができます。一度値が変わらない整数を余儀なくされているため、これらの特別な操作が効率的です。

最後の桁の削除
ビット単位のOR演算子も、整数の任意の数の末尾から削除するために使用されてもよいです。これは、我々がタイプを切り替えるために、このコードを使用する必要がないことを意味します。

STRは、LET "1553" =、
番号(str.substring(0、str.length - 1))。
代わりに、ビット単位のOR演算子を書くことができます

はconsole.log(1553年から1510年を| 0)検索結果を//:155 
はconsole.log(100分の1553を| 0)//結果:15 
にconsole.logを(1000分の1553 | 0 )//結果:. 1 

8.自動バインディング・クラス
私たちはクラスES6の矢印表記でメソッドを使用してもよく、暗黙的にバインドするようにすることですることができます。これは通常、我々喜ん別れ繰り返すことができる表現、例えばthis.myMethod.bind = this.myMethod(本)、コードの私たちのクラスのコンストラクタ数行に保持される

インポート反応、成分が反応{から}; 
エクスポートデフォルトクラス{Compononentは、App拡張
  コンストラクタ(小道具){ 
  スーパー(小道具); 
  this.state = {}; 
  } 
MyMethodは=()=> { 
    //この暗黙的にバインド方法は!
  } 
レンダリング(){ 
    リターン(
      <> 
        <div>の
          { this.myMethod()}  
        </ div>
      </>
  } 
}; 

9.配列は切り捨て
値、スプライスを(使用するよりも速い場合、アレイから削除終了)。

例えば、あなたは元の配列のサイズを知っていれば、次のような再定義し、その長さのプロパティ、缶

レットアレイ= [0 ,. 1,2 ,. 3 ,. 4 ,. 5 ,. 6 ,. 7 ,. 8 ,. 9]; 
であるArray.lengthと4 =; 
にconsole.log(アレイ); //結果:[0 ,. 1,2 ,. 3] 
これは特にエレガントな解決策です。しかし、私はより速く、時間のスライス()メソッドを実行していることがわかりました。速度はあなたの主な目的である場合、検討:

LETアレイ= [0 ,. 1,2 ,. 3 ,. 4 ,. 5 ,. 6 ,. 7 ,. 8 ,. 9]; 
配列Array.slice =(0 ,. 4)
にconsole.log (配列); //結果:[0 ,. 1,2 ,. 3] 
10.最後に、アレイ取得し
、負の整数を受け入れることができ、それが提供される場合、それはアレイの値端部を受け入れるのではなく、()アレイ法スライスを値の配列の始まり。

アレイ= LET [0 ,. 1,2 ,. 3 ,. 4 ,. 5 ,. 6 ,. 7 ,. 8 ,. 9]; 
はconsole.log(Array.slice(-1)); //結果:[9] 
11フォーマッティングコードJSON 
はconsole.log(配列.slice(-2)); //結果 :[8,9]
console.log(array.slice(-3));

最後に、あなたは以前にJSON.stringify使用されていることがありますが、それはまた、あなたのインデントJSONを助けることができることを実現しましたか?

文字列化()メソッドは、2つのオプションのパラメータがあります。代替機能を、そして表示スペースJSONフィルタリングされた値のために使用することができます。

console.log(JSON.stringify({アルファ: 'A'、ベータ'B'}、NULL、 '\ T')); 
//結果:
//「{ 
// "アルファ":A、
// "ベータ「:B 
//} ' 
元ます。https://medium.com/@bretcamer ...

  

おすすめ

転載: www.cnblogs.com/zhangheliang/p/10943018.html