iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 19
0
Modern Web

JavaScript基礎二三事系列 第 19

Day19 陣列、arguments、spread與分號

  • 分享至 

  • xImage
  •  

今天的筆記內容比較雜一點。
 

陣列——任何東西的集合

要建立一個JS陣列可以這樣寫

var arr = new Array();

也可以使用陣列實體語法來建立

var arr = [];

此外,JS的陣列與物件很像,可以放各種資料,例如:布林值、物件和函數..等等。
例如:

var arr = [ 
	24,
	true,
	{ name: 'Simon', isF2E: true}, 
	function(name){
		console.log(name + '挑戰鐵人賽第19天');
	},
	"hello"
];

陣列是從0開始數,如果要執行陣列序號3的函式,並帶入陣列序號2的物件屬性值,可以這樣寫:

arr[3](arr[2].name);

結果是

 
 

arguments與spread

先來看arguments

arguments與this一樣,當一個函式的執行環境被創造出來時,也會一併創造出arguments這個關鍵字,它會保存所有傳進函式(當參數)的值。

function JusticeLeague(hero1, hero2, hero3){
	console.log(hero1 + ',' + hero2 + ',' + hero3);
	console.log(arguments);
}

JusticeLeague('Batman','Superman','Wonderwoman')

結果是

arguments雖然有[]符號,但並不是真正的陣列,仔細看它也有點斜斜的,我們可以用typeof來檢查它

function JusticeLeague(hero1, hero2, hero3){
	console.log(typeof arguments);
}
JusticeLeague('Batman','Superman','Wonderwoman')


可以看到,它其實是一個物件。

有興趣可以參考MDNMSDN的介紹
 
 

spread運算子

(這節影片裡的說的spread operator其實更像是rest operator,不曉得有沒有人注意到。)

spread operator展開運算子rest operator其餘運算子都是...符號,並且是ES6以後才新增的內容,這兩者根據使用的狀況和情境有很大的差別。

可能是因為作者錄製影片時,...運算子的規範還不齊全,所以影片快速帶過,這邊有興趣可以參考:


重載函式

其他程式語言如JAVA、C#有重載函式的特性,可以創建名稱一樣,功能卻略有差別的函式。JS並沒有這種特性,只能在函式裡寫判斷,並用複數函式互相呼叫,來達成類似的效果。

關於重載函式可以參考維基百科的介紹。
 
 

分號

JS會幫我們自動加上分號,更確切的說是語法解析器幫我們加上的。
大部分的程式語言需要在程式碼結尾加上;分號,但是JS卻可以不用加,並不是說它不需要分號表示結束,而是語法解析器在轉譯我們寫的程式碼給電腦時,會自動幫我們在結尾加上;分號。

只是自動加上分號的特性,偶爾會造成bug,例如:

function hero(){
	return
	{
		Batman: 'Wayne'
	}
}

console.log(hero());

如果語法解析器發現return後面有鍵盤Enter換行,會以為開發者忘記加上分號而替我們補上,程式碼被翻譯給電腦時會變成這樣:

function hero(){
	return;
	{
		Batman: 'Wayne'
	}
}

console.log(hero());

函式執行到return就結束了,那這種情況該怎麼處理?
只要return後面還有其他字符的存在,JS就會知道我們程式還沒結束。

function hero(){
	return {
		Batman: 'Wayne'
	}
}

console.log(hero());

作者認為物件實體語法的{符號最好接在上一行的句尾,例如for迴圈的{、if陳述句{,樣才可以避免一些地方因為被自動加上;而產生bug。
 
 
 
 
小結
今天內容稍嫌雜亂,因為跨好幾個影片章節(影片內容也比較短),明天來看看何謂IIFE。

至於筆記對象可以參照Udemy課程:JavaScript 全攻略:克服JS的奇怪部分4-38~4-42的部分


上一篇
Day18 物件、函式與「this」
下一篇
Day20 立即呼叫的函式表示式(IIFE)
系列文
JavaScript基礎二三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言