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

news2024/11/18 1:48:04

一、对插槽的理解

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;
}

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

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

相关文章

图书推荐|Django+Vue.js商城项目实战

一线资深架构师 凝聚近十年大型系统开发经验 倾力打造 双色印刷 适合&#xff1a;项目演练求职应聘技术提升 全新&#xff1a;Django 4.x与Vue.js 3.x全栈技术 易学&#xff1a;娓娓道来图示指引原理剖析步骤解说代码详注 真实企业级项目技术细节完整揭秘&#xff0c;照着做就…

SEO 的未来:GPT 和 AI 如何改变关键词研究

谷歌Gemini与百度文心一言&#xff1a;AI训练数据的较量 介绍 想象一下&#xff0c;有一个工具不仅可以理解错综复杂的关键字网络&#xff0c;还可以预测搜索引擎查询的变化趋势。 这就是生成式预训练 Transformer (GPT) 和其他人工智能技术发挥作用的地方&#xff0c;以我们从…

Android studio汉化(2023最新版)

1.打开Android studio,找上面一栏中的Help,然后点击最下方的about 点击About 2.查看自己的版本 3. 点击进入网站&#xff0c;选择自己的版本并下载Versions: Chinese (Simplified) Language Pack / 中文语言包 - IntelliJ IDEs Plugin | Marketplace (jetbrains.com) 点击Get 4…

【LVGL-Flex布局和Grid布局】

LVGL-Flex布局和Grid布局 ■ Flex 布局■ 主轴 : 是定义对象的放置方向的■ 演示一&#xff1a;LV_FLEX_FLOW_ROW■ 演示二&#xff1a;LV_FLEX_FLOW_ROW_WRAP■ 演示三&#xff1a;LV_FLEX_FLOW_ROW_REVERSE■ 演示四&#xff1a;LV_FLEX_FLOW_ROW_WRAP_REVERSW■ 演示五&…

RK3568笔记二十一:YOLOv8 实例分割部署

若该文为原创文章&#xff0c;转载请注明原文出处。 参考rknn_model_zoo部署YOLOv8 实例分割. 一、环境 1、测试训练环境&#xff1a;AutoDL. 2、平台&#xff1a;rk3568 3、开发板: ATK-RK3568正点原子板子 4、环境&#xff1a;buildroot 5、虚拟机&#xff1a;正点原子…

如何避免SQL注入攻击?

&#x1f413;序言 当涉及到数据库操作时&#xff0c;防止SQL注入攻击至关重要。SQL注入是一种常见的网络安全威胁&#xff0c;攻击者通过在用户输入中插入恶意的SQL代码&#xff0c;从而可以执行未经授权的数据库操作。 &#x1f413;避免方式 使用参数化查询 使用参数化查询…

PostgreSQL技术大讲堂 - 第48讲:PG高可用实现keepalived

PostgreSQL从小白到专家&#xff0c;是从入门逐渐能力提升的一个系列教程&#xff0c;内容包括对PG基础的认知、包括安装使用、包括角色权限、包括维护管理、、等内容&#xff0c;希望对热爱PG、学习PG的同学们有帮助&#xff0c;欢迎持续关注CUUG PG技术大讲堂。 第48讲&#…

JVM本地方法

本地方法接口 NAtive Method就是一个java调用非java代码的接口 本地方法栈&#xff08;Native Method Statck&#xff09; Java虚拟机栈用于管理Java方法的调用&#xff0c;而本地方法栈用于管理本地方法的调用。 本地方法栈&#xff0c;也是线程私有的。 允许被实现成固定或…

java 面向对象入门

类的创建 右键点击对应的包&#xff0c;点击新建选择java类 填写名称一般是名词&#xff0c;要知道大概是什么的名称&#xff0c;首字母一般大写 下面是创建了一个Goods类&#xff0c;里面的成员变量有&#xff1a;1.编号&#xff08;id&#xff09;&#xff0c;2.名称&#x…

