Landy Blog
0%

JavaScript-ES6-課程筆記-02

發表於 更新於 分類於

箭頭函式 v.s 傳統函式

一般函式　－　傳統寫法 v.s 箭頭函式

ex: (傳統寫法)

1
2
3
4
var callSomeone = function(somebody){
    return somebody + '該吃飯囉';
}
console.log(callSomeone('小明')); // 小明該吃飯囉

改寫成 箭頭函式
ex: (箭頭函式)

1
2
3
4
var callSomeone = (somebody) => {
  return somebody + '該吃飯了'
}
console.log(callSomeone('小花')) // 小花該吃飯囉

箭頭函式 - 只有一行內容

像上面的範例，若箭頭函式中只有一行的話，你可以省略花括號　和　return。
ex:

1
var callSomeone = (somebody) => somebody + '該吃飯囉';

箭頭函式 - 如果只有傳入一個參數

如果傳入的參數只有一個的話，連那個參數的括號都可以省略。
ex:

1
var callSomeone = somebody => somebody + '該吃飯囉';

箭頭函式 - 如果沒有傳入參數

但是，你沒有要傳入任何參數的話，那個參數的括號是不能省略的喔，
ex:

1
2
var show = () => '展示一下' ;
console.log(show()); // 展示一下

箭頭函式本身不含有arguments

當你有大量參數傳入，一般函式可以用arguments來取用這先參數，
但是，在箭頭函式中就不行囉。
那解決這個問題的方法，就是可以用其餘參數...的方法。
ex:

1
2
3
4
var update = (...arg)=>{
	console.log(arg);
}
update(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

如此就可以透過這個arg陣列，來調用傳入的參數囉。

箭頭函式 this　綁定的不同

傳統函式的this: 在該函式被呼叫的時候綁定this
箭頭函式的this: 在該箭頭函式被定義的時候綁定this
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var name = '全域悟空';
var obj = {
  name:'悟空',
  callSomeone: function(){
    console.log(this.name);   // 悟空
    setTimeout(function(){
      console.log(this.name); // 全域悟空
    }, 1000);
  },
  callSomeone2: ()=>{
    console.log(this.name);	  // 全域悟空
    setTimeout(()=>{
      console.log(this.name); // 全域悟空
    },2000)
  }
}
obj.callSomeone();
obj.callSomeone2();

首先，
callSomeone是用傳統函式寫法，
第一層的console.log的this是呼叫這個函式的物件，也就是obj，所以，name的結果是悟空。
而在它的裡面還有一個setTimeout函式，因為，在JS中，this的預設是window，所以，console的結果是全域悟空，裡面跟外面的this是不同的喔。

第二，
callSomeone2是用箭頭函式的寫法，
callSomeone2定義的時候，所屬的obj，它是一個全域變數，故它是屬於window的屬性，所以，其實當下的物件是window，
所以，第一層的this是window，
接著，第二層，setTimeout定義的時候，它的環境就是處在this是window的環境底下，所以，在setTimeout的this是window。

字串模板 Template String

這項技巧可以讓組字串更簡單
ex:(傳統寫法)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const people = [
	{
		name: '小明',
		friends: 2
	},
	{
		name: '阿姨',
		friends: 999
	},
	{
		name: '邊緣人',
		friends: 0
	}
]
let originStr = '我叫做' + people[0].name;
let originUrl = '<ul>\
	<li>我叫做' + people[0].name + '</li>\
	<li>我叫做' + people[1].name + '</li>\
	<li>我叫做' + people[2].name + '</li>\
	</ul>';
console.log(originStr, originUrl);

以上傳統寫法，在過長的字串的地方，得用反斜線\將它們接起來，hen麻煩。

ex:(字串模板寫法)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const people = [
	{
		name: '小明',
		friends: 2
	},
	{
		name: '阿姨',
		friends: 999
	},
	{
		name: '邊緣人',
		friends: 0
	}
]
let originStr = `我叫做${people[0].name}`;
let originUrl = `
	<ul>
		<li>我叫做${people[0].name}</li>
		<li>我叫做${people[1].name}</li>
		<li>我叫做${people[2].name}</li>
	</ul>
`
console.log(originStr, originUrl);

在要組的字串的最外層，用反引號``包起來，在這個反引號裡面，
若要涵蓋變數的話就用${}將變數包在這個花括號裡面，就可以了~

字串模板 - 包裹Javascript的語法

除了，可以包變數以外，還可以包JavaScript的語法
改寫以下上面的範例
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
---HTML---
<div id="app"></div>


---JavaScript---
const people = [
	{
		name: '小明',
		friends: 2
	},
	{
		name: '阿姨',
		friends: 999
	},
	{
		name: '邊緣人',
		friends: 0
	}
]
let newUrl = `<ul> ${people.map(item=>`<li>${item.name}</li>`).join('')}</ul>`;
console.log(newUrl);
$('#app').html(newUrl);

上面的範例中，我們在字串模板中加入了JS的語法map。
map會處理陣列中每個元素，最後回傳出一個新的陣列。
加入join將該內容轉成字串，在join裡面在加入’’，表示有逗號的話就將它移除，
如此，就會將people中的各元素的name值，都取出來塞到li的內容裡面，
等到遍歷完people的元素後，就可以組成完整的內容囉。

接著，我們再利用JQ將組合完的html塞到#app中，就可以呈現出我們想要的內容囉。