前端面试笔试（三）

目录

一、数据结构算法等综合篇

二、代码输出篇

1.yield与生成器函数

2.this指向有关

3.instanceof 与Array.isArray

4.继承class cls extends Array，调用里面的sum方法

三、css、html、JavaScript篇

1.哪项不能提高dom元素操作效率？

2.contenteditable

基本功能：

使用场景：

注意：

示例：

3.关于promise的then、catch、resolve、reject

逐项解析：

一、数据结构算法等综合篇

无

二、代码输出篇


1.yield与生成器函数

  function* func(){yield 117;yield 935;return 130;}const res=func();for(let item of res){console.log(item);}

输出结果为：

这段代码定义了一个生成器函数 func，并通过 for...of 循环遍历了该生成器函数返回的迭代器 res。

  • function* func(){...} 定义了一个名为 func 的生成器函数。生成器函数是一种特殊的函数，可以暂停执行并在之后重新恢复执行，通过 yield 关键字实现。
  • yield 117;：当生成器函数被调用并迭代时，它会在这里暂停，并返回 117 给迭代器。
  • yield 935;：在下一次迭代时，函数会从这里继续执行，并返回 935。
  • return 130;：当生成器函数完成迭代（即没有更多的 yield 表达式可供迭代），它可以通过 return 语句返回一个值。这个值可以通过调用迭代器的 return() 方法获取，但在这个例子中并没有这样做。
  • const res = func();：调用生成器函数 func，并将返回的迭代器赋值给变量 res。
  • for(let item of res){...}：使用 for...of 循环遍历迭代器 res。每次迭代，迭代器会执行生成器函数的下一个 yield 表达式，直到没有更多的 yield 表达式。
  • console.log(item);：在循环体内，打印出每次迭代得到的值。

如果要获取这个返回的130，需要：

console.log(res.return().value)

2.this指向有关

  function test(){this.flag=false;this.change=()=>{this.flag=true;console.log(button.flag);};}const button=new test()document.addEventListener("click",button.change)

点击了浏览器后输出为true

  • 首先button是通过new test()的方式来得到的，new返回的对象，this指向对象本身。所以此时button.flag = false;
  • button.change 是一个箭头函数而不是普通的函数，所以他的this要取所在词法作用域的this，因为在test函数中，所以change的this就是test的this
  • 我觉得 作用域可以分为函数作用域和全局作用域（虽然还有块级作用域，但是在这可以不考虑）
  • 当点击document的时候触发函数执行。因为change的this是test的this也就是button，所以这里将button的flag改为了true。所以最后打印的就是true
  • 如果这里的函数并不是箭头函数，而是普通的函数，那么这里的this就会变成document。此时打印document.flag 得到的就是true;(谁调用this指向谁),而程序的输出结果就会变成false

3.instanceof 与Array.isArray

  var iframe=document.createElement('iframe');document.documentElement.appendChild(iframe);iframe.src="javascript:var a=[];"var a,b;setTimeout(()=>{a=iframe.contentWindow.a;b=[];console.log(a instanceof Array,b instanceof Array);console.log(Array.isArray(a),Array.isArray(b));})

输出为：

false true

true true

上面代码创建了一个 iframe 元素，并将其附加到了文档的根元素（通常是 html 元素）上。然后，您尝试通过设置 iframe.src 为一个 javascript: URL 来在 iframe 中执行一些 JavaScript 代码。

在 iframe 中声明的变量 a 是局部的，它不会影响到外部页面的变量作用域。

  • iframe.contentWindow.a 即使是一个数组（在假设的情况下），它也是一个不同上下文（即 iframe 的全局作用域）中的数组实例，因此 a instanceof Array 在外部上下文中会返回 false。
  • b 是在外部上下文中声明的数组，所以 b instanceof Array 会返回 true。
  • Array.isArray() 方法不受上下文限制，它会正确地识别任何数组，因此 Array.isArray(a) 和 Array.isArray(b) 都会返回 true（再次强调，这是在假设 iframe.contentWindow.a 实际上是一个数组的情况下）。

