ES6の新機能に関する最もよく使われる知識ポイントのまとめ

ES6の新機能に関する最もよく使われる知識ポイントのまとめ

1. キーワード

Let キーワードは、let キーワードが出現するコード ブロック内で有効になります。 let の前では、変数に値を割り当てることはできません。

Const キーワードは読み取り専用変数なので、定義時に値を割り当てる必要があります。

2. 脱構築

変数の構造化解除、

1>。配列構造では、[]を使用して配列のローカル部分に値を割り当てます。

例えば:

[a,,c]=[1,,3]とする

Let[a,…c] ここでcは配列として割り当てられる

2>.オブジェクト構造は、{} を使用してオブジェクトを分解します。これは配列に似ています。違いは、属性の問題がもう 1 つあることです。最も重要なことは、オブジェクト属性には順序がなく、順番に来ることです。

3. 文字列

1>. for of を使用して、文字列の各文字を走査します。

2>. 文字が含まれているかどうかを判断するには、include startswith endwith

3>. パッドスタート。 。 。関数が完了を置き換えるのを待つ

4>. 文字列テンプレートでは、${variable} を使用して文字列に変数を追加できます。 HTMLタグを追加することもできます

5>。値のほとんどは関数の実行、数値かどうかの判定、型変換などに使用されます。

4. 正規化

1>. 2つの用途

1: 正規表現 r = 新しい正規表現 ('マッチングルール', '変更')

2: 正規表現 r=/一致するもの/変更

gyが修飾子である正規表現

2>.sticky プロパティには修飾子がありますか?

フラグはマッチ修飾子を返します

3>. ポストアサーションのサポート

5. 配列

1>。const […a2]=a1を使用して値を直接割り当てることができ、2つの変数を交換することもできます。

2>. 複数の配列を結合するには[]を使用します

3>. 脱構築と組み合わせる

例えば:

[a,…rest]=リスト リストは配列です

6. 機能

1>。パラメータのデフォルト値の使用は、同じ名前のパラメータを持つことはできません

2>. パラメータ値の受け渡しは遅延評価であり、つまりデフォルト値は毎回再計算されます。

3>. 関数の割り当てにはまだ分解を使用できます(オブジェクトの分解に似ていると思います)

7. オブジェクト

es6のオブジェクトはCの元の構造体に似た型を使用しますが、違いはes6のオブジェクト内でメソッドを使用できることです。

例えば:

