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

pingan8787發表於2019-02-16
資料型別

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

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

相關文章