最近開始把精力放在重新複習JavaScript的基礎知識上面，不再太追求各種花枝招展的前端框架，框架再多，適合實際專案才是最重要。
上星期在掘金髮布了幾篇文章，其中最大塊算是 【複習資料】ES6/ES7/ES8/ES9資料整理(個人整理)，也是讓我好好把這些規範複習了一遍，雖然不是完全的原創，而是自己的一些複習筆記，但是還是讓我感覺還是挺有用的，在專案開發過程中，有有意識的去使用到這些新的規範。
這次開始複習 MDN 這個系列的文章，鞏固好自己的基礎，也讓自己養成記錄學習的習慣，當然這些文章我也會同步到自己的部落格。
希望自己的文章會對各位有所幫助，也歡迎各位大佬指點。

1.MDN 語法和資料型別

正文開始

本章節複習的是JS中的基本語法，變數宣告，資料型別和字面量。

首先要記住：JavaScript 對大小寫敏感，即var att; 和 var Att 是兩個不同變數。

1.註釋

// 單行註釋
/*
    多行註釋
*/
複製程式碼

2. 宣告

JavaScript有三種宣告方式：

• var 宣告一個變數，可賦一個初始值。
• let 宣告一個塊作用域的區域性變數，可賦一個初始值。
• const 宣告一個塊作用域的只讀命名的常量。

宣告變數

變數的名字又叫做“識別符號”，必須以字母、下劃線（_）或者美元符號（$）開頭，並且區分大小寫。
變數宣告有三種方式：

• 如var a = 1，宣告區域性變數和全域性變數。
• 如a = 1，宣告一個全域性變數，且在嚴格模式報錯，不應該使用。
• 如let a = 1，宣告一個塊作用域的區域性變數。

注意：

• 若沒有為變數賦初始值，則值預設為undefined；

let a;
console.log(a);   // undefined
複製程式碼

• 若沒有宣告變數而直接使用，會丟擲ReferenceError錯誤；

console.log(b);   // Uncaught ReferenceError: b is not defined
複製程式碼

• 當變數值為undefined
  時，布林值環境會當做false，數值環境會當做NaN；

var a;
if(!a){
    console.log('a為undefined'); // a為undefined
}
a + 1;  // NaN
複製程式碼

• 當變數值為null時，布林值環境會當做false，數值環境會當做0；

let a = null;
if(!a){
    console.log('a為unll'); // a為unll
}
a + 1;  // 1
複製程式碼

變數作用域

全域性變數：即宣告在函式之外，當前文件所有地方都可以訪問；
區域性遍歷：即宣告在函式內部，僅在當前函式內可以訪問；
在ES5之前沒有語句塊作用域的概念，並只能使用var進行宣告，用var宣告的變數，在函式內和全域性都可以訪問，而在ES6開始，將只能在宣告的作用域中使用：

if(true){
    var a = 1;
}
a; // 1

if(true){
    let b = 2;
}
b; // ReferenceError: b is not defined
複製程式碼

變數宣告提前

即將變數的宣告提升到函式或語句的頂部，並返回undefined直到變數被初始化操作。
千萬注意：
ES5以及之前，才有變數宣告提前，在ES6開始就不存在變數提升。

// ES5及之前
console.log(a);   // undefined
var a = 1;
console.log(a);   // 1

// ES6開始
console.log(b);   // Uncaught ReferenceError: b1 is not defined
let b = 2;
console.log(b);   // 2
複製程式碼

函式提升

函式宣告有兩種方式：函式宣告和函式表示式兩種方式：

// 函式宣告
f();   // 'hi leo'
function(){
    console.log('hi leo');
};

// 函式表示式
g();   // Uncaught TypeError: g is not a function
var g = function(){  // 換成 let 宣告也一樣
    console.log('hi leo');
}
複製程式碼

全域性變數

全域性變數預設是全域性物件（window）的屬性，常常使用window.variable語法來設定和訪問全域性變數。
這邊還需要記住：

• ES5之中，頂層物件的屬性等價於全域性變數（瀏覽器環境中頂層物件是window，Node中是global物件）；
• ES6之中，var/function宣告的全域性變數，依然是頂層物件的屬性，但是let/const/class宣告的全域性變數不屬於頂層物件的屬性，即ES6開始，全域性變數和頂層物件的屬性是分開的。

// ES5
var a = 'leo';
window.a; // 'leo'

// ES6
let b = 'leo';
window.b; // undefined
複製程式碼

常量

ES6之後我們可以使用const來宣告一個只讀的常量，並且在宣告時必須賦值，之後在相同作用域中不能賦值也不能重新宣告，否則報錯。

const a;   
// Uncaught SyntaxError: Missing initializer in const declaration

const b = 'leo';
b = 'hi';
// Uncaught TypeError: Assignment to constant variable.

