摘要：語法和數據類型正文開始本章節復習的是中的基本語法，變量聲明，數據類型和字面量。聲明一個塊作用域的局部變量，可賦一個初始值。變量聲明有三種方式如，聲明局部變量和全局變量。

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

1.MDN 語法和數據類型

正文開始

本章節復習的是JS中的基本語法，變量聲明，數據類型和字面量。

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

// 單行注釋
/*
    多行注釋
*/

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"]

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

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

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
// "

常用特殊字符:

本部分內容到這結束

歡迎關注微信公眾號【前端自習課】每天早晨，與您一起學習一篇優秀的前端技術博文 .