2023最新前端面试题4(持续更新)

news2024/11/24 3:41:38

JavaScript

59、JS的几条基本规范
1、不要在同一行声明多个变量
2、请使用===/!==来比较true/false或者数值
3、使用对象字面量替代new Array这种形式
4、不要使用全局变量
5、Switch语句必须带有default分支
6、函数不应该有时候有返回值,有时候没有返回值
7、For循环必须使用大括号
8、IF语句必须使用大括号
9、for-in循环中的变量应该使用vr关键字明确限定作用域,从而避免作用域
污染

60、JS 的基本数据类型

Undefined、Null、Boolean、Number、String、新增:Symbol

61、JS引用方法

61.1、行内引入

<body>
    <input type="button" onclick="alert(行内引入)" value="按钮"/>
    <button onclick="alert(123)">点击我</button>
</body>

61.2、内部引入

<script>
    window.onload = function0 {
        alert("js 内部引入!");
    }
</script>

61.3、外部引入

<body>
    <div></div>
    <script type="text/javascript" src="./js/index.js"> </script>
</body>

注意
1、不推荐写行内或者 HTML 中插入<script>,因为浏览器解析顺序缘故,如果解析到死循环之类的JS 代码,会卡住页面。
2、建议在 onload 事件之后,即等 HTML、CSS 染完毕再执行代码。

62、数组操作

在 JavaScript 中,用得较多的之一无疑是数组操作,这里过一遍数组的一些用法

  • map: 遍历数组,返回回调返回值组成的新数组
  • forEach: 无法 break,可以用 try/catch 中throw new Error 来停止
  • filter: 过滤
  • some: 有一项返回 true,则整体为 true
  • every: 有一项返回 false,则整体为 false
  • join: 通过指定连接符生成字符串
  • push / pop: 未尾推入和弹出,改变原数组,返回推入/弹出项[有误]
  • unshift / shift: 头部推入和弹出,改变原数组,返回操作项[有误]
  • sort(fn) / reverse: 排序与反转,改变原数组
  • concat: 连接数组,不影响原数组, 浅拷贝
  • slice(start,end): 返回截断后的新数组,不改变原数组
  • splice(start, number, value...): 返回删除元素组成的数组,value 为插入项,改变原数组
  • indexOf /lastIndexOf(value, fromIndex): 查找数组项,返回对应的下标
  • reduce /reduceRight(fn(prev, cur), defaultPrev): 两两执行,prev 为上次化简函数的 return 值,cur 为当前值(从第二项开始)

63、JS 有哪些内置对象

Object 是 JavaScript 中所有对象的父对象

数据封装对象: Object、Array、Boolean、Number和 String

其他对象: Function、Arguments、Math、Date、RegExp、Error

64、get 请求传参长度的误区

误区: 我们经常说 get 请求参数的大小存在限制,而 post 请求的参数大小是无限
制的。

实际上 HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对 get 请求参数的限制是来源与浏览器或 web 服务,浏览或 web 服务限制了 url的长度。为了明确这个概念,我们必须再次强调下面几点:
1、HTTP 协议 未规定 GET 和 POST 的长度限制
2、GET 的最大长度显示是因为 浏览器和 web 服务器限制了 URI的长度
3、不同的浏览器和 WEB 服务器,限制的最大长度不一样
4、要支持 IE,则最大长度为 2083byte,若只支持 Chrome,则最大长度 8182byte

65、补充 get 和 post 请求在缓存方面的区别

  • get 请求类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,所以可以使用缓存。
  • post 不同,post 做的一般是修改和删除的工作,所以必须与数据库交互,所以不能使用缓存。因此 get 请求适合于请求缓存。

66、闭包

66.1、什么是闭包?

函数A 里面包含了 函数 B,而 函 B 里面使用了 函数 A 的变量,那么 函数B 被称为闭包。
又或者: 闭包就是能够读取其他函数内部变量的函数

function A() {
    var a = 1;
    function B(){
        console.log(a):
    }
    return B();
}

66.2、闭包的特征

  • 函数内再嵌套函数
  • 内部函数可以引用外层的参数和变量
  • 参数和变量不会被垃圾回收制回收

66.3、对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。在 js 中,函数即闭包,只有函数才会产生作用域的概念。

闭包 的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量始终保持在内存中。

闭包的另一个用处,是封装对象的私有属性和私有方法。

66.4、闭包的好处

能够实现封装和缓存等

66.5、闭包的坏处

就是消耗内存、不正当使用会造成内存溢出的问题

66.6、使用闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在 E 中可能导致内存泄露

