ES6 面向对象 promise

2018-10-13 本文已影响0人北京大土豆

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

参数展开(剩余参数，数组展开)

'...'的第一个用途：接收剩余参数
function show(a, b, ...名字)剩余参数必须在参数列表的最后
'...'的第二个用途：展开一个数组

 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的两个变化 -简写

简写：名字和值一样的，可以省
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 的错误