• W_JS個人筆記
  • • 閱讀方針
    • 測試js
  • this
• 術語筆記
• firstClass function
  • key 作爲變數拿來取直
  • 集合資料結構的分類
• 淺拷貝vs深拷貝
  • 對象字面量
  • 科理化
  • 運算子
  • 閉包closure
  • pure function
  • partial application
  • callback
    • 簡單的來說，就是
  • Ajax
  • 迴圈
  • for
    • continue vs break
• undefined
• NaN
• null
• 建構式 constructor
• 樣板字面值
• 已加強理解或使用過
  • • *對preseInt()的理解
    • *對Number()得理解
• i++ vs ++i
• type module vs commonJS
• 語法糖
• Node.js
• 解構賦值（destructuring assignment）
• 正正提到得概念
  • 三元運算子ternary
• 箭頭函式
• throw & return
• 相依性
• 物件理解
• 陣列
• export & import
• function()
• object
  • • Object.value
    • Object.define系列
• 運算子
  • • 邏輯運算
• Variables
  • • var
    • let
    • const
    • 字串
• String
  • 基本認知
  • String Methods
    • lenght
    • chatAt()
    • charCodeAt()
    • at()
    • slice()
    • trim()
  • String Search
    • indexOf()
    • lastIndexOf()
    • search()
    • matchAll()
• number
• Array
  • • sort
  • Array method
  • Array Iteration
    • reduce()
• if else & ?
• this Keyword
• bigint
  • • Safe Integers
• Number
  • Number Methods
    • toString()
    • toExponential()
    • toFixed()
    • toPrecision()
    • Number()
    • parseInt()
    • parseFloat()
    • 其他相關
  • Number Properties
• typeof()
  • • json
    • fetch
  • Expressions & operators
    • instanceof
• Event
  • 冒泡事件
• 累積表達式（cumulative expression）
  • console.error vs throw new Error
    • console.error
    • throw new Error
  • Vue表單的課
  • 頁面刷新技術 Router

W_JS個人筆記

三明治心得

閱讀方針

• 會很混亂 個人筆記
• 用現有知識拼湊出來得文章，會持續更新
• code範例
• 解釋細節
• 看不懂來跟我Argue
• 0717 變更為術語筆記＋邏輯筆記

測試js

• 首先需要先安裝node.js建立環境
• 在開啟專案的資料夾
• 開啟js
• 開啟terminlctrl+~
• 輸入node 當按名稱.js，這樣就可以測試囉

this

this，指向呼叫他的物件，這句話我咀嚼了很久，由於 Angular 有使用大量 this，所以我又去回顧了。基本上 this 是指向某個物件

//part1
let hello = (){
    console.log(this)
}

hello()
//呼叫完會有以下
//非嚴格，一般環境下是指向 window；
//非嚴格，node 是 global；
//嚴格則是 undefinend


//part2
class Hello{
    setName(name){
        console.log(this.name)
    }
    getName(){
        console.log(this.name)
    }
}

const helloInCn = new Hello()
helloInCn.setName("你好")
helloInCn.getName()//你好
//這裡的 this 就是指向 helloInCn

術語筆記

firstClass function

「第一級公民」指的是你可以將函式存放在變數、物件以及陣列之中，同時，你也可以將函式傳遞到函式，或者由另一個函式來回傳它。 而且，函式具有屬性，因為它實際上是一個「物件」。

key 作爲變數拿來取直

cosnt obj = {
    zh_tw: "yahoo.com.tw",
    en:"google.com"    
}

const obj = {
    zh_tw: "yahoo.com.tw",
    en:"google.com"    
}


let lang = "en"

console.log(obj[lang])//google.com

集合資料結構的分類

這些結構可以根據功能進一步分類：

鍵值對資料結構（Key-Value Pairs）

• Object
• Map
• WeakMap

集合型資料結構（Value Collections）

• Set
• WeakSet

淺拷貝vs深拷貝

// 原始陣列
const originalArray = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

// 使用 Array.prototype.slice() 進行淺拷貝
const newarr = [...originalArray]

