11種類のほとんどの教程で見つけられないJavaScriptの技術

JavaScriptを勉強し始めた時、私は他の人のコード、code challingウェブサイト及び私が使用している教程以外のどこで発見されたか、時間を節約するためのテクニックをリストに書きました.
この文章の中で、私は11条を共有します.特に役に立つと思います.この文章は初心者のためのものですが、中級JavaScriptの開発者でもこのリストの中に新しいものを見つけてほしいです.
1.一意値をフィルタするSetオブジェクトタイプはES 6に導入され、展開動作...と協力して、新しい配列を作成するために使用できます.この配列は唯一の値しかありません.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

ES 6の前に、唯一の値を分離すると、これよりも多くのコードが含まれます.
この技法は、基本タイプを含む配列に適用される.undefined、null、boolean、string、number、&&.(オブジェクト、関数、または他の配列を含む配列がある場合は、異なる方法が必要です.)
2.与または演算
三項演算子は、簡単な条件文を作成するための迅速な方法です.

x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

ただし、三元演算子を使って処理する場合もあります.逆に、私たちは'||と'または'&&を使用できます. 論理演算子は、より簡潔に表現を書きます.これは一般に「短絡」または「短絡演算」と呼ばれる.
どうやって働いていますか?
二つ以上の選択肢の中の一つだけを返したいと仮定します. を使用すると、第1の条件がtrueの値に戻る.各動作数の計算値が||である場合、最後の計算された式を返します.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0

を使用すると、第1の条件がfalseの値に戻る.各演算数の計算結果がif/elseである場合、最後の計算された式を返します.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null

例1
変数の長さを返したいと仮定しますが、変数の種類は分かりません.foo文を使用して、fooが受け入れ可能なタイプであることを確認することができますが、これは非常に長くなるかもしれません.あるいは運行は私達の操作を簡単にするのを助けてくれます.

return (foo || []).length

変数0がtrueである場合、戻ります.そうでなければ、空の配列の長さを返します.this.state.
例2
ネストオブジェクトの属性にアクセスしたことがありますか?オブジェクトやサブ属性が存在するかどうかはわからないかもしれませんが、これは落胆させるエラーを引き起こす可能性があります.dataでdataという属性にアクセスしたいと仮定しますが、私たちのプログラムが取得要求に成功する前にthis.state.dataを返します. は未定義です
私たちが使用している位置によっては、 'を呼び出して、アプリケーションの動作を停止させることがあります.この問題を解決するために、私達はそれをさらに判断することができます.

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

しかし、これはかなり重複しているようです.Cannot read property xxx of undefined 演算子は、より簡潔な解決策を提供します.

return (this.state.data || 'Fetching Data');

新しい特性:Optional Chining
過去にObject属性チェーンの呼び出しでは、ある属性が存在しないため、その後にoptional chainingのエラーが発生しやすい.
それは  ?. nullというオペレータを追加しました.前の値を先に判断します.  undefined または  undefined、呼び出し、戻りを終了します.  this.state.data?.()例えば、上記の例を  state.あるいは、私達が主にthis.state？.dataに関心を持っているならば. 定義されているかどうかは、.babelrcに戻ります.
この提案は現在第1段階にあり、実験的な機能として機能している.ここで読んでもいいです.あなたは今バーを通じてJavaScriptを使ってもいいです. @babel/plugin-proposal-optional-chainingはあなたのtrueファイルに追加されます.
3.ブール値に変換
従来のブール値falseおよび0に加えて、JavaScriptは他のすべての値を ‘truthy. または***‘falsy’**.
他に定義がない限り、JavaScriptの中のすべての値は「truthy」です.  “”、null、undefined、NaN、false、true、もちろんあります.これらは全部***falsy'*.
負の演算子を使用することにより、falseと+の間で簡単に切り替えることができます.また、タイプを「bollan」に変換します.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"          

4.文字列に変換
すばやく数字を文字列に変換するには、接続演算子""の後にある一連の空の引用符+を使用することができる.

const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

