ES6使用方法简介（三）

目录

一、对象的新增特性

1、属性及方法的简洁表示   （key名与value名相同）

2、Object.is()相当于全等     但是有区别   （is是一个静态方法）

3、Object.assign(obj1,obj2,obj3) ：合并对象

4、Object.keys(obj)：将obj的key值返回一个纯数组

5、Object.values(obj)：将obj的value值返回一个纯数组

6、Object.entries(obj)：返回一个二维数组，每一个小数组都是一对[key,value]

二、SET数据结构

1、类似于数组，但是成员唯一，没有索引

2、var set =new Set(x)       （x:数组，类数组，字符串）

3、实现数组去重

4、获取set的长度不是length而是size，可以使用for of于forEach对set进行遍历

5、方法

6、可以使用for of于forEach对set进行遍历

7、set.values()==set.keys() set.entries()

三、Promise

1、基础

2、原理

四、class

1、特点

2、静态方法：使用构造函数（class）调用

3、继承

4、继承原生js的构造函数

5、Object.getPrototypeOf(x)：获取x的父类

---

一、对象的新增特性

1、属性及方法的简洁表示   （key名与value名相同）

  let name = "ce";
    let age = 18;
    //ES5
    var obj1 = {
        name: name,
        age: age,
        run: function() {
            console.log("快速跑!")
        }
    }
    console.log(obj1);
    obj1.run();
    
    //ES6
    var obj2 = {
        name,
        age,
        run() {
            console.log("快速跑!")
        }
    }
   
    console.log(obj2);
    obj2.run();

运行结果：

2、Object.is()相当于全等     但是有区别   （is是一个静态方法）

（1）Object.is(1,2)

（2）Object.is(NaN,NaN)

（3）Object.is(0,-0)

    console.log(Object.is(1,2));
    console.log(1 == 2);

    console.log(Object.is(NaN,NaN));
    console.log(NaN == NaN);

    console.log(Object.is(0,-0));
    console.log(0 == -0);

运行结果：

3、Object.assign(obj1,obj2,obj3) ：合并对象

    let  obj1 = {
        a:[1,2,3]
    };
    let  obj2 = {
        b:[4,5,6]
    };
    let  obj3 = {
        c:[7,8,9],
        
    };

    var obj = Object.assign(obj1,obj2,obj3);
    console.log(obj);

运行结果：

4、Object.keys(obj)：将obj的key值返回一个纯数组

   let  obj = {
        a: 1,
        b: 2,
        c: 3
    }
    console.log(Object.keys(obj));

运行结果：

5、Object.values(obj)：将obj的value值返回一个纯数组

    let  obj = {
        a: 1,
        b: 2,
        c: 3
    }
    console.log(Object.values(obj));

运行结果：

6、Object.entries(obj)：返回一个二维数组，每一个小数组都是一对[key,value]

   let  obj = {
        a: 1,
        b: 2,
        c: 3
    }
    console.log(Object.entries(obj));

 运行结果：

二、SET数据结构

1、类似于数组，但是成员唯一，没有索引

2、var set =new Set(x)       （x:数组，类数组，字符串）

3、实现数组去重

    let arr=[1,4,3,1,6,7,8,3,4,7,1,6];
    let set=new Set(arr);
    console.log(set);
    
    // let newArr=[...set];
    let newArr=Array.from(set);
    console.log(newArr);

运行结果：

4、获取set的长度不是length而是size，可以使用for of于forEach对set进行遍历

5、方法

（1）add(x)：添加某个值，返回set结构本身

（2）delete(x)：删除某个值，返回一个布尔值，表示删除是否成功

（3）has(x)：验证是否存在，返回布尔值，表示该值是否为Set的成员

（4）clear（）：不需要参数，清除所有成员，无返回值

注意：x不是索引，而是set中具体的值

    var  web = new  Set();
    // 添加值
    web.add('a').add('b').add('c').add('d');
    console.log(web);
    // 删除值
    web.delete('d');
    console.log(web);
    // 是否存在某个值
    console.log(web.has('c'));
    // 清空
    console.log(web.clear());