// 修改淺拷貝中的元素
originalArray[0].age = 26;

// 打印原始陣列和淺拷貝
console.log('Original Array:', originalArray);
console.log('newarr Copy:', newarrCopy);
//淺拷貝對原先得originalArray修改會影響到newarr
/*[
    {
        "name": "Alice",
        "age": 26
    },
    {
        "name": "Bob",
        "age": 30
    },
    {
        "name": "Charlie",
        "age": 35
    },
]*/


originalArray[3] = {name: "watson", age:30}


console.log('Original Array:', originalArray);
console.log('newarr Copy:', newarrCopy);
//淺拷貝對originalArray新增一筆資料不會影響到newarr
/*[
    {
        "name": "Alice",
        "age": 26
    },
    {
        "name": "Bob",
        "age": 30
    },
    {
        "name": "Charlie",
        "age": 35
    },
    {
        "name": "watson",
        "age": 30
    }
]*/

對象字面量

目前理解為"object literal" ，指的是用大括號 {} 直接創建和初始化物件的語法形式。

科理化

定義：簡單來說就是執行參數的方法，但是參數不是一次處理完，而是一層一層的往下走，透過函式先執行第一個，往裡面之後，在透過另一個函式執行下一個參數，直到執行完畢

首先要函式裡面在包一次函式;隨後先給一半參數，另外一半之後在給它並且執行

// 柯里化的加法函數
function curriedAdd(x) {
  return function(y) {
    return x + y;
  };
}


console.log(curriedAdd(2)(3)); // 5，這裡兩個()代表呼叫兩個函式

運算子

一元正號運算子 會轉換型別

操作數型別	轉換結果
number	保持不變。
string	嘗試將字串解析為數值。如果字串無法解析，則結果為 NaN。
boolean	true → 1，false → 0。
null	轉換為 0。
undefined	轉換為 NaN。
object 或 array	先嘗試調用 valueOf()，若無法轉換，再調用 toString()，最終結果轉換為數值或 NaN。

console.log(+{});          // NaN (物件無法轉為數值)
console.log(+[]);          // 0 (空陣列轉為空字串，空字串再轉為 0)
console.log(+["123"]);     // 123 (陣列中只有一個元素，該元素為數值型字串)
console.log(+["123abc"]);  // NaN
console.log(+[1, 2, 3]);   // NaN (多個元素的陣列無法直接轉為數值)

閉包closure

白話就是說內部函式可以摳得到外部得變數，並且除存使用

pure function

指一個function是否依賴外部變數 如果不會就是pure，會就是非pure
拈花惹草就不pure，可以先這樣理解，但沒有好壞

// 非純函數：輸出取決於外部狀態，且有副作用
let count = 0;

function increment() {
  count += 1;// 修改外部狀態
  return count;
}

console.log(increment()); // 1
console.log(increment()); // 2（輸出取決於外部變量 count 的值）

partial application

不一次給全部參數，而是一次只給一部分參數得到新的function使用方法

callback

CallBack又稱為回調、回函、回呼函式，光是這個翻譯就看不懂了，在這邊我將CallBack的定義解釋為：在某一函式執行時或執行後，依條件或依序去執行所傳遞進來的函式。

簡單的來說，就是

一個程式執行完再去執行另一個程式

1、讓函式成為另一個函式的參數

2、讓函式控制參數函式的執行時機

function A(FnB, FnC) {
    setTimeout(function(){
        console.log('this is a function');
        FnB(FnC);
    },0);
}

function B(Fn) {
    console.log('this is B function');
    Fn();
}

function C() {
    console.log('Run Finish');
}

A(B,C)

//回傳
this is a function
this is B function
Run Finish

Ajax

可以向伺服器傳送及取得資料，並且不需要重新整理瀏覽器畫面，這樣可以大幅提升使用者體驗並且減少伺服器負擔

迴圈

for

continue vs break

cotinue

• continue 關鍵字用於跳過當前迴圈的剩餘程式碼，直接進入下一個迴圈迭代。
• 當需要跳過某些條件下的迴圈邏輯，但不結束整個迴圈。
• 在不符合某些條件時，立即進入下一輪迴圈。

