面试官想要的 JS 基本类型

Myth丶恋晨 2022-02-21 14:40 178阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

面试的时候我们经常会被问答js的数据类型。大部分情况我们会这样回答包括：

1.  基本类型（值类型或者原始类型）： Number、Boolean、String、NULL、Undefined以及ES6的Symbol；
2.  引用类型：Object、Array、Function、Date等。

作者曾经也是这样回答的，并且一直觉得没有什么问题。**那么面试官问你 JS 数据类型时，他想知道什么呢？接着往下看???**

# 1. 在内存中的位置不同 #

*  基本类型： 占用空间固定，保存在**栈中**；
 *  引用类型：占用空间不固定，保存在**堆中**；

> **栈（stack）**为自动分配的内存空间，它由系统自动释放；使用一级缓存，被调用时通常处于存储空间中，调用后被立即释放。  
> **堆（heap）**则是动态分配的内存，大小不定也不会自动释放。使用二级缓存，生命周期与虚拟机的GC算法有关

当一个方法执行时，每个方法都会建立自己的内存栈，在这个方法内定义的变量将会逐个放入这块栈内存里，随着方法的执行结束，这个方法的内存栈也将自然销毁了。因此，所有在方法中定义的变量都是放在栈内存中的；栈中存储的是基础变量以及一些对象的引用变量，基础变量的值是存储在栈中，而引用变量存储在栈中的是指向堆中的数组或者对象的地址，这就是为何修改引用类型总会影响到其他指向这个地址的引用变量。

当我们在程序中创建一个对象时，这个对象将被保存到运行时数据区中，以便反复利用（因为对象的创建成本通常较大），这个运行时数据区就是堆内存。堆内存中的对象不会随方法的结束而销毁，即使方法结束后，这个对象还可能被另一个引用变量所引用（方法的参数传递时很常见），则这个对象依然不会被销毁，只有当一个对象没有任何引用变量引用它时，系统的垃圾回收机制才会在核实的时候回收它。

# 2. 赋值、浅拷贝、深拷贝 #

*  对于基本类型值，赋值、浅拷贝、深拷贝时都是复制基本类型的值给新的变量，之后二个变量之间操作不在相互影响。
 *  对于引用类型值，分以下三个方面：
    
     *  **赋值**后二个变量指向同一个地址，一个变量改变时，另一个也同样改变；
     *  **浅拷贝**后得到一个新的变量，这个与之前的已经不是指向同一个变量，改变时不会使原数据中的基本类型一同改变，但会改变会原数据中的引用类型数据
     *  **深拷贝**后得到的是一个新的变量，她的改变不会影响元数据

<table> 
 <thead> 
  <tr> 
   <th>-</th> 
   <th>和原数据是否指向同一对象</th> 
   <th>第一层数据为基本数据类型</th> 
   <th>原数据中包含子对象</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>赋值</td> 
   <td>是</td> 
   <td>改变会使原数据一同改变</td> 
   <td>改变会使原数据一同改变</td> 
  </tr> 
  <tr> 
   <td>浅拷贝</td> 
   <td>否</td> 
   <td>改变不会使原数据一同改变</td> 
   <td>改变会使原数据一同改变</td> 
  </tr> 
  <tr> 
   <td>深拷贝</td> 
   <td>否</td> 
   <td>改变不会使原数据一同改变</td> 
   <td>改变不会使原数据一同改变</td> 
  </tr> 
 </tbody> 
</table>

### 2.1浅拷贝 ###

**数组常用的浅拷贝方法**有`slice()`,`concat()`,`Array.from()`，以及es6的解构

对象常用的浅拷贝方法`Object.assign()`，es6解构

我们自己实现一个浅拷贝

## 2.2. 深拷贝 ##

比较简单粗暴的的做法是使用`JSON.parse(JSON.stringify(obj))`

`JSON.parse(JSON.stringify(obj))` 看起来很不错，不过 [MDN文档][MDN] 的描述有句话写的很清楚：

> undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。

但是在平时的开发中`JSON.parse(JSON.stringify(obj))`已经满足90%的使用场景了。

下面我们自己来实现一个

# 3. 参数的传递 #

所有的函数参数都是按值传递。也就是说把函数外面的值赋值给函数内部的参数，就和把一个值从一个变量赋值给另一个一样；

*  基本类型

var a = 2;
    function add(x) {
     return x = x + 2;
    }
    var result = add(a);
    console.log(a, result); // 2 4

*  引用类型

function setName(obj) {
      obj.name = 'laowang';
      obj = new Object();
      obj.name = 'Tom';
    }
    var person = new Object();
    setName(person);
    console.log(person.name); // laowang

很多人错误地以为在局部作用域中修改的对象在全局作用域中反映出来就是说明参数是按引用传递的。  
但是通过上面的例子可以看出如果person是按引用传递的最终的person.name应该是Tom。  
实际上当函数内部重写obj时，这个变量引用的就是一个局部变量了。而这个变量会在函数执行结束后销毁。(这是是在js高级程序设计看到的，还不是很清楚)

# 4. 判断方法 #

基本类型用`typeof`，引用类型用`instanceof`

> 特别注意`typeof null`是`"object"`, `null instanceof Object`是`true`;

console.log(typeof "Nicholas"); // "string"
    console.log(typeof 10);         // "number"
    console.log(typeof true);       // "boolean"
    console.log(typeof undefined);  // "undefined"
    console.log(typeof null);      // "object"
    
    var items = [];
    var obj = {};
    function reflect(value){
      return value;
    }
    
    console.log(items instanceof Array); // true;
    console.log(obj instanceof Object); // true;
    console.log(reflect instanceof Function); // true;

> `Object.prototype.toString.call([]).slice(8, -1)`有兴趣的同学可以看一下这个是干什么的

# 5. 总结 #

![Image 1][]

[Fundebug]: https://www.fundebug.com/
[MDN]: https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FJSON%2Fstringify
[Image 1]: