面试官：说说JavaScript中的数据类型？区别？文末彩蛋！

系统管理员 2022-10-27 01:45 196阅读 0赞

![format_png][]

## 前言 ##

在`JavaScript`中，我们可以分成两种类型：

*  基本类型
 *  复杂类型

## 一、基本类型 ##

基本类型主要为以下6种：

*  Number
 *  String
 *  Boolean
 *  Undefined
 *  null
 *  symbol

### Number ###

数值最常见的整数类型格式则为十进制，还可以设置八进制（零开头）、十六进制（0x开头）

let intNum = 55 // 10进制的55
    let num1 = 070 // 8进制的56
    let hexNum1 = 0xA //16进制的10

浮点类型则在数值汇总必须包含小数点，还可通过科学计数法表示

let floatNum1 = 1.1;
    let floatNum2 = 0.1;
    let floatNum3 = .1; // 有效，但不推荐
    let floatNum = 3.125e7; // 等于 31250000

在数值类型中，存在一个特殊数值`NaN`，意为“不是数值”，用于表示本来要返回数值的操作失败了（而不是抛出错误）

console.log(0/0); // NaN
    console.log(-0/+0); // NaN

### Undefined ###

`Undefined` 类型只有一个值，就是特殊值 `undefined`。当使用 `var`或 `let`声明了变量但没有初始化时，就相当于给变量赋予了 `undefined`值

let message;
    console.log(message == undefined); // true

包含`undefined` 值的变量跟未定义变量是有区别的

let message; // 这个变量被声明了，只是值为 undefined
    
    console.log(message); // "undefined"
    console.log(age); // 没有声明过这个变量，报错

### String ###

字符串可以使用双引号（"）、单引号（'）或反引号（\`）标示

let firstName = "John";
    let lastName = 'Jacob';
    let lastName = `Jingleheimerschmidt`

字符串是不可变的，意思是一旦创建，它们的值就不能变了

let lang = "Java";
    lang = lang + "Script";  // 先销毁再创建

### Null ###

`Null`类型同样只有一个值，即特殊值 `null`

逻辑上讲， null 值表示一个空对象指针，这也是给`typeof`传一个 `null` 会返回 `"object"` 的原因

let car = null;
    console.log(typeof car); // "object"

`undefined` 值是由 `null`值派生而来

console.log(null == undefined); // true

只要变量要保存对象，而当时又没有那个对象可保存，就可用 `null`来填充该变量

### Boolean ###

`Boolean`（布尔值）类型有两个字面值：`true` 和`false`

通过`Boolean`可以将其他类型的数据转化成布尔值

规则如下：

数据类型          转换为 true 的值          转换为 false 的值
     String             非空字符串               "" 
     Number     非零数值（包括无穷值）      0 、 NaN 
     Object       任意对象           null
    Undefined      N/A （不存在）       undefined

### Symbol ###

Symbol （符号）是原始值，且符号实例是唯一、不可变的。符号的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险

let genericSymbol = Symbol();
    let otherGenericSymbol = Symbol();
    console.log(genericSymbol == otherGenericSymbol); // false
    
    let fooSymbol = Symbol('foo');
    let otherFooSymbol = Symbol('foo');
    console.log(fooSymbol == otherFooSymbol); // false

## 二、引用类型 ##

复杂类型统称为`Object`，我们这里主要讲述下面三种：

*  Object
 *  Array
 *  Function

### Object ###

创建`object`常用方式为对象字面量表示法，属性名可以是字符串或数值

let person = {
        name: "Nicholas",
        "age": 29,
        5: true
    };

### Array ###

`JavaScript`数组是一组有序的数据，但跟其他语言不同的是，数组中每个槽位可以存储任意类型的数据。并且，数组也是动态大小的，会随着数据添加而自动增长

let colors = ["red", 2, {age: 20 }]
    colors.push(2)

### Function ###

函数实际上是对象，每个函数都是 `Function`类型的实例，而 `Function`也有属性和方法，跟其他引用类型一样

函数存在三种常见的表达方式：

*  函数声明

// 函数声明
    function sum (num1, num2) {
        return num1 + num2;
    }

*  函数表达式

let sum = function(num1, num2) {
        return num1 + num2;
    };

*  箭头函数

函数声明和函数表达式两种方式

let sum = (num1, num2) => {
        return num1 + num2;
    };

### 其他引用类型 ###

除了上述说的三种之外，还包括`Date`、`RegExp`、`Map`、`Set`等......

## 三、存储区别 ##

基本数据类型和引用数据类型存储在内存中的位置不同：

*  基本数据类型存储在栈中
 *  引用类型的对象存储于堆中

当我们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值

下面来举个例子

### 基本类型 ###

let a = 10;
    let b = a; // 赋值操作
    b = 20;
    console.log(a); // 10值

`a`的值为一个基本类型，是存储在栈中，将`a`的值赋给`b`，虽然两个变量的值相等，但是两个变量保存了两个不同的内存地址

下图演示了基本类型赋值的过程：

![format_png 1][]

### 引用类型 ###

var obj1 = {}
    var obj2 = obj1;
    obj2.name = "Xxx";
    console.log(obj1.name); // xxx

