前端笔试新问题总结

news2024/11/26 16:28:24

记录总结下最近遇到的前端笔试新问题

目录

一、操作数组方法

1.Array.isArray(arr)

2.Object.prototype.toString.call(arr) === "[object Array]"

3.arr instanceof Array

1）跨帧问题

2）修改Array.prototype

3）模拟数组的对象

二、闭包

三、yield关键字

1.定义

2.题目

四、onclick事件

1.题目

2.关键点

1）保留btn.onclick = a();

2）保留btn.onclick = a;

​编辑

五、类

1.题目

1）this指向及可行性分析

2）方法重名

六、提高DOM操作效率的方法

1.减少不必要的DOM访问和修改

2.使用合适的DOM操作方法

1）innerHTML与其他方法的选择

2）insertBefore方法

3）使用DocumentFragment

3.优化事件处理

1）事件委托

2）及时移除不再需要的事件处理程序

4.利用现代浏览器特性和优化技巧

1）使用requestAnimationFrame

2）采用CSS硬件加速

七、==

1.题目

2.结果

3.分析

1）null

2）true 、 false

3）字符串

4）补充NaN

（1）比较

（2）检测

一、操作数组方法

1.Array.isArray(arr)

优：ES5引入的专门用于检测数组的方法，准确，直观且易使用

劣：它不会受到全局变量或对象遮蔽的影响，因为它直接使用全局的Array构造函数
但是旧的环境不可用（ES5之前的环境不可用）

2.Object.prototype.toString.call(arr) === "[object Array]"

优：可以在任何js环境使用，不依赖版本
准确，因为Object.prototype.toString方法返回的字符串对于每种内置对象类型都是唯一的

劣：比较冗长且不直观

3.arr instanceof Array

大多数情况有效，也兼容旧环境，但是优潜在的局限性，有可能是不准确的。

1）跨帧问题

如果数组是在不同的执行上下文（例如，不同的iframe或window对象）中创建的，那使用instanceof可能会失败。因为每个全局执行上下文都有自己的Array构造函数，所以在一个上下文中创建的数组不会被视为在另一个上下文中的Array实例。

2）修改Array.prototype

如果Array.prototype被修改（例如，添加了新的属性或方法），可能会影响instanceof的结果。

3）模拟数组的对象

instanceof无法区分真正的数组和模拟数组的对象（即具有length属性和索引属性的对象）。这些模拟数组的对象可能通过其他方式（如Array.isArray或Object.prototype.toString.call）被识别为非数组。

二、闭包

document.getElementsByTagName('li')：获取所有的<li>元素。

通过for循环遍历，onclick函数是一个闭包，捕获每次迭代时i的当前值，点击事件发生时，调用捕获了i值的onclick函数。

<li>Click me</li>
<li>Click me</li>
<li>Click me</li>
<li>Click me</li>
  let element = document.getElementsByTagName('li');
  for(let i=0; i<element.length; i++) {
       element[i].onclick = function () {
           alert(i);
       }
  }

点击四个li，分别弹出的是0 1 2 3。

三、yield关键字

1.定义

在js中，yield关键字主要用于生成器函数。生成器函数是一种特殊的函数，它用于在函数执行的过程中产生一个值，并暂停函数执行，直到下一次调用生成器的.next()方法。

2.题目

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

在代码中，function*声明一个生成器函数。

输出：

以上生成器函数func()通过yield关键字依次返回177和935。for...of循环会继续执行直到生成器函数中没有更多的值可以yield。

return语句在生成器函数中的行为特殊：它会结束迭代过程，但返回的值并不会通过for...of循环或其他迭代方法直接暴露给外部。可以通过调用生成器对象的.return()方法来获取返回值。

四、onclick事件

1.题目

如果注释掉（1）或注释掉（2）分别会发生什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="button">按钮</button>

<script>
    function a() {
        console.log(1);
        return function b() {
            console.log(2);
        }
    }
    let btn = document.getElementById('button');
    btn.onclick = a(); // (1)
    btn.onclick = a;   // (2)
</script>
</body>
</html>

2.关键点

当为onclick事件处理器分配一个函数时，应该传递函数本身，而不是调用它（即不要加括号）。如果加了括号，函数会立即执行，并且onclick会被赋予该函数的返回值（如果有的话）。

1）保留btn.onclick = a();

点击按钮前：

