es6學習筆記-箭頭函數_v1.0_byKL

lushan 發布于2019-08-20 14:47 / 3261人閱讀

摘要：因為箭頭函數本身沒有所以不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。箭頭函數不可以使用對象，該對象在函數體內不存在。

es6學習筆記-箭頭函數_v1.0 箭頭函數使用方法

var f = v => v; //普通函數配合箭頭函數寫法,這里并且是傳參的
//相當于
var f = function(v) {
  return v;
};

/*------------------------*/

var f = () => 5; //匿名函數配合箭頭函數寫法
// 等同于
var f = function () { return 5 };

/*------------------------*/
//傳多個參數
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

/*------------------------*/

//傳入一個id參數,然后返回一個對象
const id = "ooo";
const getTempItem = id => ({ id: id, name: "Temp" });
//直接返回一個新對象{ id: "ooo", name: "Temp" }

/*------------------------*/

//傳入一個對象,并且能夠直接解析對象,然后獲取到對象的元素
const full = ({ first, last }) => first + " " + last;

// 等同于
function full(person) {  //一般的寫法需要借助一個對象變量來調用對象屬性
  return person.first + " " + person.last;
}

/*------------------------*/

// 正常函數寫法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭頭函數寫法
[1,2,3].map(x => x * x);

/*------------------------*/

// 正常函數寫法
var result = values.sort(function (a, b) {
  return a - b;
});

// 箭頭函數寫法
var result = values.sort((a, b) => a - b);

一個比較完整的例子:

const names = ["will", "jack", "peter", "steve", "john", "hugo", "mike"];

const newSet = names
    //返回[ { id: 0, name: "will" },{ id: 1, name: "jack" },.....],一個對象,格式為{id,name},id是原來數組的中的位置
    .map((name, index) => ({
        id: index,
        name: name
    })) 
    //對這個對象的id值進行處理(只保留偶數),并且返回一個新的對象[ { id: 0, name: "will" }, { id: 2, name: "peter" },....]
    .filter(man => man.id % 2 == 0)
    //將剩下的元素轉換為一個包含當前元素中原名字的單元數組[ [ "will" ], [ "peter" ], [ "john" ], [ "mike" ] ]
    .map(man => [man.name])
    //不斷合并相鄰的兩個數組,最后得到一個總數組
    .reduce((a, b) => a.concat(b));

console.log(newSet);//返回[ "will", "peter", "john", "mike" ]

相當于
const newSet = names
    .map(function (name,index) {
        return {"id":index,"name":name}
    })
    .filter(function (man) {
        return man.id % 2 == 0
    })
    .map(function (man) {
        return [man.name];
    })
    .reduce(function (a,b) {
        return a.concat(b);
    });

反引號和模板字符串相關資料

箭頭函數的this

箭頭函數沒有自己的this,也就不能用call()、apply()、bind()這些方法去改變this的指向。

箭頭函數的this是固定的,都指向函數定義時的作用域,主要是因為他本身并有this,所以要指向外層代碼的this

在箭頭函數里面,函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

因為箭頭函數本身沒有this,所以不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。

箭頭函數不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用Rest參數代替。

箭頭函數也不可以使用arguments、super、new.target.也不可以使用bind

箭頭函數不可以使用yield命令，因此箭頭函數不能用作Generator函數。

箭頭函數內部的簡單邏輯:

// ES6
function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
  }, 100);
}

// 使用babel將上述es6代碼轉譯為ES5代碼
function foo() {
  var _this = this; //可以看到這里是常用的保存當前this作用域的做法

  //因為內層代碼可以訪問外層代碼的變量,所以可以使用到這個被保存的this
  setTimeout(function () { //因為setTimeout傳入函數的話,會被全局對象調用,所以this會被指向到全局對象,可以參考setInterval
    console.log("id:", _this.id);
  }, 100);
}

關于理解箭頭函數的樣例:

function Timer() {
    this.s1 = 0;
    this.s2 = 0;
    // 箭頭函數,this被(箭頭函數)綁定在定義時所在的作用域（即Timer函數)
    setInterval(() => this.s1++, 1000);
    // 普通函數,setInterval在傳入函數作為參數的時候,會以全局作用域調用
    setInterval(function () {
        this.s2++;//在全局對象下并沒有s2
    }, 1000);
}

