JavaScript的我的分享

JavaScript的基礎語法:

JavaScript的語法是區分大小寫的

• 注意: 在JavaScript中是區分大小寫的

  • 變量名稱不能是中文

代碼示例:

var v1 = '一花一世界';
console.log(v1);
var Va1 = 'Yihuayishijie';
console.log(Va1);
var VA1 = 'YIHUAYISHIJIE';
console.log(VA1);

控制檯調用效果圖:

JavaScript語法中的空格與換行

• 注意: 並非JavaScript的語法內容 - 無關緊要的 (建議使用)

  • 由於這樣會使代碼看的更清晰利於閱讀代碼

示例代碼:

var v1 = '一花一世界';
console.log(v1);

---

JavaScript中的分號

• 可選項 - JavaScript語法並不強制要求必須寫分號 ( ; )

  • 可是在多個語句編寫在同一行時,必需要寫分號 ( ; )
  • 做用是 - 表示一句話的結束
  • 注意: 若是最後不寫分號控制檯也不會報錯可是編輯器會提示
• 建議: 不忽略結束符 ( ; )

示例代碼:

//帶分號的
var v1 = '一花一世界';
console.log(v1);

//不帶分號的
var v1 = '一花一世界'
console.log(v1)

區別圖:

JavaScript中的關鍵字和保留字

• 關鍵字就是JavaScript中有特殊做用的
• 注意關鍵字不能用於變量名(本身起的名)
• 保留字就是之後可能變成關鍵字一樣也不能用

---

常量與變量:

JavaScript中的變量

變量的概念:

• 變量就是存儲信息的容器 - (就是放東西的)放數據的
• 變量又叫臨時存儲
• 變量具體說就是有名字的容器 - 稱爲變量名
• 變量名稱的做用 - 就是經過名來找到值的數據信息
• 調用時會找最近的變量名 - 就近原則

變量的問題與須要注意的事情:

1. 注意: 每一個變量只能存儲一個值
2. 問題:侷限性太大

---

變量的定義

• 變量的定義語法結構:

  • 語法結構 - var 變量名稱 = 變量的值;

• 注意: JavaScript的變量是弱類型(也叫鬆散類型)

  • 定義變量時,但不初始化值時 - 控制檯並不清除該變量值的類型
  • 只有在變量初始化值時 - 控制檯才知道該變量的類型

• 注意:

  1. 變量容許, 只變量不賦值
  2. 變量容許, 先變量在賦值

代碼示例:

/* 1.定義變量,並初始化值 */
var v1 = '一花一世界';// 定義變量 - 變量的定義,而且初始化值
console.log(v1);// 調用變量

/* 2.定義變量,但沒有初始化值 */
var v2;// 指定義,沒有初始化值
console.log(v2);// 調用結果爲 undefined - 表示未定義

v2 = '一葉一孤城';
console.log(v2);

/* 3.多個變量同時定義 - 變量定義之間使用逗號分隔 */
var v3 = 100,v4 = 200;// 兩個變量聲明
console.log(v3);// 調用結果 - 100
console.log(v4);// 調用結果 - 200

控制檯調用效果圖:

變量的重複定義

• JavaScript中重複定義變量 - 語法容許
• 重複定義時 - 先將以前的變量在內存的空間進行銷燬,而後在建立 - 不建議使用

代碼示例:

var v1 = '一花一世界';
console.log(v1);// 調用結果爲 一花一世界

var v1 = 100;
console.log(v1);// 調用結果爲 100

---

變量的重複賦值

• JavaScript中變量是容許重複賦值的 - 建議使用

代碼示例:

var v1 = '一花一世界';
console.log(v1);// 調用結果爲 一花一世界

v1 = '一葉一孤城';// 賦值
console.log(v1);// 調用結果爲 一葉一孤城

---

遺漏的定義

• 遺漏的定義 - 就是變量沒有定義,而直接調用
• 若是沒有定義直接進行調用 - 在內存中沒有存儲的位置因此會報錯 -> 不容許使用
• 而定義但不初始化值進行調用 - 在內存中有位置因此能夠調用 -> 容許使用

• 注意:

  • JavaScript中容許只定義不賦值,可是不容許沒定義而直接調用

代碼示例:

console.log(v1);
/*
    只定義變量，但不初始化值
    * 結果 - (不報錯)輸出結果爲 undefined
 */
var v1;
console.log(v1);/* undefined */

JavaScript的常量

• 常量就是一個只讀的變量(定之後就不能改)

• 注意:

  1. 不能重複賦值
  2. 不能重複定義
  3. 常量定之後也不能用變量從新定義
• 定義常量的語法:
  const 常量名稱 = 值;

代碼示例:

/*
    ECMA5以前的版本 - (瞭解就好)
        * 語法並無提供常量的定義 - 只能定義變量
        * 認爲規定定義的是常量,可是使用的語法依舊是變量的語法
 */
var C = 100;//語法上依舊是變量, 人爲規定是常量
C = 200;// 語法上是變量

