js map 箭頭_JavaScript箭頭函數（Lambda表達式）

箭頭函數也叫lambda表達式

據說其主要意圖是定義輕量級的内聯回調函數

栗有：

1 var arr = ["wei","ze","yang"];

2 arr.map(item=>"Mr."+item); // ["Mr.wei", "Mr.ze", "Mr.yang"]

實則

1 var arr = ["wei","ze","yang"];

2 arr.map(function(item){

3 return "Mr."+item;

4 });

1.注意點：

(1)當箭頭函數有一個參數的時候，參數可以不加括号，沒有參數的時候就必須要加。

定義 函數名 = 參數 => 函數體

1 var student = name => "my name is " + name;

2 console.log(student("wei ze yang"));

3 // my name is wei ze yang

(2)如果函數體不止一行，應該用花括号括起來，這時就要顯示地傳回。

定義 函數名 = (參數，參數) => {

函數體；

return 傳回值；

}

1 var student = (name,age) => {

2 age +=1;

3 return "name:" + name + ",age:" + age;

4 }

5 console.log(student("wei ze yang",21));

6 // name:wei ze yang,age:22

2.arguments object

正常的函數内：

1 function student(name,age){

2 console.log(arguments[0]);

3 }

4

5 student("weizeyang",22);

但箭頭函數不會暴露argument對象

1 var student = (name,age) => {

2 console.log(arguments[0]);

3 }

4

5 student("weizeyang"); // arguments is not defined

是以，argument将簡單地指向目前作用域内的一個變量

1 var arguments = ["Mr.wei"];

2

3 var student = (name,age) => {

4 console.log(arguments[0]);

5 }

6

7 student("weizeyang"); // "Mr.wei"

或者這時可以使用“剩餘參數”的時候代替

1 var arguments = ["Mr.wei"];

2

3 var student = (...arguments) => {

4 console.log(arguments[2]);

5 }

6

7 student("weizeyang",22,true); // true

3.綁定this的值

箭頭函數是lexically scoped(詞法作用域)，這意味着其this綁定到了附近scope的上下文。

也就是說，不管this指向什麼，都可以用一個箭頭函數儲存。

1 var student = {

2 names:["wei","ze","yang"],

3 setName: function() {

4 console.log(this); 5 this.name = this.names.join("")

6 },

7 getName: function() {

8 console.log(this); 9 return () => {10 return {

11 myName : "my name is " + this.name

12 }

13 }14 }

15 }

16

17 student.setName();

18 var student1 = student.getName();

19 console.log(student1().myName);

20 // my name is weizeyang

有圖為證，看下

4.相關文檔

使用 this.$refs 來擷取元素群組件

這是一個大大的H1

Vue.component('my-com', {

template: '

這是一個子元件

',

data() {

return {

name: '子元件'

}

}

});

// 建立 Vue 執行個體，得到 ViewModel

var vm = new Vue({

el: '#app',

data: {},

methods: {

getElement() {

// 通過 this.$refs 來擷取元素

console.log(this.$refs.myh1.innerText);

// 通過 this.$refs 來擷取元件

console.log(this.$refs.mycom.name);

}

}

});