5.数字に変換する
加算演算子+を使用して、逆効果を迅速に実現することができる.

let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

これはまた、次のようにブール値を数値に変換するためにも使用できます.

 console.log(+true);  // Return: 1
 console.log(+false); // Return: 0

あるコンテキストでは、~~は、加算オペレータではなくオペレータを接続すると解釈されるだろう.この場合(浮動小数点ではなく整数を返したい)は、2つの波番号を使用できます.— ( — n — 1) — 1 = n + 1 — 1 = nのために、2つの波を連続して使用して、動作を効果的に否定した.言い換えれば、~—16 15。に等しい

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

多くの用例は思いつかないですが、ビットNOT演算子はブール値にも使えます.~true = -2と~false = -1.
6.より性能の良い演算
ES 7から始まって、指数演算子**がべき乗の簡略として使用されてもよく、これはMath.pow(2, 3)を作成するよりも大きい. もっと速くこれは簡単なものですが、リストに表示されたのは、この操作符を更新した教程があまりないからです.

console.log(2 ** 3); // Result: 8

これは、指数を表すために一般的に用いられる^記号と混同するべきではないが、JavaScriptでは、ビット で演算子が示されている.
ES 7の前には、2を基数とするべき乗のみが簡略化されていて、左シフト演算子<<を使用しています.

Math.pow(2, n);
2 << (n - 1);
2**n;

例えば、2 << 3 = 16は2 ** 4 = 16に等しい.
7.高速浮動小数点の回転整数
浮動小数点を整数に変換することが望ましいなら、Math.floor()、Math.ceil()、またはMath.round()を使用することができる.しかし、もう一つのより速い方法は、|(ビットまたは演算子)を使用して浮動小数点を整数に切り詰めることができる.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

|の挙動は、処理の正数かそれとも負の数かに依存するので、このショートカットは、決定された場合のみ使用することが望ましい.nが正である場合、n | 0は効果的に下に丸められる.nが負数である場合、効果的に上に丸められる.より正確には、この操作は小数点以下の任意の内容を削除し、浮動小数点を整数に切り捨てます.~~を使用して同じ丸め効果を得ることができます.上述したように、実際にはどのオペレータも強制的に浮動小数点が整数となります.これらの特殊な動作が有効なのは、強制的に整数になると値が変わらないからです.
最後の数字を削除 演算子は、整数の最後から任意の数の数字を削除するためにも使用され得る.これは、このようなコードを使ってタイプ間で変換する必要がないということです.

let str = "1553"; 
Number(str.substring(0, str.length - 1));

逆に、ビットまたは演算子によって、このように書くことができます.

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

8.クラスの自動バインディング
クラス法でES 6矢印表現法を使用することができ、このようにすることによって暗黙的に結合することができます.これは通常、私たちのクラスのコンストラクタにコードをいくつか保存します.this.myMethod = this.myMethod.bind(this)などの繰り返し表現に別れを告げることができます.

import React, { Component } from React;
export default class App extends Compononent {
  constructor(props) {
  super(props);
  this.state = {};
  }
myMethod = () => {
    // This method is bound implicitly!
  }
render() {
    return (
      <>
        

          {this.myMethod()}
        
      >
    )
  }
};

9.配列カットオフ
配列の最後から値を削除するには、splice()を使用するよりも早い方法があります.
例えば、元の配列のサイズを知っているなら、length属性を再定義してもいいです.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

これは特に簡潔な解決策である.しかし、私はslice()方法の運行がもっと速いことを発見しました.速度があなたの主な目標であれば、使用を考慮します.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]

10.行列の最後の項目を取得します.
配列法slice()は、負の整数を受け入れることができ、これを提供すると、配列の開始値ではなく、配列の終了値を受け入れることになる.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

11.JSONコードのフォーマット
最後に、あなたは以前にJSON.stringifyを使ったことがありますが、JSONのインデントを助けてくれるということを意識していますか?stringify()方法には、表示されたJSONと1つのスペース値をフィルタリングするために使用できる2つのオプションパラメータがあります.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'