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

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

文章图片

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

文章目录

本期介绍
主要内容
关键字
- 值类型和引用类型的区别
- 手写 JS 深拷贝
- 变量计算&类型转换的坑
- - 字符串拼接
  - == 运算符
  - if 语句和逻辑运算符

本期介绍

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

【面试指导|一天时间迅速准备前端面试｜JS基础--变量类型和计算】注：

适用于简单的数据结构，如只有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') // 110

== 运算符

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 语句和逻辑运算符
truly变量：!!a === true 的变量
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