var timer = new Timer(); //new了之后,this指向就指向了新對象timer
setTimeout(() => console.log("s1: ", timer.s1), 3100);
//因為沒有找到Timer的s2,所以一直沒有改變他的值
setTimeout(() => console.log("s2: ", timer.s2), 3100);
// s1: 3
// s2: 0

關于setInterval:

由setInterval（）執行的代碼會在多帶帶的執行上下文環境中運行。因此，被調用函數的this關鍵字將被設置為窗口（或全局）對象，

還有一個測試this的例子

const obj = {
    msg: "ping",
    ping: () => this.msg
};
//因為箭頭指向了全局作用域,所以返回undefined
console.log(obj.ping()); //返回undefined
//設置了一個全局作用域下的變量,因為本身箭頭函數指向了全局,所以能夠正常返回
var msg = "bang!";
console.log(obj.ping()); //返回bang!

不過需要注意的是,不能在node下測試,因為node下的全局作用域并不是global,而是跟module.exports有關
Meaning of “this” in node.js modules and functions

參考引用:

ranyifeng的es6入門我是買了實體書然后再看電子版的

es實戰2015

GPU云服務器云服務器 _byKL linux全能運行環境 v1.0 云服務器管理系統v1.0 箭頭函數

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81916.html

es6學習筆記-函數擴展_v1.0_byKL

摘要：學習筆記函數擴展函數參數的默認值如果參數默認值是變量，那么參數就不是傳值的，而是每次都重新計算默認值表達式的值。屬性函數的屬性，返回該函數的函數名。箭頭函數詳細鏈接參考引用函數擴展 es6學習筆記-函數擴展_v1.0 函數參數的默認值 function Point(x = 0, y = 0) { this.x = x; this.y = y; } var p = ne...

yuanzhanghu 2019-08-20 15:16 評論0 收藏0
es6學習筆記-字符串的擴展_v1.0_byKL

摘要：學習筆記字符串的擴展字符的表示法允許使用的形式表示一個字符，但在之前，單個碼點僅支持到，超出該范圍的必須用雙字節形式表示，否則會解析錯誤。返回布爾值，表示參數字符串是否在源字符串的頭部。，是引入了字符串補全長度的功能。 es6學習筆記-字符串的擴展_v1.0 字符的Unicode表示法 JavaScript 允許使用uxxxx的形式表示一個字符，但在 ES6 之前，單個碼點僅支持u00...

JaysonWang 2019-08-21 11:36 評論0 收藏0
es6學習筆記-頂層對象_v1.0_byKL

摘要：學習筆記頂層對象雖然是筆記但是基本是抄了一次大師的文章了頂層對象頂層對象，在瀏覽器環境指的是對象，在指的是對象。之中，頂層對象的屬性與全局變量是等價的。的寫法模塊的寫法上面代碼將頂層對象放入變量。參考引用頂層對象實戰 es6學習筆記-頂層對象_v1.0 (雖然是筆記,但是基本是抄了一次ruan大師的文章了) 頂層對象頂層對象，在瀏覽器環境指的是window對象，在Node指的是gl...

Meils 2019-08-21 11:31 評論0 收藏0
es6學習筆記-let,const和塊級作用域_v1.0_byKL

摘要：考慮到環境導致的行為差異太大，應該避免在塊級作用域內聲明函數。函數聲明語句函數表達式循環循環還有一個特別之處，就是循環語句部分是一個父作用域，而循環體內部是一個單獨的子作用域。聲明一個只讀的常量。 es6學習筆記-let,const和塊級作用域_v1.0 塊級作用域 javascript 原來是沒有塊級作用域的,只有全局作用域和函數作用域例子1 因為沒有塊級作用域,所以每次的i都是一...

Youngdze 2019-08-20 14:49 評論0 收藏0
es6學習筆記-字符串模板_v1.0_byKL

摘要：學習筆記字符串模板實例模板編譯先組成一個模板使用放置代碼使用輸出表達式。這被稱為標簽模板功能。該數組的成員與數組完全一致參考引用字符串擴展 es6學習筆記-字符串模板_v1.0 實例：模板編譯 //先組成一個模板 var template = ` //使用放置JavaScript代碼 //使用輸出JavaScript表達式。 `; //這是編譯模板的函數,將模...

xiongzenghui 2019-08-21 11:39 評論0 收藏0