前端笔试题总结,带答案和解析(二)

前端笔试题总结,带答案和解析(二)


这个系列将持续更新前端笔试题一期十题,每五题做一个标题(方便跳转),您可以一期一期阅读,也可以在点击汇总,一口气看完,如果对题目有不理解的地方,欢迎大家在评论区提问,如果有更好的意见也欢迎大家留言!!!

🎉往期回顾:

🍧汇总(持续更新)

🎶前端笔试题总结,带答案和解析(一)

前端笔试题总结,带答案和解析(二)

❤️前端笔试题总结,带答案和解析(三)

11.以下代码的执行后,str 的值是:

var str = "Hellllo world";
str = str.replace(/(a)\1/g, '$1');

答案:Hello world
解析: 对于正则表达式 /(a)\1/g,其中(a)是第一个分组,\1指向第一个分组,即\1重复了第一个分组的内容,所以该正则表达式等价于/(aa)/g
对于str.replace(a,b) 用第二个参数b替换掉第一个参数a,这里‘$1’也是指向第一个分组(a), 也就是使用 'a 去替换掉 ‘aa’


  1. 以下符合 ES6 写法的有:()

    A class Foo { constructor() {return Object.create(null);} } Foo()
    B var m=1; export m;
    C export var firstName=’Michael’;
    D 在A模块中export{readFile}后,在B模块中import readFile from ‘A’可以获取到readFile

答案:C
解析:
A:类必须使用new调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new也可以执行。
B:export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
// 报错
export 1;
// 报错
var m = 1;
export m;
上面两种写法都会报错,因为没有提供对外的接口。第一种写法直接输出 1,第二种写法通过变量m,还是直接输出 1。1只是一个值,不是接口。正确的写法是下面这样。
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};

D:A模块对外暴露了一个对象,引入的时候需要使用解构赋值

import {readFile} from ‘A’

来源:牛客网


13.请给出下面这段代码的运行结果( )

var bb = 1;
function aa(bb) {bb = 2;alert(bb);
};
aa(bb);
alert(bb);

答案:1 2
解析:这道题考察是局部变量和参数传递的问题。 function aa(bb) { bb = 2; alert(bb); }; 在aa函数中,bb是以传值的方式传入的,在函数中,会重新定义一个bb变量,并将其值覆为2,并不影响函数体外的bb变量,所以其值仍然为1.


14.请问以下JS代码最后输出的len值是多少?
var len = 117;
let func = {len: 935,showLen: function() {console.log(this.len);},show: function() {(function(cb) {cb();})(this.showLen)}
}
func.show();

答案:117
解析:立即执行函数的this指向是window(非严格模式下),因为作为一个匿名函数,在被调用的时候,我们往往就是直接调用,因此它的this是非常确定的,那么len就取window下的len值了即117。


15. 以上 JavaScript 代码,在浏览器中运行的结果是
var foo = {n:1};
(function(foo){console.log(foo.n);foo.n = 3;var foo = {n:2};console.log(foo.n);
})(foo);
console.log(foo.n);

答案:1 2 3
解析:第一步:进行预编译,var全局变量foo、匿名函数 function、var局部变量foo 第二步:代码自上而下、自左向右执行计算: 对全局变量foo进行赋值foo={n:1};注意:此值为对象,属于引用类型; 匿名函数传入参数foo={n:1}自执行; console.log(foo);打出数字1; 由于存在foo局部变量,那么对foo变量进行赋值foo={n:3},同时更改了引用类型的参数值,全局foo变量被重新赋值foo={n:3}; 对局部变量foo进行重新赋值foo={n:2}; console.log(foo);打出数字2; 全局变量foo={n:3},因此,console.log(foo);打出数字3;

15题的升级版,断点调试一步步看原因


16.页面有一个按钮button id为button1,通过原生的js如何禁用?()

