跟着B站前端面试总结回顾前端基础知识(一)

2024-08-27 06:20

本文主要是介绍跟着B站前端面试总结回顾前端基础知识(一),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

组件划分标准 

组件划分_哔哩哔哩_bilibili

 

在前端Vue开发中,组件的划分是构建高效、可维护应用的关键步骤。Vue组件的划分标准通常基于多个方面的考虑,包括但不限于功能独立性、复用性、可维护性和可扩展性。以下是一些Vue组件划分的标准:

1. 单一职责原则

  • 功能独立性:每个组件应该只负责一个单一的功能或一组紧密相关的功能。这有助于保持组件的简洁和易于理解。
  • 高内聚低耦合:组件内部应该紧密相关,而与外部其他组件的依赖关系应尽可能减少。这有助于提高组件的复用性和可维护性。

2. 复用性

  • 可重用组件:将那些在不同页面或功能中可能重复使用的UI元素或功能封装成组件。例如,按钮、输入框、弹窗等都可以封装成可复用的组件。
  • 参数化:为了提高组件的复用性,可以通过props接收外部传入的参数来动态改变组件的行为或展示内容。

3. 可维护性

  • 清晰的结构:组件的结构应该清晰明了,易于理解和维护。可以通过合理的目录结构和命名规范来实现。
  • 易于测试:组件应该设计成易于测试的形式,包括单元测试和集成测试。这有助于在开发过程中快速发现并修复问题。

4. 可扩展性

  • 插槽(Slots):利用Vue的插槽机制,可以让组件更加灵活和可扩展。通过定义插槽,可以让组件的使用者自定义部分内容,而不必修改组件的源代码。
  • 事件与回调:通过自定义事件和回调函数,组件之间可以进行有效的通信和交互,从而支持更复杂的功能和场景。

5. 命名规范

  • 遵循命名规范:为组件制定一套清晰的命名规范,有助于团队成员之间的协作和项目的维护。一般来说,组件名应该使用小写字母,多个单词之间可以使用连字符(-)或中划线(_)连接。

6. 性能考虑

  • 避免过度嵌套:过多的嵌套会增加组件的复杂度,并可能影响性能。因此,在划分组件时应该尽量避免不必要的嵌套。
  • 按需加载:对于大型应用来说,可以通过Vue的异步组件和Webpack的代码分割功能来实现组件的按需加载,从而优化应用的加载速度和性能。

综上所述,Vue组件的划分标准是一个综合性的考虑过程,需要根据项目的实际需求、团队的开发习惯以及Vue框架的特性来制定合理的划分方案。通过合理的组件划分,可以构建出高效、可维护、可扩展的前端应用。

Javascript传值与传地址 

在JavaScript中,变量的传递方式本质上只有一种:按值传递(Pass by Value),但这可能会引起一些关于“传值”与“传地址”的混淆,尤其是在处理对象(Objects)和数组(Arrays)时。下面详细解释这一点:

基本数据类型的传值

对于基本数据类型(如:Number, String, Boolean, Undefined, Null, Symbol, BigInt),JavaScript是严格按值传递的。这意味着当你将一个基本数据类型的变量赋值给另一个变量,或者作为参数传递给函数时,实际上传递的是该变量的一个值拷贝。因此,对接收到的值的修改不会影响到原始数据。

// 但是,如果尝试改变obj2本身引用的地址,则不会影响obj  
obj2 = {value: 20}; // obj2现在引用一个新的对象  
console.log(obj.value); // 输出: 10,因为obj的引用没有改变

对象和数组的“传地址”表现

对于对象和数组,虽然它们也是按值传递,但这个“值”是引用地址(或者说是内存地址的引用)。当你将一个对象或数组变量赋值给另一个变量,或者作为参数传递给函数时,实际上传递的是这个对象或数组在内存中的地址(或者说是引用)。因此,你通过这个新变量(或函数参数)对对象或数组进行修改时,实际上是修改了同一块内存中的数据,这就会影响到原始的对象或数组。

let obj = {value: 5};  
let obj2 = obj; // obj2获得obj的引用地址  
obj2.value = 10; // 修改obj2引用的对象,会影响obj  
console.log(obj.value); // 输出: 10  // 但是,如果尝试改变obj2本身引用的地址,则不会影响obj  
obj2 = {value: 20}; // obj2现在引用一个新的对象  
console.log(obj.value); // 输出: 10,因为obj的引用没有改变

