一天时间迅速准备前端面试｜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类型，就会报错

变量计算&类型转换的坑

1. 字符串拼接

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

1. == 运算符

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

// 除了 == null 之外，其它一律用 ===，例如：
const obj  ={x: 100 }if(obj.a == null){}
// 相当于：
if(obj.a === null || obj.a === undefined){}

1. if 语句和逻辑运算符

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

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