【重溫基礎】1.語法和數據類型

最近開始把精力放在從新複習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
// "

經常使用特殊字符:

字符	含義
b	退格符
f	換頁符
n	換行符
r	回車符
t	Tab (製表符)
v	垂直製表符
'	單引號
"	雙引號
\	反斜槓字符（）

---

本部份內容到這結束

Author	王平安
E-mail	pingan8787@qq.com
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推薦	https://github.com/pingan8787...
JS小冊	js.pingan8787.com

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