break

• break 關鍵字用於立即終止迴圈的執行，不再執行迴圈中剩餘的程式碼，並跳出迴圈。
• 當迴圈條件外的某個條件達成時需要提前結束迴圈。
• 用於避免無限迴圈或在特定條件下停止迴圈的執行。

undefined

已宣告變數未定義就會跳undefined

NaN

型別沒有成功轉型為數值 無法計算就會跳出NaN

null

有意而為之 想讓變數是空值

let nothing = null;

如果用typeof檢查會發現跳出object 這是null成年舊bug 已不可動搖

建構式 constructor

也是function 差別

• 函式名稱開頭要大寫，為了容易變別
• 不能用 return 指定要回傳其他內容，如果加上 return，就只會回傳指定內容，而不會回傳一個新物件。

// 定義一個建構函數（Constructor）
function Car(brand, model, year) {
  this.brand = brand;
  this.model = model;
  this.year = year;
}

// 使用建構函數創建物件實例
let myCar = new Car('Toyota', 'Corolla', 2020);

// 輸出實例的屬性
console.log(myCar.brand);  // Toyota
console.log(myCar.model);  // Corolla
console.log(myCar.year);   // 2020

//另一種方式
// 定義一個類（Class）
class Car {
  constructor(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
  }

  // 定義一個方法
  displayInfo() {
    console.log(`Brand: ${this.brand}, Model: ${this.model}, Year: ${this.year}`);
  }
}

// 使用類創建物件實例
let myCar = new Car('Toyota', 'Corolla', 2020);

// 呼叫實例的方法
myCar.displayInfo();  // Brand: Toyota, Model: Corolla, Year: 2020

樣板字面值

它產生出來得會是字串，如果想要數字可運算那就寫在一起 ${num+num} like this

• 插值表達式
  使用${}語法將變量或表達式嵌入到字符串中：

• 多行字符串
  樣板字面值可以直接換行，不需要使用轉義字符：

• 嵌入表達式
  可以在樣板字面值中嵌入任意的JavaScript表達式：

• 嵌套樣板字面值
  你可以在樣板字面值中嵌套樣板字面值：

• 樣板字面值中的函數調用
  可以在樣板字面值中調用函數：

• 樣板字面值中的條件式
  可以使用條件表達式來動態構建字符串：

• 樣板字面值中的數組或對象
  你也可以使用樣板字面值來處理數組或對象：

其他搞法

可以使用 funtion 當模板字串

function A(){
console.log()
return 
}

A`xxx`//一種呼叫方式 不是（）而是``

---

已加強理解或使用過

*對preseInt()的理解

• 可以將字串轉換回數字
• 整數

*對Number()得理解

• 強制得將字串轉為數字

---

i++ vs ++i

call by value
++i：i 的值會增加 1，並且立即返回更新後的值。
一句話總結：先更新，後返回新值。

i=1
j=i++

//i=2,j=2

i++：i 本身的值確實會增加，但返回的值是增加前的原本值。
用一句話說就是：返回舊值，更新新值。

i=1
j=i++

//i=2,j=1

type module vs commonJS

這是js模組，會引想一些語法，比方我遇到得給使用者輸入值得部份

語法糖

指電腦語言中添加的某種語法，這種語法對語言的功能沒有影響，但是更方便程式設計師使用。語法糖讓程式更加簡潔，有更高的可讀性。

語法鹽（英語：syntactic salt）

指的是不容易寫出壞代碼的語法特性。這些特性強迫程式設計師做出一些基本不用於描述程式行為，而是用來證明他們知道自己在做什麼的額外舉動。

語法糖精（英語：syntactic saccharine）

或者說語法糖漿（英語：syntactic syrup），指的是未能讓編程更加方便的附加語法。

Node.js

解構賦值（destructuring assignment）

間單來說就是把右邊想同數量得值傳給左邊相等數量得值

正正提到得概念

ex. main()
只要看到這個 不管是否有參數 都是一種呼叫方式

三元運算子ternary

箭頭函式

