一天时间迅速准备前端面试｜JS基础--变量类型和计算

一天时间系列文章是博主精心整理的面试热点问题，吸收了大量的技术博客与面试文章，总结多年的面试经历，带你快速建立前端面试知识体系。抓住每一场面试的机会，知己知彼才能百战百胜。
希望各位同学收藏起来哦！！

• 本系列订阅 一天时间迅速准备前端面试（高薪精品）–欢迎订阅

---

本期介绍

本期介绍变量的类型和计算的知识点和题目，包括值类型和引用类型区别，类型判断，深拷贝等。变量和类型是一个任何一门语言的基础，不了解的话，会被认为是 JS 语法不过关。

主要内容

• JS 值类型和引用类型的区别
• 手写 JS 深拷贝
• 变量计算和类型转换的坑

关键字

• 值类型
• 引用类型
• 深拷贝
• 类型转换

值类型和引用类型的区别

• 值类型：undefined、string、number、boolean、symbol、bigInt
• 引用类型：Object、Array、Date、RegExp、特殊（Function：不用于存储数据、Null：指针指向为空地址）
• 值类型 vs 引用类型：值类型存储值，引用类型存储内存地址
  值类型存储方式（图解）：
  
  引用类型存储方式（图解）：
  

手写 JS 深拷贝

/**
 * 深拷贝
 * @param {Object} obj 要拷贝的对象
 */
function deepClone(obj) {
    if (typeof obj !== 'object' || obj == null) {
        // obj 是 null ，或者不是对象和数组，直接返回
        return obj
    }

    // 初始化返回结果
    let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用！！！
            result[key] = deepClone(obj[key])
        }
    }

    // 返回结果
    return result
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

注：

• 适用于简单的数据结构，如只有number，string（后台返回数据）
• 对象中：非正常的number类型为null，undefined/symbol/function删除，RegExp为{}
• 数组中：非正常的number类型/undefined/symbol/function为null，RegExp为{}
• 无论对象还是数组，只要有bigInt类型，就会报错

变量计算&类型转换的坑

1. 字符串拼接

const a = 100 + 10 // 110
const b = 100 + '10' // '10010'
const c = true + '10' // 'true10'
const d = 100 + parseInt('10') // 110
1
2
3
4

2. == 运算符

100 == '100' // true
0 == '' // true
0 == false // true
false == '' // true
null == undefined // true

// 除了 == null 之外，其它一律用 ===，例如：
const obj  = {x: 100 }
if (obj.a == null) {}
// 相当于：
if (obj.a === null || obj.a === undefined) {}
1
2
3
4
5
6
7
8
9
10
11

3. if 语句和逻辑运算符

4. truly变量：!!a === true 的变量

5. alsely变量：!!a === false 的变量

// 以下是 falsely 变量，除此之外都是 truly 变量
!!0 === false
!!NaN === false
!!'' === false
!!null === false
!!undefined === false
!!false === false

// 逻辑判断
console.log(10 && 0)    // 0
console.log('' || 'abc')    // 'abc'
console.log(!window.abc)    // true
1
2
3
4
5
6
7
8
9
10
11
12

✨原 创 不 易 ， 还 希 望 各 位 支 持
👍 点 赞 ， 你 的 认 可 是 我 创 作 的 动 力
⭐️ 收 藏 ， 你 的 青 睐 是 我 努 力 的 方 向
✏️ 评 论 ， 你 的 意 见 是 我 进 步 的 财 富