1. 基本類型（Primitive Types）

1.1 特點

• 按值訪問：直接存儲在棧內存中，變量保存的是數(shù)據(jù)的實際值。
• 不可變：修改基本類型的值會創(chuàng)建一個新值，原值不會被改變。
• 類型固定：JavaScript 的基本類型共有 7 種：
  • number（數(shù)字）
  • string（字符串）
  • boolean（布爾值）
  • null（空值）
  • undefined（未定義）
  • symbol（ES6 新增，唯一標識符）
  • bigint（ES2020 新增，大整數(shù)）

1.2 示例

let a = 10;
let b = a; // 賦值時復制實際值
b = 20;    // 修改 b 不影響 a
console.log(a); // 10
console.log(b); // 20

1.3 關鍵行為

• 賦值：復制實際值，兩個變量獨立。
• 比較：比較的是值是否相等。

  let x = "hello";
  let y = "hello";
  console.log(x === y); // true（值相同）
  

• 方法調用：字符串、數(shù)字等基本類型調用方法時，會臨時轉換為對象（如 “abc”.toUpperCase()），但原值不變。
  • 字符串調用方法

    let str = "hello";
    console.log(str.length); // 5
    console.log(str.toUpperCase()); // "HELLO"
    

    • str 是一個基本類型的字符串，但可以調用 length 屬性和 toUpperCase() 方法。
    • 引擎內部會臨時將 str 轉換為 new String(“hello”) 對象，調用方法后，臨時對象被丟棄。
  • 數(shù)字調用方法

    let num = 3.14;
    console.log(num.toFixed(2)); // "3.14"
    

    • num 是基本類型的數(shù)字，但可以調用 toFixed() 方法。
    • 引擎臨時將其轉換為 new Number(3.14) 對象，調用方法后銷毀。
  • 布爾值調用方法

    let bool = true;
    console.log(bool.toString()); // "true"
    

    • bool 是基本類型的布爾值，但可以調用 toString() 方法。
    • 引擎臨時將其轉換為 new Boolean(true) 對象，調用方法后銷毀。

2. 引用類型（Reference Types）

2.1 特點

• 按引用訪問：存儲在堆內存中，變量保存的是數(shù)據(jù)的內存地址（引用）。
• 可變：修改引用類型的屬性會直接影響原對象。
• 類型動態(tài)：包括所有對象類型：
  • Object（普通對象）
  • Array（數(shù)組）
  • Function（函數(shù)）
  • Date（日期）
  • RegExp（正則表達式）
  • Map、Set 等（ES6 新增）

2.2 示例

let obj1 = { name: "Alice" };
let obj2 = obj1; // 賦值時復制引用（地址）
obj2.name = "Bob"; // 修改 obj2 會影響 obj1
console.log(obj1.name); // "Bob"
console.log(obj2.name); // "Bob"

2.3 關鍵行為

• 賦值：復制引用（地址），兩個變量指向同一對象。
• 比較：比較的是引用地址是否相同（即使內容相同，地址不同也返回 false）。

  let arr1 = [1, 2];
  let arr2 = [1, 2];
  console.log(arr1 === arr2); // false（地址不同）
  console.log(arr1 === arr1); // true（同一對象）
  

• 方法調用：直接修改原對象（如 arr.push(3) 會改變原數(shù)組）。

3. 核心區(qū)別總結

4. 常見場景與注意事項

4.1 函數(shù)參數(shù)傳遞

• 基本類型：函數(shù)內修改參數(shù)不影響外部變量。

  function changeValue(num) {
    num = 100;
  }
  let a = 10;
  changeValue(a);
  console.log(a); // 10（未改變）
  

• 引用類型：函數(shù)內修改對象屬性會影響外部變量。

  function changeObj(obj) {
    obj.name = "Bob";
  }
  let person = { name: "Alice" };
  changeObj(person);
  console.log(person.name); // "Bob"（被修改）
  

4.2 深拷貝 vs 淺拷貝

• 淺拷貝：僅復制引用（如 let arr2 = arr1），修改嵌套對象會互相影響。
• 深拷貝：完全復制對象（如使用 JSON.parse(JSON.stringify(obj)) 或工具庫如 Lodash 的 _.cloneDeep）。

4.3 性能優(yōu)化