运行结果：

6、可以使用for of于forEach对set进行遍历

 // 遍历set
    var  study = new Set(['s','t','u','d','y']);
    study.forEach(value => {
        console.log(value);
    })

运行结果：
 

7、set.values()==set.keys() set.entries()

    var  study = new Set(['s','t','u','d','y']);
    console.log(study.keys());
    console.log(study.values());
    console.log(study.entries());

运行结果：

三、Promise

1、基础

（1）js是单线程的语言，所以很多操作都是异步操作，而异步操作多由回调函数完成这里面就会           引出一个现象“回调地狱”即回调函数中有回调函数，这种现象会导致代码的可读性降低，为了         解决这个问题我们选择使用Promise

（2）作用：防止出现回调地狱，提高代码的可读性，像同步操作那样去执行异步操作

   let pro = new Promise(function (resolve, reject) {
        console.log("start");
        resolve("okok");
        console.log("end")
    });
    pro.then(function (data) {
        console.log(data);
    })

运行结果：

（3）必须接受一个函数作为参数，俩个参数名不是自定义的，是必须这么写的

2、原理

（1）一个promise对象就代表也给异步操作，通过状态去管理异步操作

（2）状态

   <1>pending：执行中

   <2>fulfilled：完成，也就是执行了resolve()

   <3>rejected：失败，reject()执行

（3）常见写法 （放到function中使用）

function  timeOut(){
   let   randNum = Math.random()*2；
   console.log(randNum);
   return   new   Promise(function(resolve,reject){
      setTimeout(function(){
         if(randNum > 1){
            resolve();
          }else{
                reject();
            }
         },randNum*1000);
      });
}
timeOut().then(function(){
   console,log("ok");
},function(){
   console.log("no")
});

运行结果：

四、class

   // ES5
    function Point(x, y) {
        this.x = x;
        this.y = y
    }
    Point.prototype.toString = function () { }
    var p = new Point(100, 100);
    console.log(p);

    // ES6
    class Point1 {
        constructor(x, y) {
            //构造函数
            this.x = x;
            this.y = y
        }
        toString() { }
    }
    let p1 = new Point1(100, 100)
    console.log(p1);

运行结果：

1、特点

（1）必须包含在constructor

（2）属性添加到constructor中

（3）class的本质仍然是构造函数

（4）this指向class的实例

2、静态方法：使用构造函数（class）调用

class   Point{
   constructor(x,y){
      //构造函数
      this.x = x;
      this.y = y;
   }
   static   toString(){
      //静态方法
   }
}

3、继承

 class Ball {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        getX() {
            console.log(this.x);
        }
        getY(){
        console.log(this.y);
        }
    }

    class ColorBall extends Ball {
        constructor(x, y, color) {
            super(x, y);  //如果子类需要constructor,需要执行super把父类的constructor再执行一遍
            this.color = color;
        }
        getX() {
            //如果与父类同名 那么会覆盖父级方法
            console.log(this.x * 2);
        }
        getColor() {
            console.log(this.color);
        }
    }
   
    var ball = new ColorBall(100,100,'gold');
    ball.getX();
    ball.getY();
    ball.getColor();

运行结果：

4、继承原生js的构造函数

  class MyArray extends Array { }
    let arr = new MyArray(1,2,3);
    console.log(arr);

运行结果：

5、Object.getPrototypeOf(x)：获取x的父类

  function Person() {
        this.method1 = function () { alert(1) }
    }
    Person.prototype.method2 = function () { alert(2); }

    function Man() {
        this.m1 = function () {
            Object.getPrototypeOf(this).method1();
        }
    }
    Man.prototype = new Person();   //原型继承

    Man.prototype.m2 = function () {
        Object.getPrototypeOf(this).method2();
    }


    var man = new Man();
    man.m1();
    man.m2();

运行结果：