定数人 = {

  名前: wl;

誕生、

CalTime(){console.log("");}

8.シンボル

1>。これは、定義された変数が誤って書き換えられたり上書きされたりするのを防ぐための追加の定義キーワードと同等です。

2>。主な機能は、マジックストリングを排除することです(個人的な理解:文字列の束が直接出てくるので、それらを変数に変更してコードの可読性を向上させます)

9.集める

1>. 個人的な理解: これは、Java や C# のコレクションに多少似ています。ただ、es6 の特性上、複雑な操作を実装するためのさまざまな関数が存在します。セットは配列に変換でき、いくつかの分解操作を実行できます。

プレフィックスが弱い追加のコレクションがあります(これは、瞬時に消えてしまうものを一時的に保存する場所なので、トラバースできません)

10.Reflectのオブザーバーモードによるプロキシ

Proxy はインターセプト操作であり、Reflect は変数を読み取って変更するリフレクション操作です。

プロキシは変更を監視し、操作を傍受し、値の変更を反映し、最も単純な観察モードを実装します。

11. 約束

2つの関数をコールバックできるコンストラクターです。 (個人的な理解:2つの結果がある状況でより便利であり、異なる状況では異なる関数が呼び出されます)

ArrayBuffer も様々な関数を使って操作するコンストラクタです。個人的には配列の標準化を目的としているように感じます。

12. トラバーサー

トラバーサルは次をシミュレートし、ポインターを最後まで移動します。これまで使っていたC言語やC++言語と違うのは、es6ではプログラムを直接クラッシュさせるのではなく、最後にundefinedを出力することです。

  次へ: 関数() {

         nextIndex < array.length を返します。

        {値: 配列[nextIndex++]、完了: false}:

        {value: undefined, done: true}; // nextIndex を継続的に増加します。つまり、添え字が増加します。

13.ジェネレータ

本質は関数の内部状態を記録して非同期に動作させることです。個人的にはマルチスレッドでもっと活用すべきだと感じています。シングル スレッドでは、アプリケーションの価値は考慮されません。本質的には、yield は操作を一時停止するために使用されます。* を使用すると、関数を yield なしで一時停止された関数に変えることができます。

14.非同期

本質的には、これは Generator の改良された操作です。yield を使用して操作を中断する代わりに、await を使用して操作を実行します。しかし、Generator と異なるのは、異なるものを返す点です。Generator はトラバーサル オブジェクトを返しますが、Promise オブジェクトを返します。

15.クラス

オリジナルの js 言語では、クラス操作は多くのものをカプセル化し、特定のテンプレートを備えています。継承により、読みやすく理解しやすいように、繰り返しのコードの記述も削減されます。モードは厳密モードであり、言語に対してより標準化されています。これは、オブジェクト指向言語のクラスに多少似ています。

16. 修飾語

この記述方法は Java アノテーションに似ていますが、アプローチは異なります。個人的には、Java アノテーションはコードの規制と簡単な変更を目的としていると理解しています。しかし、es6 では、修飾子の本質はコンパイル時に実行される関数です。

17.モウドル

Python が複数のライブラリを導入するのと同じように、静的にコンパイルされたものの一部をモジュール化して、繰り返しの記述を減らします。何かがいくつかのライブラリに導入されると、記述は比較的簡単になります。

  import { stat, exists, readFile } from 'fs'; // import export { firstName, lastName, year }; // 出力

要約する

ES6 の新機能で最もよく使われるナレッジポイントに関するこの記事はこれで終わりです。より関連性の高い ES6 の新機能ナレッジポイントについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。皆様の今後の 123WORDPRESS.COM へのご支援をお待ちしております。

以下もご興味があるかもしれません:
  • ES6の新機能であるModuleの使い方を詳しく解説
  • ClassやExtendsなどのES6の新機能の概念と使用法の分析
  • JavaScript ES6の新機能では、クラスを定義するための新しいメソッドが使用されています。
  • ES6の非常に実用的な新機能の紹介
  • ES6の新機能の概要

<<:  Docker Swarm 外部検証ロードバランシングが機能しない場合の解決策

>>:  JS、CSS スタイルのリファレンスの記述

推薦する

Docker で Nginx イメージ サーバーを構築する方法

序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...

SELinux 入門

カーネル 2.6 の時代には、アクセス制御セキュリティ ポリシーのメカニズムを提供するために新しいセ...

MySQL に IP アドレスを効果的に保存する方法と、文字列 IP と数値を変換する方法の詳細な説明

High Performance MySQL バージョン 3 (セクション 4.1.7) を見ると、...

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル (win10 の場合)

この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...

HTML フォーム送信アクションと URL ジャンプアクションの違い

フォームのアクションは URL ジャンプとは異なります。フォームはバックグラウンドにデータを渡すこと...

CSSの複数条件の書き方の詳細説明:

:not疑似クラスセレクターは、式に一致しない要素をフィルタリングできます。例 テーブル tbod...

MySQL インデックスの最適化: ページング探索の詳細な紹介

目次MySQL インデックス最適化ページングの調査ケース1ケース2 MySQL インデックス最適化ペ...

MySQLの起動と接続方法の例分析

目次mysqldの起動方法方法 1: mysqld方法 2: mysqld_safe方法3: mys...

CSS で画像アダプティブ コンテナを実装するためのサンプル コード

多くの場合、画像をコンテナのサイズに合わせて調整する必要があります。 1. imgタグ方式幅と高さを...

複数のパッケージソースから同時にパッケージをロードするようにnpmを設定する方法

目次1. ローカルストレージを構築する2. npmパッケージを作成し、プライベートリポジトリにアップ...

mysql の not equal to null と equal to null の書き方の詳細説明

1. テーブル構造 2. 表データ 3. クエリのteacher_nameフィールドは空にすることは...

webkit-box-reflect を巧みに使用してさまざまな動的効果を実現する (要約)

かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...

Nginx 7層負荷分散のいくつかのスケジューリングアルゴリズムの簡単な理解

この記事は主に、Nginx 7 層負荷分散のいくつかのスケジューリング アルゴリズムを紹介します。こ...

Vue は Axios リクエスト フロントエンドのクロスドメイン問題をどのように解決するのか

目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...

Vueモバイル端末に最適な適応ソリューションについての簡単な説明

序文: 最近の医療モバイル プロジェクトに基づいて、Vue はさまざまな画面のさまざまな画面サイズに...