这行代码执行，会立即调用函数a，函数a内部首先会执行console.log(1)，打印出1，然后函数a返回了函数b，并且这个返回值（函数b）又被赋值给了btn.onclick。

点击按钮时：

当按钮被点击，会触发onclick事件，此时由于之前已经将函数a返回的函数b赋值给了btn.onclick，所以会执行函数b，控制台输出2。

2）保留btn.onclick = a;

点击按钮前：

这行代码将a本身分配给btn.onclick，此时btn.onclick被赋值为函数a本身。

在js中，当把一个函数作为事件处理函数赋值给onclick等事件属性时，并不会立即执行该函数，而是在对应的事件触发（按钮被点击）时才会执行，控制台没有输出。

点击按钮时：

当按钮被点击时，就会触发onclick事件，此时会执行函数a。函数a内部首先会执行console.log(1)，所以控制台会输出1。然后函数a返回了另一个函数b，但由于这里只是将a赋值给onclick且没有对返回值做进一步处理，所以不会执行函数b，也不会输出2。

五、类

1.题目

    class Dog {
        static dog() {
            console.log(this);
        }
        bark() {
            console.log('bark');
        }
    }
    let dog = new Dog();

1）this指向及可行性分析

（1）dog.bark()时的this指向

当通过实例dog调用实例方法bark时，this指向调用该方法的实例本身。在这里，dog是Dog类的一个实例，所以在bark方法内部，this就指向Dog这个实例对象。

（2）Dog.bark()时的this指向

Dog是一个类，而bark是实例方法，不是类（静态方法）。通过类名直接调用实例方法时不合法的操作，在严格模式下会抛出错误，在非严格模式下，this会指向全局对象（浏览器环境中通常是window，在Node.js环境中时global），但这种调用方式不符合正常的面向对象编程规范，应该通过实例来调用实例方法。

3）Dog.dog()时的this指向

dog是Dog类中的静态方法。当通过类名Dog调用静态方法dog时，静态方法内部的this指向类本身，也就是Dog。

4）dog.dog()时的this指向

虽然代码中定义了Dog类的静态方法dog，但通过实例调用静态方法是不合法的操作，在严格模式下会报错，非严格模式下，this会指向实例dog，但这种调用方式不符合正常的面向对象编程规范，应该通过类名来调用静态方法。

2）方法重名

在js中，类中的静态方法和非静态方法是可以重名的。

它们处于不同的作用域，静态方法是属于类本身的，通过类名来调用；

非静态方法是属于类的实例的，通过实例来调用。

语法上允许它们重名，但在实际代码中，为了代码的清晰性和可维护性，通常不这样做。

六、提高DOM操作效率的方法

1.减少不必要的DOM访问和修改

批量操作：

如果需要对多个DOM元素进行一系列相关操作（修改样式、添加属性等），尽量将操作集中起来进行，而不是逐个元素进行多次DOM访问和修改。

缓存DOM元素引用：

当需要多次访问同一个DOM元素时，在第一次获取到该元素后，将其缓存到一个变量中，后续直接使用这个变量。

const myElement = document.getElementById('my-id');
// 后续多次需要使用myElement的操作就可以直接使用这个变量，而不是再次调用getElementById
myElement.style.color ='red';
myElement.addEventListener('click', () => {
    // 处理点击事件
});

2.使用合适的DOM操作方法

1）innerHTML与其他方法的选择

innerHTML可以用于快速设置或获取一个元素内部的HTML内容。在某些情况下，它的速度相对比较快，比如当需要替换整个元素内部的HTML内容时。

缺点：

可能会导致原有的事件绑定丢失，并存在一定安全风险（如果设置的内容来自不可信源，可能会有XSS攻击）

对于只需要添加或修改单个元素或少量元素的情况，使用createElement、appendChild等方法更合适。

const list = document.getElementById('my-list');
const newItem = document.createElement('li');
newItem.textContent = '新的列表项';
list.appendChild(newItem);

2）insertBefore方法

可以用于在指定元素之前插入新元素等更精细的操作。

3）使用DocumentFragment

DocumentFragment是一个轻量级的DOM节点，它可以用于在内存中构建DOM结构，然后再将其整体插入到实际的DOM树中。这样可以避免多次直接对实际的DOM树进行插入操作，从而提高效率。

const fragment = document.createDocumentFragment();
for (let i = 0; i < 5; i++) {
    const newItem = document.createElement('li');
    newItem.textContent = '列表项'+ (i + 1);
    fragment.appendChild(newItem);
}
const list = document.getElementById('my-list');
list.appendChild(fragment);

