前端八股文第五篇

41. 做的比较好的项目,展开讲讲

我曾参与开发过一个电商平台的项目,该项目是一个多端适配的电商平台,包括网页端、移动端和小程序端。在这个项目中,我主要负责前端开发工作。我们团队采用了 Vue.js 框架进行开发,使用了 Vuex 进行状态管理,同时利用了 Vue Router 实现页面路由的跳转。在项目中,我负责了首页的开发,包括首页的布局设计、商品列表的展示、轮播图的实现等。我还参与了一些核心功能的开发,比如用户登录、购物车管理、订单结算等。整个项目在上线后取得了较好的用户反馈和业绩表现,得到了公司领导的肯定。

42. 深拷贝和浅拷贝,怎么实现一个深拷贝说思路

深拷贝和浅拷贝是指在复制对象或数组时的两种不同方式。浅拷贝只复制对象或数组的一层引用,而深拷贝则会递归复制对象或数组的所有子对象和元素,使得拷贝后的对象与原始对象完全独立。实现一个深拷贝可以采用以下思路:

  1. 遍历原始对象或数组,对每一个属性或元素进行判断。
  2. 如果属性或元素是基本类型(例如数字、字符串、布尔值等),直接赋值到新对象或数组。
  3. 如果属性或元素是对象或数组,则递归调用深拷贝函数进行复制。
  4. 最终返回复制后的对象或数组。

这样就能够实现一个完整的深拷贝函数,确保原始对象和复制后的对象完全独立,互不影响。

43. 内存泄露是什么,怎么导致的

内存泄露是指在程序运行过程中,申请的内存空间没有被正确释放,导致一直占用着系统的内存资源而不被回收。内存泄露可能会导致程序运行速度变慢、系统资源不足甚至崩溃等问题。内存泄露通常由以下几种原因导致:

  • 未释放引用:当一个对象被创建后,如果它的引用未被释放,即使该对象已经不再被使用,也不会被垃圾回收器回收,导致内存泄露。
  • 循环引用:如果两个对象相互引用,而且这两个对象之间没有任何其他对象引用它们,那么这两个对象将永远无法被垃圾回收器回收,从而导致内存泄露。
  • 定时器和事件监听未清理:如果定时器或事件监听没有被正确清理,那么它们持有的引用会一直存在,即使对象已经不再需要,也会导致内存泄露。

为了避免内存泄露,我们需要及时释放不再需要的对象引用,避免循环引用,以及确保定时器和事件监听在不需要时被正确清理。

44. Promise 介绍

Promise 是一种异步编程的解决方案,用于解决回调地狱和复杂的异步操作。Promise 代表了一个异步操作的最终完成或失败,可以获取异步操作的结果或错误信息。Promise 有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。一旦状态发生改变,就会触发对应的回调函数。Promise 实例具有 then、catch 和 finally 方法,用

于指定异步操作的状态改变时的回调函数,实现链式调用。使用 Promise 可以更清晰地表达异步操作的流程,使得异步代码更易读、更易维护。

45. Vue 和 React 的区别

Vue 和 React 是两个流行的前端框架,各有特点:

  • 模板语法:Vue 使用基于 HTML 的模板语法,将数据绑定到 DOM 上;而 React 使用 JSX(JavaScript XML)语法,将组件结构和渲染逻辑放在一起。
  • 数据流管理:Vue 使用双向数据绑定来实现视图与模型之间的同步,简化了数据操作;React 使用单向数据流(自顶向下单向数据流),通过 props 和 state 进行数据传递和管理。
  • 组件化:Vue 和 React 都支持组件化开发,但在组件通信和组件化开发方面有一些不同的实现方式。
  • 生态系统:Vue 生态系统相对较小、更加集中,拥有完整的解决方案,易于上手;React 生态系统更加庞大,有更多的第三方库和工具,但也需要更多的配置和学习成本。

总的来说,Vue 更适合快速开发小型项目和中小型团队,易于上手和维护;而 React 更适合构建大型、高性能的 Web 应用,更灵活、更强大,但学习曲线较陡峭。

46. 数组去重的方法?至少说出 2 种

数组去重是常见的前端问题,可以使用多种方法来实现:

  1. 使用 Set 数据结构:Set 是 ES6 中新加入的数据结构,它的特点是集合中的元素是唯一的,不会重复。我们可以利用 Set 的这个特性来实现数组去重。

    const array = [1, 2, 2, 3, 3, 4, 5, 5];
    const uniqueArray = [...new Set(array)]; // [1, 2, 3, 4, 5]
    
  2. 使用 filter 方法:利用数组的 filter 方法,通过遍历数组,筛选出只出现一次的元素,达到去重的效果。

    const array = [1, 2, 2, 3, 3, 4, 5, 5];
    const uniqueArray = array.filter((item, index, self) => self.indexOf(item) === index); // [1, 2, 3, 4, 5]
    

47. 深拷贝和浅拷贝,如何实现一个深拷贝

