【前端面试3+1】02插槽、箭头函数与普通函数、重绘重排、【回文数】

一、对插槽的理解

1.定义及作用:

插槽是一种用于在组件中插入内容的特殊语法。它的作用是让父组件可以向子组件传递内容,从而实现组件的灵活性和复用性。

2.分类:

插槽可以分为具名插槽作用域插槽。

2.1具名插槽:

        具名插槽允许父组件在子组件中定义多个插槽位置,并可以根据插槽的名称来传递内容。这样可以更灵活地控制子组件内部的布局和内容展示。

例如:

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot name="content"></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>
2.2作用域插槽:

        作用域插槽允许子组件接收父组件传递的数据,并在插槽内容中使用这些数据。这样可以实现更高级的组件封装和逻辑处理。

例如:

<template>
  <div>
    <slot :data="data"></slot>
  </div>
</template>

3.优点:

简短版:通过使用插槽,我们可以更好地实现组件之间的数据传递和内容复用,提高了组件的灵活性和可维护性。

(1)灵活性:插槽允许父组件动态地向子组件传递内容,使得子组件的展示和布局更加灵活多变。

(2)复用性:通过插槽,可以将通用的内容封装在组件中,实现内容的复用,减少重复编码。

(3)组件化:插槽有助于将页面拆分成更小的组件,提高代码的可读性和可维护性。

(4)数据传递:作用域插槽可以帮助子组件接收父组件传递的数据,实现数据的传递和共享。

(5)定制化:具名插槽可以让父组件根据需要在子组件中插入不同的内容,实现更高度的定制化。

(6)逻辑处理:作用域插槽可以在插槽内容中处理逻辑,使得组件更具有交互性和功能性。

4.缺点:

(1)维护困难:当插槽嵌套层级较深或使用不当时,可能会导致代码结构混乱,增加维护的难度。

(2)性能影响:过度使用插槽可能会导致组件的渲染性能下降,特别是在大型应用中频繁使用插槽可能会影响页面性能。

(3)作用域问题:在作用域插槽中,父组件传递的数据可能会受到作用域的限制,导致数据传递和处理不够灵活。

二、箭头函数与普通函数的区别?

区别:

1. 语法:

  • 箭头函数使用箭头符号 => 来定义函数,语法更加简洁。
  • 普通函数使用关键字 function 来定义函数

2.this的指向:

  • 箭头函数没有自己的 this,它会捕获所在上下文的 this 值。这意味着在箭头函数中使用 this 时,它指向的是定义时所在的对象,而不是运行时所在的对象
  • 普通函数的 this 指向调用它的对象

3.arguments对象:

  • 箭头函数没有自己的 arguments 对象,可以使用 rest 参数 ...args 来获取传入的参数。
  • 普通函数有自己的 arguments 对象,可以直接使用。

4.构造函数:

  • 箭头函数不能用作构造函数不能使用 new 关键字来实例化对象。
  • 普通函数可以用作构造函数,可以通过 new 关键字来实例化对象。

5.绑定:

  • 箭头函数不绑定 argumentssuperthis 和 new.target,这些值在箭头函数内部会从外部函数中继承。
  • 普通函数有自己的 argumentssuperthis 和 new.target

        箭头函数更适合在简单的回调函数或者需要保持上下文一致的情况下使用,而普通函数则更适合需要使用 thisargumentsnew 等功能的场景。根据具体的需求和场景选择合适的函数类型。

三、重绘重排

1.重绘:

定义:重绘是指当元素样式发生改变,但不影响其在文档流中的位置和大小时,浏览器会重新绘制这个元素的过程。

  • 重绘不会影响页面的布局,只是重新绘制元素的外观,比如改变颜色、背景等样式属性。
  • 重绘的代价相对较小,性能消耗较低。
  • 修改背景颜色、字体颜色、边框颜色等样式属性会引起重绘。(什么时候引起?)

2.重排:

定义:重排是指当页面布局发生改变,导致元素的位置、大小或者结构发生变化时,浏览器需要重新计算元素的几何属性,然后重新布局页面的过程。

  • 重排会影响到整个页面的布局,可能会触发其他元素的重绘和重排,性能消耗较大。
  • 常见触发重排的操作包括改变元素的尺寸、位置、添加或删除元素等。(什么时候引起?)

3.优化策略:

(1)使用 CSS3 的动画代替 JavaScript 操作样式属性。

(2)使用 transform 和 opacity 属性来优化动画效果。

(3)避免频繁操作 DOM,尽量一次性修改多个样式。

