如何理解js中基本数据类型的值不可变

js的数据类型

• 在讲解我们要说明的问题之前，需要知道js有哪些数据类型。js有两种数据类型：基本数据类型和引用数据类型

• 基本数据类型：number、string、boolean、undefined、null、symbol

  在 Java 中，字符串是引用类型

• 引用数据类型：Array、Function、Object 等

堆和栈

• 程序运行的时候，需要内存空间存放数据。一般来说，系统会划分出两种不同的内存空间：一种叫做堆（heap），另一种叫做栈（stack）

• 堆（heap）是没有结构的，数据可以任意存放，它是用于存放复杂数据类型（引用类型）的，例如数组对象、object对象等。

• 栈（stack）是有结构的，每个区块按照一定次序存放（后进先出），栈中主要存放的是基本类型的变量的值以及指向堆中的数组或者对象的地址，存在栈中的数据大小与生存期必须是确定的。除此之外，还可以明确知道每个区块的大小，因此，stack的寻址速度要快于heap

  另外，栈有一个很重要的特殊性，就是存在栈中的数据可以共享
  
  假设我们同时定义 int a = 3; int b = 3；，编译器先处理 int a = 3:
  
  首先它会在栈中创建一个变量为 a 的引用，然后查找有没有字面值为 3 的地址，没找到，就开辟一个存放 3 这个字面值的地址，然后将 a 指向 3 的地址
  
  接着处理 int b = 3;，在创建完 b 的引用变量后，由于在栈中已经有 3 这个字面值，便将 b 直接指向 3 的地址。这样，就出现了 a 与 b 同时均指向 3 的情况
  
  特别注意的是，这种字面值的引用与类对象的引用不同。假定两个类对象的引用同时指向一个对象，如果一个对象引用变量修改了这个对象的内部状态，那么另一个对象引用变量也即刻反映出这个变化
  
  相反，通过字面值的引用来修改其值，不会导致另一个指向此字面值的引用的值也跟着改变的情况。如上例，我们定义完 a 与 b 的值后，再令 a=4;，那么，b 不会等于 4，还是等于 3
  
  在编译器内部，遇到 a=4; 时，它就会重新搜索栈中是否有 4 的字面值，如果没有，重新开辟地址存放 4 的值；如果已经有了，则直接将 a 指向这个地址。因此 a 值的改变不会影响到 b 的值

• 栈创建的时候，大小是确定的，如果超出了浏览器规定的栈限制，就会报 stack overflow 错误，而堆的大小是不确定的，需要的话可以不断增加。下面看一个简单的测试：

  var i = 0;
  function inc() {
      i++;
      if(i > 41909) {
      	return;
      }
      inc();
  }
  inc();
  

  测试环境是 16G 内存的电脑，需要注意的是：根据栈的定义可以知道如果 inc 函数里有变量声明的话也是会有内存占用的
  1、谷歌浏览器chrome 55.0版本下限制是41909条
  2、IE8浏览器下限制是3062条

• 易犯的错误：

  var str=new String('abc');
  var str='abc';
  

  同样是创建两个字符串，第一种是用new关键字来新建String对象，对象会存放在堆中，每调用一次就会创建一个新的对象；而第二种是在栈中，栈中存放值‘abc’和对值的引用。推荐使用第二种方式创建多个’abc’字符串，这种写法在内存中只存在一个值，有利于节省内存空间。同时它可以在一定程度上提高程序的运行速度，因为存储在栈中，其值可以共享，并且由于栈访问更快，所以对于性能的提高大有裨益。而第一种方式每次都在堆中创建一个新的String对象，而不管其字符串值是否相等及是否有必要创建新对象，从而加重了程序的负担。并且堆的访问速度慢，对程序性能的影响也大

什么叫做“js中基本数据类型的值不可变”

• 如果一个变量是基本数据类型，那么在它被赋值之后，这个值就是不可变的

常见疑惑

1. number 类型。下面的代码为什么输出是 2 ？请结合所有的示例一起理解

   var a = 1;
   a = 2;
   console.log(a); //2
   

2. string 类型。下面的代码为什么输出是 helloworld ？请结合所有的示例一起理解

   var str = "hello";
   str += "world";
   console.log(str); //helloworld
   

3. string 类型。下面的示例1的代码为什么不能改变字符串的值？示例2为什么又可以改变？

   //示例1
   var myStr = "Bob";
   myStr[0] = "J";
   console.log(myStr); //Bob
   
   //示例2
   var myStrNew = "Bob";
   myStrNew = "Job";
   console.log(myStrNew); //Job
   

• 不管你能不能理解下面所说的，请先记住这个结论：在 JavaScript 中，字符串的值是不可变的，这意味着一旦字符串被创建就不能被改变

• 从结果来看，变量 myStr 的值并没有变成 Job，而 myStrNew 的值却变成了 Job

• 首先要说明的是，因为字符串的数组行为不标准，所以应该避免使用它。因此对字符串类型的变量，使用下标的形式来取得其中的某个字符本来就是不规范的，最正确的做法是使用 charAt(index) 方法。另：

  当 index 的取值不在 str 的长度范围内时，str[index] 会返回 undefined，而 charAt(index) 则返回空字符串
  
  str[index] 不兼容 ie6-ie8，charAt(index) 可以兼容
  
  使用 中括号[] 的方式，不容易区分这个变量是字符串还是数组

• 而对于示例2，我们要清楚，虽然有前面的那个结论，但结论中所说的不能改变指的是字符串字面量（string literal）的各个字符不能被改变

• 针对字符串变量，有很多方法都可以应用在其上面，这些所有的方法看上去返回了一个修改后的字符串，实际上返回的是一个新的字符串值

• 如果我们要 “改变” 某个字符串变量的值，唯一的方法是重新给它赋一个值，在示例2的赋值过程中，改变的其实只是 myStrNew 的指向（可以把 myStrNew 理解为指向 Bob 这个字符串字面量的指针），而 Bob 这个字符串字面量自始至终都没有被改变，至于它是在何时被垃圾回收机制回收的，博主也不敢确定，如果有知道的同学，请留言告知，不甚感激！

【附】

• 用 const 定义的变量是不能改变的，这里其实分两种情况：如果定义的是基本数据类型的变量，那么的确是不能对其做任何操作来改变其值的；但如果定义的是引用类型的变量，由前面的分析可知，这个变量存储的其实只是一个地址，也就是说我们不能改变的是这个地址，但是地址中的内容我们还是可以改变的