深拷贝和浅拷贝是对对象或数组复制过程的描述。浅拷贝只复制对象或数组的一层引用,而深拷贝则会递归复制对象或数组的所有子对象和元素,使得拷贝后的对象与原始对象完全独立。实现一个深拷贝可以采用以下思路:

function deepClone(obj) {// 首先判断是不是对象或数组if (typeof obj !== 'object' || obj === null) {return obj; // 基本类型直接返回}// 根据原始对象的类型创建一个新的对象或数组const newObj = Array.isArray(obj) ? [] : {};// 遍历原始对象的每一个属性或元素for (let key in obj) {// 如果属性或元素是对象或数组,则递归调用深拷贝函数进行复制newObj[key] = deepClone(obj[key]);}return newObj;
}const obj = { a: 1, b: { c: 2 }};
const newObj = deepClone(obj);
console.log(newObj); // { a: 1, b: { c: 2 }}

48. 如何实现一个 new

在 JavaScript 中,new 运算符用于创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。实现一个 new 的过程主要包括以下几个步骤:

  1. 创建一个新对象。
  2. 将该新对象的原型指向构造函数的原型对象。
  3. 执行构造函数,传入参数,并将 this 指向该新对象。
  4. 如果构造函数返回的是对象,则返回该对象;否则返回新创建的对象。

下面是一个简单实现的示例:

function myNew(constructor, ...args) {// 创建一个新对象,并将该新对象的原型指向构造函数的原型对象const obj = Object.create(constructor.prototype);// 执行构造函数,并将 this 指向新对象const result = constructor.apply(obj, args);// 如果构造函数返回的是对象,则返回该对象;否则返回新创建的对象return typeof result === 'object' ? result : obj;
}// 使用示例
function Person(name, age) {this.name = name;this.age = age;
}const person = myNew(Person, 'Alice', 30);
console.log(person); // { name: 'Alice', age: 30 }

这样就实现了一个简单的 new 运算符。

49. 怎么理解回流和重绘

回流(Reflow)和重绘(Repaint)是浏览器渲染页面时常见的两个过程:

  • 回流(Reflow):当 DOM 结构发生变化,或者浏览器窗口大小发生变化时,浏览器会重新计算页面上元素的位置和几何结构,这个过程称为回流。回流是页面布局或几何属性发生变化时的一个全局性操作,会导致整个页面的重新渲染。

  • 重绘(Repaint):当页面中元素的样式发生变化,但是不影响其布局时,浏览器会重新绘制页面上受影响的元素,这个过程称为重绘。重绘不会改变元素的几何属性,只会改变元素的外观,不涉及布局的重新计算。

理解回流和重绘可以帮助我们优化页面性能,尽量减少页面的回流次数和重绘次数,从而提高页面的渲染效率。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1789.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

运筹说 第127期 | 存储论相关模型代码实现

本期我们进行运筹学之存储论算法的讲解,我们将对常见的商品存储模型进行介绍,并求解不同供需条件下的最优存储策略,通过MATLAB和Python工具帮助大家快速求解最优存储策略,做到事半功倍。由于篇幅有限,小编接下来只展示…

【Linux】Linux权限

本文将会围绕着下面5个问题进行讲解: 认识Linux下用户的分类什么叫做权限没有权限会有什么现象如何进行权限的修改其他与权限相关的问题 好了,本章内容就要开始了,准备你的大脑,开凿吧!!! 认识…

Ubuntu系统如何实现键盘按键映射到其他按键(以 Ctrl+c 映射到 F3,Ctrl+v 映射到 F4 为例)

文章目录 写在前面1. 功能描述2. 实现步骤2.1 安装AutoKey2.2 软件设置2.2.1 软件设置 2.3 测试是否安装成功 参考链接 写在前面 自己的测试环境: Ubuntu20.04 1. 功能描述 Ubuntu系统使用Ctrlc 、Ctrlv 进行复制粘贴操作的时候,时间长了就会出现小拇指…

threejs开源实例-粒子地球

源码 three.js webgl - geometry - cube <script type"module">import * as THREE from "three";import { OrbitControls } from "three/addons/controls/OrbitControls.js";import { GUI } from "three/addons/libs/lil-gui.modul…

苍穹外卖的vue开发

前端的环境搭建 技术选型 熟悉目录结构 如何梳理代码 以登录功能进行示例 先看前端页面 这个路径一定是对应了一个对应的路由,这个路由一定对应了某个组件 找到登录的方法 这个方法在store中,是异步方法 store中有一个actions方法 对应的是login的api请求 request是我们单独…

docker desktop使用ubuntu18.04带图形化+运行qemu

记录一下docker desktop使用ubuntu18.04带图形化命令和使用步骤 1. 下载镜像 参考&#xff1a;【Docker教程】Docker部署Ubuntu18.04(带图形化界面) 命令&#xff1a; docker pull kasmweb/ubuntu-bionic-desktop:1.10.02. 启动镜像 命令&#xff1a; docker run -d -it …

springboot入门学习笔记2(连接mysql,使用mybatis,plus等)

