es6應該搞清楚的問題

行走的羊駝駝發表於2018-12-15

一、箭頭函式與普通functon有什麼區別？箭頭函式可以完全代替普通functon嗎？

//箭頭函式：
let fun = () => {
    console.log('lalalala');
}

//普通函式：
function fun() {
    console.log('lalla');
}
複製程式碼

1.箭頭函式是匿名函式，不能作為建構函式，不能使用new 2.箭頭函式不繫結arguments，取而代之用rest引數...解決

function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]

let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined

let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]
複製程式碼

3.箭頭函式不繫結this，會捕獲其所在的上下文的this值，作為自己的this值

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b(); 
obj.c();
複製程式碼

4.箭頭函式通過 call() 或 apply() 方法呼叫一個函式時，只傳入了一個引數，對 this 並沒有影響。

let obj2 = {
    a: 10,
    b: function(n) {
        let f = (n) => n + this.a;
        return f(n);
    },
    c: function(n) {
        let f = (n) => n + this.a;
        let m = {
            a: 20
        };
        return f.call(m,n);
    }
};
console.log(obj2.b(1));  // 11
console.log(obj2.c(1)); // 11
複製程式碼

5.箭頭函式沒有原型屬性, 不能做為建構函式

var a = ()=>{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}
複製程式碼

6.箭頭函式不能當做Generator函式,不能使用yield關鍵字

二、Generator是什麼？Generator返回值是什麼？yield？next()返回的資料是怎樣的？

1.什麼是Generator 函式

function* helloGenerator() {
       console.log("this is generator");
}
//這個函式與普通的函式區別是在定義的時候有個*,我們來執行下這個函式。
helloGenerator();//沒有執行

//我們把程式碼改成下面：
var h = helloGenerator();
h.next();
//這個時候如期的列印了日誌
複製程式碼

僅僅是建立了這個函式的控制程式碼，並沒有實際執行，需要進一步呼叫next(),才能觸發方法。

function* helloGenerator() {
       yield "hello";
       yield "generator";
       return;
   }
   var h = helloGenerator();
   console.log(h.next());//{ value: 'hello', done: false }
   console.log(h.next());//{ value: 'generator', done: false }
   console.log(h.next());//{ value: 'undefined', done: true }
複製程式碼

經過上面的分析，yield實際就是暫緩執行的標示，每執行一次next()，相當於指標移動到下一個yield位置。

Generator函式是ES6提供的一種非同步程式設計解決方案。通過yield標識位和next()方法呼叫，實現函式的分段執行。

三、iterator有哪些表現形式？iterator有什麼作用？ 1、什麼是iterator

遍歷器（Iterator）是一種介面，為各種不同的資料結構提供統一的訪問機制。任何資料結構只要部署Iterator介面，就可以完成遍歷操作（即依次處理該資料結構的所有成員）。

2.iterator有什麼作用

Iterator的作用有三個： 一是為各種資料結構，提供一個統一的、簡便的訪問介面； 二是使得資料結構的成員能夠按某種次序排列； 三是ES6創造了一種新的遍歷命令for...of迴圈，Iterator介面主要供for...of消費。

3.iterator體現

在ES6中，有三類資料結構原生具備Iterator介面：陣列、某些類似陣列的物件、Set和Map結構。

四、iteration與Generator有什麼共性，有什麼聯絡 都涉及到了next()

function* helloGenerator() {
       yield "hello";
       yield "generator";
       return;
   }
   var h = helloGenerator();
   for(var value of h){
   	  console.log(value);//"hello","generator"
   }
複製程式碼

helloGenerarot物件是支援for-of迴圈的，也說明Generator函式在原型上實現了迭代器介面，上面呼叫的next()方法其實就是迭代器的next()方法

五、Promise與callback有什麼區別？如何將現有的callback封裝成promise？ 1.回撥函式：函式A作為引數(函式引用)傳遞到另一個函式B中， 並且這個函式B執行函式A。我們就說函式A叫做回撥函式。如果沒有名稱(函式表示式)，就 叫做匿名回撥函式。

function fn1(fn2) {//fn2:回撥函式
 setTimeout(function() {
   fn2();
 }, 1000);
}
function fnA(){
  console.log(2);
}
fn1(fnA());
複製程式碼

2.promise：非同步程式設計的一種解決方案（es6）。可取代callback promise建構函式：比傳統的回撥函式更合理，更強大。 建立promise例項物件，建構函式的引數又是一個函式物件，函式物件裡面又有兩個引數，一個 代表成功的回撥，一個是失敗的回撥。 promise狀態：pending(進行中) resolve(成功，已解決) reject(失敗，未解決) ， 狀態一旦設定，不可改變。 pending-->resolve 進行中-->成功 pending-->reject 進行中-->失敗

 var promise = new Promise(function(resolve, reject) { 
  //resolve:成功，名字等於函式體,reject:失敗，一樣的
   setTimeout(function() {
     console.log(1);
      resolve('我是resolve'); //成功--then
      reject('我是reject'); //失敗--catch
    }, 1000);
});
promise.then(function(str) { //成功的指向。  獲取傳遞的引數。
  console.log(2);
  console.log(str); //我是resolve
})
.catch(function() { //失敗的失敗。
   console.log('我錯了');
}
複製程式碼

相關文章