ES6 面向对象 promise

Posted zhtian

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6 面向对象 promise相关的知识，希望对你有一定的参考价值。

1. 变量/赋值

  • var 可以重复定义、不能限制修改、没有块级作用域
  • let 不能重复定义， 变量，块级作用域

  • const 不能重复定义， 常量，块级作用域

  • 结构赋值
    • 数组解构赋值
    • 对象解构赋值

2. 函数

  • 箭头函数
 function(参数,参数){
  //  函数体
}
(参数, 参数)=>{
  // 函数体
}
  let arr=[12,5,88,34,32,19];

  /*arr.sort(function (n1, n2){
    return n1-n2;
  });*/
  arr.sort((n1, n2)=>{
    return n1-n2;
  });

  alert(arr);// 5,12,19,32,34,88
  // 1.有且仅有1个参数，()可以省去
  arr.sort((n1, n2)=>n1-n2);
  // 2.如果函数体只有一句话，而且是return，{}可以省
  /*let show=function (a){
        return a*3;
      };*/
      let show=a=>a*3;

      alert(show(13));

注意
箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。

  • 函数参数的默认参数
  /*function show(a, b, c){
      b=b||5;
      c=c||12;

      console.log(a,b,c);
    }*/
  let show=(a, b=37, c=12)=>{
      console.log(a,b,c);
    }

  show(12, 37);// 12 37 12
  • 参数展开(剩余参数， 数组展开)
  1. ‘...‘的第一个用途： 接收剩余参数
    function show(a, b, ...名字)剩余参数必须在参数列表的最后
  2. ‘...‘的第二个用途：展开一个数组
 let show=(a, b, ...args) =>{
      console.log(a, b, args);
    }
    show(1,2,3,4,5,6,7,8) // 1 2  [3, 4, 5, 6, 7, 8]

 let arr = [1,2,3];
    arr.push(4,5,6);
    // alert(arr) // 1,2,3,4,5,6
    let arr1 = [1,2,3];
    let arr2 = [4,5,6];
    arr1.push(...arr2)
    alert(arr1) // 1,2,3,4,5,6


     function show1(...args){
      show2(...args);
    }

    function show2(a, b){
      alert(a+‘,‘+b);
    }

    show1(12, 5);

  • rest 参数

    rest 参数（形式为...变量名）
    获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

  // arguments变量的写法
  function sortNumbers() {
    return Array.prototype.slice.call(arguments).sort();
  }

  // rest参数的写法
  const sortNumbers = (...numbers) => numbers.sort();
  // arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。
  // rest 参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。下面是一个利用 rest 参数改写数组push方法的例子。

  function push(array, ...items) {
      items.forEach(function(item) {
        array.push(item);
        console.log(item);
      });
    }

    var a = [];
    push(a, 1, 2, 3)

3.数组/json

数组--5种

  • map 映射： 一个对一个
  • filter 过滤
  • forEach 遍历
  • reduce 汇总

  • Array.from([array-like])=>[x,x,x]

    let aDiv=document.getElementsByTagName(‘div‘)获取到的一个是一个array-like,可以使用from()方法转为Array
    map

    let arr=[62, 55, 82, 37, 26];

    /*let arr2=arr.map(function (item){
      if(item>=60){
        return true;
      }else{
        return false;
      }
    });*/
    /*
    let arr2=arr.map(item=>{
        if(item>=60){
          return true;
        }else{
          return false;
        }
      });*/

    let arr2=arr.map(item=>item>=60);
    alert(arr2); //true,false,true,false,false

filter

  let arr=[12,5,88,37,21,91,17,24];

    let arr2=arr.filter(item=>item%2);

    alert(arr2);
   let arr=[12,5,88,37,21,91,17,24];

    let sum=0;
    arr.forEach(item=>{
      sum+=item;
    });

    alert(sum);

reduce