(4)使用文档片段(Document Fragment)来减少 DOM 操作的重排次数。

四、【算法】回文数 

解法一:

首先,如果输入的整数为负数,或者以0结尾且不为0,则直接返回false,因为这种情况下不可能是回文数。 

然后,通过一个循环将输入的整数的数字逆序排列得到一个新的整数。在循环中,每次取出输入整数的个位数字,然后将输入整数除以10向下取整得到新的整数。

 最后,判断逆序排列后的整数是否与原输入整数相等,如果相等则返回true,否则返回false。

bool isPalindrome(int x) {
    if(x < 0 || (x % 10 == 0) && x != 0)
        return false;

    int n, temp = 0;
    while(x > temp){
        n = x % 10;
        x = x / 10;
        temp = temp * 10 + n;
    }

    if(temp == x || (temp/=10) == x)
        return true;

    return false;
}

解法二:

思路差不多,先判断输入是否为负,在定义两个long型的变量(是int型的话可能会出现整型溢出)一个等于x,一个设为0用来接收已转之后的数据,在判断二者是否相等。

bool isPalindrome(int x) {
       if(x<0){
        return false;
    }
    long original=x;
    long reversed=0;
    while(x>0){
        reversed=reversed*10+x%10;
        x/=10;
    }
    return original==reversed;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RuoYi-Vue-Plus(sa-token)

一、介绍 官网&#xff1a; Sa-Tokenhttps://sa-token.cc/index.html 特性&#xff1a; 登录与权限认证&#xff1a;支持用户登录和细粒度权限认证。会话管理&#xff1a;提供会话创建、维护和销毁功能。单点登录&#xff1a;支持单点登录&#xff0c;简化多应用登录流程。OAu…

基于el-table实现行内增删改

实现效果&#xff1a; 核心代码&#xff1a; <el-table :data"items"style"width: 100%;margin-top: 16px"border:key"randomKey"><el-table-column label"计划名称"property"name"><template slot-scope&q…

雪里温柔,水边明秀,不及Java 抽象类 和 Object类

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

Linux环境基础开发工具使用——yum and vim

本篇将会介绍平时在Linux中开发常用到的一些工具&#xff0c;其中包括&#xff1a;软件包管理器 — yum&#xff0c;Liunx中的开发工具。具体的介绍了 yum 的相关操作以及 yum 源&#xff0c;同时还介绍了 windows与虚拟机如何进行的关联。然后对Liunx中的开发工具进行了详细的…

集合(下)Map集合的使用

文章目录 前言一、Map接口二、Map接口的实现类 1.HashMap类2.TreeMap类总结 前言 Map集合没有继承Collection接口&#xff0c;不能像List集合和Set集合那样直接使用Collection接口的方法。Map集合其自身通过以key到value的映射关系实现的集合&#xff0c;也有相应的许多方法。类…

超详细SpringMVC源码剖析

整体流程图 1.自定义视图(63~66) 视图解析过程 1.先到DispatcherServlet中央控制器, 根据视图解析的 优先级 执行对应的 视图解析器 Nullable protected View resolveViewName(String viewName, Nullable Map<String, Object> model,Locale locale, HttpServletReque…

【C语言】【Leetcode】70. 爬楼梯

文章目录 题目思路&#xff1a;简单递归 > 动态规划 题目 链接: link 思路&#xff1a;简单递归 > 动态规划 这题类似于斐波那契数列的算法&#xff0c;结果其实就是到达前一步和到达前两步的方法之和&#xff0c;一直递归到n1和n2时就行了&#xff0c;但是这种算法有个…

Fiddler抓包工具之fiddler的常用快捷键

一、常用三个快捷键 ctrlX :清空所有记录 CtrlF&#xff1a;查找 F12&#xff1a;启动或者停止抓包 使用 QuickExec Fiddler2 成了网页调试必备的工具&#xff0c;抓包看数据。Fiddler2自带命令行控制。 fiddler 命令行快捷键&#xff1a;ctrl q &#xff0c;然后 输入 help…

linux C:变量、运算符

linux C 文章目录 变量运算符 一、变量 [存储类型] 数据类型 标识符 值 标识符&#xff1a;由数字、字母、下划线组成的序列&#xff0c;不能以数字开头。 数据类型&#xff1a;基本数据类型构造类型 存储类型&#xff1a;auto static…

碳课堂|什么是碳资产?企业如何进行碳资产管理?

碳资产是绿色资产的重要类别&#xff0c;在全球气候变化日益严峻的背景下备受关注。在“双碳”目标下&#xff0c;碳资产管理是企业层面实现碳减排目标和低碳转型的关键。 一、什么是碳资产&#xff1f; 碳资产是以碳减排为基础的资产&#xff0c;是企业为了积极应对气候变化&…

idea中Git项目遇到“Filename too long”错误 与 配置Git的ssh证书

一&#xff1a;“Filename too long”问题解决办法 错误信息&#xff1a; fatal: cannot create directory at xxxx: Filename too long warning: Clone succeeded, but checkout failed. You can inspect what was checked out with git status and retry with git restore …

java算法第32天 | 贪心算法 part02 ● 122.买卖股票的最佳时机II ● 55. 跳跃游戏 ● 45.跳跃游戏II

122.买卖股票的最佳时机II 本题中理解利润拆分是关键点&#xff01; 不要整块的去看&#xff0c;而是把整体利润拆为每天的利润。假如第 0 天买入&#xff0c;第 3 天卖出&#xff0c;那么利润为&#xff1a;prices[3] - prices[0]。 相当于(prices[3] - prices[2]) (prices[…

[医学分割大模型系列] (3) SAM-Med3D 分割大模型详解

[医学分割大模型系列] -3- SAM-Med3D 分割大模型解析 1. 特点2. 背景3. 训练数据集3.1 数据集收集3.2 数据清洗3.3 模型微调数据集 4. 模型结构4.1 3D Image Encoder4.2 3D Prompt Encoder4.3 3D mask Decoder4.4 模型权重 5. 评估5.1 评估数据集5.2 Quantitative Evaluation5.…

李宏毅【生成式AI导论 2024】第1讲:生成式AI是什么?

什么是人工智能? 人工智慧可以说是一个目标,是一个我们想要达到的目标。它不是一个单一的技术,并没有哪一个技术叫做人工智慧,人工智慧是一个目标。 什么是生成式人工智能? 生成式人工智慧是要机器产生复杂而有结构的物件。比如说文章,文章也有一连串的文字所构成的。比…

[蓝桥杯 2023 省 A] 颜色平衡树:从零开始理解树上莫队 一颗颜色平衡树引发的惨案

十四是一名生物工程的学生&#xff0c;他已经7年没碰过信息学竞赛了&#xff0c;有一天他走在蓝桥上看见了一颗漂亮的颜色平衡树&#xff1a; ​​​​​​​[蓝桥杯 2023 省 A] 颜色平衡树 - 洛谷 十四想用暴力解决问题&#xff0c;他想枚举每个节点&#xff0c;每个节点代表…

死锁-写一个死锁的例子

死锁-写一个死锁的例子 什么是死锁死锁产生的条件如何避免死锁死锁预防死锁避免死锁检测死锁解除鸵鸟策略 手写一个死锁的例子 https://blog.51cto.com/u_16213642/8352155 什么是死锁 在两个或者多个并发进程中&#xff0c;如果每个进程持有某种资源而又等待其它进程释放它或…

代码随想录算法训练营第三十五天|860. 柠檬水找零,406. 根据身高重建队列,452. 用最少数量的箭引爆气球

860. 柠檬水找零 题目 在柠檬水摊上&#xff0c;每一杯柠檬水的售价为 5 美元。顾客排队购买你的产品&#xff0c;&#xff08;按账单 bills 支付的顺序&#xff09;一次购买一杯。 每位顾客只买一杯柠檬水&#xff0c;然后向你付 5 美元、10 美元或 20 美元。你必须给每个顾…

C语言例4-8:格式字符c的使用例子

代码如下&#xff1a; //格式字符c的使用例子 #include<stdio.h> int main(void) {char c A;int i 65;printf("c%c,%5c,%d\n",c,c,c);printf("i%d,%c\n",i,i);return 0; } 结果如下&#xff1a;

22.WEB渗透测试-BurpSuite(一)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;21.WEB渗透测试-HTTP协议&#xff08;下&#xff09;-CSDN博客 工具的使用需要先搭建靶场…

水牛社:宝妈副业,不仅赚钱更成长:一段充实之旅

大家好&#xff01;作为一名90后的全职宝妈&#xff0c;今天非常荣幸能够与大家分享我的互联网赚钱经验。趁着宝宝午睡的宝贵时光&#xff0c;我抓紧写下了这篇文章&#xff0c;虽时间紧凑&#xff0c;但我会力求内容清晰明了。 大约从2022年4月开始&#xff0c;我踏上了互联网…