4 で使用できる主な Javascript 機能-jsチュートリアル-php.cn

4 で使用できる主な Javascript 機能

王林

リリース： 2024-08-06 03:20:28

オリジナル

488 人が閲覧しました

Top Javascript Features You Can Use in 4

JavaScript 愛好家の皆さん!この記事では、人気のスクリプト言語 JavaScript の最新かつ優れた機能について説明します。あなたが経験豊富な開発者であっても、コーディングに少しだけ足を踏み入れているだけであっても、これらのアップデートはあなたのエクスペリエンスを確実に向上させます。今日から使い始められる JavaScript のトップ機能を見てみましょう!

1. オプションのチェーニング

null チェックによるプロパティアクセスの長いチェーンはもう必要ありません。オプションのチェーンを使用すると、深くネストされたプロパティに安全にアクセスできます。

const user = { profile: { bio: { name: 'Jane Doe' } } };
console.log(user?.profile?.bio?.name); // Outputs: Jane Doe

ログイン後にコピー

2. ヌル合体演算子

ヌル合体演算子 (??) を使用して、厄介なヌル値または未定義の値を避けてください。左側が null または未定義の場合にのみデフォルト値を設定できます。

const userInput = null;
const username = userInput ?? 'Guest';
console.log(username); // Outputs: Guest

ログイン後にコピー

3. BigInt

JavaScript での大きな整数の処理がかつてないほど簡単になりました。 BigInt を使用すると、Number 型の安全な整数制限を超える数値を扱うことができます。

const bigNumber = 9007199254740991n + 1n;
console.log(bigNumber); // Outputs: 9007199254740992n

ログイン後にコピー

4. 動的インポート

動的インポートを使用して、実行時にモジュールを動的にロードします。これは、ロード時間とリソースの最適化に役立ちます。

if (condition) {
  import('./module.js').then((module) => {
    module.default();
  });
}

ログイン後にコピー

5.Promise.allSettled

複数の Promise を処理し、履行されたか拒否されたかに関係なく、各 Promise の結果を取得します。

const promises = [fetch('/api'), fetch('/other-api')];
Promise.allSettled(promises).then((results) =>
  results.forEach((result) => console.log(result.status))
);

ログイン後にコピー

6. プライベートクラスフィールド

プライベートクラスフィールドを使用して、クラスの内部をプライベートに保ちます。これらはクラス内でのみアクセスできます。

class MyClass {
  #privateField = 42;

  getPrivateField() {
    return this.#privateField;
  }
}

const myInstance = new MyClass();
console.log(myInstance.getPrivateField()); // Outputs: 42

ログイン後にコピー

7. 論理代入演算子

論理演算子と代入を、より短く読みやすい構文で組み合わせます。

let a = 0;
a ||= 1; // a becomes 1 if it's falsy
console.log(a); // Outputs: 1

ログイン後にコピー

8. String.prototype.replaceAll

文字列内のすべての部分文字列を replaceAll で簡単に置き換えます。

const text = 'Hello World! Hello Universe!';
const newText = text.replaceAll('Hello', 'Hi');
console.log(newText); // Outputs: Hi World! Hi Universe!

ログイン後にコピー

9. 弱い参照

オブジェクトへの弱い参照を作成し、オブジェクトがガベージコレクションされるのを防ぎます。

let obj = { data: 'important' };
const weakRef = new WeakRef(obj);
obj = null; // obj can now be garbage-collected

ログイン後にコピー

10. トップレベルの待機

モジュールのトップレベルで await キーワードを使用すると、非同期コードが簡素化されます。

const data = await fetch('/api').then((res) => res.json());
console.log(data);

ログイン後にコピー

まとめ

2024 年は JavaScript 開発者にとって明るい年です。これらの新機能を使用すると、よりクリーンで効率的で読みやすいコードを作成できるようになります。したがって、ツールを更新して、Web 開発におけるこれらの素晴らしいアップデートを試し始めてください。

コーディングを続けて楽しんでください!次回まで、コーディングを楽しんでください。 ?

以上が4 で使用できる主な Javascript 機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。