11のJavaScriptテクニック

7078 ワード

転載元:https://blog.zzonn.com/2020/05/16/11%E4%B8%AAJavaScript%E5%B0%8F%E6%8A%80%E5%B7%A7/
共有11の日常教程ではあまり言及されていないJavaScriptの小技术は、彼らはしばしば私たちの日常の仕事の中で现れますが、また简単に见落とされます.
一意値をフィルタSetタイプはES6において追加されたもので、配列と同様であるが、メンバの値は全て一意であり、重複した値はない.
拡張演算子と結合して新しい配列を作成できます.フィルタリング元の行列の繰返し値に達する機能があります.

const array = [1, 2, 3, 3, 5, 5, 1];
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // [1, 2, 3, 5]

ES 6の前に、この機能を実現するためには、必要な処理コードがたくさんあります.
この技法の適用範囲は、配列内の数値の種類です.undefined、 null、 boolean、 string、 numberobjectを包含するとき、 function、 arrayの場合は、適用されません.
ショートシーク(Shot-Circuit Everaluation)
三つの演算子は簡単な論理文を素早く書くのに便利です.

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

しかし、論理が複雑になると、三目演算子の本を書くと可読性が難しくなります.
このとき、論理と論理または演算子を使って表現を書き換えることができます.
論理和論理またはオペレータは、常にその動作数を先に計算し、左の操作数だけの値が論理式の結果を判断できない場合にのみ、その右の動作数を解くことができる.
これは「ショートシーク」と呼ばれています.
仕事の原理
演算子は、最初のfalse/‘falsy’の値を返します.
すべての動作数がtrueである場合、最後の表現の結果が返されます.

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

console.log(0 && null); // Result: 0

または演算子は、最初のtrue/‘truthy’の値を返します.
すべての動作数がfalseである場合、最後の表現の結果が返されます.

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

console.log(0 || null); // Result: null

シーン例
サーバからデータを要求する間、他の場所でこのデータを使用しますが、データを取得した状態は分かりません.例えば、this.stateのdata属性にアクセスします.
従来の方法では、このthis.state.dataの有効性を先に判断し、その後、有効性に応じてそれぞれ区別処理を行う.

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

しかし、上記の方法でこの論理処理を簡単に書くことができます.

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

この方式がより簡潔で便利であることが分かりました.
Booleanタイプを変換
一般的なブックタイプの値はわずかです. true 和 falseですが、JavaScriptでは他の値を ‘truthy’ または ‘falsy’です0を除き、 “”、 null、 undefined、 NaN 和 false、他のものは全部‘truthy’と考えられます.
負の演算子！を介して一連の変数を「bollan」型に変換することができます.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;

console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"

Steringタイプに変換+を介して演算子に接続して、numberタイプの変数をstringタイプに変換することができます.

const val = 1 + "";

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

Numberタイプを変換
上記に対応して、一つのストリング型の変数を加算演算子+によってnumber型に戻すことができます.

let int = "15";
int = +int;

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

あるコンテキストでは、+は、加算オペレータではなくオペレータを接続すると解釈されるだろう.
この場合には(浮動小数点ではなく整数を返したいです.)2つの波番号を使ってもいいです.(英語の書式に注意が必要です.)
一つの波番号~~は、「ビット別演算子」と呼ばれ、これと同等である. ~.- n - 1.
2つの~15 = -16を使用して、効果的に否定演算が可能である.
なぜなら ~~.つまり- (- n - 1) - 1 = n + 1 - 1 = n

const int = ~~"15"

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

高速べき乗~-16 = 15から始まります.べき乗演算子を使うことができます. ES7 べき乗の略字として、前の**に対してもっと早いです
これは簡単で実用的な点ですが、ほとんどの教程は特に紹介してくれません.

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

これは Math.pow(2, 3) 符号が混淆されています. 記号は通常指数を表すために用いられるが、JavaScriptではビットXOR演算子である.
ES 7の前に、べき乗の簡略化は主にビット左シフト操作子に依存しています. ^、いくつかの書き方の違い.

//           

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

その中で注意したいのは ^速くFloatからIntegerに転送します.
私たちは普段<<を使用して2 << 3 = 16 2 ** 4 = 16タイプをMath.floor(), Math.ceil() Math.round()タイプに変換することができます.
しかし、もう一つのより速い方法は、floatを使用して浮動小数点を整数に切り詰めることができる.

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

integer の挙動は正か負かによって決まりますので、このショートカットは決定された場合だけ使用したほうがいいです.
nが正数なら、 |( ) 効果的に切り下げます.
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

クラスで自動バインディング
クラスではES 6で増加した矢印関数を使用することにより、コンタクトバインディングの役割領域を実現することができます.
前の処理に従って、私達は明示的に私達のために書く方法をバインディングする必要があります. n | 0です
私たちのクラスに多くの方法があると、多くのバインディングコードの書き込みが増加します.
このプロセスは矢印関数によって簡単にすることができます.

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

切り取り行列
配列の最後から値を削除するには、~~を使用するよりも早い代替方法があります.
例えば、元の配列の長さを知っているなら、そのthis.myMethod = this.myMethod.bind(this)属性を再定義することによって、切り取りを実施することができる.

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]

配列の最後の要素を取得します.
配列方法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]

フォーマットJSONコード
いくつかのJSON関連の処理を処理する時、splice()に多く使われるかもしれませんが、JSONのインデントを助けることができるということを意識していますか?length方法は、2つのオプションパラメータを受け入れる.一つのJSON.stringify関数と一つのstringify()値、replacer関数は、表示されたJSONをフィルタリングするために用いることができる.space値は、必要なスペース数または1つの文字列(replacerなどのタブを挿入する)を表す整数を受け取り、取得したJSONデータを読みやすくすることができる.

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

// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

タイプについて