解决方法是: 在退出函数之前,将不使用的局部变量全部删除

66.7、闭包的经典问题

for(var i = 0; i < 3; i++) (
    setTimeout(function(){
    console.log(i);
    }, 1000);
}

这段代码输出

答案: 3个3
解析: 首先,for 循环是同步代码,先执行三遍 for,i 变成了 3; 然后,再执行异步代码 setTimeout,这时候输出的 i,只能是 3 个 3 了

有什么办法依次输出 0 1 2

第一种方法

使用let

for(let i = 0; i < 3; i++) [
    setTimeout(function(){
    console.log(i);
    }, 1000);
}

在这里,每个 let 和代码块结合起来形成块级作用域,当 setTimeout0 打印时会寻找最近的块级作用域中的 i,所以依次打印出 0 1 2

如果这样不明白,我们可以执行下边这段代码

for(let i = 0; i < 3; i++) {
    console.log("定时器外部:"+ i);
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

此时浏览器依次输出的是

定时器外部: 0
定时器外部: 1
定时器外部: 2

0
1
2


即代码还是先执行 for 循环,但是当 for 结束执行到了 setTimeout 的时候它会做个标记,这样到了 console.log(i) 中,i 就能找到这个块中最近的变量定义


第二种方法

使用立即执行函数解决闭包的问题

for(let i = 0; i < 3; i++){
    (function(i){
        setTimeout{function(){
            console.log(i);
        }, 1000);
    })(i)
}


67、JS 作用域及作用域链

67.1、作用域

在 JavaScript 中,作用域分为 全局作用域 和 函数作用域

67.2、全局作用域

代码在程序的任何地方都能被访问,window 对象的内置属性都拥有全局作用域

函数作用域

在固定的代码片段才能被访问

例子:

作用域有上下级关系,上下级关系的确定就看函数是在哪个作用域下创建的。如上,fin 作用域下创建了 bar 函数,那么“fn 作用域”就是“bar 作用域”的上级。

作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。

变量取值:到创建 这个变量 的函数的作用域中取值

67.3、作用域链

一般情况下,变量取值到 创建 这个变量 的函数的作用域中取值。

但是如果在当前作用域中没有查到值,就会向上级作用域去查,直到查到全局作用域,这么一个查找过程形成的链条就叫做作用域链。

68、原型和原型链

68.1、原型和原型链的概念

每个对象都会在其内部初始化一个属性,就是 prototype(原型),当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去 prototype 里找这个属性,这个 prototype 又会有自己的 prototype,于是就这样一直找下去

68.2、原型和原型链的关系

instance.constructor.prototype = instance._proto_

68.3、原型和原型链的特点

JavaScript 对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时,与之相关的对象也会继承这一改变。

当我们需要一个属性的时,Javascript引警会先看当前对象中是否有这个属性,如果没有的就会查找他的 Prototype 对象是否有这个属性,如此递推下去,一直检索到Object 内建对象。

69、组件化和模块化

组件化

69.1、为什么要组件化开发

有时候页面代码量太大,逻辑太多或者同一个功能组件在许多页面均有使用,维护起来相当复杂,这个时候,就需要组件化开发来进行功能拆分、组件封装,已达到组件通用性,增强代码可读性,维护成本也能大大降低

69.2、组件化开发的优点

很大程度上降低系统各个功能的耦合性,并且提高了功能内部的聚合性。这对前端工程化及降低代码的维护来说,是有很大的好处的,耦合性的降低,提高了系统的伸展性,降低了开发的复杂度,提升开发效率,降低开发成本

69.3、组件化开发的原则

  • 专一
  • 可配置性
  • 标准性
  • 复用性
  • 可维护性

模块化

69.4、为什么要模块化

早期的 javascript 版本没有块级作用域、没有类、没有包、也没有模块,这样会带来一些问题,如复用、依赖、冲突、代码组织混乱等,随着前端的膨胀,模块化显得非常迫切

69.5、模块化的好处

避免变量污染,命名冲突提高代码复用率提高了可维护性方便依赖关系管理

69.6、模块化的几种方法

  • 函数封装
var myModule = (
    var1: 1,
    var2: 2,
    fn1: function(){
    },

    fn2: function(){
    }
}

总结: 这样避免了变量污染,只要保证模块名唯一即可,同时同一模块内的成员也有了关系

缺陷:外部可以睡意修改内部成员,这样就会产生意外的安全问题

  • 立即执行函数表达式(IIFE)
var myModule = (function(){
    var var1 = 1;
    var var2 = 2;
    function fn1(){
    }
    function fn2(){
    }
return{
    fn1: fn1,
    fn2: fn2
};
})();

总结: 这样在模块外部无法修改我们没有暴露出来的变量、函数

缺点: 功能相对较弱,封装过程增加了工作量,仍会导致命名空间污染可能、闭包是有成本的

70、图片的预加载和懒加载

  • 预加载: 提前加载图片,当用户需要查看时可直接从本地缓存中渲染懒
  • 加载:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数

两种技术的本质:两者的行为是相反的一个是提前加载,一个是迟缓甚至不加载。预加载则会增加服务器前端压力,懒加载对服务器有一定的缓解压力作用。

71、mouseover和 mouseenter 的区别

mouseover: 当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发冒泡的过程。对应的移除事件是 mouseout

mouseenter: 当鼠标移除元素本身 (不包含元素的子元素)会触发事件,也就是不会冒泡,对应的移除事件是 mouseleave

72、解决异步回调地狱

promise、generator、async/await

73、对 This 对象的理解

this 总是指向函数的直接调用者 (而非间接调用者)

如果有 new 关键字,this 指向 new 出来的那个对象

在事件中,this 指向触发这个事件的对象,特殊的是,IE 中的 attachEvent 中的this 总是指向全局对象 Window

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

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

相关文章

如何写出有效的单元测试?

如何写出有效的单元测试&#xff1f; 目录&#xff1a;导读 什么是单元测试 为什么需要单元测试 什么是有效的单元测试 为什么有效的单元测试如此重要 如何写有效的单元测试 补充单元测试应该从哪里开始 可测试的设计 单元测试与重构 做不到TDD&#xff0c;可以做到测…

LaoCat带你认识容器与镜像(四【下】)

基础概念章节是告一段落了&#xff0c;不知道各位童鞋是否阅读的顺畅&#xff0c;欢迎各位童鞋踊跃的提出意见和看法并指正。 本章内容 Dockerfile基础命令详解。 本文实操全部基于Ubuntu 20.04 宿主机 > linux服务器本身 上节粗略介绍了Dockerfile相关命令&#xff0c;这节…

国电投-风机叶片开裂故障预警比赛(记录)

1 前言 1-1 简介 DataFountain平台举办的比赛&#xff0c;赛题&#xff1a;风机叶片开裂故障预警。以下是比赛链接:风机叶片开裂故障预警 Competitions - DataFountain 1-2 任务背景 SCADA是风场设备管理、监测、和控制的重要系统&#xff0c;通过实时收集风机运行的环境参数、…

oracle direct path read等待事件处理案例

一 问题描述 收到短信告警&#xff0c;提示direct path read(110)。 直接路径读取不过SGA缓存&#xff0c;直接从磁盘上读数据&#xff0c;每次查询都会产生大量的物理读&#xff0c;导致IO比较高&#xff0c;影响数据库性能。 二 排查思路 生成AWR报告及ASH报告&#xff0…

springboot 整合mybatis-plus的自动生成代码包含service和controller

版本信息springboot&#xff1a;<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.13.RELEASE</version></parent>mybatis相关依赖版本如下&#xff1a…

压缩包文件上传导致覆盖rce

制作恶意压缩包 tgao.jsp文件内容&#xff1a; <html> <body><%out.println("zip slip getshell.");%> </body> </html>编写python脚本将jsp文件内容内容压缩至DocSystem.war中&#xff0c;并指定name为../../DocSystem/tgao.jsp&am…

ElasticSearch - RestClient查询文档

目录 查询文档-快速入门 查询文档-match查询 查询文档-精确查询 查询文档-布尔查询 查询文档-排序和分页 查询文档-高亮显示 查询文档-快速入门 文档的查询基本步骤包括&#xff1a; (1)准备Request对象(2)准备请求参数&#xff0c;构建查询条件(3)发起请求&#xff0c;得…

OpenSSL下载安装教程

OpenSSL下载 &#xff08;加急&#xff09;下载地址&#xff1a;Win32/Win64 OpenSSL Installer for Windows - Shining Light Productions 首先&#xff0c;进入官网 Shining Light Productions - Home &#xff0c;可以看到如下界面&#xff1a; 这里演示用的版本是V1.1的版…

nodejs+vue考研信息查询系统vscode项目

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 2 第3章 系统分析 3 3.1 需求分析 3 3.2 系统可行性分析 4 3.2.1技术可行性&#xff1a;技术背景 4 3.2.2经…

2023蓝桥杯学习与刷题建议

前两天天给你们组了队&#xff0c;经过两天发现各位都有这样的问题&#xff1a; 不愿意交流。小组不会规划刷题计划。可能是因为没有人带头和具体刷题计划&#xff0c;所以都处于迷茫&#xff0c;不交流、不刷题。还有可能是大家都不认识&#xff0c;都比较羞涩。同时也有我个…

OSCP_VULHUB_DC: 2

文章目录前言信息收集Web账号密码爆破ssh登录绕过rbash限制git提权前言 kali攻击&#xff1a;192.168.132.139 目标主机&#xff1a;192.168.132.146 环境配置参照https://www.vulnhub.com/entry/dc-2,311/ 下载&#xff1a;https://download.vulnhub.com/dc/DC-2.zip 信息收…

开发第四天+第五天读书笔记

首先用C语言实现内存写入: 光是成功的让画面黑屏是不够的&#xff0c;还是要往画面上画点什么。首先修改naskfunc.nas。写成这样&#xff1a; ; naskfunc ; TAB4[FORMAT "WCOFF"] ; 创建对象文件的模式 [INSTRSET "i486p"] …

Linux进程间通信(基于管道通信)

目录 一、进程间通信 1.1 通信目的 1.2 通信发展 二、管道 2.1 管道的概念和分类 2.2 匿名管道 2.2.1 匿名管道&#xff08;基于父子血缘关系) 2.2.2 匿名管道单向性 2.2.3 匿名管道是内存级别文件 2.2.4 匿名管道指令实现 2.2.5 代码实现匿名管道&#xff08;pipe()…

一文讲清楚shell 中的变量是怎么回事

目录 变量和引用 一&#xff0c; 什么是变量 二&#xff0c; 根据数据类型分类 三&#xff0c; 根据作用域分类 1、环境变量 2、普通变量 四&#xff0c; 变量的定义 1、变量定义示例&#xff1a;变量名变量值 2、位置参数和预定义变量 五&#xff0c; shell中的引用 六&…

【GPLT 二阶题目集】L2-022 重排链表

输入格式&#xff1a; 每个输入包含1个测试用例。每个测试用例第1行给出第1个结点的地址和结点总个数&#xff0c;即正整数N (≤10^5 )。结点的地址是5位非负整数&#xff0c;NULL地址用−1表示。 接下来有N行&#xff0c;每行格式为&#xff1a; Address Data Next 其中Addres…

深拷贝和浅拷贝对比

JavaScript存储引用数据&#xff08;对象&#xff09;都是存地址的&#xff0c;存放在堆内存中的对象&#xff0c;在栈内存中存的是一个指针&#xff0c;这个指针指向堆内存一个位置。再从堆内存中取得所需的数据。 深拷贝&#xff1a;对数据进行拷贝之后&#xff0c;修改拷贝之…

Python:从协议到抽象基类

本章话题是接口&#xff1a;鸭子类型代表特征动态协议&#xff1b; 使接口更明确、能验证实现是否副了规定的抽象基类ABC(Abstact Base Class).Python语言诞生15年后&#xff0c;Python2.6中才引入了抽象基类&#xff0c;抽象基类。对于java、C#类似的语言&#xff0c;会觉得鸭…

DevSecOps敏捷安全技术金字塔V3.0正式发布

2022年12月28日&#xff0c;由悬镜安全主办&#xff0c;3S-Lab软件供应链安全实验室、Linux基金会OpenChain社区、ISC、OpenSCA社区联合协办的第二届全球DevSecOps敏捷安全大会&#xff08;DSO 2022&#xff09;已通过全球直播的形式圆满举行。本届大会以“共生敏捷进化”为主题…

HTB_Markup_xml注入读ssh私钥进程注入

文章目录信息收集xml注入ssh 私钥连接提权信息收集 使用如下参数可以探测具体版本&#xff0c;只使用-sV -v无此效果 nmap -sC -A -Pn 10.129.95.192是个登录页面 弱口令&#xff0c;只有admin-password成功登录 几个页面&#xff0c;只有order.php页面可以与后端交互并传递x…

【Kubernetes 企业项目实战】06、基于 Jenkins+K8s 构建 DevOps 自动化运维管理平台(中)

目录 一、基于 Jenkinsk8sGitDocker Hub 等技术链构建企业级 DevOps 容器云平台 1.1 安装 Jenkins 1.1.1 安装 nfs 服务 1.1.2 在 kubernetes 中部署 jenkins 1.2 配置 Jenkins ​1.2.1 获取管理员密码 1.2.2 安装插件 1.2.3 创建第一个管理员用户 1.3 测试 jenkins 的…