社区首页 >专栏 >原始值和复杂值

原始值和复杂值

jojo

发布于 2022-03-21 12:37:29

69400

代码可运行

文章被收录于专栏：jojo的技术小屋jojo的技术小屋

运行总次数：0

代码可运行

作者：汪娇娇

日期：2016.10.12

一、原始值

1、定义：本身很简单，不能由其他值组成的值，例如5、“foo”、true、null和undefined等，因为它们是不可细化的。也就是说，数字是数字，字符是字符，布尔值则是true或false，null和undefined就是null和undefined。

2、存储和复制：复制是真实值复制。

都知道，我们将字符串“foo”存储到myString中后，也同时将它存储到了内存中。myString的值复制给myStringCopy后，因为复制是真实值复制，而不是地址的复制，所以即使再对myString进行改变，myStringCopy的值也不变。

<!DOCTYPE html>
<html>
	<script>
		var myString="foo";//创建原始值字符对象
		var myStringCopy=myString;//复制字符并存储到新变量上
		var myString=null;//操作存储在myString变量中的值
		console.log(myString,myStringCopy);//输出"null foo"
	</script>
</html>

3、比较：值比较。

从逻辑上说，如果将一个包含数值10的变量和另一个包含数值10的变量进行比较，JS认为它们是相等的，因为10与10是相等的（即10===10），原始字符串的比较也是如此。下面的例子顺带比较下复杂值和原始值的区别：

<!DOCTYPE html>
<html>
	<script>
		var num1=10;
		var num2=10;
		console.log(num1===num2);//输出true
		
		var num3=new Number(10);
		var num4=num3;
		console.log(num1===num3);//输出false，因为num3包含一个复杂数字对象，而num1是原始值
		console.log(num3===num4);//输出true，因为复杂对象采用引用比较（即：地址比较），而不是值比较
	</script>
</html>

二、复杂值

1、定义：可以包含一个或多个原始值或复杂值的类型。例如原生对象构造函数Object()、Array()、Function()等，如下创建了一个包含所有原始值的对象和一个包含所有原始值的数组。

<!DOCTYPE html>
<html>
	<script>
		var object={
			myString:"string",
			myNumber:10,
			myBoolean:true,
			myNull:null,
			muUndefined:undefined
		};
		var array=['string',10,true,null,undefined];
	</script>
</html>

2、存储和复制：复制是引用地址的复制。

下面创建一个对象，并将它保存到变量myObject中，然后将myObject中的这个值复制到变量copyOfMyObject中，实际上，这不是复制对象，更像是复制对象的地址。所以更新myObject和copyOfMyObject中任何一个变量中的值，两者都会被改变。

<!DOCTYPE html>
<html>
	<script>
		var myObject={};
		var copyOfMyObject=myObject;//没有复制值，而是复制了地址
		myObject.foo="bar";//操作myObject中的值
		console.log(myObject,copyOfMyObject);//输出'Object{foo="bar""} Object{foo="bar"}'
	</script>
</html>

3、比较：引用比较（即：地址比较）。

指向内存中复杂对象的变量，只有在引用相同“地址”的情况下才是相等的，相反，两个单独创建的对象，即使具有相同的类型并拥有完全相同的属性，它们也是不相等的。

<!DOCTYPE html>
<html>
	<script>
		var o1={same:'same'};
		var o2={same:'same'};
		console.log(o1===o2);//输出false，JS并不关注它们的类型是否相同
		
		var o3={foo:"bar"};
		var o4=o3;
		console.log(o3===o4);//输出true，因为它们引用的是同一个对象
	</script>
</html>