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

六年代码两茫茫，不思量，自难忘
6年资深前端主管一枚，只分享技术干货，项目实战经验，面试指导

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

文章目录

---

本期介绍

本期介绍变量的类型和计算的知识点和题目，包括值类型和引用类型区别，类型判断，深拷贝等。变量和类型是一个任何一门语言的基础，不了解的话，会被认为是 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
}

​​注：​​

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

变量计算&类型转换的坑

字符串拼接

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

== 运算符

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) {}

if 语句和逻辑运算符

3. truly变量：!!a === true 的变量
4. 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