ES6知识点(2)

相关视频链接:尚硅谷Web前端ES6教程,涵盖ES6-ES11_哔哩哔哩_bilibili

目录

2.12 Promise

2.13. Set

2.14  Map

2.15. class 类

2.16. 数值扩展

2.16.1. 二进制和八进制

2.16.2. Number.isFinite() 与 与 Number.isNaN()

2.16.3. Number.parseInt() 与 与 Number.parseFloat()

2.16.4. Math.trunc

2.16.5. Number.isInteger

2.16.6 Math.sign 判断一个数到底为正数 负数 还是零

2.17. 对象扩展


2.12 Promise

        Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果。
1) Promise 构造函数: Promise (excutor) {}
2) Promise.prototype.then 方法
3) Promise.prototype.catch 方法

   <script>
        //实例化 Promise 对象
        const p = new Promise(function(resolve, reject){
            setTimeout(function(){
                //
                // let data = '数据库中的用户数据';
                // resolve
                // resolve(data);

                let err = '数据读取失败';
                reject(err);
            }, 1000);
        });
        
        //调用 promise 对象的 then 方法
        //若读取成功,则调用第一个函数,失败则调用第二个函数
        p.then(function(value){
            console.log(value);
        }, function(reason){
            console.error(reason);
        })
    </script>

Promise.prototype.then 方法

    <script>
        //创建 promise 对象
        const p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve('用户数据');
                // reject('出错啦');
            }, 1000)
        });

        //调用 then 方法  then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
        //1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值

        // const result = p.then(value => {
        //     console.log(value);
        //     //1. 非 promise 类型的属性
        //     // return 'iloveyou';
        //     //2. 是 promise 对象
        //     // return new Promise((resolve, reject)=>{
        //     //     // resolve('ok');
        //     //     reject('error');
        //     // });
        //     //3. 抛出错误
        //     // throw new Error('出错啦!');
        //     throw '出错啦!';
        // }, reason=>{
        //     console.warn(reason);
        // });

        //链式调用
        p.then(value=>{

        }).then(value=>{

        });

Promise.prototype.catch 方法 

<script>
        const p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                //设置 p 对象的状态为失败, 并设置失败的值
                reject("出错啦!");
            }, 1000)
        });

        // p.then(function(value){}, function(reason){
        //     console.error(reason);
        // });

        p.catch(function(reason){
            console.warn(reason);
        });
</script>

2.13. Set


        ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯一的,集合实现了 iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历,集合的属性和方法:
1) size 返回集合的元素个数
2) add 增加一个新元素,返回当前集合
3) delete 删除元素,返回 boolean 值
4) has 检测集合中是否包含某个元素,返回 boolean 值
5) clear 清空集合,返回 undefined

    <script>
        //声明一个 set
        let s = new Set();
        let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);

        //元素个数
        // console.log(s2.size);  //运行结果:4
        //添加新的元素
        // s2.add('喜事儿');     //'大事儿','小事儿','好事儿','坏事儿','小事儿','喜事儿'
        //删除元素
        // s2.delete('坏事儿');   //'大事儿','小事儿','好事儿','小事儿'
        //检测
        // console.log(s2.has('糟心事'));  //false,有这个元素返回true,没有返回false
        //清空
        // s2.clear();  //清空s2中的内容
        // console.log(s2);

        for(let v of s2){
            console.log(v);   //遍历s2
        }
        
    </script>

                set集合实践


        let arr = [1,2,3,4,5,4,3,2,1];
        //1. 数组去重
        // let result = [...new Set(arr)];
        // console.log(result);
        //2. 交集
        let arr2 = [4,5,6,5,6];
        // let result = [...new Set(arr)].filter(item => {
        //     let s2 = new Set(arr2);// 4 5 6
        //     if(s2.has(item)){
        //         return true;
        //     }else{
        //         return false;
        //     }
        // });
        // let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
        // console.log(result);

        //3. 并集
        // let union = [...new Set([...arr, ...arr2])];
        // console.log(union);

        //4. 差集
        let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
        console.log(diff);

has(),fliter()的用法

链接:js中的find(),filter(),has()的用法和区别_努力_才幸福的博客-CSDN博客_js的has函数

2.14  Map

        ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map 也实现了iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历。

Map 的属性和方法:
1) size 返回 Map 的元素个数
2) set 增加一个新元素,返回当前 Map
3) get 返回键名对象的键值
4) has 检测 Map 中是否包含某个元素,返回 boolean 值
5) clear 清空集合,返回 undefined

        //声明 Map
        let m = new Map();

        //添加元素
        m.set('name', '尚硅谷'); //第一个是键,第二个是值
        m.set('change', function() {
            console.log("我们可以改变你!!");
        });
        let key = {
            school: 'ATGUIGU'
        };
        m.set(key, ['北京', '上海', '深圳']); //添加元素

        //size,元素个数
        // console.log(m.size);

        //删除
        // m.delete('name');

        //获取
        // console.log(m.get('change'));
        // console.log(m.get(key));

        //清空
        // m.clear();

        //遍历
        for (let v of m) {
            console.log(v);
        }

        // console.log(m);

2.15. class 类


        ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过 class 关键字,可以定义类。基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