/*
    ECMA5之後的版本
      * 提供了定義常量的語法定義 - 一旦定義,值就不能被改變
        * 語法 - const 常量名 = 值;
        * 注意: 重複賦值 - 會報錯 - TypeError: Assignment to constant variable.
        * 重複定義也會報錯 - SyntaxError: Identifier 'C1' has already been declared
 */
const C1 = 100;


/*
    注意 - 常量不容許從新賦值 - 不然會報錯
*/
C1 = 200;


/*
    重複定義常量 - 一樣也不容許
*/
const C1 = 200;


/*
    重複定位爲變量 - 也一樣不容許
 */
var C1 = 200;


/*
    總的來講就是利用常量定義過以後就不容許使用了
      * 不論是變量,仍是常量的從新定義或從新賦值

    一般定義變量與常量的名稱的寫法:
      * 定義變量名稱 - 全小寫或者大小寫混合
      * 定義常量名稱 - 全大寫
 */

---

定義變量或常量時

• JavaScript是腳本語言 - 語法規則相對靈活(不建議)
• 定義變量或常量時，容許不寫修飾符(var或const)
• 沒有var或const關鍵字時，定義的默認爲變量

代碼示例:

s = 300;
console.log(s);
s = 400;
console.log(s);

---

常量定義的問題

• 常量的定義 - 必須定義時同時初始化值
• 若是隻定義而不初始化值 - 則會報錯
• 報錯結果爲 - SyntaxError: Missing initializer in const declaration

代碼示例:

const C;
console.log(C);

控制檯調用示例圖:

---

常量與變量的區別

• 變量:

  1. 定義變量使用var關鍵字
  2. 定義變量使用小寫
  3. 變量容許重複定義或賦值
  4. 變量容許只定義但不初始化值
  5. 變量的值容許改變

• 常量

  1. 定義常量使用const關鍵字
  2. 定義常量使用大寫
  3. 常量不容許重複定義或重複賦值
  4. 常量必須定義並初始化值
  5. 常量的值不能改變

---

數據類型:

• 數據類型就是對數據進行分類,

• 數據類型官方分爲兩大類:

  1. 原始類型 - 又稱原始值
  2. 引用類型 - 又稱內置對象

number類型:

• number類型:整數(Intger)和浮點數(就是小數|float或double) - 在JavaScript中不區分整數與浮點數

代碼示例:

var num =100;/* 步驟: 1.變量名的定義並初始化; 2.字面量或直接量定義數字值 */

浮點類型:

1. 若是寫的是".1"表示"0.1"的含義 -> 不推薦
2. 若是寫的是".0"表示爲整數 -> 不建議
3. 若是寫的是"10."表示爲整數 -> 不建議

示例代碼:

var num1 = 0.1;
console.log(num1);
/* 浮點類型 - '.1'表示'0.1'的含義 -> 不推薦 */
var num2 = .1;
console.log(num2);

var num3 = 10.1;
console.log(num3);
/* 浮點類型 - '.0'表示爲整數 */
var num4 = 10.0;
console.log(num4);
/* 浮點類型 - '.'表示爲整數 */
var num5 = 10.;
console.log(num5);

控制檯調用圖:

---

• 注意: number類型中的小數可能出現偏差問題: - 並非全部的小數計算都會出現偏差

  • 小數計算時必定要注意是否出偏差
  • 解決方法:經過數字值的換算來解決(把小數換成整數而後在換回來)

示例代碼:

/*
    number類型中的小數,在計算時可能出現偏差
    * 並非全部小數計算都會出現偏差
    * 小數的計算時,要注意結果是否出現偏差
      * 若是出現偏差 - 利用數字換算的方法計算,而後獲得結果在換算回來
       *好比: 0.3 - 0.2 給換算成整數 就是3 - 2  
*/

var x = 0.3;
var y = 0.2;
console.log(x - y);

控制檯調用示例圖:

---

• number類型中存在一個特殊的值 - NaN

  • 含義 - 表示當前的值不是以個數字值
  • 類型 - 屬於number類型
  • 特色 - NaN與任何值都不相等(包括與自身都不相等)

示例代碼:

var num = Number('一花一世界');/* 將一個普通文本內容轉換成number類型 */
console.log(num);// 調用結果爲 NaN - 表示當前這個值不是一個數字值

console.log(10 == 10);// 調用結果爲 true
console.log(NaN == NaN);// 調用結果爲 false

控制檯調用示例圖:

---

string類型:

• string類型 - 又叫字符串 -> 建議使用單引號
• 注意:字符串中若是寫的是數字依舊是字符串類型

• string類型 - JavaScript的字符串就是由單引號或雙引號包裹的

  • 能夠是 漢字, 數字 英文字母 等等
  • 注意: 在JavaScript中單引號和雙引號沒有區別 - 建議使用單引號

示例代碼:

var str1 = '一花一世界';
var str2 = "一花一世界";

• string類型 - 文本自己須要單引號或雙引號時有兩種方法:

  1. 若是是須要雙引號 - 那麼字符串只能使用單引號
  2. 若是是須要單引號 - 那麼字符串只能使用雙引號

