js 不可变的原始值和可变的对象引用

Posted 2020-06-14

javascript中的原始值（undefined、null、布尔值、数字和字符串）与对象（包括数组和函数）有着根本区别。原始值是不可更改的：任何方法都无法更改（或“突变”）一个原始值。对数字和布尔值来说显然如此----改变数字的值本身就说不通，而对字符串来说就不那么明显了，因为字符串看起来像由字符组成的数组，我们期望可以通过指定索引来假改字符串中的字符。实际上，javascript是禁止这样做的。字符串中所有的方法看上去返回了一个修改后的字符串，实际上返回的是一个新的字符串值。

代码如下：

1 <script>
2      var s = "hello"  //定义了一个文本为hello的字符串
3      console.log(s.toUpperCase())  //返回的是大写的HELLO,但是并没有改变字符串的S的值 
4      console.log(s)   //返回hello
5 </script>

对象和原始值不同，首先，它们是可变的--它们的值是可修改的

代码如下：

 1 <script>
 2      var m = {x:1} //定义一个对象
 3      m.x = 2;   //通过修改对象的属性值来更改对象
 4      m.y = 3;   //再次更改这个对象，给这个对象新加一个属性
 5 
 6      var m =[1,2,3]   //定义一个数组
 7      m[0] = 3;     //对过更改数组的下标，来更改数组
 8      m[3] = 4;     //能过添加新下标，来更改数组
 9 
10 </script>

对象的比较并非值的比较：即使两个对象包含同样的属性及相同的值，它们也是不相等的。各个索引元素相等的两个数组也不相等。

代码如下：

 1 <script>
 2      var o = {x:1}
 3      var m = {x:1}
 4      console.log(o == m)   //=> false  他们的值不相等 说明数组对象的比较并不是对象值的比较
 5      console.log(o === m)  //=> false
 6 
 7      var a = []
 8      var b = []
 9      console.log(a == b)   //=> false  他们的值不相等 说明数组对象的比较并不是对象值的比较
10      console.log(a === b)  //=> false
11 
12 </script>

我们通常将对象称为引用类型（reference type），以此来和javascript的基本类型区分开来。依

照术语的叫法，对象值都是引用（reference）,对象的比较均是引用的比较：当且仅当它们引用同一个基对象时，它们才相等。

代码如下：

1 <script>
2     var a = {x:1};  //声明一个对象
3     var b= a;     //变量b引用同一个对象
4     b.x =2;        //当把对象b的x属性改变时，引用同一个对象的a同时也会改变
5     console.log(a.x)   //=>2
6     console.log(a===b)  //=>true  此时他们相等
7 </script>

1 <script>
2     var a = [1,2,3];  //声明一个数组对象
3     var b= a;     //变量b引用同一个数组对象
4     b[0] =5;        //当把对象b第一个索引值改变时，引用同一个数组对象的a同时也会改变
5     console.log(a[0])   //=>5
6     console.log(a===b)  //=>true  此时他们相等
7 </script>

上两段代码将对象（或数组）赋值给一个变量，仅仅是赋值的引用值：对象本身并没有复制一次。如果你想得到一个对象或数组的副本，则必须显式复制对象的每个属性或数组的每个元素。下面这个例子则是通过循环来完成复制

 1 <script>
 2    var a= [1,2,3]   //声明一个数组a
 3    var b=[]       //声明一个空数组b
 4    for(var i =0;i< a.length;i++){   //循环遍历
 5        b[i] = a[i]      //把a数组里的值传给b
 6    }
 7    console.log(b)     //=> 1,2,3
 8    b[0] =5;         //=>当我改变b第一个索引值时
 9    console.log(a[0])   //=>此时a第一个索引值还是等于1，因为此时b是a的副本，他们并没有引用同一个数组对象。
10    console.log(a==b)   //对象的比较是引用的比较，因为他们引用的并不是同一个数组对象，所以他们还是不相等
11    console.log(a==b)
12 </script>

同样的，如果我们想比较两个单独的对象或者数组，则必须比较它们的属性或元素。

代码如下：

 1 <script>
 2     function arrays(a,b){
 3         if(a.length != b.length){         //先比较两上对象的长度
 4             return false
 5         }
 6         for(var i =0; i< a.length;i++){
 7             if(a[i] != b[i]){            //再比较两个对象上索引的值
 8                 return false
 9             }
10             return true;
11         }
12     }
13     console.log(arrays("this","this")) //=>true
14 </script>