A document.getElementById(“button1”).setAttribute(“Readolny”,true);
B document.getElementById(“button1”).setAttribute(“disabled”,”true”);
C document.getElementById(“button1”).Readonly=true;
D document.getElementById(“button1”).disabled=true;
答案:B D
解析:<input id=“btnShow” type=“button” value=“点击” class=“btn”> 上面是一段按钮的html代码 如果要用原生的js来禁用这个按钮 可以用这样: document.getElementByIdx_x_x(“btnShow”).disabled=true;(这样就把按钮禁用了) 如果要重新开启按钮,则可以让disabled=false;即可 那么在jquery下面要如何设置呢?其实也很简单 利用jquery的attr的方法即可 $(“#btnShow”).attr({“disabled”:“disabled”}); 如要让按钮恢复可用,可以采用removeAttr方法把disabled属性删除即可。 $(“#btnShow”).removeAttr(“disabled”);


17.以下哪些操作会触发Reflow:
var obj = document.getElementById(“test”);

A alert(obj.className)
B alert(obj.offsetHeight)
C obj.style.height = “100px”
D obj.style.color = “red”

答案:B C
解析:Reflow是重排 重排的本质是影响了布局树,页面的渲染就需要从布局开始走接下来的五步 [不知道重绘的可以参考这篇文章] (https://juejin.cn/post/7240333779221987384#heading-27)
A 只是读取类名不会影响布局树 不会触发reflow
B 因为offset和scroll其实都是“相对”来计算的。有其他元素做参照物,所以会回流一次,确保准确。
C 改变元素的高 会影响布局树 所以需要reflow
D 改变元素的元素 不影响布局树 需要repaint 重绘 repaint 的本质就是重新根据分层信息计算了绘制指令。当某些元素的外观被改变,就需要重新计算。计算样式和绘制阶段之后的阶段都要重新过一遍。
在这里插入图片描述


18.代码var foo = “10”+3-“1”;console.log(foo);执行后,foo的值为( )

A “102”
B 102
C 12
D “12”

答案:B 102
解析:对于“+”来说,有两个含义:第一个含义是做字符串拼接,第二个含义是加减法中的加法。

  1,如果操作数里有一个是字符串,其他的值将被转换成字符串; 2,其他情况,操作数转换成数字执行加法运算。 

而对于“ - ”来说,只有一个含义,就是做减法,自然不会转化成字符串了。


19.执行以下程序,输出结果为()
function Person(age){this.age = age;}Person.prototype = {constructor:Person,getAge:function(){console.log(this.age);},}var ldh = new Person(24);Person.prototype.age = 18;Object.prototype.age = 20;ldh.getAge();

答案:24
解析:对象在调用方法和属性时依靠原型链的顺序进行查找,先从自身查找,然后是构造函数的原型对象,接着是Object的原型对象,一旦找到时停止查找,找不到则返回undefined。同时,原型对象中的this仍然指向实例对象,而非原型对象,在本题中,实例对象先调用原型对象的getAge()方法,然后输出age属性值,由于该实例对象已经有age属性,同时其原型链中,原型对象和原型对象的原型对象即Object对象均有age属性,依据上述查找规则,最终输出结果为实例对象的age,即为24。


20.下列哪些会返回false?

A null
B undefined
C 0
D ‘0’
答案:ABC
解析:其他类型转Boolean类型的规则: null, undefined, “”, 0, -0, NaN 转换成布尔值是false, 剩下的全转化 true;
针对D ‘0’是字符串 ‘’转字符串才是fasle 别的都是true
其它相关类型转换可见


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

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

相关文章

C/C++学习 -- SHA-256算法

SHA-256算法概述 SHA-256代表"Secure Hash Algorithm 256-bit"&#xff0c;是一种安全的哈希算法&#xff0c;输出固定长度的256位&#xff08;32字节&#xff09;哈希值。SHA-256被广泛用于加密、数字签名、密码学以及区块链等领域&#xff0c;因为它提供了高度的安…

python多线程与多进程

多线程与多进程 一, 什么是进程, 什么是线程? ​ 进程: 运行中的程序. 每次我们执行一个程序, 咱们的操作系统对自动的为这个程序准备一些必要的资源(例如, 分配内存, 创建一个能够执行的线程. ) ​ 线程: 程序内, 可以直接被CPU调度的执行过程. 是操作系统能够进行运算调度…

详解Python的装饰器(多层语法糖、装饰器和装饰器修复技术及递归函数)

python中的装饰器(decorator)一般采用语法糖的形式&#xff0c;是一种语法格式。比如&#xff1a;classmethod&#xff0c;staticmethod&#xff0c;property&#xff0c;xxx.setter&#xff0c;wraps()&#xff0c;func_name等都是python中的装饰器。 装饰器&#xff0c;装饰的…

pytorch_神经网络构建2(数学原理)

文章目录 深层神经网络多分类深层网络反向传播算法优化算法动量算法Adam 算法 深层神经网络 分类基础理论: 交叉熵是信息论中用来衡量两个分布相似性的一种量化方式 之前讲述二分类的loss函数时我们使用公式-(y*log(y_)(1-y)*log(1-y_)进行概率计算 y表示真实值,y_表示预测值 …

深入探究HTML表单与JavaScript的关系

深入探究HTML表单与JavaScript的关系 引言 HTML表单是网页中数据收集的重要工具&#xff0c;而JavaScript则充当着这些数据的处理者和控制者的角色。二者之间的关系非常紧密&#xff0c;共同构成了现代Web应用中用户交互的基础。在这篇博客中&#xff0c;我们将详细地解析HTM…

【Pinia】小菠萝详细使用说明

文章目录 1. 介绍1.1 Pinia介绍1.2 pinia的属性说明 2. 安装3. 初步使用4. store具体使用4.1 值修改4.2.1 直接修改4.2.2 通过$patch整体修改4.2.3 通过$patch函数式4.2.4 通过$state整体修改4.2.5 通过actions修改 4.2 解构store 5 actions使用6. getters使用6.1 通过this获取…

Java Collection

Collection接口常用方法 ①添加&#xff1a; ​ add(Object obj):只要是对象都可以添加 ​ addAll(Collection c)&#xff1a;添加另一个集合的元素 ②删除&#xff1a; ​ clear():清空集合元素 ​ remove(Object obj)删除某个元素对象 ​ removeAll(Collection c)&…

熔断、限流、降级 —— SpringCloud Alibaba Sentinel

Sentinel 简介 Sentinel 是阿里中间件团队开源的&#xff0c;面向分布式服务架构的高可用流量防护组件&#xff0c;主要以流量为切入点&#xff0c;从限流、流量整形、熔断降级、系统负载保护、热点防护等多个维度来帮助开发者保障微服务的稳定性 Sentinel 提供了两个服务组件…

【网络安全 --- 工具安装】VMware 16.0 详细安装过程(提供资源)

一&#xff0c;VMware下载地址&#xff1a; 百度网盘链接链接&#xff1a;百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固&#xff0c;支持教育网加速&#xff0c;支持手机端。注册使用百度网盘即可享受免费存储空间https:/…

初识jmeter及简单使用

目录 1、打开页面&#xff1a; 2、添加线程组&#xff1a; 3、线程组中设置参数&#xff1a; 4、添加请求 5、添加一个http请求后&#xff0c;设置请求内容 6、添加察看结果树 7、执行&#xff0c;查看结果 一般步骤是&#xff1a;在测试计划下面新建一个线程组&#xf…

postgresql-备份与恢复

postgresql-备份与恢复 基本概念备份类型物理备份与逻辑备份在线备份与离线备份全量备份与增量备份 备份恢复工具备份与恢复逻辑备份与还原备份单个数据库psqlpg_dumppg_store 备份整个集群 基本概念 服务器系统错误、硬件故障或者人为失误都可能导致数据的丢失或损坏。因此&am…

HTTP协议的不同版本及其新特性

HTTP/0.9 HTTP/0.9是最早的HTTP协议版本&#xff0c;于1991年发布。它具有以下特点&#xff1a; 只支持GET方法。不支持HTTP头部信息。响应只能是HTML文本。不支持状态码。 HTTP/1.0 HTTP/1.0于1996年发布&#xff0c;是HTTP协议的第一个正式版本。它具有以下特点&#xff…

一文全面解读CKA认证的含金量、详细介绍!

K8s是目前最流行的开源容器编排引擎&#xff0c;在全球都得到了广泛应用&#xff0c;BAT、京东、360、华为、网易、IBM、知乎等国内外诸多知名公司都在基于K8s构建企业容器云平台&#xff0c;支撑公司业务&#xff0c;越来越多的企业也都在向K8s迁移。相信在不远的将来&#xf…

日期相关工具类

日期相关工具类 【一】介绍【1】SimpleDateFormat 为什么是线程不安全【2】解决 SimpleDateFormat 线程不安全的方法 【二】LocalDate API【三】LocalTime API【四】LocalDateTime API【五】转换关系【1】LocalDateTime 与 LocalDate 之间的转换【2】LocalDateTime 与 Date 之间…

MySQL 索引类型和存储引擎详解

数据库索引是提高数据库查询性能的重要工具&#xff0c;而MySQL作为一个流行的关系型数据库管理系统&#xff0c;支持多种索引类型和存储引擎。在本文中&#xff0c;我们将深入探讨MySQL中的两种主要索引类型&#xff08;聚集索引和非聚集索引&#xff09;以及不同存储引擎&…

华为云云耀云服务器L实例评测|Elasticsearch的可视化Kibana工具安装 IK分词器的安装和使用

前言 最近华为云云耀云服务器L实例上新&#xff0c;也搞了一台来玩&#xff0c;期间遇到各种问题&#xff0c;在解决问题的过程中学到不少和运维相关的知识。 本篇博客介绍Elasticsearch的可视化Kibana工具安装&#xff0c;以及IK分词器的安装和使用。 其他相关的Elasticsea…

【2023最新】微信小程序中微信授权登录功能和退出登录功能实现讲解

文章目录 一、讲解视频二、小程序前端代码三、后端Java代码四、备注 一、讲解视频 教学视频地址&#xff1a; 视频地址 二、小程序前端代码 // pages/profile/profile.js import api from "../../utils/api"; import { myRequest } from "../../utils/reques…

电影产业的数据洞察:爬虫技术在票房分析中的应用

概述 电影产业是一个庞大而复杂的行业&#xff0c;涉及到各种各样的因素&#xff0c;如导演、演员、类型、主题、预算、宣传、口碑、评分、奖项等。这些因素都会影响电影的票房收入&#xff0c;也会反映出电影市场的动态和趋势。为了更好地了解电影产业的数据洞察&#xff0c;…

华为云云耀云服务器L实例评测|RabbitMQ的Docker版本安装 + 延迟插件安装 QQ邮箱和阿里云短信验证码的主题模式发送

前言 最近华为云云耀云服务器L实例上新&#xff0c;也搞了一台来玩&#xff0c;期间遇到各种问题&#xff0c;在解决问题的过程中学到不少和运维相关的知识。 本篇博客介绍RabbitMQ的Docker版本安装和配置&#xff0c;延迟插件的安装&#xff1b;结合QQ邮箱和阿里云短信验证码…

CMMI5认证哪些企业可以申请

CMMI5认证哪些企业可以申请 什么是CMMI5认证 CMMI&#xff08;Capability Maturity Model Integration&#xff09;是一种用于评估组织的软件工程能力的国际标准。CMMI模型包括5个等级&#xff0c;其中CMMI5是最高等级&#xff0c;代表组织具有达到持续优化和创新的能力。获得…