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 的错误

原文地址：https://www.cnblogs.com/zhtian/p/9784529.html

时间： 2024-11-08 21:06:10

ES6 面向对象 promise的相关文章

浅谈ES6原生Promise

浅谈ES6原生Promise 转载 作者:samchowgo 链接:https://segmentfault.com/a/1190000006708151 ES6标准出炉之前,一个幽灵,回调的幽灵,游荡在JavaScript世界. 正所谓: 世界本没有回调,写的人多了,也就有了})})})})}). Promise的兴起,是因为异步方法调用中,往往会出现回调函数一环扣一环的情况.这种情况导致了回调金字塔问题的出现.不仅代码写起来费劲又不美观,而且问题复杂的时候,阅读代码的人也难以理解. 举例如下

基于jquery的ES6面向对象选项卡

ES5中的面向对象相信大家都非常熟悉,包括一系列的配置参数,方法,自定义事件等,现在简单介绍一下es6面向对象的一些知识还有一个基于jquery的es6面向对象选项卡的写法. ES6中提供了基于类class的面向对象语法.但class实际上是ES6提供的一颗语法糖,JavaScript是一门基于原型的面向对象语言. // 父类 class Test { // 构造器 constructor (arg1, arg2) { this.arg1 = arg1; this.arg2 = arg2; }

ES6之Promise用法详解

一 前言 本文主要对ES6的Promise进行一些入门级的介绍.要想学习一个知识点,肯定是从三个方面出发,what.why.how.下面就跟着我一步步学习吧~ 二 什么是Promise 首先是what.那么什么是Promise呢? 以下是MDN对Promise的定义 The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that

ES6 面向对象编程思想

ES6 面向对象概念 /* 小明去餐厅吃饭: 面向过程:小明走去餐厅看菜单点餐吃饭; 面向对象: 对象:1.小明.2.餐厅 特征属性行为:1.小明(走.看.点餐.吃); 2.餐厅(菜单) 研究对象之间的关系: 小明.走餐厅.菜单 小明.看 小明.点餐 小明.吃 两种思维方式不一样,但是达到的结果都是一样的 */ 原文地址:https://www.cnblogs.com/Afanadmin/p/12355376.html

ES6 面向对象

类的写法 { // ES6面向对象: // 类的写法: class Person{//typeof function类型 age = 20;//属性也可以这样写 -> 这是公有属性,外内都可以调用; #hei = "178cm";//私有属性 constructor(name){//-> function Person(name){} this.name = name; } fn(){// -> Person.prototype.fn = function(){} c

ES6 － promise对象

Promise的设计初衷 我们使用ajax请求数据,得到数据后再对数据进行操作,可是有时候,对得到的数据进行操作的过程中,可能又要用到ajax请求,这时,我们的代码就变成了这样: $.ajax({ success:function(res1){ //...请求B开始,B依赖A返回的数据 $.ajax({ sucess:function(res2){ //...请求C开始,C依赖B返回的数据 $.ajax({ sucess:function(res3){ } }); } }); } }); 这种写

利用ES6的Promise.all实现至少请求多长时间

1.背景 我们都知道ajax请求可以加个timeout,就是最多请求多少时间,如果超过这个时间直接就报错. 这个是最多请求多长时间,我现在要做的是,最少要请求多长时间,然后才能执行后续的逻辑. 比如,一个ajax请求 x 毫秒就执行完毕了,但我要让他至少执行1秒钟,那我们会这么想: ajax完成后 , 1. 如果x<1s, 那我们先setTimeout => 1s - x ,然后执行后续操作. 2 如果x>=1s, 那我们直接执行后续操作. 想想这可繁琐了,我们还要在前面记录一下开始时间

ES6的promise对象应该这样用

ES6修补了一位Js修真者诸多的遗憾. 曾几何时,我这个小白从js非阻塞特性的坑中爬出来,当我经历了一些回调丑陋的写法和优化的尝试之后,我深深觉得js对于多线程阻塞式的开发语言而言,可能有着其太明显的缺点,而又无法忽略的是也正因为这一点,node.js处理并行的能力被人看作优点,在我看来,这其实有着些讽刺的意味,就好像踢足球时有的人总夸你腿短,所以频率快下盘稳好控球...好在js从出生以来就有一种独特的特质,就是模仿,对,就是模仿,模仿别人的优点来补足自己,同时保持自己的长处. ES6就是通过P

ES6的promise的学习

1.Promise的含义: Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise是一个对象,从它可以获取异步操作的消息.Promise提供统一的API,各种异步操作都可以用同样的方法进行处理. Promise对象有以下两个特点. (1)