对于application.yml的学习 application.yml 是 Spring Boot 的核心配置文件&#xff0c;用于定义应用程序的配置属性。 它允许开发者通过 YAML 格式配置各种属性&#xff0c;如服务器端口、数据库连接、第三方服务端点等。 这些属性通过 Spring 的 ConfigurationProperties…

5G基础知识

那个工种&#xff1f; FDD 频分双工&#xff08;Frequency Division Duplexing&#xff09;&#xff0c;理解起来很简单&#xff0c;就是把上行和下行业务隔离在两个频段&#xff0c;互不干扰。 而 TDD 时分双工&#xff08;Time-Division Duplexing&#xff09;&#xff0c;是…

大数据治理:策略、技术与挑战

随着信息技术的飞速发展&#xff0c;大数据已经成为现代企业运营和决策的重要基础。然而&#xff0c;大数据的复杂性、多样性和规模性给数据管理带来了前所未有的挑战。因此&#xff0c;大数据治理应运而生&#xff0c;成为确保数据质量、合规性、安全性和可用性的关键手段。本…

022集——统计多条线的总长度(CAD—C#二次开发入门)

如下图所示&#xff0c;选择多条线并统计长度&#xff1a; c#中不包含直接获取curve曲线长度 属性&#xff0c;需用如下方法&#xff1a;curve.GetDistanceAtParameter(item.EndParam) 附部分代码如下&#xff1a; using Autodesk.AutoCAD.ApplicationServices; using Autode…

WPF+MVVM案例实战(十四)- 封装一个自定义消息弹窗控件(下)

文章目录 1、案例效果2、弹窗控件使用1.引入用户控件2、按钮命令实现 3、总结4、源代码获取 1、案例效果 2、弹窗控件使用 1.引入用户控件 打开 Wpf_Examples 项目&#xff0c;在引用中添加用户控件库&#xff0c;在 MainWindow.xaml 界面引用控件库&#xff0c;代码如下&…

2024年计算机视觉与图像处理国际学术会议 (CVIP 2024)

目录 大会简介 主办单位&#xff0c;协办单位 组委会 主讲嘉宾 征稿主题 参会方式 会议议程 重要信息 会议官网&#xff1a;iccvip.org 大会时间&#xff1a;2024年11月15日-17日 大会地点&#xff1a;中国 杭州 大会简介 2024年计算机视觉与图像处理国际学术会议(C…

硅谷甄选(8)spu

Spu模块 SPU(Standard Product Unit)&#xff1a;标准化产品单元。是商品信息聚合的最小单位&#xff0c;是一组可复用、易检索的标准化信息的集合&#xff0c;该集合描述了一个产品的特性。通俗点讲&#xff0c;属性值、特性相同的商品就可以称为一个SPU。 7.1 Spu模块的静态…

【element el-date-picker限制时间选择范围】

问题场景 在一次项目中,有一个这样的需求就是填报时间需要在上一次提交信息之后,在限制时间时发现,el-date-picker中的pickerOption中的disableDate是基于日期限制的,若限制日期为今日凌晨,那么今天之后的日期都不能填 <el-date-pickerv-model="selectedDateTime&…

我也谈AI

“随着人工智能技术的不断发展&#xff0c;我们已经看到了它在各行业带来的巨大变革。在医疗行业中&#xff0c;人工智能技术正在被应用于病例诊断、药物研发等方面&#xff0c;为医学研究和临床治疗提供了新的思路和方法&#xff1b;在企业中&#xff0c;人工智能技术可以通过…

机器人对人工智能未来发展的影响

机器人作为人工智能&#xff08;AI&#xff09;技术的一个重要应用领域&#xff0c;对人工智能的未来发展具有深远的影响。机器人和人工智能在技术上存在深度的交叉和融合。人工智能为机器人提供了强大的感知、决策和执行能力&#xff0c;而机器人则成为人工智能技术的最佳载体…

大数据-199 数据挖掘 机器学习理论 - 决策树 模型 决策与条件 香农熵计算

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

ES入门:查询和聚合

安装完ElasticSearch 和 Kibana后我们开始学习 为了方便测试&#xff0c;使用kibana的dev tool来进行学习测试&#xff1a; 测试工具 从索引文档开始 插入 向 Elasticsearch 索引 customer 的 _doc 类型的文档 id 为 1 的文档发送 PUT 请求的例子。 请求体为 JSON 格式&am…

力扣——二叉树的后序遍历(C语言)

1.题目&#xff1a; 给你一棵二叉树的根节点 root &#xff0c;返回其节点值的后序遍历。 2.原理&#xff1a; 这里的遍历&#xff0c;是要存入到数组中&#xff0c;所以需要建立数组&#xff0c;这里传参有*returnSize&#xff0c;需要求节点个数&#xff0c;可以调用前面Tr…

软件测试学习笔记丨Flask操作数据库-数据库和表的管理

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/23427 结构分析 Runner是中间件sqlachemy去驱动Runner&#xff0c;根据不同的数据库去驱动不同的中间件 demo # 导入Flask的类 from flask import Flask # 实例化 Flask的类&#xff0c;并且…