前端面试题整理 - JS 基础篇

问题1:值类型和引用类型的区别是什么?

问:什么是值类型?

值类型占用空间固定,保存在

-w764

举例:

  1. let a = 100
  2. let b = a
  3. a = 200
  4. console.log(b)
  5. // 输出:100

问:什么是引用类型?

引用变量存储在栈中的是指向堆中的数组或者对象的地址,修改引用类型总会影响到其他指向这个地址的引用变量。

-w402

  1. let a = { age: 20 }
  2. let b = a
  3. b.age = 21
  4. console.log(a.age)
  5. // 输出:21

问:常见的值类型有哪些?

  1. let a
  2. const s = abc
  3. const n = 100
  4. const b = true
  5. const s = Symbol(s)

问:引用类型有哪些?

  1. 对象
  2. 数组
  3. 函数(特殊的引用类型)

-w771

问题2:typeof判断哪些类型?

typeof能识别出所有的值类型函数以及引用类型

只判断到引用类型,引用类型下不再细分,==它不能判断出null或者是数组或者是对象==

比如下面的图片:
-w655
-w476

问题3:如何手动实现深拷贝DeepClone()?

  1. 判断:对传入的参数进行判断,是数组或者对象(因为针对深拷贝的就是对象或者数组)
  2. 判断:如果传入的值是数组,定义result为[],否则定义result为{}
  3. 处理:for循环obj
    1. 判断:看一下每一个key是不是对象的自己的属性,而不是原型的属性。
    2. 处理:递归调用deepClone
  4. 结果:每次循环都返回递归的值,最终得到一个新的对象

深拷贝实现代码:

  1. /**
  2. * 深拷贝
  3. * @param {Object} obj 要拷贝的对象
  4. */
  5. function deepClone(obj = {}) {
  6. if (typeof obj !== object || obj == null) {
  7. // obj 是 null ,或者不是对象和数组,直接返回
  8. return obj
  9. }
  10. // 初始化返回结果
  11. let result
  12. if (obj instanceof Array) {
  13. result = []
  14. } else {
  15. result = {}
  16. }
  17. for (let key in obj) {
  18. // 保证 key 不是原型的属性
  19. if (obj.hasOwnProperty(key)) {
  20. // 递归调用!!!
  21. result[key] = deepClone(obj[key])
  22. }
  23. }
  24. // 返回结果
  25. return result
  26. }

问题4:类型转换的问题

问:字符串拼接有什么要注意的?

字符串和数字的拼接会变成字符串。
-w468

问:何时使用===,何时使用==

-w403

==会尽量让两边转换之后相等。

记住一个规则,判断null的时候用==,其他的地方全部用===

-w689

if判断和逻辑运算相关

if运算判断的就是truely变量falsely变量
问:那么什么是truely变量和falsely变量?
答:两次取反,得到true,说明是true变量,否则就是false变量。例:

  1. !!a === true
  2. !!b === false

常见的falsely变量如下图:
-w627

上了上图的变量,其余的都是truely变量

最后上一道真题甜点

看下面的代码,执行输出的结果是什么?

  1. 1. const obj1 = {x: 100, y:200}
  2. 2. const obj2 = obj1
  3. 3. let x1 = obj1.x
  4. 4. obj2.x = 101
  5. 5. x1 = 102
  6. 6. console.log(obj1)

分析:
第二行把第一行的obj2赋值给obj1,这时候obj1和obj2指向同一个堆内存
第三行,把obj1.x赋值给x1,x1是一个值类型,所以这是一个干扰项,第5行的x1赋值并不会影响obj1和obj2.
第四行,改变obj2的x值,其实修改的同一个堆内存的x,这样打印obj1的时候,输出的就是101

答案:101


文章标签:

原文连接:https://juejin.cn/post/6977890638876540959

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

我在淘宝做弹窗,2022 年初的回顾与展望

看完这篇,你也可以搞定有趣的动态曲线绘制

低代码平台的属性面板该如何设计?

34个图片压缩工具集合,包含在线压缩和CLI工具

冴羽答读者问:过程比结果重要吗?如果是,怎么理解?如果不是,又怎么解?

中杯超大杯中间的新选择——vue2.7+vite+ts实践

LiveData源码分析

亚马逊Prime:流媒大战杀手锏

Vue详解知识概括

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

完美解决自定义字体垂直方向上下偏移的问题

使用vuepress从零开始搭建我的技术文档|已部署到线上

【Vue.js 3.0源码】AST 转换之节点内部转换

小程序+电商,该如何寻找营销增长点

前端如何开始深度学习,那不妨试试JAX

你可能不知道的 前端浏览器(window) 对本地文件操作(File System Access API)

爱奇艺向抖音开启授权,打开内容价值的新大门

使用ComposeDesktop开发一款桌面端多功能APK工具

一个简洁、强大、可扩展的前端项目架构是什么样的?