3.优化事件处理

1）事件委托

事件委托是指将一个元素的事件处理委托给它的父元素或更高层次的祖先元素。当页面中有多个具有相同类型事件（如多个按钮的点击事件）的元素时，不需要为每个元素单独设置事件处理程序，而是可以将事件处理程序设置在它们的公共祖先元素上，通过判断事件的目标元素（event.target）来确定具体是哪个子元素触发了事件。

const parentElement = document.getElementById('parent');
parentElement.addEventListener('click', (event) => {
    if (event.target.matches('button')) {
        // 这里处理按钮点击事件，event.target就是具体触发事件的按钮
        console.log('按钮被点击了');
    }
});

2）及时移除不再需要的事件处理程序

4.利用现代浏览器特性和优化技巧

1）使用requestAnimationFrame

当需要再浏览器中进行动画相关的DOM操作时，使用requestAnimationFrame可以让动画更流畅，并且它会根据浏览器的刷新频率自动调整执行时机，以确保最佳的时间点进行操作。

2）采用CSS硬件加速

对于一些涉及到样式改变的DOM操作，如元素的评议、旋转、缩放等，可以通过设置相关的CSS属性并利用浏览器的CSS硬件加速特性来提高操作速度。

const element = document.getElementById('moving-element');
element.style.transform = 'translateX(100px)';

七、==

1.题目

    console.log("" == null)
    console.log(1 == true)
    console.log(0 == false)
    console.log("123" == 123)

2.结果

3.分析

1）null

在js中，"" == null 会进行类型转换来判断两边的值是否相等。

这里的 "" 是一个空字符串，null 是一个表示无值的特殊关键字。

比较时遵循如下规则：

（1）如果一边是字符串，另一边是null或undefined，则两边的值都不会被转换成数字，而是直接认为它们不相等，除非进行显示转换或使用了宽松相等运算符（==）的特殊规则。

（2）在使用 == 时，null 和 undefined 被认为是相等的，但 null 和 undefined 与任何字符串（包括空字符串）比较时，如果不进行显示转换，它们不会相等。

有一个特殊规则涉及到空字符串 "" 和数字 0 以及 false 之间的比较。在js中, "" 在宽松相等比较下会被视为 0 ，但这并不影响它与 null 的结果。

    console.log("" == null)
    console.log("" == undefined)
    console.log("aaa" == null)
    console.log("aaa" == undefined)
    console.log(0 == null)
    console.log(0 == undefined)

    console.log(null == undefined) // true

2）true 、 false

在js的宽松相等比较时，当比较一个数字和一个布尔值时，布尔值会先被转换为数字。 true 转换为数字时的值是 1 ,所以 1 和转换后的 true 是相等的，输出 true。

false 转换为数字的值是 0 ，所以 0 和转换后的 false 是相等的，输出为 true。

但是如果用 === 严格相等，需要值和类型都想等：

console.log（1 === true），左侧是数字，右侧是布尔值，为false。

更多：

    console.log(1 == true)          // true
    console.log(0 == false)          // true
    console.log("1" == true)          // true
    console.log("0" == false)          // true，“0”字符串转换为数字是0
    console.log("" == false)          // true，空值转换为数字0
    
    console.log(1 === true)          // false
    console.log(0 === false)          // false
    console.log("1" === true)          // false
    console.log("0" === false)          // false

3）字符串

宽松相等比较时，字符串和数字比较时，字符串优先被转换为数字。

    console.log("123" == 123)
    console.log("" == 0)

4）补充NaN

（1）比较

NaN与任何值（包括它自身）比较的结果都是false

NaN的类型是number，尽管表示的不是一个数字，但是它在js中的类型是number，用typeof NaN的结果是number。

    console.log(NaN == NaN)
    console.log(NaN === NaN)
    console.log(NaN == null)
    console.log(NaN == undefined)
    console.log(0 == NaN)

（2）检测

使用 Number.isNaN() 函数 或 isNaN() 函数

    console.log(Number.isNaN(NaN))
    console.log(Number.isNaN(12))

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

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

相关文章

HTML 基础标签——结构化标签＜html＞、＜head＞、＜body＞

HTML 基础标签——结构化标签＜html＞、＜head＞、＜body＞