示例代碼:

var str3 = '一花"一"世界';
console.log(str3);

var str4 = "一花'一'世界";
console.log(str4);

控制檯調用示例圖:

---

boolean類型

• boolean類型 - 只有兩個值(都是小寫
• 注意:boolean類型的值只能是小寫

1. true: 表示是
2. false: 表示不是

示例代碼:

var boo1 = true;
console.log(boo1);

/* 大寫或大小寫混合時 -> JavaScript識別爲另外一個變量名稱(會報錯)
    由於控制檯在判只能判斷小寫的true或false因此控制檯報錯
      * 因此控制檯報錯的緣由是 - True is not defined - 表示該變量值未定義
      * 實際上是沒有識別大小寫混合的true
*/
var boo2 = True;
console.log(boo2);

---

typeof運算符

• typeof運算符是判斷如下變量值的類型 - (只判斷原始類型)

  • 語法結構 - typeof 變量名稱
  • 結果 - 原始類型的名稱 (string類型)

示例代碼:

var num = 100;
var boo = true;
var str = '一花一世界';

console.log(typeof num);// 調用結果爲 number
console.log(typeof boo);// 調用結果爲 boolean
console.log(typeof str);// 調用結果爲 string

/*
    由於測試以後都打印在控制檯中了 - 能打印在控制檯中的信息自己就是字符串
     * 而後把typeof的結果賦值給另外一個變量了
     * 因此這個變量最後獲得的結果仍是字符串類型
 */
var v1 = typeof num;
console.log(v1);// 調用結果爲 number
console.log(typeof v1);// 調用結果爲 string

---

包裝類型 - (官方文檔中屬於引用類型)

• 經過包裝類型建立一個數字值類型的變量

  • 語法 - var 變量名稱 = new Number(數字值)

    • new Number() - 表示建立了一個Number類型的對象

• 如下兩種方式建立的數字值, 在使用上沒有任何區別

  • 建議使用字面量方式 - 緣由簡潔

示例代碼:

/* 構造函數方式 */
var num1 = new Number(100);
console.log(num1);// 調用結果爲 [Number: 100]

/* 字面量/直接量方式 */
var num2 = 100;
console.log(num2);// 調用結果爲 100

• 兩個方式的惟一區別就是

  • 構造函數方式 用typeof運算符運算結果是對象類型
  • 字面量方式 用typeof運算符運算結果是number類型

示例代碼:

console.log(typeof num2);// 調用結果爲 number
console.log(typeof num1);// 調用結果爲 object(對象)

• 備註: 包裝類型中的String 類型和 Boolean 類型和 Number 類似

---

包裝類型的運算符 - instanceof運算符

• 注意:typeof運算符只能判斷原始類型不能判斷包裝類型

示例代碼:

var str = new String('一花一世界');
var num = new Number(100);
var boo = new Boolean(true);

// typeof運算符只能判斷原始類型
console.log(typeof str);// 調用結果爲 object
console.log(typeof num);// 調用結果爲 object
console.log(typeof boo);// 調用結果爲 object

• typeof運算符與instanceof運算符的區別

  • typeof運算符

    1. 用於判斷原始類型
    2. 語法結構不一樣 -> typeof 變量名稱
    3. 獲得結果不一樣 -> 原始類型的名稱

  • instanceof運算符

    1. 用於判斷引用類型(包裝類型)
    2. 語法結構不一樣 -> 變量名稱 instanceof 引用類型名稱
    3. 獲得結果不一樣 -> 布爾類型的值(true或false)

---

特殊類型 - (官方分類屬於原始類型)

• undefined - 在JavaScript表示爲空的含義

  • 若是一個變量的值等於undefined -> 變量是存在的，但沒有值
  • undefined類型中只存在一個值(undefined)

• 獲得undefined值的狀況以下：

  1. 定義變量時，只聲明，而不初始化值 -> undefined
  2. 定義變量時，初始化值爲 undefined -> undefined
• 注意 - 獲得undefined值的狀況不止以上兩種

示例代碼:

var v;
console.log(v);// 調用結果爲 undefined

var c = undefined;
console.log(c);// 調用結果爲 undefined

console.log(typeof v);// 調用結果爲 undefined - 類型名稱

• null

  • 做用 - 用於將指定變量從內存中進行釋放
  • 實現方法: 就是將一個指定變量的值賦值爲null就行
  • null類型中只存在一個值(null)
  • 注意:typeof給null的類型是錯的,可是不會報錯
    null類型名稱就叫null

示例代碼:

var v = null;

/* 如下結果是錯誤的 */
console.log(typeof v);// 調用結果爲 object

 console.log(v instanceof Null);// 調用結果爲 報錯
console.log(v instanceof Object);// 調用結果爲 false

undefined與null的區別:

• 不一樣點:

  • 變量名爲undefined值時 - 內存中依舊佔優空間
  • 而變量名爲null值時 - 內存中內有空間

• 相同點:

  1. 都是原始類型
  2. 都保存在棧中 - 就是在內存中存儲在一個位置上,這個位置叫棧