4.继承class cls extends Array，调用里面的sum方法

  class cls extends Array{sum(){return this.reduce(function reducer(acc,curr){return acc+curr;},0);}}const x=new cls(3);const y=new Array(3);const z=cls.of(3);console.log(x.length,y.length,z.length);//3 3 1console.log(x.sum())//0console.log(y.sum)//undefinedconsole.log(z.sum())//3

  1. x 是使用 new cls(3) 创建的实例。这里需要注意的是，当向 Array 或其子类构造函数传递一个单独的数字参数时，它会创建一个具有该长度（但元素未定义）的数组。因此，x 是一个长度为 3 的数组，但其所有元素都是 undefined。

  2. y 是使用 new Array(3) 创建的普通数组实例，与 x 类似，它也是一个长度为 3、元素未定义的数组。

  3. z 是使用 cls.of(3) 创建的实例。Array.of 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。因此，z 是一个包含一个元素（数字 3）的数组。

由于 x 是一个长度为 3 的数组，但其所有元素都是 undefined，undefined 在数学运算中被视为 NaN（Not-a-Number）。当使用 reduce 方法对包含 NaN 的数组进行求和时，结果也将是 NaN。但是，由于 NaN + 0 在这个特定的上下文中（即初始累加器值为 0，且数组元素为 undefined）实际上会导致累加器保持为 0（因为 undefined 转换为数字时是 NaN，但 NaN 在加法中的行为是特殊的，它不会改变一个有效的数字值），所以最终结果是 0。

y 是一个普通的 Array 实例，它并没有 sum 方法。因此，输出是 undefined

z 是一个包含单个元素 3 的数组。调用 z.sum() 会使用 reduce 方法计算数组中元素的和，因此结果是 3。

三、css、html、JavaScript篇

1.哪项不能提高dom元素操作效率？


A.用DocumentFragment替代多次appendChild操作

B.插入大量DOM元素时用innerHTML替代逐个构建元素

C.处理列表子元素点击事件时，使用事件代理

D.使用addEventListener替代onxxx（如onClick）进行事件绑定

逐项解析：

A。使用 DocumentFragment 可以在内存中构建一个文档片段，然后将这个片段一次性添加到 DOM 树中。这样做的好处是减少了多次的 DOM 重绘和重排，因此可以显著提高性能。

B。使用 innerHTML 可以一次性地设置元素的内部 HTML 内容，这通常比逐个创建和添加 DOM 元素要快得多，因为浏览器在内部进行了优化。

C。事件代理是一种技术，它允许你将事件监听器添加到父元素上，而不是每个子元素上。通过检查事件的目标元素，可以确定哪个子元素触发了事件。这样可以减少事件监听器的数量，从而提高性能。

D。

  • addEventListener 提供了更灵活的事件处理机制，允许你为同一个元素添加多个事件监听器而不会覆盖之前的监听器。此外，它支持更细粒度的事件控制（如捕获和冒泡阶段）。
  • 然而，就单次事件绑定操作的性能而言，addEventListener 和 onxxx（如 onClick）之间的性能差异通常很小，并且不一定直接导致DOM操作的整体效率提升。这个选项主要是关于事件管理的灵活性和兼容性，而不是直接提升DOM操作的效率。

2.contenteditable

contenteditable 是 HTML5 中的一个全局属性，它允许用户编辑元素中的内容。

基本功能：

  • contenteditable 属性可以被添加到 HTML 元素中，如 div、table、p、span、body 等，使这些元素变得可编辑。
  • 当 contenteditable 属性被设置为 true 时，该元素就可以被用户编辑。
  • 当 contenteditable 属性被设置为 false 时，该元素不能被用户编辑，这是该属性的默认值（当属性值缺失时，效果与设置为 false 相同）。
  • contenteditable 属性还可以被设置为 inherit，此时该元素会继承其父元素的 contenteditable 状态。

