【前端面试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;
}

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

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

相关文章

苹果macOS 14.4.1正式发布:修复无法使用外接显示器USB集线器问题

3 月 26 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 14.4.1 更新&#xff08;内部版本号&#xff1a;23E224&#xff09;&#xff0c;本次更新距离上次发布隔了 18 天。 需要注意的是&#xff0c;因苹果各区域节点服务器配置缓存问题&#xff0c;可能有些地方探测…

怎么在vscode里面保存图片视频音频文件(只需要两步)?

在硬盘中建立一个新的文件夹(自定义命名~我的这里是html→jpg) 第一步建立文件夹 第二步右键打开然后选择其他方式打开&#xff0c;选择code打开就会自己复制过去了

Memcached分布式内存对象数据库

一 Memcached 概念 Memcached 是一个高性能的分布式内存对象缓存系统&#xff0c;用于动态 Web 应用以减轻数据库负载。它通过在内存中缓存数据和对象来减少读取数据库的次数&#xff0c;从而提高动态、数据库驱动网站的速度。 二 在架构中的位置 Memcached 处于前端或中间件后…

Gitea CORS Access-Control-Allow-Origin 的问题

最近我们在想使用我们提供的代码库进行元数据提供的时候&#xff0c;启动的服务报 CORS 问题。 如果你的 Gitea 服务器是直接暴露给外部使用的话&#xff0c;可以在 Gitea 的配置文件中添加下面的配置&#xff1a; [cors] ENABLED true ALLOW_DOMAIN *在完成上面的…

基于nodejs+vue网购平台管理系统python-flask-django-php

本篇论文对网购平台管理系统的需求分析、功能设计、系统设计进行了较为详尽的阐述&#xff0c;并对系统的整体设计进行了阐述&#xff0c;并对各功能的实现和主要功能进行了说明&#xff0c;并附上了相应的操作界面图。 前端技术&#xff1a;nodejsvueelementui, Express 框架…

Qt 作业 24/3/26

1、实现闹钟 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTime> #include <QLineEdit>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent …

Generating Permutations全排列

Problem generating all permutations of the numbers 1, 2, . . . , n. The first algorithm Idea 1[all the permutations of the numbers 2,3,…,n]&#xff0c; 2[all the permutations of the numbers 1,3,…,n]&#xff0c; ……&#xff0c; n[all the permutations of …

【Mybatis 基础】增删改查(@Insert, @Delete, @Update, @Select)

Mybatis Insert Delete Update Select Mybatis用法基础操作 - 删除delete 传参SpringbootMybatisCrudApplicationTests 测试类删除预编译SQL 基础操作 - 插入Insert 插入SpringbootMybatisCrudApplicationTests 测试类插入对象主键返回 基础操作 - 更新UPDATE 更新SpringbootMy…

k8s系列之十七 Istio中的服务治理

删除前面配置的目的地规则 [rootk8s-master ~]# kubectl delete destinationrule details destinationrule.networking.istio.io "details" deleted [rootk8s-master ~]# kubectl delete destinationrule productpage destinationrule.networking.istio.io "pr…

pdfjs 实现给定pdf数据切片高亮并且跳转

pdfjs 实现给定pdf数据切片高亮并且跳转 pdfjs 类的改写基本展示需求的实现高亮功能的实现查询功能分析切片数据处理 pdfjs 类的改写 需求&#xff1a; pdf文件被解析成多个分段&#xff0c;每个分段需要能够展示&#xff0c;并且通过点击分段实现源pdf内容的高亮以及跳转需求…

视频声音生成字幕 pr生成视频字幕 以及字幕乱码的解决

目录 目录 1、首先把要生成字幕的视频拖入以创建序列 2、点击工具栏的 窗口 选择 文本 3、选择字幕下的 转录序列 4、选择输出的语言&#xff08;主要看视频声音说的是啥语言&#xff09; 5、音轨 选择 音频1​编辑 6、点击转录 7、等待转录文本 8、点击创建说明性字幕按…

论文阅读笔记——Rethinking Pointer Reasoning in Symbolic Execution

文章目录 前言Rethinking Pointer Reasoning in Symbolic Execution12.1、基本情况概述12.2、摘要12.3、引言12.4、方法12.4.1、基本版本12.4.1.1、内存加载和存储12.4.1.2、状态合并 12.4.2、改进12.4.2.1、地址范围选择12.4.2.2、内存清理12.4.2.3、符号化的未初始化内存12.4…

卷起来——高级数据分析师

要成为一名高级数据分析师&#xff0c;需要掌握一系列的技能&#xff0c;包括数据处理、统计分析、机器学习、数据可视化以及业务理解等&#xff0c;喜欢或者想往这方面发展的童鞋们&#xff0c;卷起来&#xff0c;点击以下链接中的链接&#xff0c;备注"分析"进群交…

Clip Converter - 视频在线下载方法

Clip Converter - 视频在线下载方法 1. Video URL to Download2. Continue3. StartReferences YT to MP4 & MP3 Converter! https://www.clipconverter.cc/ Clip Converter is a free online media conversion application, which allows you to reocord, convert and do…

YOLOv8改进 | 主干篇 | 修复官方去除掉PP-HGNetV2的通道缩放功能(轻量又涨点,全网独家整理)

一、本文介绍 本文给大家带来的改进机制是大家在跑RT-DETR提供的HGNetV2时的一个通道缩放功能&#xff08;官方在前几个版本去除掉的一个功能&#xff09;&#xff0c;其中HGNetV2当我们将其集成在YOLOv8n的模型上作为特征提取主干的时候参数量仅为230W 计算量为6.7GFLOPs该网…

无人直播(视频推流)

环境搭建 我这里采用的是ffmpeg来进行推流直播 yum -y install wgetwget --no-check-certificate https://www.johnvansickle.com/ffmpeg/old-releases/ffmpeg-4.0.3-64bit-static.tar.xztar -xJf ffmpeg-4.0.3-64bit-static.tar.xzcd ffmpeg-4.0.3-64bit-staticmv ffmpeg /u…

kubernetes-networkpolicies网络策略问题

kubernetes-networkpolicies网络策略问题 问题描述 重点重点重点&#xff0c;查看我的博客CKA考题&#xff0c;里面能找到解决方法 1.部署prometheus监控的时候&#xff0c;都部署成功&#xff0c;但是web访问503-504超时 2.添加ingress的时候也是访问不到&#xff0c;其他命…

寻找最大值最小值

Problem Finding both the minimum and maximum in an array of integers A[1..n] and assume for simplicity that n is a power of 2 A straightforward algorithm 1. x←A[1]; y←A[1] 2. for i←2 to n 3. if A[i] < x then x←A[i] 4. if A[i] > y then y←A[i…

gin语言基础学习--会话控制(下)

练习 模拟实现权限验证中间件 有2个路由&#xff0c;/cookie和/home/cookie用于设置cookiehome是访问查看信息的请求在请求home之前&#xff0c;先跑中间件代码&#xff0c;检验是否存在cookie 访问home&#xff0c;会显示错误&#xff0c;因为权限校验未通过 package mainim…

centos创建svn库步骤

1.切换root用户 1、设置root用户的密码&#xff1a; sudo passwd root 2、切换到root用户权限 su 3、切换回个人用户权限 exit 2.用root用户执行yum install -y subversion 3.创建文件夹mkdir -p /data/svn/repository 4.创建SVN 版本库 5.输入命令&#xff1a; svnadmin creat…