function f(){
    const a1 = 'hi';
    console.log(a1);
}
f(); // 'hi'
const a1 = 'hi leo';
a1; // "hi leo"
複製程式碼

儘管const宣告的變數不能直接修改值，但是對於物件和陣列，卻是不受保護可以修改的：

const a = {name:'leo',age:25};
a.name = 'pingan'; // a => {name: "pingan", age: 25}

const b = ['hi', 'leo'];
b[1] = 'pingan';   // b => ["hi", "pingan"]
複製程式碼

3.資料結構和型別

資料型別

JavaScript中一共分為7中不同型別：

• 六種原型資料型別：
  • 1.Boolean : 布林值，true和false;
  • 2.null : 對大小寫敏感（即null/Null/NULL完全不同）;
  • 3.undefined : 空型別，變數未定義時候的值；
  • 4.Number : 數值型別，如100;
  • 5.String : 字串型別，如'hi pingan';
  • 6.Symbol（ES6新增） : 表示一種唯一且不可變的資料;
• 以及Object物件型別

資料型別轉換

由於JavaScript是門動態型別語言，因此在開發過程可以不需要指定資料型別，在執行時會自動轉換：

var a = 100;
a = 'hi leo'; // 這樣不報錯
複製程式碼

另外還有：

let a1 = '10';
let b1 = 20;
a1 + b1; // 30

let a2 = 'leo ' + 10 + ' age'; // 'leo 10 age'

'10' - 5;  // 5
'10' + 5;  // 105
複製程式碼

轉換字串為數字小技巧
小技巧很多，這裡說個最簡單的：

// 這樣不會使兩個數字計算總和：  
'1.1' + '1.2';   // '1.11.2'

// 實際上要這樣：
+'1.1' + +'1.2'; // 2.3
複製程式碼

4.字面量

字面量是用來表示如何表達這個值，簡單理解就是變數賦值時右邊的都是字面量。比如：

let a = 'hi leo';
複製程式碼

hi leo為字串字面量，a為變數名。
字面量分為七種：

• 1.陣列字面量
• 2.布林字面量
• 3.浮點數字面量
• 4.整數字面量
• 5.物件字面量
• 6.正則字面量
• 7.字串字面量

陣列字面量

使用陣列字面量建立陣列的時，指定元素的值，並作為陣列的初始化，從而確定陣列長度。

let a = ['hi','leo','hello','pingan'];
a[1];     // 'leo'
a.length; // 4
複製程式碼

若使用多餘逗號，作為陣列字面量，則值為undefined，並且陣列長度也會正常計算：

let a = ['hi', ,'leo'];
a[0];  // 'hi'
a[1];  // undefined
a.length; // 3
複製程式碼

布林字面量

只有true和false：

let a = true;
複製程式碼

整數字面量

整數可以用十進位制（基數為10）、十六進位制（基數為16）、八進位制（基數為8）以及二進位制（基數為2）表示。

浮點數字面量

浮點數字面量組成：

• 一個十進位制的整數，可以帶正負號;
• 小數點
• 小數部分（只能十進位制）
• 指數部分

let a = 3.14;  // 3.14
let b = -.001; // -0.001
let c = -3.14e+12; // -3.14*1012
let d = .1e-23;// 0.1*10 - 23 = 10-24 = 1e-24
複製程式碼

物件字面量

物件字面量是由{}包含一個或多個 鍵:值 對的列表：

let a1 = 'hi leo';
let a2 = function(){ return 'my name is pingan' };

let obj = {
    n1 : 'pingan',
    n2 : a1,
    n3 : a2()
}
obj; // {n1: "pingan", n2: "hi leo", n3: "my name is pingan"}
複製程式碼

也可以使用任意數字或字串作為物件屬性的名字，但必須用''引號包裹：

let obj = {
    "" : "hi leo",
    "!" : "hi pingan",
    2 : 'hi number'
}
obj;     // {2: "hi number", "": "hi leo", !: "hi pingan"}
obj[""]; // "hi leo"
obj[2];  // "hi number"
複製程式碼

正則字面量

使用字元被正斜槓“/”圍起來的表示式：

var a = /ab+c/; 
複製程式碼

字串字面量

使用單引號（''）或者雙引號（""）括起來的字串：

let a = 'leo';
a.length;  // 3
複製程式碼

ES6中新增了模板字串，作用於：

• 方便拼接字串
• 有效實現字串換行
• 防止注入攻擊
• 建立基於字串的高階資料抽象

// 拼接字串
let name = 'leo';
let a = `
    hi ${name}
`;
a; // 'hi leo'

// 換行
let b = `
    hi
    leo
`;
b;
// "
//     hi
//     leo
// "
複製程式碼

常用特殊字元:

本部分內容到這結束