• 不會有作用域隔閡
• 省去function，用=>取代
• 箭头函数在只有一条语句时可以省略大括号 {}，
• 多条语句或需要显式返回值时，通常需要使用大括号 {}。

const function1 = x => x+1   會有回傳值
const function1 = x => {x+1} 要家return才有回傳值

---

throw & return

兩者都能中斷程式碼執行，那是不是用哪個都沒差呢?
先說 return ，只能在 function 中使用，用來回傳值並中斷 function 執行。

回傳值。

function test(){
  return 123;
  xxxxxx // 這邊不會執行
}
test(); //123

如果沒寫會回傳 undefined。

function test(){
  return;
  xxxx //這邊不會執行
}
test(); // undefined

再來是 throw，任何地方都能用，用來拋出例外並中斷程式碼執行。在瀏覽器會用紅色來呈現例外。

throw 123; // Uncaught 123

不能單獨使用，一定要丟出東西，不然會出錯。

throw; // Uncaught SyntaxError: Unexpected token ';'

最後來整理一下:

兩者都能中斷程式碼。
return 只能在 function 中使用， throw 沒限制。
return 後面可以不用寫值， throw 後面一定要有值。

---

相依性

• 在計算時執行方像，如果是從左往右，就是左相依性，反之就是右相依性
  • 左相依性：true || false
  • 右相依性：var a = 100

物件理解

• cerly breckt
• key:value
• 一個資料結構可以存放所有資訊

陣列

• 中括號

export & import

function()

• 函式
• 可重複利用的程式碼塊
• 避免撰寫重複的程式碼
• 如果return在裡面，就會以return為標準

---

object

• 物件也是變數
• 物件與物件之間不能比較（本身例外），即便內容一致，會得出false，若是用函式定義物件想等，那這樣就會是true
• 物件可以除存多個值，複合型別
• 物件與變數的不同在於，變數通常用來存儲單個值，而物件則可以存儲多個值

Object.value

這是一個靜態方法，因為

Object.define系列

保護你的物件，位物件設立開關

const obj = {}; // 先建立空物件

Object.defineProperties(obj, {
  name: {
    value: 'John',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 30,
    writable: false, // 不可改變
    enumerable: true, // 可列舉
    configurable: false // 不可刪除或重新定義
  },
  greet: {
    value: function() {
      return `Hello, my name is ${this.name}`;
    },
    enumerable: false, // 不列舉
    writable: false, // 無法改寫
    configurable: true
  }
});

console.log(obj.name); // "John"
console.log(obj.age); // 30
console.log(obj.greet()); // "Hello, my name is John"

// 修改 writable: true 的屬性
obj.name = 'Jane';
console.log(obj.name); // "Jane"

// 嘗試修改 writable: false 的屬性（無效）
obj.age = 25;
console.log(obj.age); // 30

// 列舉屬性
console.log(Object.keys(obj)); // ["name", "age"]，"greet" 被排除

Object.defineProperties() 與 Object.defineProperty() 的區別

特性	Object.defineProperty()	Object.defineProperties()
定義屬性數量	一次只定義一個屬性	一次定義多個屬性
是否細化屬性行為	可以細化（writable, enumerable 等）	可以細化每個屬性行為
調用複雜度	適合單一屬性操作	適合大量屬性設置

---

運算子

• 優先性與相依性
  
  
• =符號在js裡面叫做指派運算子，意旨把右邊的值指派給左邊
  boolen+number=值
  boolean+boolean=0

邏輯運算

• || = or
  • 基本上第一個值是true就會回傳true&第一個值，EX:
    • 3｜｜10 回傳 3
    • false｜｜10 回傳 10
    • 0｜｜10 回傳 10 0=false
  • 只要有一個參數是true就會回傳true
• && = and
  • 在&&後面得值會決定一切，除非前面是false
    • 3 && 10 在都是true情況下回傳10
    • false && 10 回傳false 因為前面是false後面就免談，此現象也稱為短路性質
    • 同上提 0 && 20 造上面邏輯，會是回傳0，0=false
  • 嚴格判斷，只要一方式false就是false
• ! = not 感覺很像相反