引用类型数据存放在堆内存中，每个堆内存中有一个引用地址，该引用地址存放在栈中

`obj1`是一个引用类型，在赋值操作过程汇总，实际是将堆内存对象在栈内存的引用地址复制了一份给了`obj2`，实际上他们共同指向了同一个堆内存对象，所以更改`obj2`会对`obj1`产生影响

下图演示这个引用类型赋值过程

![format_png 2][]

### 小结 ###

*  声明变量时不同的内存地址分配：
 *   *  简单类型的值存放在栈中，在栈中存放的是对应的值
     *  引用类型对应的值存储在堆中，在栈中存放的是指向堆内存的地址
 *  不同的类型数据导致赋值变量时的不同：
 *   *  简单类型赋值，是生成相同的值，两个对象对应不同的地址
     *  复杂类型赋值，是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象

## 文末彩蛋 ##

`Vue`，`Vue番外`系列都已经更新完毕，**「33」** \+ **「6」**，共计**「39」**个工作日，那可是数以万计的头发

真心感谢一路相伴，一路支持的小伙伴，爱你们〜〜

别的也没有，今天就带来几本`Vue`实战书籍送给大家

它长这样，小狮子是不是很酷~~

![format_png 3][]

### 简单介绍一下 ###

**「《Vue.js Node.js开发实战：从入门到项目上线》」** 以JavaScript语言为基础，以一个完整的网站开发过程为主线，系统地介绍了一整套面向Web项目的开发技术，如使用Node.js搭建服务端，使用NoSQL数据库管理数据，使用Vue.js开发前端UI，使用Nginx部署代码，使用Git管理版本等。通过阅读本书，读者可以了解网站从开发到上线的整个过程。

涵盖的主要内容有：网站开发的准备工作Node.js、Express和Vue.js项目开发基础知识，数据库和工程化开发常用工具，Express后端开发关键技术，Vue.js前端开发基础知识，Vue.js高级开发技术，Web项目开发需求分析和功能说明，Web项目后端API开发，Web项目前端页面开发，网站部署和上线

### 活动规则 ###

1.  小程序自动开奖
2.  开奖时间: 周二 今晚 18:00
3.  中奖后请12小时内填写收件信息，年前发货(预期视为弃权)
4.  号内回复999参与抽奖，或扫描文末二维码回复999

面试官VUE3番外篇已完结：6/6

[面试官：Vue3.0的设计目标是什么？做了哪些优化?][Vue3.0]

[面试官：Vue3.0 性能提升主要是通过哪几方面体现的？][Vue3.0 1]

[面试官：Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？][Vue3.0_ Proxy API _ defineProperty API]

[面试官：Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？][Vue3.0 _ Composition Api _ Vue2.x _ Options Api]

[面试官：说说Vue 3.0中Treeshaking特性？举例说明一下？][Vue 3.0_Treeshaking]

[面试官：用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？][Vue3.0 _ Modal]

篇副有限，扫下方二维码查看往期

![format_png 4][]

[format_png]: /images/20221024/e61ab624c1e64a1d8fc93e20bdeccca7.png
[format_png 1]: /images/20221024/6f6e6735befc4e108f811b645b9da9d0.png
[format_png 2]: /images/20221024/d1e054977e8c43ef8f4917ab8ee377bb.png
[format_png 3]: /images/20221024/e1690254119f4e2e9cd84c3b552ee64a.png
[Vue3.0]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c534cb674c22b3c8d8c00edebfaadfc2c4b053cdc72aada1f85510a7ba2fa6eb17afe931&idx=2&mid=2247485282&scene=21&sn=65fe59726c446b16d9aa1deff9141285#wechat_redirect
[Vue3.0 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c525cb674c3362db1ba684f9365902177988186009b323cc9398f0c260e58b09d8aaf0b0&idx=1&mid=2247485299&scene=21&sn=92d9cedf388788977179c6dcdb4acf05#wechat_redirect
[Vue3.0_ Proxy API _ defineProperty API]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c5f9cb674cef4003894137ead6830b27dd7c22614cb56bdafcc9fb82605f8332e28f61ad&idx=2&mid=2247485359&scene=21&sn=1f3a8633cf6a4e66bc2fd729076e565a#wechat_redirect
[Vue3.0 _ Composition Api _ Vue2.x _ Options Api]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c596cb674c80d27d1b4c4961e7376f292296a6835fade27d2c2d6767111ae62a85d7fb39&idx=1&mid=2247485376&scene=21&sn=59271ed8381ddaa99c9d83faaf284bd2#wechat_redirect
[Vue 3.0_Treeshaking]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c599cb674c8f04d4b9b28277d4489ec0afb86c39fb98bafe75a5fe86d66d1ada663e6e7b&idx=1&mid=2247485391&scene=21&sn=40c79896193a0b867f9b701d336bc608#wechat_redirect
[Vue3.0 _ Modal]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c5bbcb674cad75a5558b74555c446dab4d8b446a0ac3ff84dc8a03cd3e4bf44bee9ea8f7&idx=2&mid=2247485421&scene=21&sn=09ad6eafb68435c4b4cb92906f61b661#wechat_redirect
[format_png 4]: /images/20221024/96d1c38eb5e74ee58bd064d33d02b69d.png