Javascript ES6基礎觀念

tags: OKR ES6 Javascript

2020/07/22(Update:2020/07/24)

var與let比較是否可以重複宣告

直接從程式碼就可以看出差異，var可以重複宣告，但let比較嚴謹會提醒不能重複宣告。

var a = 1;
console.log(a);
var a = 2;
console.log(a);

result:
1
2
---

let b=1;
console.log(b);
let b=2;
console.log(b);

result:
1
Identifier 'b' has already been declared //提示說已經被宣告了

被{}包起來區塊範圍，var與let的差異

被{}包起來區塊範圍裡面，來看看var與let的差異：

{
  var a = "我是a";
  let b = "我是b";
  console.log('a列印結果：',a);
  console.log('b列印結果：',b);
}

result
a列印結果： 我是a 
b列印結果： 我是b 

若是今天將console.log移到外面的話，會發生什麼事情？

{
  var a = "我是a";
  let b = "我是b";
}
console.log('a列印結果：',a);
console.log('b列印結果：',b);

result
a列印結果： 我是a 
ReferenceError: b is not defined //結果b會被顯示沒有被宣告，代表let撰寫比較嚴謹

let宣告變數

依據上述比較let與var之間的差異，可宣告變數／得到相同結果，但最大的差別是在於let所宣告的變項只有在{}代碼區塊(block scope)內有效。

ES5/ES6放入html內容使用差異

在之前ES5在放入Html內容，必須要一行一行加入，在ES6的模版字符串(template literal)是使用反引號``放入html內容。

在之前，若行數很多的話容易不小心打錯內容，除了很麻煩，也不易閱讀

let addHtml_es5 = '<header>' + 
'<div class="banner">' + 
'</div>'
+ '</header>'

現在ES6使用反引號快速解決這樣的狀況，列印結果，更方便的是他會幫你保留所有換行和空行，顯示結果跟你的輸入排版差不多。

let addHtml_es6 = `
<header>
    <div class="banner">
    </div>
</header>
`

//print result
<header>
    <div class="banner">
    </div>
</header>

若是有嵌入宣告變數的寫法
使用方式為${…}

let youtubeSrc = 'https://www.youtube.com/embed/lJIrF4YjHfQ?autoplay=1';

$('.embed-responsive').append(`<iframe class="youtube_frame" style="width:100%;height:100%;" src="${youtubeSrc}" frameborder="0" scrolling="no" allowfullscreen></iframe>`);

//print result
<iframe class="youtube_frame" style="width:100%;height:100%;" src="https://www.youtube.com/embed/lJIrF4YjHfQ?autoplay=1" frameborder="0" scrolling="no" allowfullscreen>
</iframe>

什麼是const

• const全名為Constants，中文叫常數，有點像使用let宣告的變數。
• 常數可以宣告成大寫或小寫，但習慣上使用全部大寫的字母。
• 常數不能重複指定值，也不能重複宣告中。

const MY_FAV = 7;

Constructor建構子

• 隨著Class一同建立並初始化物件的特殊方法
• 一個Class只能有一個Constructor，如果一個Class出現兩次以上，就會發生錯誤。

class類別

class MyClass{
    constructor(){
    
    }
}

• ES6 ClassName類別語法
• 命名時採用大駝峰式寫法
• 類別Class是先定義好物件的整體結構，並不會直接產生物件，要經過實體化的過程(new運算符)，才會產生真正的物件。

展開運算符(Spread Operator)

ES6的新寫法，使用三個點(…)，主要是連接陣列使用，範例如下：

const params = [ "hello", true, 7 ]
const other = [ 1, 2, ...params ] 

這樣就會將params裡的陣列複製到other裡面
[ 1, 2, "hello", true, 7 ]

若複製陣列，再傳值進去也不會受到影響

const arr = [1,2,3]
const arr2 = [...arr]

arr2.push(4) 

//push()向數組的末尾加一個或多個元素
//所以列印結果為[1,2,3,4]

把某個陣列展開，然後傳入函式作為傳入參數值

function sum(a, b, c) {
  return a + b + c
}
const args = [1, 2, 3]
sum(…args) 

//列印結果為1+2+3=6