文章目录 1. <html> 标签2. <head> 标签3. <body> 标签4. <div> 标签5. <span> 标签小结 在 HTML 文档中&#xff0c;使用特定的结构标签可以有效地组织和管理网页内容。这些标签不仅有助于浏览器正确解析和渲染页面&#xff0c;还能提高网页的可…
阅读更多...
跳表原理笔记

跳表原理笔记

课程地址 跳表是一种基于随机化的有序数据结构&#xff0c;它提出是为了赋予有序单链表以 O(logn) 的快速查找和插入的能力 创建 首先在头部创建一个 sentinel 节点&#xff0c;然后在 L1 层采用“抛硬币”的方式来决定 L0 层的指针是否增长到 L1 层 例如上图中&#xff0c;L…
阅读更多...
Vision - 开源视觉分割算法框架 Grounded SAM2 配置与推理 教程 (1)

Vision - 开源视觉分割算法框架 Grounded SAM2 配置与推理 教程 (1)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/143388189 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 Ground…
阅读更多...
3674矢量网络分析仪-003噪声系数测量选件

3674矢量网络分析仪-003噪声系数测量选件

3674X-003 噪声系数测量选件 3674系列矢量网络分析仪 综述 3674X-003噪声系数测量一次连接&#xff0c;可同时测试S参数、噪声系数、噪声参数、增益压缩和变频增益等多种参数。基于冷源噪声系数测试方法&#xff0c;可进行精确的噪声系数和噪声参数测试。 •特点 • 3674X…
阅读更多...
DDRPHY数字IC后端设计实现系列专题之后端设计导入，IO Ring设计

DDRPHY数字IC后端设计实现系列专题之后端设计导入，IO Ring设计

本章详细分析和论述了 LPDDR3 物理层接口模块的布图和布局规划的设计和实 现过程&#xff0c;包括设计环境的建立&#xff0c;布图规划包括模块尺寸的确定&#xff0c;IO 单元、宏单元以及 特殊单元的摆放。由于布图规划中的电源规划环节较为重要&#xff0c; 影响芯片的布线资…
阅读更多...
如何将MySQL彻底卸载干净

如何将MySQL彻底卸载干净

目录 背景&#xff1a; MySQL的卸载 步骤1&#xff1a;停止MySQL服务 步骤2&#xff1a;软件的卸载 步骤3&#xff1a;残余文件的清理 步骤4&#xff1a;清理注册表 步骤五:删除环境变量配置 总结&#xff1a; 背景&#xff1a; MySQL卸载不彻底往往会导致重新安装失败…
阅读更多...
Vue生成名片二维码带logo并支持下载

Vue生成名片二维码带logo并支持下载

一、需求 生成一张名片&#xff0c;名片上有用户信息以及二维码&#xff0c;名片支持下载功能&#xff08;背景样式可更换&#xff0c;忽略本文章样图样式&#xff09;。 二、参考文章 这不是我自己找官网自己摸索出来的&#xff0c;是借鉴各位前辈的&#xff0c;学以致用&am…
阅读更多...
【AIGC】深入探索『后退一步』提示技巧：激发ChatGPT的智慧潜力

【AIGC】深入探索『后退一步』提示技巧：激发ChatGPT的智慧潜力

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;“后退一步”技巧介绍技巧目的 &#x1f4af;“后退一步”原理“后退一步”提示技巧与COT和TOT的对比实验验证 &#x1f4af;如何应用“后退一步”策略强调抽象思考引导提…
阅读更多...
Python | Leetcode Python题解之第520题检测大写字母

Python | Leetcode Python题解之第520题检测大写字母

题目&#xff1a; 题解&#xff1a; class Solution:def detectCapitalUse(self, word: str) -> bool:# 若第 1 个字母为小写&#xff0c;则需额外判断第 2 个字母是否为小写if len(word) > 2 and word[0].islower() and word[1].isupper():return False# 无论第 1 个字…
阅读更多...
【python ASR】win11-从0到1使用funasr实现本地离线音频转文本

【python ASR】win11-从0到1使用funasr实现本地离线音频转文本

文章目录 前言一、前提条件安装环境Python 安装安装依赖,使用工业预训练模型最后安装 - torch1. 安装前查看显卡支持的最高CUDA的版本&#xff0c;以便下载torch 对应的版本的安装包。torch 中的CUDA版本要低于显卡最高的CUDA版本。2. 前往网站下载[Pytorch](https://pytorch.o…
阅读更多...
Java日志脱敏——基于logback MessageConverter实现

