泛览天下

阅读,看尽天下事

JavaScript 基本类型和引用类型的区别

2022-08-12 03:58:44


当 2 个变量只有在它们引用完全相同的对象时才相等,但是如果它们只是具有 2 个相同的值的基本类型变量,则这2 个变量是相等的。


在 JavaScript 中,变量或参数在内存中的分配可以是值或一个地址的引用。

两者之间的主要区别在于,在分配基本数据类型时会发生值传递,而在分配对象类型时会发生引用传递。

让我们在这篇文章中更详细地讨论价。

1.了解基本数据类型和引用类型

JavaScript 提供了 2 类数据类型: 基本数据类型 引用类型

基本数据 是数字(Number)、布尔值(Boolean)、字符串(String)、符号(Symbol)和特殊值 null undefined .

// 基本数据类型const number = 10;const bool = false;const str = 'Hello!';const missingObject = null;const nothing = undefined;

第二类是引用类型。比如普通对象(Object)、数组(Array)、函数(Function)等等——都是引用类型。

// 引用类型const plainObject = {  prop: 'Value'};const array = [1, 5, 6];const functionObject = (n1, n2) => {  return n1 + n2;};

2. 值和引用传递区别

在JavaScript 中的所有的基本类型都是按值传递的。

按值传递意味着每次将值分配给变量时,都会创建该值的副本。

让我向您展示按值传递是如何表现出来的。

假设您有 2 个变量 a b

let a = 1;let b = a;b = b + 2;console.log(a); // 1console.log(b); // 3

第一条语句let a = 1定义了一个值为1的变量a。

第二条语句 let b = a 定义了另一个变量 b 并用变量 a 的值初始化它——这就是按值传递的。直接将a变量的值 1 副本分配给 b

之后, b = b + 2 增加 2 并变为 3 b 变量发生变化,并且这种变化不会影响 a

然而,引用类型传递以不同的方式表现出来。

创建对象时,您将获得对该对象的引用。如果 2 个变量具有相同的引用,则更改对象会反映在两个变量中。

让我们检查以下代码示例:

let x = [1];let y = x;y.push(2);console.log(x); // [1, 2]console.log(y); // [1, 2]

第一条语句 let x = [1] 创建一个变量 x ,并给它初始化一个数组对象。

然后第二条语句 let y = x 定义一个变量y,并使用变量x中的引用对y进行初始化。

当 y.push(2) 改变数组 2 。因为 x y 变量引用同一个数组,所以这种变化反映在两个变量中。

注意:为简单起见,我说变量包含对象的引用。但严格来说,JavaScript 中的变量保存的只是对象的引用。

4.基本类型和引用类型的比较

使用严格比较运算符时 ===进行比较基本类型时 ,如果两个变量具有相同的值,则它们是相等的。以下所有比较都是相等的:

const one = 1;const oneCopy = 1;console.log(one === oneCopy); // trueconsole.log(one === 1);       // trueconsole.log(one === one);     // true

变量one oneCopy 具有相同的值 1 。只要两个操作数都是 1,使用 运算符 === 的计算结果都是 true ,无论值来自何处:文字 1 、变量的值、表达式 2 - 1

但是在比较引用类型时的结果却不同。 只有当它们引用完全相同的对象时,2 个引用才相等。

ar1 ar2 持有对不同数组实例的引用:

const ar1 = [1];const ar2 = [1];console.log(ar1 === ar2); // falseconsole.log(ar1 === [1]);  // falseconst ar11 = ar1;console.log(ar1 === ar11); // trueconsole.log(ar1 === ar1);  // true

虽然ar1 ar2 引用相同结构的数组,但 ar1 === ar2 结果却为 false,是 因为 ar1 ar2 引用不同的数组对象。

只有当 ar1 ar2 引用相同的对象时使用 比较操作符 ===结果 才返回true,如ar1 === ar11,ar1 === ar1。

五、总结

在 JavaScript 中,基本类型是值传递:这意味着每次分配一个值时,都会创建该值的副本。

另一方面,如果您修改引用类型对象,则引用该对象的所有变量都将同步更改。

比较运算符区分基本类型和引用类型。当 2 个变量只有在它们引用完全相同的对象时才相等,但是如果它们只是具有 2 个相同的值的基本类型变量,则这2 个变量是相等的。