ES6学习笔记（第三天）

ES6学习笔记（第三天）

1.Set

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

//声明一个Set
    let s=Set()
    console.log(s)
   //Set()有自动去重的功能
    let s2=new Set(['a','b','c','a'])
    console.log(s2);//输出{'a','b','c'}一个集合
//Set集合中的属性和方法
    //元素个数
    console.log(s2.size);//3
    //添加元素
    s2.add('d')
    console.log(s2);//{'a','b','c','d'}
    //删除元素
    s2.delete('d')
    console.log(s2);//{'a','b','c'}
    //检测是否有某一元素
    console.log(s2.has('a'));//true
    console.log(s2.has('e'));//false
    //使用for...of
    for(let v of s2){
        console.log(v);//a,b,c
    }
    //清空
    s2.clear()
    console.log(s2);

Set()的使用

let arr=[1,2,3,4,3,2,1];
//数组去重
let result=[...new Set(arr)];//new Set(arr)创建了一个集合{'1','2','3','4'}通过扩展运算符打开并且放在[]就变成了一个数组[1,2,3,4]


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


//并集
let arr3=[...new Set([...arr,...arr2])]
console.log(arr3);//[1,2,3,4,5,6]

//差集——交集的逆运算
let arr2=[1,4,5,6,5,6];
let result2=[...new Set(arr)].filter(item=>{
    let s2=new Set(arr2);//[1,4,5,6]
    if(!s2.has(item)){//item不在s2里面
        return true;
    }else{
        return false;
    }
})
console.log(result2);//[1,4]

2.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()
//Map中的api(也就是方法或属性)
    //添加元素
    //键名，键值
    m.set('name','wwh')
    m.set('change',function(){
        console.log('gaibian');
    })

    console.log(m);
    //查大小    
    console.log(m.size);//2
    //删除属性
    m.delete('name')//删除成功返回true
    console.log(m);
    //获取
    console.log(m.get('change'))
    //for...of 遍历
    for(let v of m){
        console.log(v);//是一个数组，第一个是键，第二个元素是值
    }
    //清空
    m.clear()
    console.log(m);

3.class 类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
知识点：
(1) class 声明类
(2) constructor 定义构造函数初始化，构造函数没有也可以
(3) extends 继承父类
(4) super 调用父级构造方法
(5) static 定义静态方法和属性
(6) 父类方法可以重写

//构一个造类
class Phone {
 //构造方法
    constructor(brand,  price) {
    this.brand = brand;
    this.price = price;
    }
 //对象方法
    call() {
    console.log("打电话");
    }  
}

//实例化对象
let shouji=new Phone('huawei',1999)
console.log(shouji.call);
console.log(shouji);

static 定义静态方法和属性，static属于类但不属于实例对象

class Phone {
    //静态属性,挂载在类对象上面，不是实例化对象上
    static name='shouji'
    static change(){
        console.log('gaibian');
    }
}
//实例化对象
let huawei=new Phone()
console.log(huawei.name);// undefined
console.log(Phone.name);// shouji

类的继承：
extends 继承父类 super 调用父级构造方法

//父类
class Phone {
 //构造方法
    constructor(brand,  price) {
    this.brand = brand;
    this.price = price;
    }
 //对象方法
    call() {
    console.log("打电话");
    }  
}

//子类
//extends 继承父类 
class SmartPhone extends Phone{
    //构造方法
    constructor(brand,price,color){
        //super 调用父级构造方法
        super(brand,price)
        this.color=color
    }
    //子类的成员属性
    send(){
        console.log('发微信');
    }
}
//实例化对象
 let huawei=new SmartPhone('huawei',1314,'heise')
 console.log(huawei);
 huawei.call()//打电话
 huawei.send()//发微信

子类对父类的重写
如果子类和父类有同名的函数，则调用子类里的函数

//父类
class Phone {
 //构造方法
    constructor(brand,  price) {
    this.brand = brand;
    this.price = price;
    }
 //对象方法
    call() {
    console.log("打电话");
    }  
}

//子类
//extends 继承父类 
class SmartPhone extends Phone{
    //构造方法
    constructor(brand,price,color){
        //super 调用父级构造方法
        super(brand,price)
        this.color=color
    }
    //子类的成员属性
    send(){
        console.log('发微信');
    }
    //子类的重写
    call(){
        console.log('打视频电话');
    }
}
//实例化对象
 let huawei=new SmartPhone('huawei',1314,'heise')
 console.log(huawei);
 huawei.call()//输出大视频电话
 huawei.send()//发微信

class里的get和set，可以对对象的属性进行方法的绑定

class Phone {
    get price(){
        console.log('价格属性被读取了');
        return 11
        }
        
        //这里newval是实参，用于输出被修改后的属性值
    set price(newval){
        console.log('价格属性被修改了');
        }
    }

    //实例化对象
    let s=new Phone()
    //一旦获取price这个属性就会调用get price(),且返回值就是这个函数value，不写return默认undefined
    console.log(s.price);//价格属性被读取了
                         // 11
    console.log(s.price='123$');//价格属性被修改了
                                //123$

4.数值扩展

        // 0. Number.EPSILON 是 JavaScript 表示的最小精度
        // EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
        function equal(a, b){
            if(Math.abs(a-b) < Number.EPSILON){
                return true;
            }else{
                return false;
            }
        }
        console.log(0.1 + 0.2 === 0.3);
        console.log(equal(0.1 + 0.2, 0.3))

        // 1. 二进制和八进制
        let b = 0b1010;
        let o = 0o777;
        let d = 100;
        let x = 0xff;
        console.log(x);

        // 2. Number.isFinite  检测一个数值是否为有限数
        console.log(Number.isFinite(100));
        console.log(Number.isFinite(100/0));
        console.log(Number.isFinite(Infinity));
        
        // 3. Number.isNaN 检测一个数值是否为 NaN 
        console.log(Number.isNaN(123)); 

        // 4. Number.parseInt Number.parseFloat字符串转整数
        console.log(Number.parseInt('5211314love'));
        console.log(Number.parseFloat('3.1415926神奇'));

        // 5. Number.isInteger 判断一个数是否为整数
        console.log(Number.isInteger(5));
        console.log(Number.isInteger(2.5));

        // 6. Math.trunc 将数字的小数部分抹掉  
        console.log(Math.trunc(3.5));

        // 7. Math.sign 判断一个数到底为正数 负数 还是零
        console.log(Math.sign(100));
        console.log(Math.sign(0));
        console.log(Math.sign(-20000));

5.对象方法扩展

    //1. Object.is 判断两个值是否完全相等 
        console.log(Object.is(120, 120));// 类似于===，但又不是
        console.log(Object.is(NaN, NaN));// ture
        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'
        }
        //config2覆盖config1，不重合的属性保留，例如test,test2
        console.log(Object.assign(config1, config2));

        //下面这个有点没听懂，回去看一下
        //3. Object.setPrototypeOf 设置原型对象  Object.getPrototypeof
        const school = {
            name: '尚硅谷'
        }
        const cities = {
            xiaoqu: ['北京','上海','深圳']
        }
        Object.setPrototypeOf(school, cities);
        console.log(school);
        //获取
        console.log(Object.getPrototypeOf(school));