2022最新JavaScript+jQuery筆記

初識JavaScript

瀏覽器執行js簡介

• 渲染引擎：解析css和html
• js引擎：編譯js代碼，逐行解析

<script type="null">
alert('我是編程語言，用來控制電腦網頁彈出你好'); alert('我是編程語言，用來控制電腦網頁彈出你好');
</script>

js組成

1. EcmaScript:JavaScript基本語法
2. DOM：頁面文檔對象模型（對頁面中的文檔進行操作）
3. BOM：瀏覽器對象模型（對瀏覽器視窗做出操作）

書寫位置

1.行內式

<!-- 1.行內式的js 直接寫到元素內部 -->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">

2.內嵌式

• 最好放到html下部分

 <script>
        // alert('沙漠駱駝');
    </script>

3.外部

• 結構更加易讀。

 <!-- 3.外部js寫法 雙標簽 -->
    <script src="my.js"></script>

javascript標簽中無需寫代碼，否則會被忽略！

JS中 let和var的區別

• ES6 新增了let命令，用來聲明局部變數。它的用法類似於var，但是所聲明的變數，只在let命令所在的代碼塊內有效，而且有暫時性死區的約束。
  先看個var的常見變數提升的面試題目：

題目1：
var a = 99;            // 全局變數a
f();                   // f是函數，雖然定義在調用的後面，但是函數聲明會提升到作用域的頂部。 
console.log(a);        // a=>99,  此時是全局變數的a
function f() {
  console.log(a);      // 當前的a變數是下麵變數a聲明提升後，預設值undefined
  var a = 10;
  console.log(a);      // a => 10
}

// 輸出結果：
undefined
10
99

ES6可以用let定義塊級作用域變數

在ES6之前，我們都是用var來聲明變數，而且JS只有函數作用域和全局作用域，沒有塊級作用域，所以{}限定不了var聲明變數的訪問範圍。
例如：

{ 
  var i = 9;
} 
console.log(i);  // 9

ES6新增的let，可以聲明塊級作用域的變數。

{ 
  let i = 9;     // i變數只在 花括弧內有效！！！
} 
console.log(i);  // Uncaught ReferenceError: i is not defined

let 配合for迴圈的獨特應用

let非常適合用於 for迴圈內部的塊級作用域。JS中的for迴圈體比較特殊，每次執行都是一個全新的獨立的塊作用域，用let聲明的變數傳入到 for迴圈體的作用域後，不會發生改變，不受外界的影響。看一個常見的面試題目：

for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // 同步註冊回調函數到 非同步的 巨集任務隊列。
    console.log(i);        // 執行此代碼時，同步代碼for迴圈已經執行完成
  }, 0);
}
// 輸出結果
10   共10個
// 這裡面的知識點： JS的事件迴圈機制，setTimeout的機制等

如果把 var改成 let聲明：

// i雖然在全局作用域聲明，但是在for迴圈體局部作用域中使用的時候，變數會被固定，不受外界干擾。
for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    //  i 是迴圈體內局部作用域，不受外界影響。
  }, 0);
}
// 輸出結果：
0  1  2  3  4  5  6  7  8 9

let沒有變數提升與暫時性死區

用let聲明的變數，不存在變數提升。而且要求必須 等let聲明語句執行完之後，變數才能使用，不然會報Uncaught ReferenceError錯誤。

console.log(aicoder);    // 錯誤：Uncaught ReferenceError ...
let aicoder = 'aicoder.com';
// 這裡就可以安全使用aicoder

ES6 明確規定，如果區塊中存在let和const命令，這個區塊對這些命令聲明的變數，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變數，就會報錯。
總之，在代碼塊內，使用let命令聲明變數之前，該變數都是不可用的。這在語法上，稱為“暫時性死區”（temporal dead zone，簡稱 TDZ）。

let變數不能重覆聲明

let不允許在相同作用域內，重覆聲明同一個變數。否則報錯：
Uncaught SyntaxError: Identifier 'XXX' has already been declared