使用场景：

  • 编辑器功能：contenteditable 属性最常用的场景是在网页上创建一个可编辑的文本区域，使用户能够直接在网页上输入和编辑文本内容，类似于常见的文本编辑器功能。
  • 富文本编辑：contenteditable 属性还可以用于创建富文本编辑器，允许用户在文本中添加格式、图片、链接等样式和元素。
  • 评论功能：网站或应用的评论框通常会使用 contenteditable 属性，使用户能够直接在评论框中输入评论内容，并实时提交到服务器。
  • 笔记应用：contenteditable 属性也适用于笔记应用或在线日记，用户可以直接在网页上输入和保存个人的笔记或日记内容。
  • 在线表单：有些情况下，内容需要在表单中进行编辑，此时 contenteditable 属性可以用于在表单中添加富文本内容，如说明文字或公告等。

注意：

  • 设置了 contenteditable 属性的元素必须是可以获得鼠标焦点的元素，并且在点击鼠标后要向用户提供一个插入符号，提示可编辑。
  • 在使用 contenteditable 属性时，需要注意如何保存用户编辑的内容。通常可以通过监听失焦事件（如 blur 事件）来获取并保存用户编辑后的内容。

示例：

<!DOCTYPE html>
<html>
<body>
<p contenteditable="true">这是一个可以编辑的段落。</p>
</body>
</html>

在这个示例中，<p> 元素被添加了 contenteditable="true" 属性，因此它变得可编辑。用户可以直接在网页上修改这个段落的内容。

3.关于promise的then、catch、resolve、reject

下面关于Promise说法错误的是：

A.调用then或catch方法都是异步进行的，但是执行速度比较快

B.Promise.resolve(value)，Promise.reject(reason)是Promise构造器上直接提供的一组静态方法

C.resolve()和reject()都是直接生成一个进入响应状态的promise对象，其参数就是进入相应状态时传递过去的参数，可以在完成回调的参数中得到

D.Promise构造器的prototype上还有两个方法，分别是then和catch，这两个方法的参数也是回调函数，这些函数会在Promise实例进入不同状态后被调用

逐项解析：

先说错误的C，resolve() 和 reject() 并不是直接生成Promise对象的函数，而是Promise构造函数执行时传递给executor（执行器）函数的两个参数。这两个参数是函数，用于在异步操作成功或失败时分别改变Promise的状态，并传递相应的结果值或原因。

异步操作成功时，调用resolve函数，使Promise对象的状态变为fulfilled（已完成），将结果值传递给后续通过then方法注册的回调函数。

异步操作失败时，调用reject函数，使Promise对象的状态变为rejected（已拒绝），将失败原因传递给后续通过catch方法或then方法的第二个回调函数注册的错误处理函数。

因此：resolve()和reject()并不是直接生成Promise对象的函数，而是用于改变Promise对象状态的函数，它们是Promise构造器上直接提供的一组静态方法。

A：then和catch方法都是异步微任务，会在当前栈清空后立即执行，但是执行速度相对较快，因为它们只是将回调函数添加到Promise的回调队列中，等待Promise状态改变时执行。

B：见C项解析

D：Promise构造器的prototype上的then和catch方法用于注册回调函数，会在Promise实例进入不同状态（fulfilled或rejected）后被调用。then接收两个回调函数作为参数，第一个用于处理fulfilled状态，第二个（可选的）用于处理rejected状态。catch接收一个回调函数作为参数，用于处理reject状态。

加油加油^_^

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

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

相关文章

7.高可用集群架构Keepalived双主热备原理

7.高可用集群架构Keepalived双主热备原理

