ES6 の Set、Map、Promise、および Class 構文

8つのセットとマップ

1>セット

ES6 は新しいデータ構造 Set を提供します。配列に似ていますが、メンバーの値はすべて一意であり重複する値はありません

Set 自体は、Set データ構造を生成するために使用されるコンストラクターです。

        const set = new Set();
        // 向set中添加数据
        set.add(10);
        set.add(10);
        set.add(20);
        console.log("set:", set); // set: Set(2) {10, 20}
        const arr = Array.of(10, 10, 20);
        console.log("arr:", arr); // arr: (3) [10, 10, 20]
        // 利用set可以对数组进行去重,将一个数组转换成set
        const set2 = new Set(arr);
        console.log("set2:", set2); // set2: Set(2) {10, 20}
        
		// set集合在遍历时,使用for--of
        for (let i of set2) {
    
    
            console.log(i); // 10 20
        }

        // 字符串本身也是数组
        const set3 = new Set("ababcdesa");
        console.log(set3); // Set(6) {'a', 'b', 'c', 'd', 'e', …}
        // 将set变成数组
        const arr1 = [...set3];
        console.log("arr1:", arr1); // arr1: (6) ['a', 'b', 'c', 'd', 'e', 's']
        // 使用数组的join方法,进行拼接
        console.log(arr1.join('')); // abcdes

2>地図

JavaScript オブジェクト (Object) は本質的にキーと値のペア (ハッシュ構造) のコレクションですが、従来は文字列のみをキーとして使用できました。この問題を解決するために、ES6 は Map データ構造を提供します。オブジェクトと似ており、キーと値のペアの集合でもありますが、「キー」の範囲は文字列に限定されず、さまざまな種類の値(オブジェクトを含む)をキーとして使用できます。

        const map = new Map();
        // 向map种添加数据
        map.set('name', '旺财');
        map.set('age', 5);
        // 不允许存在重复的key
        map.set("name", "旺财2");
        console.log("map:", map); // Map(2) {'name' => '旺财2', 'age' => 5}
        // 通过key获取值
        const value = map.get("name");
        console.log(value); // 旺财2
        // clear():清除map中的所有元素
        //map.clear();
        // 获取map中元素的个数 size
        console.log(map.size); // 2
        // has方法:判断map中是否存在指定的key
        console.log(map.has('age1')); // false

マップを移動します。

        // 1. forEach遍历 map,获取到的是遍历的值
        map.forEach(item => {
    
    
            console.log(`item:${
      
      item}`); // item:旺财2 item: 5
        });
        // 2. 获取map中所有的key: map.keys()
        for (let key of map.keys()) {
    
    
            console.log(`${
      
      key}1--->${
      
      map.get(key)}`); // name1--->旺财2 age1--->5

        }
        // 3. 获取map中所有的entries: map.entries()
        for (let [key, value] of map.entries()) {
    
    
            console.log(`${
      
      key}2--->${
      
      value}`); // name2--->旺财2 age2--->5
        }
        // map的键可以是任意类型
        map.set(false, "小明");
        console.log(map); // Map(3) {'name' => '旺财2', 'age' => 5, false => '小明'}

シンボル: ES6 では、一意の値を表す新しいプリミティブ データ型シンボルが導入されています。

        const a = Symbol();
        const b = Symbol();
        console.log(a === b); // false

        map.set(Symbol(), "abc");
        map.set(Symbol(), "def");
        console.log("map:", map);

        //  Symbol作为键是否可以遍历出来?是。
        for (let item of map) {
    
    
            console.log("item", item);
        }

        // 让创建的symbol为同一个值
        const d = Symbol.for('a');
        const e = Symbol.for('a');
        console.log(d === e); // true

9種類の文法

        // 类就是自定义构造函数
        // function Dog(name, type) {
    
    
        //     this.name = name;
        //     this.type = type;
        // }

        // // 方法:定义在所属构造函数的原型上
        // Dog.prototype.show = function () {
    
    
        //     console.log(this.name + "----" + this.type);
        // }

        // 使用es6提供的类语法 ,使用class关键字。抽象的概念
        class Dog {
    
    
            // 构造函数,创建对象
            constructor(name, type) {
    
    
                this.name = name;
                this.type = type;
            }
            // 方法,定义在原型上的
            show() {
    
    
                console.log(this.name + "----" + this.type);
            }
            say() {
    
    
                console.log("Hello World1");
            }

            // 静态方法: 该方法不属于具体实例,而是归类所有,通过类名去调用.在方法之前加上static,(就表示该方法不会被实例继承,而是直接通过类来调用)
            static say2() {
    
    
                console.log("我是一个静态方法");
            }

        }
        // 静态属性:该属性不属于具体实例,而是归类所有,通过类名去调用.
        Dog.color = "red";

        const dog = new Dog("旺财", "泰迪");
        dog.show();
        const dog2 = new Dog("小虎", "藏獒");
        dog2.show();
        console.log(dog.show === dog2.show);

        console.log(typeof Dog); // function
        console.log(Dog.prototype); // object
        console.log(dog.__proto__ === Dog.prototype) // true

        // 调用静态方法
        Dog.say2(); // 我是一个静态方法
        // 调用静态属性
        console.log(Dog.color); // red

10の約束

Promise は、コールバック関数やイベントといった従来のソリューションよりも論理的で強力な非同期プログラミングのソリューションです。

多層コールバック関数が相互に入れ子になると、コールバック地獄が形成されます。多数のコードが入れ子になっていて読みにくく、結合が強すぎて維持が難しいため、地域コールバックの問題を解決するために Promise が提案されています。

Promise の非同期操作の結果は、resolveおよび拒否コールバック関数を呼び出すことで処理できます。

solve は成功したコールバックの結果を表し、reject は失敗したコールバックの結果を表します。

  • Promise はコンストラクターです
    • Promise のインスタンスを作成できますconst p = new Promise()
    • 非同期操作を表す new からの Promise インスタンス オブジェクト
  • Promise.prototype には .then() メソッドが含まれています
    • 新しい Promise() コンストラクターごとに取得されたインスタンス オブジェクトは、プロトタイプ チェーンを通じて .then() メソッドにアクセスできます。例: p.then()
  • .then() メソッドは、成功および失敗のコールバック関数を事前に指定するために使用されます。
    • p.then(成功の場合はコールバック関数、失敗の場合はコールバック関数)
    • .then() メソッドを呼び出す場合、成功時のコールバック関数は必須であり、失敗時のコールバック関数はオプションです。

Promise チェーン操作でエラーが発生した場合は、Promise.prototype.catchメソッドを使用してそれをキャプチャして処理できます。前のエラーによって後続の .then が正常に実行されなくなることを望まない場合は、次のように呼び出すことができます。 .catch を事前に取得してください。

おすすめ

転載: blog.csdn.net/weixin_54026054/article/details/129215707