// 但是,如果尝试改变obj2本身引用的地址,则不会影响obj  
obj2 = {value: 20}; // obj2现在引用一个新的对象  
console.log(obj.value); // 输出: 10,因为obj的引用没有改变 

总结

  • 基本数据类型:严格按值传递,传递的是变量的一个值拷贝。
  • 对象和数组:虽然也是按值传递,但这个“值”是引用地址。通过这个地址可以访问和修改原始对象或数组,但重新赋值(即改变引用地址)则不会影响到原始数据。

 

 Array

在JavaScript中,Array 类型提供了许多内置的方法来操作数组,包括添加、删除、遍历、搜索、排序等。以下是一些常见的 Array 方法:

  1. push()
    • 向数组的末尾添加一个或多个元素,并返回新的数组长度。
  2. pop()
    • 删除并返回数组的最后一个元素。
  3. shift()
    • 删除并返回数组的第一个元素。
  4. unshift()
    • 在数组的开头添加一个或多个元素,并返回新的数组长度。
  5. concat()
    • 用于合并两个或多个数组。此方法不会改变现有的数组,而是返回一个新数组
  6. slice()
    • 返回一个浅拷贝的新数组对象,这个对象是一个由 begin 到 end(不包括 end)选择的数组的一部分浅拷贝。原始数组不会被修改。
  7. splice()

    • 通过删除现有元素和/或添加新元素来更改一个数组的内容。这个方法会改变原数组
  8. join()
    • 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
  9. sort()
    • 对数组的元素进行排序,并返回数组。排序不一定是稳定的。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。
  10. reverse()
    • 颠倒数组中元素的顺序。
  11. indexOf()
    • 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
  12. lastIndexOf()
    • 返回指定值在数组中的最后一个索引,如果不存在则返回-1。从数组的后面向前查找。
  13. forEach()

    • 对数组的每个元素执行一次提供的函数。
  14. map()

    • 创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
  15. filter()

    • 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
  16. reduce()
    • 对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
  17. reduceRight()
    • 它的工作原理类似于 reduce(),不同的是它是从数组的末尾开始向前遍历。
  18. find()
    • 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
  19. findIndex()
    • 返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
  20. flat()
    • 按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
  21. flatMap()
    • 首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 和 flat 方法的结合非常相似,但 flatMap 通常在性能上更优。

 

 

 Javascript常见遍历数组的方法

JavaScript 中遍历数组常见的方法有:

for 循环:

使用 for 循环可以遍历数组中的每个元素,并对其进行操作。

const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) { console.log(array[i]); }

forEach 方法:

使用 forEach 方法可以遍历数组中的每个元素,并对其执行指定的函数操作。

const array = [1, 2, 3, 4, 5];

array.forEach(item => { console.log(item); });

map 方法:

使用 map 方法可以遍历数组中的每个元素,并返回一个新数组,新数组的元素是对原数组中每个元素执行函数后的结果。

const array = [1, 2, 3, 4, 5];

const newArray = array.map(item => { return item * 2; }); console.log(newArray);

filter 方法:

使用 filter 方法可以遍历数组中的每个元素,并返回一个新数组,新数组中的元素是满足指定条件的原数组元素。

const array = [1, 2, 3, 4, 5];

const newArray = array.filter(item => { return item > 3; }); console.log(newArray);

reduce 方法:

使用 reduce 方法可以将数组中的元素归约为一个值,通过指定的函数操作。

const array = [1, 2, 3, 4, 5];

const sum = array.reduce((accumulator, currentValue) =>

{ return accumulator + currentValue; }, 0);

console.log(sum);

以上是 JavaScript 中常见的几种遍历数组的方法,根据需求和使用场景选择合适的方法来处理数组数据。

判断数组数据类型的方式

在JavaScript中,typeofinstanceof是两种常用的判断变量类型的方法,它们各有特点和适用场景。以下是将这两种方法与其他常见判断类型方法(如Object.prototype.toString.call()Array.isArray())进行对比的表格:

