No116.精选前端面试题,享受每天的挑战和学习

简介: No116.精选前端面试题,享受每天的挑战和学习

简单说下Object.assign()

Object.assign()JavaScript 中的一个内建方法,它用于将一个或多个源对象的可枚举属性的值复制到目标对象中。它将源对象的属性和值合并到目标对象中。使用 Object.assign() 的语法如下:

Object.assign(target, ...sources)
  • target 参数是要复制属性的目标对象
  • sources 参数是一个或多个源对象。

例如,我们有一个目标对象和一个源对象:

const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };

我们可以使用 Object.assign() 将源对象的属性和值复制到目标对象:

Object.assign(target, source);

此时,目标对象就会变成 { a: 1, b: 3, c: 4 }。

需要注意的是,Object.assign() 在执行属性复制时是浅拷贝的,即如果源对象的属性是一个引用类型(如对象或数组),只会复制引用而不是进行递归复制。

说下前端手动埋点、可视化埋点的实现思路

前端埋点是指在前端代码中手动插入一些代码来收集用户的行为数据或者监控系统的性能指标

手动埋点和可视化埋点是两种常见的实现思路。

1. 手动埋点:

  • 根据需求确定需要监控的行为和指标,例如按钮点击、页面曝光、AJAX请求等。
  • 在对应的代码位置插入埋点代码,一般是调用相关的统计分析工具提供的API,比如Google Analytics或者自定义的统计工具。
  • 埋点代码会收集对应行为的信息,比如元素ID、操作类型等,并发送给后端进行数据统计和分析。

2. 可视化埋点:

  • 可视化埋点是通过可视化界面来定义和配置埋点规则,无需手动插入埋点代码。
  • 创建一个可视化编辑器,用于定义哪些行为需要进行埋点,并规定收集哪些属性和信息。
  • 在用户进行相应行为时,使用事件监听器来捕获并记录相应的信息,然后将这些信息发送给后端进行处理和分析。

可视化埋点相对于手动埋点的优势是操作更便捷、能减小对代码的侵入性。但是它也有一些限制,比如需要传输大量的配置数据、难以满足复杂的埋点需求等。

需要注意的是,无论是手动埋点还是可视化埋点,在实施时都需要考虑用户隐私和数据安全的问题,并遵循相关的法律法规。

数组内存和对象内存

数组内存是指在内存中为存储数组元素所占用的空间。数组是一种连续的内存结构,因此在内存中分配了一段连续的空间来存储数组的元素,同时还会用额外的内存来存储数组的长度等信息。

对象内存是指在内存中为存储对象所占用的空间。对象是一种包含数据和方法的封装单元,它在内存中以一块连续的区域存在,该区域包括对象的所有实例变量以及用于存储方法指针和其他辅助信息的空间。

数组和对象都需要在内存中分配空间来存储其所占用的数据。不同之处在于,数组是连续存储的一组元素,而对象则是由实例变量和方法指针等组成的,更为复杂的数据结构。

总的来说,数组内存和对象内存都需要根据其所需大小来在内存中进行分配。

vue响应式原理

Vue响应式原理是指在Vue框架中,通过数据劫持和观察者模式来实现数据变化的自动更新。

具体实现步骤如下:

  1. Vue在初始化过程中,会遍历传入的data对象中的每个属性,并使用Object.defineProperty对其进行劫持。这使得Vue能够监听属性的读取和修改操作。
  2. 劫持过程中,Vue会为每个属性创建一个Dep对象,用于收集依赖和通知更新
  3. 当视图中使用到某个data属性时,会触发属性的getter方法,此时Dep会收集依赖,将Watcher对象添加到自己的订阅列表中。
  4. 当该属性被修改时,会触发属性的setter方法,此时Dep会通知所有的订阅者(Watcher)进行更新操作。
  5. Watcher对象会在初始化过程中,将自身添加到Dep的订阅列表中,并将当前属性值保存起来。当属性发生变化时,会触发Watcher的更新回调函数,从而更新视图。