---

Variables

var

• 變數
• 1995-2015 主流用於舊網站

let

• 變數
• 2015加入
• 如果不能使用const就用let

const

• 常數
• 2015加入
• 嚴格規定,數值不可以更改情況下可以使用

字串

如果第一位為" "字串，那整串都會變字串

• let x = "5" + 2 + 3 求出523
  如果最後一位變成字串，那前面會相加在變字串
• let x = 2 + 3 + "5" 求出55

---

String

基本認知

• 只要有""或''都是字串
• 字串，如果是求字符位置，第一位數為[0]
  • EX:'hello'，h得位置是在第0位，e則是第1位，以此類推
• 字串，如果是求字符長度，第一位數為[1]
  • EX:'hello',有五個字，所以長度是5

String Methods

lenght

• length自動計算字串得總數量，下方得出26

<p id="demo"></p>

<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>

chatAt()

• 得出字串指定索引得位置，會得出H

<script>
var text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charAt(0);
</script>

charCodeAt()

• 回傳指定索引得unicode，會得出72，H在unicode是72

<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charCodeAt(0);
</script>

at()

• 跟chatAt()很像，唯一不同是at可以用負值，會得出D

<script>
var text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charAt(-1);
</script>

slice()

• 切分，選取兩個參數作為起始點與結束點，會的出Banana

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7,18);
document.getElementById("demo").innerHTML = part; 
</script>

• 如果指填7，那就會從第7位之後往前推，得到"Banana, Kiwi"
• 如果填-12，答案也會是"Banana, Kiwi"，等於事先從尾段先到回來，在往前
• 如果是-12,-6，答案會是"Banana"
• 其他項相似，先知道就好
  • substring()
  • substr()

trim()

• 會消除字串兩側空白，並算出長度，trim會得出text1為12

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trim();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

• 其他項相似，先知道就好
  • trimStart()
  • trimEnd()

String Search

indexOf()

• 回傳字串位置，會得出7

let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");
document.getElementById("demo").innerHTML = index; 

lastIndexOf()

• 會回傳出文字在字串中最後一次出現得位置，會得出21

let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");
document.getElementById("demo").innerHTML = index;

• 以上兩個如果在字串中找不到相應得值，就會回傳-1
• 都可以在輸入第二參數來作為索引起始點let index = text.indexOf("locate",15);

search()

• 會回傳在字串中，第一次出現得位置，會得出7

let text = "Please locate where 'locate' occurs!";
let index = text.search(locate);
document.getElementById("demo").innerHTML = index;

matchAll()

• 在字串中搜尋指定的文字，會回傳所有相關文字，會得到Cats,Cats
• 如果加上(/Cats/gi)會全選

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

---

number

• 如果字串後面接著數字，那數字會背編譯程字串，數字相加無效
• 數字雖然+無效，但是可以- * /，比方"10"*"10"="100"

---

Array

• 索引起始為[0]，所以[0]是第一位元素，[1]是第二元素

sort

可以理解為陣列排序工具

• 純粹使用就是將陣列得內容轉為字串，並且擷取unicode比較大小來排序
  • 如果有加入比較，就是用大小排序 比方a-b 就會是小到大 b-a反之f

Array method

Array Iteration

reduce()

• 將陣列的所有值轉換為單一值
• 運作原理是由左到右
• reduce()不會刪減陣列得數值

<!-- 所有數值 -->
const numbers = [45, 4, 9, 16, 25]; 
let sum = numbers.reduce(myFunction);

<!-- myFunction()裡面可以自訂值得名稱，最多不超過四個參數 -->
function myFunction(total, value, index, array) {
  return total + value; 
}

retuen ＝ 99

//total：目前的累加總和。
//value：目前正在處理的元素值。
//index：目前正在處理的元素索引。
//array：原始的陣列。

• total是計算機，當沒有任何相加得情況下回船會是第一個數值，也就是45

• value是迭代，它會在數值中跑，跑到最後一位就停了，照上面最後一位也就是25