// 计算arr数组的和
    let arr=[12,5,88,37,21,91,17,24];

    let sum=arr.reduce((tmp,item,index)=>{
      console.log(tmp, item, index);

      return tmp+item;
    });

    console.log(sum);
    // 计算arr数组的平均值
    let ave=arr.reduce((tmp,item,index)=>{
      if(index<arr.length-1){
        return tmp+item;
      }else{    //最后一次迭代
        return (tmp+item)/arr.length;
      }
    });
    console.log(ave);

Array.from([array-like])=>[x,x,x]

    <!-- 用js改变div的北背景色 -->
  <style>
        div {width:200px; height:200px; background:#CCC; float:left; margin:10px;}
      </style>
      <script>
      window.onload=function (){
        let aDiv=document.getElementsByTagName(‘div‘);
        console.log(aDiv)
        Array.from(aDiv).forEach(div=>{
          div.style.background=‘yellow‘;
        });
      };
      </script>
    <body>
      <div class=""></div>
      <div class=""></div>
      <div class=""></div>
      <div class=""></div>
      <div class=""></div>
    </body>

json的两个变化 -简写

  1. 简写： 名字和值一样的，可以省
  2. function可以不写
  let a=12;
  let b=5;

  let json={a, b};

  console.log(json);
/*let json={
      a: 12,
      b: 5,
      show: function (){
        alert(this.a+this.b);
      }
    };*/
    let json={
      a: 12,
      b: 5,
      show(){
        alert(this.a+this.b);
      }
    };

    json.show();

4.字符串

  • 模板字符串 可以输入变量、可以随意折行
  let json={name: ‘blue‘, age: 18};
  alert(`我叫：${json.name}，我今年${json.age}岁`);
  • startsWith()
  • endsWith()
 if(sNum.startsWith(‘135‘)){
    alert(‘移动‘);
  }else{
    alert(‘联通‘);
  }

  if(filename.endsWith(‘.txt‘)){
    alert(‘文本文件‘);
  }else{
    alert(‘图片文件‘);
  }
  • 字符串的遍历
    for ... of
  for (let codePoint of ‘foo‘) {
    console.log(codePoint)
  }
  // "f"
  // "o"
  // "o"

  • includes(), startsWith(), endsWith()

    传统上，javascript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

    • includes()：返回布尔值，表示是否找到了参数字符串。
    • startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
    • endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
    let s = ‘Hello world!‘;

s.startsWith(‘Hello‘) // true
s.endsWith(‘!‘) // true
s.includes(‘o‘) // true
s.startsWith(‘world‘, 6) // true
s.endsWith(‘Hello‘, 5) // true
s.includes(‘Hello‘, 6) // false

  • repeat()

    repeat方法返回一个新字符串，表示将原字符串重复n次。

  ‘x‘.repeat(3) // "xxx"
  ‘hello‘.repeat(2) // "hellohello"
  ‘na‘.repeat(0) // ""

5.面向对象

  • class/constructor

  • extends/super

  • this
    • 普通函数： 根据调用者确定 this会变
    • 箭头函数： 根据所在的环境 this恒定
    • bind 给函数定死一个this
    // 传统的js对象
  function Person(name, age){
    this.name=name;
    this.age=age;
  }

  Person.prototype.showName=function (){
    alert(‘我叫‘+this.name);
  };
  Person.prototype.showAge=function (){
    alert(‘我‘+this.age+‘岁‘);
  };

  let p=new Person(‘blue‘, 18);

  p.showName();
  p.showAge();

  //------------------------------------------------
  function Worker(name, age, job){
    Person.call(this, name, age);
    this.job=job;
  }

  Worker.prototype=new Person();
  Worker.prototype.constructor=Worker;
  Worker.prototype.showJob=function (){
    alert(‘我是做：‘+this.job);
  };

  let w=new Worker(‘blue‘, 18, ‘打杂的‘);

  w.showName();
  w.showAge();
  w.showJob();
  • es6面向对象
 class Person{
      constructor(name, age){
        this.name=name;
        this.age=age;
      }

      showName(){
        alert(‘我叫‘+this.name);
      }
      showAge(){
        alert(‘我‘+this.age+‘岁‘);
      }
    }

    class Worker extends Person{
      constructor(name, age, job){
        //super-超类(父类)
        super(name, age);
        this.job=job;
      }

      showJob(){
        alert(‘我是做：‘+this.job);
      }
    }

    let w=new Worker(‘blue‘, 18, ‘打杂的‘);

    w.showName();
    w.showAge();
    w.showJob();
  • bind 改变this指向
  class Person{
      constructor(name, age){
        this.name=name;
        this.age=age;
      }

      showName(){
        alert(this);
        alert(‘我叫‘+this.name);
      }
      showAge(){
        alert(‘我‘+this.age+‘岁‘);
      }
    }




    let p=new Person(‘blue‘, 18);

    document.onclick=p.showName.bind(p);

6.Promise

  • Promise 解决异步操作
    • 同步-串行 简单、方便
    • 异步并发 性能高、体验好
  • Promise用法
let p=new Promise((resolve, reject)=>{
    resolve();

    reject();
  });

  p.then(()=>{}, ()=>{});
  • 单个
    let p=new Promise((resolve, reject)=>{
      //resolve       解决->成功
      //reject        拒绝->失败

      $.ajax({
        url: ‘1.txt‘,
        dataType: ‘json‘,
        success(json){
          resolve(json);
        },
        error(err){
          reject(err);
        }
      });
    });

    p.then(json=>{
      alert(‘成功‘);
      console.log(json);
    }, err=>{
      alert(‘失败‘);
    });
  • 多个 all([])
let p=new Promise((resolve, reject)=>{
      //resolve       解决->成功
      //reject        拒绝->失败
      $.ajax({
        url: ‘1.txt‘,
        dataType: ‘json‘,
        success(json){
          resolve(json);
        },
        error(err){
          reject(err);
        }
      });
    });

    let p2=new Promise((resolve, reject)=>{
      //resolve       解决->成功
      //reject        拒绝->失败
      $.ajax({
        url: ‘2.txt‘,
        dataType: ‘json‘,
        success(json){
          resolve(json);
        },
        error(err){
          reject(err);
        }
      });
    });

    let p3=new Promise((resolve, reject)=>{
      //resolve       解决->成功
      //reject        拒绝->失败

      $.ajax({
        url: ‘3.txt‘,
        dataType: ‘json‘,
        success(json){
          resolve(json);
        },
        error(err){
          reject(err);
        }
      });
    });

    Promise.all([p, p2, p3]).then(arr=>{
      let [j1, a, j2]=arr;

      alert(‘成功‘);
      console.log(j1, a, j2);
    }, err=>{
      alert(‘失败‘);
    });

1.Proimse有用——解除异步操作
2.Promise有局限——带逻辑的异步操作麻烦

Promise.all(); 与：所有的都成功
Promise.race(); 或：只要有一个完成

  • generator-生成器
    • 能暂停
  • yield：
    1. 参数 function (a, b, c)
    2. 返回 return
      function *show(){
    alert(‘aaa‘);

    yield; // gne.next()　执行了yield的上部分，会停止下部分的执行。
    // 定时器中的gen.next()会执行下半部分

    alert(‘bbb‘);
  }

  let gen=show();

  gen.next();   //aaa

  setTimeout(function (){
    gen.next();   //bbb
  }, 5000);
     function *show(){
    alert(‘aaa‘);

    yield 55;

    alert(‘bbb‘);

    return 89;
  }

  let gen=show();

  let res1=gen.next();console.log(res1);    //{value: 55, done: false}

  let res2=gen.next();console.log(res2);    //{value: 89, done: true}

try catch捕捉async await 的错误








以上是关于ES6 面向对象 promise的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段12——JavaScript的Promise对象

ES6 promise对象

ES6 Promise对象

手写一个Promise

ES6中Promise对象个人理解

ES6 Promise 详解