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

news2024/12/26 3:49:55

组件划分标准 

组件划分_哔哩哔哩_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中，typeof和instanceof是两种常用的判断变量类型的方法，它们各有特点和适用场景。以下是将这两种方法与其他常见判断类型方法（如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()调用Object的toString方法，并传入变量，通过返回值判断类型1. 可以准确判断所有基本数据类型和对象类型<br>2. 适用于null和undefined的判断<br>3. 不会受对象自定义toString方法的影响1. 对于自定义对象类型，只能返回[object Object]，无法精确区分
Array.isArray()ES5中新增的方法，专门用于判断变量是否为数组1. 准确可靠<br>2. 可以检测iframe中的数组<br>3. 不会被覆盖或修改1. 需要在ES5及更高版本的JavaScript环境中使用（IE8及以下不支持）<br>2. 只能判断数组类型，无法判断其他数据类型

详细对比说明：

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

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

 

 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

破解历史合同“旧题” 答好集体经济“新篇”

破解历史合同“旧题” 答好集体经济“新篇”

——汕头市龙湖区&#xff1a;全面推进乡村振兴战略 实现农村集体经济新飞跃 农村集体资产资源是乡村赖以生存的家底&#xff0c;也是村集体经济发展壮大、更好推动乡村振兴战略加力提速的承载。自2023年10月开始&#xff0c;在汕头市龙湖区的广袤乡村上&#xff0c;一场关于村…
阅读更多...
图解搜索算法(BFS、DFS、Dijstra算法、KSP算法、A*算法)

图解搜索算法(BFS、DFS、Dijstra算法、KSP算法、A*算法)

文章目录 深度优先搜索算法广度优先搜索算法Dijkstra算法KSP算法A*算法 由于在工作中用到了BFS算法、DFS算法、Dijkstra算法、KSP算法&#xff0c;因此将上述算法的工作原理记录一下&#xff0c;同时用图解的方式解释相应的算法。A*算法由于本文在工作中&#xff0c;还没用过&a…
阅读更多...
深度学习语义分割篇——LR-ASPP原理详解+源码实战

深度学习语义分割篇——LR-ASPP原理详解+源码实战

&#x1f34a;作者简介&#xff1a;秃头小苏&#xff0c;致力于用最通俗的语言描述问题 &#x1f34a;专栏推荐&#xff1a;深度学习网络原理与实战 &#x1f34a;近期目标&#xff1a;写好专栏的每一篇文章 &#x1f34a;支持小苏&#xff1a;点赞&#x1f44d;&#x1f3fc;、…
阅读更多...
简单使用富有创造力的DALL·E 3 图像生成器——OpenAI Images Generations API

简单使用富有创造力的DALL·E 3 图像生成器——OpenAI Images Generations API

OpenAI Images Generations API 申请及使用 DALL-E 3 是 OpenAI 开发的两个版本的图像生成模型&#xff0c;它们能够根据文本描述生成高质量的图像。 本文档主要介绍 OpenAI Images Generations API 操作的使用流程&#xff0c;利用它我们可以轻松使用官方 OpenAI DALL-E 的图…
阅读更多...
类和构造函数之间的继承

类和构造函数之间的继承

类之间构造函数的继承是面向对象编程中的一个重要概念&#xff0c;它允许一个类&#xff08;子类&#xff09;继承另一个类&#xff08;父类&#xff09;的属性和方法。通过这种方式&#xff0c;子类可以复用父类的代码&#xff0c;从而避免重复&#xff0c;提高代码的可维护性…
阅读更多...
Swagger的增强knife4j

Swagger的增强knife4j

效果图 导入依赖 <!--不是导入swagger原因就是&#xff1a;knife4j对swagger增强--><dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><version>3.0.2</version><…
阅读更多...
考研数学｜ 张宇线代9讲换李永乐线代讲义，强化来得及吗？

考研数学｜ 张宇线代9讲换李永乐线代讲义，强化来得及吗？

张宇线代9讲&#xff1a; 张宇老师的线代九讲和张宇老师的线代课程搭配使用&#xff0c;相对于更适合线代底子足够强的同学。整体书的题目难度较大&#xff0c;所以开始刷了之后发现不适合自己可以选择换一本习题册&#xff0c;当然如果担心时间不够还是想尽力刷下去的话可以去…
阅读更多...
8款每天都能用到的网站和APP，值得收藏

8款每天都能用到的网站和APP，值得收藏

5个网站3个APP&#xff0c;都是自己每天常用的一些工具&#xff0c;强大实用&#xff0c;能给自己省不少事&#xff0c;分享给大家~ 1、奶牛快传 https://cowtransfer.com/ 一个让你轻松上传和分享大文件的网站。跟那些需要下载app、操作复杂的服务不同&#xff0c;奶牛快传…
阅读更多...
随机森林与线性回归

随机森林与线性回归

