JavaScript 简单类型与复杂类型

在JavaScript中，根据数据存储的方式不同，变量可以分为两大类：简单类型（也称为基本数据类型或原始类型）和复杂类型（也称为引用数据类型）。理解这两者的区别对于编写高效且无误的代码至关重要。本文将详细介绍JavaScript中的简单类型和复杂类型，并探讨它们各自的特性及其应用场景。

简单类型（基本数据类型）

简单类型是指那些直接存储在栈内存中的数据类型，其值直接存储在变量的位置上。JavaScript中有六种简单类型：

• undefined
• null
• boolean
• number
• string
• symbol (ES6新增)

特性

1. 按值传递：当简单类型的值被作为参数传递给函数时，实际上是创建了一个副本，这意味着对参数的任何修改都不会影响原始值。

   function changeValue(x) {x = 10;
   }
   let a = 5;
   changeValue(a);
   console.log(a); // 输出: 5

2. 比较方式：两个简单类型的变量通过===运算符进行比较时，只有当两者的内容完全相同时才会返回true。

   console.log(5 === 5); // 输出: true
   console.log('hello' === 'hello'); // 输出: true

常见用法

• 布尔值用于控制流程（如条件语句和循环）。
• 数字用于数学计算。
• 字符串用于文本处理。
• **未定义（undefined）**表示尚未赋值的变量。
• **空值（null）**表示有意设置为空的值。
• **符号（Symbol）**提供了一种创建唯一标识符的方法，通常用于对象属性键。

复杂类型（引用数据类型）

复杂类型指的是那些存储在堆内存中的数据类型，变量实际上保存的是指向实际数据的一个引用地址。JavaScript中最常见的复杂类型包括：

• Object
• Array
• Function
• 其他自定义对象

特性

1. 按引用传递：当一个复杂类型的值被作为参数传递给函数时，传递的是该对象的引用地址而不是副本。因此，在函数内部对该对象所做的任何更改都会反映到原始对象上。

   function modifyObject(obj) {obj.name = "World";
   }
   let obj = { name: "Hello" };
   modifyObject(obj);
   console.log(obj.name); // 输出: World

2. 比较方式：两个复杂类型的变量通过===运算符进行比较时，只有当两者引用的是同一个对象时才会返回true。

   let obj1 = { name: "Alice" };
   let obj2 = obj1;
   console.log(obj1 === obj2); // 输出: truelet obj3 = { name: "Alice" };
   console.log(obj1 === obj3); // 输出: false

常见用法

• 对象用于封装数据和方法，支持面向对象编程。
• 数组用于存储有序的数据集合。
• 函数不仅可以作为过程调用，还可以作为一等公民被赋值给变量、作为参数传递或返回值。

实际应用案例

案例1：简单类型的比较

let num1 = 10;
let num2 = 10;
console.log(num1 === num2); // 输出: truelet str1 = "test";
let str2 = "test";
console.log(str1 === str2); // 输出: true

案例2：复杂类型的比较

let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];
console.log(arr1 === arr2); // 输出: falselet obj1 = { key: "value" };
let obj2 = obj1;
console.log(obj1 === obj2); // 输出: true

案例3：浅拷贝 vs 深拷贝

由于复杂类型是按引用传递的，直接赋值不会复制对象本身，而是复制了引用。为了创建对象的独立副本，我们需要使用深拷贝技术。

let original = { a: 1, b: { c: 2 } };
let shallowCopy = Object.assign({}, original);
let deepCopy = JSON.parse(JSON.stringify(original));original.b.c = 3;console.log(shallowCopy.b.c); // 输出: 3
console.log(deepCopy.b.c);    // 输出: 2

结语

感谢您的阅读！如果你有任何问题或想分享自己的经验，请在评论区留言交流！