Java日志脱敏——基于logback MessageConverter实现

背景简介 日志脱敏 是常见的安全需求&#xff0c;最近公司也需要将这一块内容进行推进。看了一圈网上的案例&#xff0c;很少有既轻量又好用的轮子可以让我直接使用。我一直是反对过度设计的&#xff0c;而同样我认为轮子就应该是可以让人拿去直接用的。所以我准备分享两篇博客…
阅读更多...
Java面试经典 150 题.P26. 删除有序数组中的重复项（003）

Java面试经典 150 题.P26. 删除有序数组中的重复项（003）

本题来自&#xff1a;力扣-面试经典 150 题 面试经典 150 题 - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台https://leetcode.cn/studyplan/top-interview-150/ 题解&#xff1a; class Solution {public int removeDuplicates(int[] nums) …
阅读更多...
Prometheus套装部署到K8S+Dashboard部署详解

Prometheus套装部署到K8S+Dashboard部署详解

1、添加helm源并更新 helm repo add prometheus-community https://prometheus-community.github.io/helm-charts helm repo update2、创建namespace kubectl create namespace monitoring 3、安装Prometheus监控套装 helm install prometheus prometheus-community/prome…
阅读更多...
如何选择到印尼的海运代理

如何选择到印尼的海运代理

如何选择到印尼的海运代理 选择合适的海运代理的重要性 海运代理负责安排货物从发货地到目的地的整个运输过程&#xff0c;包括装运、清关、仓储等服务。一个可靠的海运代理能确保货物安全准时到达&#xff0c;并帮助企业节省时间和成本。 选择海运代理需考虑的主要因素 公司…
阅读更多...
python常用的第三方库下载方法

python常用的第三方库下载方法

方法一&#xff1a;打开pycharm-打开项目-点击左侧图标查看已下载的第三方库-没有下载搜索后点击install即可直接安装--安装成功后会显示在installed列表 方法二&#xff1a;打开dos窗口输入命令“pip install requests“后按回车键&#xff0c;看到successfully既安装成功&…
阅读更多...
FFmpeg 4.3 音视频-多路H265监控录放C++开发八，使用SDLVSQT显示yuv文件 ，使用ffmpeg的AVFrame

FFmpeg 4.3 音视频-多路H265监控录放C++开发八，使用SDLVSQT显示yuv文件 ，使用ffmpeg的AVFrame

一. AVFrame 核心回顾&#xff0c;uint8_t *data[AV_NUM_DATA_POINTERS] 和 int linesize[AV_NUM_DATA_POINTERS] AVFrame 存储的是解码后的数据&#xff0c;&#xff08;包括音频和视频&#xff09;例如&#xff1a;yuv数据&#xff0c;或者pcm数据&#xff0c;参考AVFrame结…
阅读更多...
jenkins 构建报错 Cannot run program “sh”

jenkins 构建报错 Cannot run program “sh”

原因 在 windows 操作系统 jenkins 自动化部署的时候, 由于自动化构建的命令是 shell 执行的,而默认windows 从 path 路径拿到的 shell 没有 sh.exe &#xff0c;因此报错。 解决方法 前提是已经安装过 git WINR 输入cmd 打开命令行, 然后输入where git 获取 git 的路径, …
阅读更多...
基于Spring Boot的高校物品捐赠管理系统设计与实现，LW+源码+讲解

基于Spring Boot的高校物品捐赠管理系统设计与实现，LW+源码+讲解

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装高校物品捐赠管理系统软件来发挥其高效地信息处理的作用&a…
阅读更多...
AndroidStudio通过Bundle进行数据传递

AndroidStudio通过Bundle进行数据传递

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境&#xff1a;AndroidStudio 目录 1.新建活动 2.修改页面布局 代码&#xff1a; 效果&#xff1a; 3.新建类ResultActivity并继承AppCompatActivity 4.新建布局文件activity_result.xml 代…
阅读更多...
测试分层：减少对全链路回归依赖的探索！

测试分层：减少对全链路回归依赖的探索！

引言&#xff1a;测试分层与全链路回归的挑战 在软件开发和测试过程中&#xff0c;全链路回归测试往往是一个复杂且耗费资源的环节&#xff0c;尤其在系统庞大且模块众多的场景下&#xff0c;全链路测试的集成难度显著提高。而“测试分层”作为一种结构化的测试方法&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023