集成学习方法之随机森林 集成学习&#xff08;Ensemble Learning&#xff09;是一种通过组合多个分类器来提高预测性能的方法。主要分为三种类型:Bagging、Boosting和Stacking。以下是集成学习的基本步骤和概念&#xff1a; 1数据采样&#xff1a;从训练集中有放回地随机抽取…
阅读更多...
前端手写源码系列(一）—— 手写防抖和节流

前端手写源码系列(一）—— 手写防抖和节流

目录 1.实现防抖函数&#xff08;debounce&#xff09;2.实现节流函数&#xff08;throttle&#xff09;时间戳的方式&#xff1a;定时器方式&#xff1a; 3.总结 1.实现防抖函数&#xff08;debounce&#xff09; 防抖函数原理&#xff1a;把触发非常频繁的事件合并成一次去执…
阅读更多...
修复照片，2024年好用的图片修复工具推荐

修复照片，2024年好用的图片修复工具推荐

在日常中&#xff0c;我们总爱用镜头捕捉生活的每一个瞬间&#xff0c;但随着时间的推移&#xff0c;那些珍贵的记忆可能会因像素不高、保存不当等原因变得模糊不堪。这时需要将模糊的照片修复清晰成为我们迫切的需求。下面给大家分享4种2024年好用值得推荐的修复工具&#xff…
阅读更多...
【自动化】一共获取6600多公司信息【逆向】一页15还加密。

【自动化】一共获取6600多公司信息【逆向】一页15还加密。

一、【逆向】一页15还加密。 二、【自动化】一共获取6600多公司信息 三、对于两种方式我喜欢第二种自动化 from DrissionPage import ChromiumPage, ChromiumOptions import time # chrome:version co = ChromiumOptions().set_paths(browser_path=r"C:\Users\lenovo\A…
阅读更多...
qt-19 QMainWindow窗口组件-菜单栏-工具栏

qt-19 QMainWindow窗口组件-菜单栏-工具栏

QMainWindow窗口组件-菜单栏-工具栏 showwidgetshowwidget.hshowwidget.cpp processorprocessor.hprocessor.cpp main.cpp运行图 showwidget showwidget.h #ifndef SHOWWIDGET_H #define SHOWWIDGET_H#include <QWidget> #include <QLabel> #include <QTextEd…
阅读更多...
Sparse Kernel Canonical Correlation Analysis

Sparse Kernel Canonical Correlation Analysis

论文链接&#xff1a;https://arxiv.org/pdf/1701.04207 看这篇论文终于看懂核函数了。。谢谢作者
阅读更多...
小乌龟运动控制-2 小乌龟走方形

小乌龟运动控制-2 小乌龟走方形

目录 第一章 小乌龟划圆圈 第二章 小乌龟走方形 文章目录 目录一、简陋版-乌龟行走方形二、强化版-乌龟行走方形 一、简陋版-乌龟行走方形 常见的简陋的控制乌龟行走方形的方式很简单&#xff0c;例如下面&#xff0c;可以测试下&#xff1a; 我们需要创建一个名为draw_squa…
阅读更多...
韩顺平Java-第二十六章：正则表达式

韩顺平Java-第二十六章：正则表达式

一 正则表达式入门 1 极速体验正则表达式威力 package com.hspedu.regexp;import java.util.regex.Matcher; import java.util.regex.Pattern;体验正则表达式的威力&#xff0c;给我们文本处理带来哪些便利public class Regexp_ {public static void main(String[] args) {Str…
阅读更多...
每日OJ_牛客_剪花布条（string内置函数）

每日OJ_牛客_剪花布条（string内置函数）

目录 牛客_剪花布条&#xff08;string内置函数&#xff09; 解析代码 牛客_剪花布条&#xff08;string内置函数&#xff09; 剪花布条__牛客网 解析代码 题意就是在S串中&#xff0c;T串整体出现了多少次。C语言可以通过strstr函数找&#xff0c;用STL的string库可以通过f…
阅读更多...
Docker方式部署K8s集群

Docker方式部署K8s集群

1.1 集群创建说明 Kubernetes支持多种容器运行时&#xff0c;包括Containerd、Docker和CRI-O。以下是这三种方式的详细说明&#xff1a; Containerd&#xff1a;Containerd是Kubernetes默认使用的容器运行时。它是一个轻量级的容器运行时&#xff0c;专为Kubernetes设计&#…
阅读更多...
基于Transformer架构的大模型推理硬件加速器设计

基于Transformer架构的大模型推理硬件加速器设计

概述 当前大模型的基础架构正在向 Transformer 结构收敛1&#xff0c;Transformer架构自谷歌2017年提出后比较稳定&#xff0c;因此针对Transformer的计算设计专用的ASIC加速器很有必要。 尤其是“Attention is All you Need”》“Money is All you Need”&#xff0c;哈哈哈…
阅读更多...
559. N 叉树的最大深度（递归法）

559. N 叉树的最大深度（递归法）

目录 一&#xff1a;题目&#xff1a; 二&#xff1a;代码&#xff1a; 三&#xff1a;结果&#xff1a; 一&#xff1a;题目&#xff1a; 给定一个 N 叉树&#xff0c;找到其最大深度。 最大深度是指从根节点到最远叶子节点的最长路径上的节点总数。 N 叉树输入按层序遍历…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023