知识点:
1) class 声明类
2) constructor 定义构造函数初始化

        //ES5
        function Phone(brand, price){
            this.brand = brand;
            this.price = price;
        }

        //添加方法
        Phone.prototype.call = function(){
            console.log("我可以打电话!!");
        }

        //实例化对象
        let Huawei = new Phone('华为', 5999);
        Huawei.call();
        console.log(Huawei);
            


        //ES6        

        //class
        class Shouji{
            //构造方法 名字不能修改
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }

            //方法必须使用该语法, 不能使用 ES5 的对象完整形式
            call(){
                console.log("我可以打电话!!");
            }
        }

        let onePlus = new Shouji("1+", 1999);

        console.log(onePlus);


3) extends 继承父类
4) super 调用父级构造方法
5) static 定义静态方法和属性

         function Phone(){

         }
         Phone.name = '手机';    
           
         Phone.change = function(){
             console.log("我可以改变世界");  
         }
    
         let nokia = new Phone();

         console.log(nokia.name);
         nokia.change();
     

以上写法会报错

 name,change属于Phone这个函数对象,不属于nokia这个实例对象

下面的为正确写法

       class Phone{
            //静态属性
            static name = '手机';
            static change(){
                console.log("我可以改变世界");
            }
        }

        let nokia = new Phone();
        console.log(nokia.name);  //undefined
        console.log(Phone.name);    //手机


6) 父类方法可以重写

综合:

// 父类
class Phone {
// 构造方法
    constructor(brand, color, price) {
        this.brand = brand;
        this.color = color;
        this.price = price;
    }
// 对象方法
    call() {
        console.log('我可以打电话!!!')
    }
}
// 子类
class SmartPhone extends Phone {
    constructor(brand, color, price, screen, pixel) {
        super(brand, color, price);
        this.screen = screen;
        this.pixel = pixel;
    }
// 子类方法
    photo(){
        console.log('我可以拍照!!');
    }
    playGame(){
        console.log('我可以玩游戏!!');
    }
// 方法重写
    call(){
        console.log('我可以进行视频通话!!');
    }
// 静态方法
    static run(){
        console.log('我可以运行程序')
    }
    static connect(){
        console.log('我可以建立连接')
    }
}

补充:

class中get与set的用法

        class Phone{
            //小括号里的为形参,{ }里的为实参
            get price(){
                console.log("价格属性被读取了");
                return 'iloveyou';
            }
            // set后面的小括号里必须有一个形参
            set price(newVal){
                console.log('价格属性被修改了');
            }
        }

        //实例化对象
        let s = new Phone();

        // console.log(s.price);
        s.price = 'free';

2.16. 数值扩展

Number.EPSILON是JavaScript表示的最小精度

 function equal(a, b){
            if(Math.abs(a-b) < Number.EPSILON){
                return true;
            }else{
                return false;
            }
        }
        console.log(0.1 + 0.2 === 0.3);        //false
        console.log(equal(0.1 + 0.2, 0.3));    //true
}

2.16.1. 二进制和八进制

ES6 提供了二进制和八进制数值的新的写法,分别用前缀 0b 和 0o 表示。

        let b = 0b1010;  //10
        let o = 0o777;   //511
        let d = 100;     //100
        let x = 0xff;    //255
        console.log(x);

2.16.2. Number.isFinite() 与 与 Number.isNaN()

Number.isFinite() 用来检查一个数值是否为有限的

        console.log(Number.isFinite(100));  //true
        console.log(Number.isFinite(100/0));  //false
        console.log(Number.isFinite(Infinity)); //false

Number.isNaN() 用来检查一个值是否为 NaN


2.16.3. Number.parseInt() 与 与 Number.parseFloat()

ES6 将全局方法 parseInt 和 parseFloat,移植到 Number 对象上面,使用不变。

        console.log(Number.parseInt('5211314love')); //5211314
        console.log(Number.parseFloat('3.1415926神奇'));  //3.1415926


2.16.4. Math.trunc

用于去除一个数的小数部分,返回整数部分

        console.log(Math.trunc(3.5)); //3

2.16.5. Number.isInteger

Number.isInteger() 用来判断一个数值是否为整数

        console.log(Number.isInteger(5));  //true
        console.log(Number.isInteger(2.5));  //false

2.16.6 Math.sign 判断一个数到底为正数 负数 还是零

        console.log(Math.sign(100)); //1

        console.log(Math.sign(0));  //0

        console.log(Math.sign(-20000));  //-1

2.17. 对象扩展

ES6 新增了一些 Object 对象的方法
1) Object.is 比较两个值是否严格相等,与『===』行为基本一致(+0 与 NaN)

        console.log(Object.is(120, 120));// true 
        console.log(Object.is(NaN, NaN));// true
        console.log(NaN === NaN);// false

2) Object.assign 对象的合并,将源对象的所有可枚举属性,复制到目标对象

        const config1 = {
            host: 'localhost',
            port: 3306,
            name: 'root',
            pass: 'root',
            test: 'test'
        };
        const config2 = {
            host: 'http://atguigu.com',
            port: 33060,
            name: 'atguigu.com',
            pass: 'iloveyou',
            test2: 'test2'
        }
        console.log(Object.assign(config1, config2));


        //结果:
        //host: 'http://atguigu.com',
        //port: 33060,
        //name: 'atguigu.com',
        //pass: 'iloveyou',
        //test: 'test',
        //test2: 'test2'

3) __proto__、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型

        const school = {
            name: '尚硅谷'
        }
        const cities = {
            xiaoqu: ['北京','上海','深圳']
        }
        Object.setPrototypeOf(school, cities);
        console.log(Object.getPrototypeOf(school));
        console.log(school);

猜你喜欢

转载自blog.csdn.net/woai_mihoutao/article/details/123888955