方法描述优点缺点
typeof返回一个表示操作数类型的字符串1. 快速简单,适用于基本数据类型<br>2. 语法简洁1. 无法准确判断null(返回object)<br>2. 无法准确区分引用数据类型(除function外,其他都返回object
instanceof判断一个对象是否是其原型链上构造函数的实例1. 可以准确判断复杂引用数据类型<br>2. 适用于自定义类型的判断1. 无法判断基本数据类型<br>2. 假定只有一个全局执行环境,不适用于跨iframe判断<br>3. 所有对象类型instanceof Object都是true
Object.prototype.toString.call()调用ObjecttoString方法,并传入变量,通过返回值判断类型1. 可以准确判断所有基本数据类型和对象类型<br>2. 适用于nullundefined的判断<br>3. 不会受对象自定义toString方法的影响1. 对于自定义对象类型,只能返回[object Object],无法精确区分
Array.isArray()ES5中新增的方法,专门用于判断变量是否为数组1. 准确可靠<br>2. 可以检测iframe中的数组<br>3. 不会被覆盖或修改1. 需要在ES5及更高版本的JavaScript环境中使用(IE8及以下不支持)<br>2. 只能判断数组类型,无法判断其他数据类型

详细对比说明:

  • typeof
    • 优点:操作简单,可以快速区分基本数据类型(如numberstringbooleanundefinedfunction等)。
    • 缺点:对于null类型会返回object,容易引起混淆;对于引用数据类型(如对象、数组等),除function外,都返回object,无法准确区分。
  • instanceof
    • 优点:能够准确判断复杂引用数据类型,包括自定义类型。
    • 缺点:无法判断基本数据类型;在存在多个全局执行环境(如iframe)的情况下,可能无法正确判断;所有对象类型instanceof Object的结果都是true,这在某些情况下可能不是所期望的。
  • Object.prototype.toString.call()
    • 优点:能够准确判断所有基本数据类型和对象类型,包括nullundefined
    • 缺点:对于自定义对象类型,只能返回[object Object],无法精确区分具体类型。
  • Array.isArray()
    • 优点:专门用于判断数组类型,准确可靠,且不受对象自定义方法的影响。
    • 缺点:只能在ES5及更高版本的JavaScript环境中使用,且只能判断数组类型,无法判断其他数据类型。

综上所述,在选择判断类型的方法时,应根据具体需求和场景来决定使用哪种方法。对于基本数据类型的判断,typeof是一个快速简单的选择;对于复杂引用数据类型的判断,特别是需要区分具体类型时,Object.prototype.toString.call()可能是一个更好的选择;而instanceof则适用于需要判断对象是否属于某个特定类(包括自定义类)的实例的场景;Array.isArray()则是专门用于判断数组类型的最佳选择。

 

 

这篇关于跟着B站前端面试总结回顾前端基础知识(一)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1110879

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

字节面试 | 如何测试RocketMQ、RocketMQ?

字节面试:RocketMQ是怎么测试的呢? 答: 首先保证消息的消费正确、设计逆向用例,在验证消息内容为空等情况时的消费正确性; 推送大批量MQ,通过Admin控制台查看MQ消费的情况,是否出现消费假死、TPS是否正常等等问题。(上述都是临场发挥,但是RocketMQ真正的测试点,还真的需要探讨) 01 先了解RocketMQ 作为测试也是要简单了解RocketMQ。简单来说,就是一个分

linux-基础知识3

打包和压缩 zip 安装zip软件包 yum -y install zip unzip 压缩打包命令: zip -q -r -d -u 压缩包文件名 目录和文件名列表 -q:不显示命令执行过程-r:递归处理,打包各级子目录和文件-u:把文件增加/替换到压缩包中-d:从压缩包中删除指定的文件 解压:unzip 压缩包名 打包文件 把压缩包从服务器下载到本地 把压缩包上传到服务器(zip

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

计组基础知识

操作系统的特征 并发共享虚拟异步 操作系统的功能 1、资源分配,资源回收硬件资源 CPU、内存、硬盘、I/O设备。2、为应⽤程序提供服务操作系统将硬件资源的操作封装起来,提供相对统⼀的接⼝(系统调⽤)供开发者调⽤。3、管理应⽤程序即控制进程的⽣命周期:进程开始时的环境配置和资源分配、进程结束后的资源回收、进程调度等。4、操作系统内核的功能(1)进程调度能⼒: 管理进程、线

秋招最新大模型算法面试,熬夜都要肝完它

💥大家在面试大模型LLM这个板块的时候,不知道面试完会不会复盘、总结,做笔记的习惯,这份大模型算法岗面试八股笔记也帮助不少人拿到过offer ✨对于面试大模型算法工程师会有一定的帮助,都附有完整答案,熬夜也要看完,祝大家一臂之力 这份《大模型算法工程师面试题》已经上传CSDN,还有完整版的大模型 AI 学习资料,朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费