• index代表值得數量，如上方number，總共有五位，但是計算方式是第一位為0,第二位是1，以此類推，所以會得出4。如果是在相加時，它計算方式就會變成0+1+2+3+4(依照值得數量，以此類推)

• array代表得是顯示數值，回傳會是45, 4, 9, 16, 25

所以根據上面return total + value; 就可以得知算式＝45+4+16+25=99
如果是return total + index; 就會是＝45+0+1+2+3+4=55
如果是return value + index; 它就會使用迭代，過程中參數都會相加，但是只會取最後相加得值=45+0=45,4+1=5,9+2=11,16+3=19,25+4=29所以可以得知最終回傳是29

---

if else & ?

? 直接判斷 true false ，不能寫throw Error

---

this Keyword

---

bigint

• js整數最多只能到15位，所以這是用來解決超過15位得問題
• 可以寫bigint(9999999999999999)，也可以在數字後面加上n=9999999999999999n
• 不能有小數

Safe Integers

• 安全整数是指 JavaScript 中可以精确表示的整数范围。
• 安全整数的范围是从 -(2^53 - 1) 到 (2^53 - 1)。
• 这个范围足够大，可以满足大多数实际应用的需求。
• 安全整数范围是从-9007199254740991到9007199254740991。

MAX_SAFE_INTEGER
//最大
MIN_SAFE_INTEGER
//最小

Number

Number Methods

• 判斷使否為整數

Number.isInteger()
//判斷是否為整數
Number.isSafeInteger()
//判斷是否在安全整數範圍

toString()

• 教數字轉換為字串

toExponential()

• 顯示小數點以後得數字

toFixed()

• 四捨五入到指定得數，適合作為金錢運算使用

toPrecision()

• 從最左邊開始數

Number()

• 轉換數字字串為數值
• 不允許有空格
• 轉換Number(new Date("1970-01-01"))，以1970-01-01基準點＝0，加一天就是[246060*1000毫秒]＝86400000

parseInt()

• 捨去小數點
• 將字串轉換為數字
• 允許有空格

parseFloat()

• 將字串轉換為數字
• 允許有空格

其他相關

• Number.parseFloat()

Number Properties

---

typeof()

• 使用它會回傳字串，用來表示超做數值類型

console.log(typeof 42);
// Expected output: "number"

console.log(typeof 'blubber');
// Expected output: "string"

console.log(typeof true);
// Expected output: "boolean"

console.log(typeof undeclaredVariable);
// Expected output: "undefined"

---

json

如果要轉換js格式為json，就要用json.stringify

json.parse = 將字串轉換為js物件
json.stringify = 將一個JavaScript 物件或值轉換為JSON 字串

Json.stringify這裡J大寫得原因,是因為這是一個建構子，就類似Object.value

---

fetch

如果只有fetch("https://jsonplaceholder.typicode.com/users")那就是預設GET

Expressions & operators

instanceof

這是用來檢查原型鍊源頭

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);
// Expected output: true

console.log(auto instanceof Object);
// Expected output: true

Event

冒泡事件

stopPropergation:阻止冒泡事件得其中一個方法
preventDefault:阻止冒泡事件得其中一個方法

累積表達式（cumulative expression）

console.error vs throw new Error

console.error

• 功能：記錄錯誤訊息到控制台。
• 影響：程式繼續執行。
• 使用情境：非致命錯誤、日誌記錄或除錯用。

throw new Error

• 功能：拋出錯誤並中斷程式執行。
• 影響：需要用 try…catch 捕獲，否則程式會崩潰。
• 使用情境：致命錯誤，需要立即處理或通知呼叫方。

Vue表單的課

Chris:
看到表單，第一個要先想象他是物件，處理標資料形態，甚至要想象它是什麼型別，，這object是什麼欄位，而欄位是什麼型別

getter setter 活用版本

原生只會處理畫面，要清除資料要另外

頁面刷新技術 Router

SPA AJAX AXIOS Router 都有異曲同工之妙，主軸是用於在使用者切換頁面時，不刷新整個頁面的情況下更新顯示的內容。它的主要目的是提供更順暢的用戶體驗，並模擬傳統網站的頁面導航行為。