华为汽车图谱

极狐 极狐&#xff08;ARCFOX&#xff09;是由北汽、华为、戴姆勒、麦格纳等联合打造。总部位于北京蓝谷。 问界 华为与赛力斯&#xff08;东风小康&#xff09;合作的成果。 阿维塔 阿维塔&#xff08;AVATR&#xff09;是由长安汽车、华为、宁德时代三方联合打造。公司总部位…

Docker Stack(堆栈) 部署多服务集群,多服务编排

1、Docker Stack简介 Docker Stack(堆栈) 是在 Swarm 上管理服务堆栈的工具。而在以前文章docker swarm集群搭建 介绍的 Docker Swarm 只能实现对单个服务的简单部署&#xff0c;于是就引出了Docker Stack。 上面我们介绍到 docker-compose&#xff1a;可以在一台机器上使用…

操作系统高级议题:并发控制与进程互斥技术

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

【Python】学习率调整策略详解和示例

学习率调整得当将有助于算法快速收敛和获取全局最优&#xff0c;以获得更好的性能。本文对学习率调度器进行示例介绍。 学习率调整的意义基础示例无学习率调整方法学习率调整方法一多因子调度器余弦调度器 结论 学习率调整的意义 首先&#xff0c;学习率的大小很重要。如果它…

软件测试技术之登录页面测试用例的设计方法

相信大家都有过写登录测试用例的经验&#xff0c;相较于开发人员编写代码而言&#xff0c;测试人员编写用例同样重要。本文作者总结了一些关于登录用例的经验。 一、功能测试用例设计&#xff1a; 1、正常登录场景 测试用例1&#xff1a;输入正确的用户名和密码&#xff0c;验证…

对于提高Web安全,WAF能有什么作用

数字化时代&#xff0c;网络安全已经成为了一个不可忽视的重要议题。网络攻击事件频发&#xff0c;各种安全隐患层出不穷&#xff0c;如何有效地保护我们的网络空间&#xff0c;确保信息安全&#xff0c;已成为一项迫切的任务。而Web应用防火墙&#xff0c;正是守护网络安全的一…

GitHub学生认证

文件、证明之类的一定要用英文。 我先是用有道网页翻译把学信网的报告翻译成了英文&#xff0c;然后截图传上去&#xff0c; 给我这个答复 所以要先2FA认证、支付信息填好。 2FA认证&#xff1a;Github开启2FA双重验证 - 知乎 (zhihu.com) 支付信息&#xff1a;点击Setting…

找茬游戏小程序源码系统:封面广告+插屏广告 自带流量主低成本 带完整的安装代码包以及搭建教程

近年来&#xff0c;小程序市场持续火爆&#xff0c;各类小程序层出不穷。找茬游戏小程序作为其中的一种&#xff0c;以其独特的游戏形式和良好的用户体验&#xff0c;吸引了大量用户。然而&#xff0c;对于许多开发者和商家来说&#xff0c;开发一款高质量的找茬游戏小程序并非…

无人车+工厂车间集成无缝,这款网关产品了解一下

​诸位朋友们,大家好!今天给大家介绍一款引领工业无人化发展的黑科技 —— 星创易联科技的SV900-5G车载网关。 相信大家对无人驾驶技术都很感兴趣,它代表着未来出行和生产的全新方式。而要实现真正的"无人化",离不开无人车网关这个智能大脑的作用。SV900就是一款专为…

Openlayers 入门教程(一):应该如何学习 Openlayers

还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#xff0c;webgl&#xff0c;ech…

联机分析处理技术

目录 一、OLAP概述&#xff08;一&#xff09;OLAP的定义&#xff08;二&#xff09;OLAP的12条准则&#xff08;三&#xff09;OLAP的简要准则&#xff08;四&#xff09;OLAP系统的基本结构 二、OLAP的多维分析操作&#xff08;一&#xff09;切片&#xff08;二&#xff09;…