ES6的基礎知識(三)

lieeps 發布于2019-08-23 16:14 / 639人閱讀

摘要：會觸發方法第一個回調會觸發方法第二個回調或方法成功操作失敗操作會終止的執行需要方法觸發向下執行執行結果實現的參數是一個函數有和兩個參數回調函數中會指向需要保存才會指向實例對象三種狀態分別為狀態只能從變成或者成功回調方法集合失敗回調方法集合觸

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);

GPU云服務器云服務器 ES6 es6-系列 ES6入門統計三天的數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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