【重溫基礎】1.語法和資料型別

ECMAScript JavaScript · 發表 2018-12-10 00:23:12

摘要：最近開始把精力放在重新複習JavaScript的基礎知識上面，不再太追求各種花枝招展的前端框架，框架再多，適合實際專案才是最重要。上星期在掘金髮布了幾篇文章，其中最大塊算是【複習資料】ES6/ES7/ES8/ES9資料整理(個人整理) ，也是讓我好好把這些規範複習...

最近開始把精力放在重新複習JavaScript/">JavaScript的基礎知識上面，不再太追求各種花枝招展的前端框架，框架再多，適合實際專案才是最重要。

上星期在掘金髮布了幾篇文章，其中最大塊算是ofollow,noindex">【複習資料】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	垂直製表符
'	單引號
"	雙引號
\	反斜槓字元（\）