あなたが知らないかもしれないJavaScript機能。パート1

この記事では、この言語の微妙さをよりよく理解し、コードを改善するために、いくつかのJavaScriptスキルを共有します。この記事は、主にジュニア開発者と中級の開発者向けですが、少し退屈に感じるかもしれませんが、誰もが歓迎しています。 ？

私の電報チャンネルを購読することを忘れないでください、私はフロントエンド開発に関する興味深い記事を共有します！ ？

start！

デジタルセグメンテーションシンボル

1. 数字では、コードの読みやすさを改善するために

   を使用できます。

_ オプションのチェーンオペレーターを簡素化

と三元コンピューティング文字<code class="language-javascript">const sixBillion = 6000000000; // 难以阅读 const sixBillion2 = 6000_000_000; // 更易于阅读 console.log(sixBillion2); // 6000000000 // 也可用于计算 const sum = 1000 + 6000_000_000; // 6000001000</code>

たとえば、
2. 次のコードを簡素化する必要があります。

   &&オプションのチェーンオペレーターを使用してコードを書き直します：

オプションのチェーン操作により、コードがより簡潔で読みやすくなります。

<code class="language-javascript">const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;</code>

Bigintを使用して大規模な整数計算の問題を解決する

<code class="language-javascript">const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;</code>

残念ながら、JSの

（9007199254740991）のデジタル計算の正確性は保証できず、イライラします。

3. たとえば：

多数を計算するには、BigIntを使用することをお勧めします。これは、計算エラーを回避するのに役立ちます。

Number.MAX_SAFE_INTEGER

オペレーターの代替

<code class="language-javascript">Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992</code>

オブジェクト内の属性を確認するために、通常は

<code class="language-javascript">BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1); // false</code>

オペレーターを使用しますが、

を使用することもできます。

4. どちらも欠点があります：in

プロトタイプ継承の属性を含む、コンピューティング文字チェックの既存の属性。そのプロトタイプの属性ではなく、オブジェクト自体の属性を確認するだけである場合、これは予期しない結果につながる可能性があります。

このメソッドは、プロトタイプの継承の属性を除く、オブジェクト自体の属性のみをチェックします。ただし、オブジェクトがメソッドを書き換えた場合、この方法は正しく機能しません。この場合、呼び出しを呼び出すと、エラーまたは誤った結果が発生する場合があります。 in obj.hasOwnProperty()

これらのメソッドのいずれも、プロトタイプチェーンを介してアクセスできる属性を考慮していません。そのプロトタイプを含むオブジェクトの属性を確認する必要がある場合は、

や

などの他の方法を使用する必要があります。

• 大きなオブジェクトまたはネストされたデータ構造を処理する場合、inおよび
は不便で非効率的である可能性があります。これには、プログラムの実行を遅らせるために複数の検査とメソッドコールが必要になる場合があります。
• obj.hasOwnProperty()簡単な例：hasOwnProperty obj.hasOwnProperty()
より便利でより安全なオペレーターもあります

。

<code class="language-javascript">const sixBillion = 6000000000;

// 难以阅读
const sixBillion2 = 6000_000_000;

// 更易于阅读
console.log(sixBillion2); // 6000000000

// 也可用于计算
const sum = 1000 + 6000_000_000; // 6000001000</code>

5. を使用して、プライベート属性を宣言します#

過去に、フィールドがプライベートであることを示すために、属性名（_）の前に線を追加することに慣れていました。しかし今、私たちはを使用して、実際のプライベート属性を宣言することができます：

#

<code class="language-javascript">const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;</code>

6. の代わりにを使用します

   ?? ||を使用してを置き換えて、運命の左側の値が無効か未定義かを確認し、右側の値を返します。

例：

上記の例では、左変数の値がnullまたは下着されていない場合、

演算子は左側の左変数の値を返します。 ?? それ以外の場合、左変数の値がnullまたは未定義の場合、計算シンボルは右の変数の値を返します。 ||

数字に変換された文字列

<code class="language-javascript">const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;</code>

??多くの開発者は、

関数を使用して文字列を数値に変換しますが、

コンピューティングシンボルを使用して、同じ結果を達成できます

両方の方法は効果的ですが、
7. コンピューティングシンボルはよりシンプルで明確です。

parseInt()を置き換える数字数の簡単な方法

<code class="language-javascript">Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992</code>

関数を使用して数字を下向きに放棄する代わりに、略語として位置の非を使用することをお勧めします。 この記事で説明したすべての手法を使用することはお勧めしません。いくつかの方法はあなたのコードに損害を与えるかもしれませんが、それらを理解することが重要です。

8. この記事を読んでいただきありがとうございます！私はあなたが何か役に立つことを学んだことを願っています。 2番目を楽しみにしています！ ？

以上があなたが知らないかもしれないJavaScript機能。パート1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。