一. 高可用集群架构Keepalived双主热备原理 （1）主机+备机keepalived配置(192.168.1.171) ! Configuration File for keepalivedglobal_defs {# 路由id:当前安装keepalived节点主机的标识符，全局唯一router_id keep_101 } #计算机节点(主机配置) vrrp_instance VI_1 {</
阅读更多...
IntelliJ IDEA 2023.2x——图文配置

IntelliJ IDEA 2023.2x——图文配置

IntelliJ IDEA 2023.2——配置说明 界面如下图所示 : 绿泡泡查找 “码猿趣事” 查找【idea99】 IntelliJ IDEA 的官方下载地址 IntelliJ IDEA 官网下载地址 一路上NEXT 到结尾&#xff1a; 继续NEXT 下一步:
阅读更多...
Linux网络：守护进程

Linux网络：守护进程

Linux网络&#xff1a;守护进程 会话进程组会话终端 守护进程setsiddaemon 在创建一个网络服务后&#xff0c;往往这个服务进程是一直运行的。但是对于大部分进程来说&#xff0c;如果退出终端&#xff0c;这个终端上创建的所有进程都会退出&#xff0c;这就导致进程的生命周期…
阅读更多...
Linux Android 正点原子RK3568替换开机Logo完整教程

Linux Android 正点原子RK3568替换开机Logo完整教程

0.这CSDN是有BUG吗？大家注意：表示路径的2个点号全都变成3个点号啦！ 接下来的后文中，应该是2个点都被CSDN变成了3个点： 1.将这两个 bmp 图片文件720x1280_8bit拷贝到内核源码目录下，替换内核源码中默认的 logo 图片。注意：此时还缺少电量显示图片 2.编译内核 make d…
阅读更多...
安卓开发作业

安卓开发作业

整体效果: 安卓小作业 [TOC](页面配置) 整体框架有4个fragment页面,聊天,朋友,发现,设置. 配置如下: bash <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android" xm…
阅读更多...
2024-ISCTF WP

2024-ISCTF WP

Web 25时晓山瑞希生日会 经典 HTTP 头伪造&#xff0c;伪造流程如下&#xff1a; User-Agent: Project Sekai //伪造UA头 X-Forwarded-For:127.0.0.1 //伪造本地用户 伪造日期是本题最大的坑点&#xff0c;一直在想怎么伪造 25 时&#xff0c;没想到是二刺螈 搜索得知 …
阅读更多...
VSCode+ESP-IDF开发ESP32-S3-DevKitC-1（1）开发环境搭建

VSCode+ESP-IDF开发ESP32-S3-DevKitC-1（1）开发环境搭建

VSCodeESP-IDF开发ESP32-S3-DevKitC-1&#xff08;1&#xff09;开发环境搭建 1.开发环境搭建&#xff08;安装ESP-IDF&#xff09;2.开发环境搭建&#xff08;安装VS Code&#xff09;3.开发环境搭建&#xff08;VSCode中安装ESP-IDF插件及配置&#xff09; 1.开发环境搭建&am…
阅读更多...
二维数组操作

二维数组操作

代码结构 main.c #include <stdio.h> #include <stdlib.h>#define LEN 100int main() {//通过指针引用多维数组# if 1//定义多维数组int a[3][5] {{1,2,3,4}, {5,6,7,8}, {9,10,11,12}};int row sizeof(a) /sizeof(a[0]);int colum sizeof(a[0]) / sizeof(a[0…
阅读更多...
使用Service Worker实现离线优先的Web应用

使用Service Worker实现离线优先的Web应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Service Worker实现离线优先的Web应用 使用Service Worker实现离线优先的Web应用 使用Service Worker实现离线优先的Web应用…
阅读更多...
算法编程题-区间最小数乘区间和的最大值，基于数组中的数字拼接可得的小于目标值的最大数

算法编程题-区间最小数乘区间和的最大值，基于数组中的数字拼接可得的小于目标值的最大数

算法编程题-区间最小数乘区间和的最大值&#xff0c;基于数组中的数字拼接可得的小于目标值的最大数 区间最小数乘区间和的最大值原题描述思路简述代码实现复杂度分析 基于数组中的数字拼接可得的小于目标值的最大数原题描述思路简述代码实现复杂度分析 参考 这里分享两道字节面…
阅读更多...
华为Ensp模拟器配置RIP路由协议

华为Ensp模拟器配置RIP路由协议

目录 RIP路由详解&#xff1a;另一种视角解读 1. RIP简介&#xff1a;轻松理解基础概念 2. RIP的核心机制&#xff1a;距离向量的魅力 3. RIP的实用与局限 RIP配置实验 实验图 ​编辑 PC的ip配置 RIP配置步骤 测试 结语&#xff1a;RIP的今天与明天 RIP路由详解&…
阅读更多...
数字化那点事：一文读懂物联网

数字化那点事：一文读懂物联网

一、物联网是什么&#xff1f; 物联网&#xff08;Internet of Things&#xff0c;简称IoT&#xff09;是指通过网络将各种物理设备连接起来&#xff0c;使它们可以互相通信并进行数据交换的技术系统。通过在物理对象中嵌入传感器、处理器、通信模块等硬件&#xff0c;IoT将“…
阅读更多...
GoFly框架使用vue flow流程图组件说明

GoFly框架使用vue flow流程图组件说明

Vue Flow组件库是个高度可定制化的流程图组件&#xff0c;可用于工作流设计、流程图及图表编辑器、系统架构展示。可以根据自己的需求&#xff0c;设计独特的节点和边&#xff0c;实现个性化的流程图展示。这不仅增强了应用的视觉效果&#xff0c;也使得用户交互更为直观和流畅…
阅读更多...
VS2022-创建智能酒店门锁DLL动态链接库——develop hotel smart locker dynamic

VS2022-创建智能酒店门锁DLL动态链接库——develop hotel smart locker dynamic

一、自主生产酒店智能门锁 1. 定制化能力&#xff1a;自主生产的品牌能够根据酒店的特定需求进行定制&#xff0c;例如特殊的外观设计、功能模块的选择等&#xff0c;更好地满足酒店的个性化要求。 2. 成本控制&#xff1a;自主生产可以更有效地控制成本&#xff0c;从原材料…
阅读更多...
免费开源的Koodo Reader：轻松管理电子书并实现远程访问

免费开源的Koodo Reader：轻松管理电子书并实现远程访问

文章目录 前言1. Koodo Reader 功能特点1.1 开源免费1.2 支持众多格式1.3 多平台兼容1.4 多端数据备份同步1.5 多功能阅读体验1.6 界面简洁直观 2. Koodo Reader安装流程2.1 安装Git2.2 安装Node.js2.3 下载koodo reader 3. 安装Cpolar内网穿透3.1 配置公网地址3.2 配置固定公网…
阅读更多...
进程池的子进程的清理工作问题

进程池的子进程的清理工作问题

首先进程池看看代码怎么写的 https://gitee.com/ljh0617/linux_test/blob/master/11-17/3.pipe_use/ProcessPool.cc 我们对子进程分配到的管道读文件描述符进行了重定向&#xff0c;让他改为从0读&#xff0c;这和清理工作无关&#xff0c;只是这么设计让子进程不再有键盘输入…
阅读更多...
Java 多线程详细介绍

Java 多线程详细介绍

Java 多线程详细介绍 线程是多线程的支柱。我们生活在一个现实世界中&#xff0c;这个世界本身就被大量应用程序包围着。随着技术的进步&#xff0c;除非我们有效地引入多任务处理的概念&#xff0c;否则我们无法达到同时运行它们所需的速度。这是通过线程的概念实现的。 Java…
阅读更多...
二叉树+树的OJ题讲解

二叉树+树的OJ题讲解

求第K层节点个数 思路:走到K1就不走了,一次传回得到的值 #include<stdio.h> #include<stdlib.h> //树的定义 typedef int BTDataType; typedef struct BinaryTreeNode {BTDataType data;struct BinaryTreeNode* left;struct BinaryTreeNode* right; }BTNode;//手…
阅读更多...
Android kotlin之配置kapt编译器插件

Android kotlin之配置kapt编译器插件

配置项目目录下的gradle/libs.versions.toml文件&#xff0c;添加kapt配置项&#xff1a; 在模块目录下build.gradle.kt中增加 plugins {alias(libs.plugins.android.application)alias(libs.plugins.jetbrains.kotlin.android)// 增加该行alias(libs.plugins.jetbrains.kotl…
阅读更多...
类和对象——拷贝构造函数，赋值运算符重载（C++）

类和对象——拷贝构造函数，赋值运算符重载（C++）

1.拷⻉构造函数 如果⼀个构造函数的第⼀个参数是自身类类型的引用&#xff0c;且任何额外的参数都有默认值&#xff0c;则此构造函数也叫做拷贝构造函数&#xff0c;也就是说拷贝构造是⼀个特殊的构造函数。 // 拷贝构造函数//d2(d1) Date(const Date& d) {_year d._yea…
阅读更多...
最新文章

Copyright @ 2022~2023