ES6的基础知识(三)

lieeps 发布于2019-08-23 16:14 / 615人阅读

摘要：会触发方法第一个回调会触发方法第二个回调或方法成功操作失败操作会终止的执行需要方法触发向下执行执行结果实现的参数是一个函数有和两个参数回调函数中会指向需要保存才会指向实例对象三种状态分别为状态只能从变成或者成功回调方法集合失败回调方法集合触

promise

// resolve()会触发then方法第一个回调, reject()会触发then方法第二个回调或catch方法
let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() > 0.5) {
      resolve("成功操作");
    } else {
      reject("失败操作");
    }
  });
});

p.then(
  res => {
    console.log(res);
  },
  err => {
    console.log(err);
  }
);

generator

// yield会终止fn()的执行,需要next()方法触发fn()向下执行
function* fn(x) {
  yield x[0];
  yield x[1];
  yield x[2];
}

let res;
let t = fn([1, 2, 3]);
do {
  res = t.next();
  console.log(res);
} while (!res.done);

// 执行结果
// { value: 1, done: false }
// { value: 2, done: false }
// { value: 3, done: false }
// { value: undefined, done: true }

实现promise

// Promise的参数是一个函数async,async()有resolve和reject两个参数
function Promise(async) {
  // 回调函数中this会指向window,需要保存才会指向Promise实例对象
  let _this = this;
  // Promise三种状态,分别为pending,resolved,rejected.状态只能从pending变成resolved或者rejected
  _this.status = "pending";
  _this.val = undefined;
  // 成功回调方法集合
  _this.onResolvedCallbacks = [];
  // 失败回调方法集合
  _this.onRejectedCallbacks = [];
  // 触发resolve()方法异步状态改变成成功, 将会执行成功回调集合中的方法
  function resolve(val) {
    if (_this.status === "pending") {
      _this.status = "resolved";
      _this.val = val;
      _this.onResolvedCallbacks.forEach(item => item(val));
    }
  }
  // 触发reject()方法异步状态改变成失败, 将会执行失败回调集合中的方法
  function reject(val) {
    if (_this.status === "pending") {
      _this.status = "rejected";
      _this.val = val;
      _this.onRejectedCallbacks.forEach(item => item(val));
    }
  }
  // 异常捕获
  try {
    async(resolve, reject);
  } catch (err) {
    reject(err);
  }
}
// then方法有两个参数, 第一个异步成功后执行的函数, 第二个是异步出异常后执行的函数
Promise.prototype.then = function(resolved, rejected) {
  let _this = this;
  if (_this.status === "pending") {
    // 将所有then要执行的方法push到回调函数集合中,在状态改为resolved执行其中的方法
    _this.onResolvedCallbacks.push(resolved);
    // 将所有then要执行的方法push到回调函数集合中,在状态改为rejected执行其中的方法
    _this.onRejectedCallbacks.push(rejected);
  }
  if (_this.status === "resolved") {
    resolved(_this.val);
  }
  if (_this.status === "rejected") {
    rejected(_this.val);
  }
};

实现generator

// 生成器
function fn(val) {
  let i = 0;
  return {
    next() {
      let done = i === val.length;
      let value = val[i++];
      return {
        value,
        done
      };
    }
  };
}

// 迭代器
let it = fn([1, 2, 3]);
let result;
do {
  result = it.next();
  console.log(result);
} while (!result.done);

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102818.html

ES6零基础教学_解析彩票项目-学习笔记（一）

摘要：彩票项目实战学习记录一完整走了一遍课程，觉得还不错。支持正版人人有责零基础教学解析彩票项目下面是项目课程的目录路线一个项目分为三部分业务逻辑，自动构建系统，模拟数据和真实数据接口处理。彩票项目实战学习记录（一）完整走了一遍课程，觉得还不错。总结: es6的知识点说得还算清楚，主要是为了了解和使用，不是深究，所以浅尝即止即可，所以觉得还不错。完整还原了项目开发的代码设计和开发过...

blastz 2019-08-22 13:52 评论0 收藏0
ES6部分方法点评（三）：babel-preset-es2015-loose可转换且移动端兼容性较好

摘要：是目前最常用的转的工具，但即使是，各浏览器的支持度也是不一的，因此便产生了本文，找出一些能够被翻译成兼容性高代码的语法。不可用因为会使用到参考资料，用来查浏览器兼容性。到底将代码转换成什么鸟样，感谢。官网试验转换后的代码前言由于目前各浏览器对ES6兼容性较低，再加上需要兼容历史上各种版本的浏览器，因此，使用编译器将ES6语法转译成ES5语法则势在必行了。babel是目前最常用的ES...

wean 2019-08-21 10:53 评论0 收藏0
es6常用知识（三） prosime和generator

摘要：异步执行可以用回调函数实现。全成功也可以通过解构数组的方式，将展开赋值。可以依次拿到每个结果。放弃暂时放弃执行相当于创建了一个对象。代表是否完成，代表函数完成，已经到终点。是因为最终的结果需要在最后的时候返回最终结果 prosime 在JavaScript的世界中，所有代码都是单线程执行的。由于这个缺陷，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以...

flybywind 2019-08-22 16:57 评论0 收藏0
从0到1使用VUE-CLI3开发实战（三）: ES6/ES7知识储备

摘要：它们都用于声明变量。盲目使用替换后可能会导致预期意外的结果。有鉴于此，还是建议使用字符串，布尔和数字类型的数据类型。像使用这种下划线命名约定在一个开源项目中，命名规则很难维持得一直很好，这样经常会造成一些困扰。今天群里有小伙伴跟我聊天，问了我几个关于ES6的问题，我才意识到，大部分初学者在学习的过程中，都是学了HTML/CSS/JS之后就开始上手学习框架了，而对于ES6的重视程度却不...

crossoverJie 2019-08-23 14:48 评论0 收藏0