• 基本類型（如頻繁操作的數(shù)字、字符串）適合存儲在棧中，訪問速度快。
• 引用類型（如大型對象、數(shù)組）適合堆存儲，但需注意避免意外共享引用。

5. 檢測方法

5.1 基本數(shù)據(jù)類型-》檢測類型

1. typeof 運算符
   • 適用于大多數(shù)基本類型，但 null 會返回 “object”（歷史遺留問題）。

     typeof "hello"; // "string"
     typeof 42; // "number"
     typeof true; // "boolean"
     typeof undefined; // "undefined"
     typeof Symbol("foo"); // "symbol"
     typeof 10n; // "bigint"
     typeof null; // "object" ?? 特殊情況
     

2. 嚴格等于 === 檢測 null 和 undefined

   let x = null;
   let y = undefined;
   console.log(x === null); // true
   console.log(y === undefined); // true
   

3. Object.prototype.toString.call()（最準確）

   Object.prototype.toString.call("hello"); // "[object String]"
   Object.prototype.toString.call(42); // "[object Number]"
   Object.prototype.toString.call(true); // "[object Boolean]"
   Object.prototype.toString.call(null); // "[object Null]"
   Object.prototype.toString.call(undefined); // "[object Undefined]"
   Object.prototype.toString.call(Symbol("foo")); // "[object Symbol]"
   Object.prototype.toString.call(10n); // "[object BigInt]"
   

5.2 引用數(shù)據(jù)類型-》檢測類型

1. typeof 運算符
   • typeof 對引用類型通常返回 “object”（除了 function）：

     typeof {}; // "object"
     typeof []; // "object"
     typeof function() {}; // "function" ?? 特殊情況
     typeof new Date(); // "object"
     typeof /regex/; // "object"
     

2. instanceof 運算符
   • 檢測對象是否是某個構造函數(shù)的實例：

     [] instanceof Array; // true
     {} instanceof Object; // true
     function() {} instanceof Function; // true
     new Date() instanceof Date; // true
     

   • 局限性：
     • 不能檢測基本類型（如 “str” instanceof String 返回 false）。
     • 跨框架（iframe）時可能不準確（不同全局對象的構造函數(shù)不同）。
3. constructor 屬性
   • 返回對象的構造函數(shù)：

     "hello".constructor === String; // true
     (42).constructor === Number; // true
     [].constructor === Array; // true
     ({}).constructor === Object; // true
     

   • 局限性：
     • 如果對象是 null 或 undefined，會報錯（Cannot read property ‘constructor’ of null）。
     • 可以被手動修改（obj.constructor = Foo），不可靠。
4. Object.prototype.toString.call()（最準確）

   Object.prototype.toString.call([]); // "[object Array]"
   Object.prototype.toString.call({}); // "[object Object]"
   Object.prototype.toString.call(function() {}); // "[object Function]"
   Object.prototype.toString.call(new Date()); // "[object Date]"
   Object.prototype.toString.call(/regex/); // "[object RegExp]"
   

5.3 綜合檢測方法

1. 判斷是否為基本類型

   function isPrimitive(value) {
     return (
       value === null ||
       value === undefined ||
       typeof value === "string" ||
       typeof value === "number" ||
       typeof value === "boolean" ||
       typeof value === "symbol" ||
       typeof value === "bigint"
     );
   }
   

2. 判斷具體類型（推薦 Object.prototype.toString）

   function getType(value) {
     return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
   }
   getType("hello"); // "string"
   getType(42); // "number"
   getType([]); // "array"
   getType({}); // "object"
   getType(null); // "null"
   getType(undefined); // "undefined"
   getType(function() {}); // "function"
   getType(new Date()); // "date"

3. 判斷是否為數(shù)組

   Array.isArray([]); // true
   [] instanceof Array; // true
   Object.prototype.toString.call([]) === "[object Array]"; // true
   

4. 判斷是否為 null 或 undefined

   function isNullOrUndefined(value) {
     return value === null || value === undefined;
   }
   

5.4 檢測類型總結

• 推薦做法
  • 基本類型：優(yōu)先用 typeof + 特殊處理 null。
  • 引用類型：用 Object.prototype.toString.call() 或 Array.isArray() 等特定方法。
  • 避免 instanceof 和 constructor，除非明確知道它們的局限性。

到此這篇關于JavaScript基本類型與引用類型有什么區(qū)別的文章就介紹到這了,更多相關js 基本類型與引用類型區(qū)別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論