通过以上的步骤,Vue实现了数据的双向绑定。当数据发生变化时,会自动更新对应的视图,而当视图发生变化时,也会自动更新对应的数据。这样可以大大简化开发过程,提高开发效率。

watch的几种常见用法,给出示例代码

watch在Vue中常见的几种用法有:

  1. 监听一个属性的变化执行相应的回调函数
  2. 深度监听一个对象的变化
  3. 监听多个属性的变化

下面给出这几种用法的示例代码:

  1. 监听一个属性的变化并执行相应的回调函数:
watch: {
  count: function(newValue, oldValue) {
    console.log('count发生了变化', newValue, oldValue);
  }
},
  1. 深度监听一个对象的变化:
watch: {
  userInfo: {
    handler: function(newValue, oldValue) {
      console.log('userInfo发生了变化', newValue, oldValue);
    },
    deep: true
  }
},
  1. 监听多个属性的变化:
watch: {
  count: function(newValue, oldValue) {
    console.log('count发生了变化', newValue, oldValue);
  },
  'userInfo.name': function(newValue, oldValue) {
    console.log('userInfo的name属性发生了变化', newValue, oldValue);
  }
},

在这些示例中,watch选项是一个对象,它的属性是需要监听的属性或表达式,值是一个回调函数。这个回调函数接收两个参数,分别是新值和旧值。可以根据需要在回调函数中执行相应的操作。

需要注意的是,在监听对象或数组的变化时,如果需要深度监听,需要设置deep选项为true。而在监听多个属性的变化时,可以使用点(.)来表示访问对象的属性。

这些示例只是演示了watch的几种常见用法,实际应用中可以根据具体的需求进行更灵活的监听操作。

相关文章
|
1月前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
54 5
|
1月前
|
移动开发 前端开发 JavaScript
从零开始学习前端开发:入门指南
本文将介绍从零开始学习前端开发的入门指南。通过学习HTML、CSS和JavaScript等基础知识,读者将了解前端开发的基本概念和工具,并学会如何构建简单的网页应用程序。无论您是初学者还是有一定经验的开发人员,本文都将帮助您打下坚实的前端开发基础。
|
3月前
|
存储 开发框架 前端开发
从零开始学习前端开发
前端开发是现代互联网应用程序开发中不可或缺的一部分。本文将带您从零开始学习前端开发,包括HTML、CSS和JavaScript等核心技术,以及常见的开发框架和工具。
|
12天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握
|
1月前
|
前端开发 JavaScript Java
通过学习mayfly,我学会了前端如何优雅设计字典值
`shigen`是一位擅长多种编程语言的博主,他在探索[mayfly-go](https://juejin.cn/post/7319365035552309248)项目后,发现了对枚举值管理的优雅设计。他分享了如何将字典和枚举值结构化,使用Vue+typescript实现更易维护的代码。通过创建`TagType`和`EnumValue`类,以及提供静态方法,实现了模块化和简洁的字典处理。示例展示了如何在页面中高效引用和显示字典数据,提高了代码的可读性和可维护性。
20 3
通过学习mayfly,我学会了前端如何优雅设计字典值
|
2月前
|
存储 缓存 监控
2024年春招小红书前端实习面试题分享
春招已经拉开帷幕啦! 春招的拉开,意味着新一轮的求职大战已经打响,希望每位求职者都能充分准备,以最佳的状态迎接挑战,找到心仪的工作,开启职业生涯的新篇章。祝愿每位求职者都能收获满满,前程似锦!
80 3
|
2月前
|
前端开发 数据可视化 安全
2024金三银四必看前端面试题!简答版精品!
2024金三银四必看前端面试题!2w字精品!简答版 金三银四黄金期来了 想要跳槽的小伙伴快来看啊
98 3
|
3月前
|
存储 移动开发 前端开发
从零开始学习前端开发
前端开发是一项非常有前途的技能,在当今数字化时代中变得越来越重要。本文将介绍从零开始学习前端开发所需的基本知识,包括HTML、CSS和JavaScript的基础知识以及相关工具和框架。
|
9月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
98 0
|
9月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
68 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置