ES6 - 新增2

文章目录

• 一、什么是Promise
• • 实例化Promise对象
  • Promise对象的状态
  • Promise对象的then方法
• 二、集合
• • 集合的属性和方法
  • 遍历集合
  • 交集差集和并集
• 二、Map
• • 属性和方法
• 三、类的使用
• • get和set
• 四、ES6的数值扩展

一、什么是Promise

Promise是ES6引入的异步编程的新解决方案

语法上Promise是一个构造函数。用来封装异步操作并可以获取其成功或失败的结果。

实例化Promise对象

Promise接收一个函数作为参数

这个函数有两个参数，这两个参数的名字一般写为resolve和reject，没有具体要求

conset p = new Promise(function(resolve, reject){
});
           

Promise对象的状态

Promise对象分为三种状态 ：初始化，成功 和 失败

当调用resolve()之后，Promise对象的状态就会变成成功

<script>
    const p = new Promise(function (resolve, reject) {
        setTimeout(() => {
            let data = '数据';
            // p对象的方法的状态变为成功
            resolve(data);
        }, 1000);
    })
</script>
           

Promise对象的then方法

Promise对象的then方法接收两个参数，两个参数都是函数类型的值。

两个参数都分别有一个参数。

Promise对象的状态为成功，则会执行它的第一个参数。

Promise对象的状态为失败，则会执行它的第二个参数。

<script>
    const p = new Promise(function (resolve, reject) {
        setTimeout(() => {
            // let data = '成功的数据';
            // p对象的方法的状态变为成功
            // resolve(data);
            let err = "失败的数据";
            reject(err);
        }, 1000);
    })
    p.then(function (value) {
        console.log(value);  // 成功的数据
    }, function (reason) {
        console.log(reason);  // 失败的数据
    })
</script>
           

二、集合

ES6提供了新的数据结构 Set（集合）

它类似于数组，但成员都是唯一的。

集合实现了iterator接口，所以可以使用for…of进行遍历

<script>
	// 声明一个set
    let s = new Set();
    console.log(s);  // Set(0) {}
    // 传入初始参数，里面接收一个可迭代数据
    let s = new Set([1, 2, 3, 4, 5]);
    console.log(s);  // Set(5) {1, 2, 3, 4, 5}
</script>
           

集合的属性和方法

1. size

   ：返回集合的元素个数

2. add

   ：增加一个新的元素，返回当前集合

3. delete

   ：删除元素，返回boolean值

4. has

   ：检测集合中是否包含某个元素，返回boolean值

<script>
    let s = new Set([1, 2, 3, 4, 5]);
    // 添加新的元素
    s.add(6);
    console.log(s);  // {1, 2, 3, 4, 5, 6}
    // 删除元素
    s.delete(5);
    console.log(s);  // {1, 2, 3, 4, 6}
    // 检测
    console.log(s.has(4)); // true
</script>
           

遍历集合

<script>
    let s = new Set([1, 2, 3, 4, 5]);

    for (let i of s) {
        console.log(i);  //  1 2 3 4 5
    }
</script>
           

交集差集和并集

<script>
        let s1 = new Set([1, 2, 3, 4]);
        let s2 = new Set([3, 4, 5, 6]);
        // 交集
        let sa = [...new Set(s1)].filter(item => new Set(s2).has(item));
        console.log(sa);  // [3, 4]
        // 并集
        let bing = new Set([...new Set(s1), ... new Set(s2)]);
        console.log(bing); { 1, 2, 3, 4, 5, 6 }

        // 差集
        let cha = [...new Set(s1)].filter(item => !(new Set(s2).has(item)));
        console.log(cha);  // [1, 2]
    </script>
           

二、Map

ES6提供了Map数据结构，它类似于对象，也是键值对的集合。

属性和方法

1. size

   ：返回Map的元素个数。

2. set

   ：增加一个新元素，接收两个元素，第一个是键，第二个是值，返回当前Map

3. get

   ：返回键名对象的键值

4. has

   ：检测Map中是否包含某个元素，返回boolean值。

5. clear

   ：清空集合，返回undefined

三、类的使用

<script>
    class Phone {
        constructor(name, price) {
            this.name = name;
            this.price = price;
        }
        call() {
            console.log("打电话");
        }
    }
    const phone = new Phone('小米', 1000);
    console.log(phone.name);  // 小米
    phone.call();  // 打电话
</script>
           

get和set

get方法里面的返回值就是属性的值

<script>
    class Phone {
        get price() {
            console.log("price被调用");
            return 'price';
        }
        set price(newP) {
            console.log("price被修改");
        }
    }
    const phone = new Phone('小米', 1000);
    phone.price;  // price被调用
    console.log(phone.price);  // price
    phone.price = '1200';  // price被修改
</script>
           

四、ES6的数值扩展

• Number.EPSILON

  ：是JavaScript表示的最小精度

• Number.isFinite

  ：检测一个数值是否为有限数

• Number.isNaN

  ：检测一个数值是否为NaN

• Number.parseInt Number.parseFloat

  ：字符串转整数

• Number.isInteger

  ：判断一个数是否为整数

<script>
    console.log(Object.is(NaN, NaN));  // true
    const config1 = {
        host: 'localhost',
        port: 3306,
        name: 'root'
    }
    const config2 = {
        host: 'http://www.baidu.com',
        port: 33060
    }
    console.log(Object.assign(config1, config2));  // host: "http://www.baidu.com"
                                                   // name: "root"
                                                   // port: 33060
</script>