例如：

let a = 0;
let a = 'sss';
// Uncaught SyntaxError: Identifier 'a' has already been declared

總結

ES6的let讓js真正擁有了塊級作用域，也是向這更安全更規範的路走，雖然加了很多約束，但是都是為了讓我們更安全的使用和寫代碼。

字面量

在電腦科學中，字面量（Literal）是在電腦中描述 事/物

javascript是否寫分號結尾

• 根據具體情況實際選擇
• 寫和不寫都可以

javaScript輸入輸出語句

• prompt取過來的值是字元類型的

變數

• 屬性值：var(variable的縮寫)
• 裝數據的盒子

變數語法拓展

• 更新變數：變數值以最後一次賦的值為準
• 同時聲明多個變數：聲明一個變數後，中間用逗號隔開
• let聲明變數
  let即關鍵字（let:允許，許可，讓，要），所謂關鍵字是系統專門提供的用來聲明的變數的詞語

var myfirstname = 99,
            kjlj = 54;

聲明變數的特殊情況

變數的命名規範

• 由字母，數字，下劃線，美元符號組成
• 嚴格區分大小寫
• 不能以數字開頭
• 不能是關鍵字：var,fo,while
• 變數名必須有意義
• 遵循駝峰命名，首字母小寫，後面單詞的首字母大寫:myFirstName

常量

• 概念：使用const聲明的變數為‘常量’
• 使用場景：當一個變數永遠不會改變的時候，使用 const來聲明，而不是let.
• 命名規範：和變數一致

註意：常量不允許重新賦值，聲明的時候必須賦值（初始化）
小技巧：不需要重新賦值的數值用const

變數聲明關鍵字總結

let - 現在實際開發的聲明方式（2022）
var - 以前的聲明變數的方式，會有很多問題（2019）
const -類似於let ,但是變數值無法被修改

數據類型

• js的變數數據類型是只有程式在運行過程中，根據等號右邊的值來確定的。
• js是動態語言，變數的數據類型是可以變化的。
• typeo檢測變數的數據類型
• 可以通過控制台輸出的字體顏色來判斷到底是哪個字元類型（藍色，數字；黑色，字元串；灰色 ，未定義）

數據類型的分類

• 簡單數據類型（Number,String,Boolean,Underfined,Null）
• 引用數據類型（object）

簡單數據類型

數字型

• 可以是整數，小數，正數，負數。
• isNaN（）:這個方法用來判斷非數字，並且返回一個值，如果是數字返回 false ，如果不是返回的是true。

特殊值

• Infinity，無窮大
• -Infinity, 無窮小
• NaN，縮寫：not a number，代表一個非數值

		//1.八進位 0~7
        var num1 = 010;
        console.log(num1);
        //2.十六進位 0~9 a~f
        var num2 = 0x9;
        console.log(num2);
        //數字型最大值
        console.log(Number.MAX_VALUE);
        //無窮大
        console.log(Number.MAX_VALUE * 2); //Infinity
        //數字型的最小值
        console.log(Number.MIN_VALUE);
        //無窮小
        console.log(Number.MIN_VALUE * 2); //-Infinity
        //非數字 NaN

NaN代表一個計算錯誤。它是一個不正確的或者未定義的數學操作所到的的結果
NaN是粘性的。任何對NaN的操作都會返回NaN

未定義類型（undefined）

未定義是比較特殊的類型，只有一個值 undefined.

• 什麼情況下出現未定義類型
  只聲明變數，不賦值的情況下，變數預設值為 undefined,一般很少【直接】為某個變數賦值為

字元串型String

• 字元串可以是引導中的任意文本，其語法為雙引號（“ ”），和單引號（' '）或反引號包裹的數據( ``` `)
• html使用雙引號，js推薦使用單引號
• 字元串嵌套（外單內雙）
  | 轉義符 |解釋說明|
  |:-----