2024前端面试总结—JS篇(文档持续更新中。。。)

1、Event Loop(事件循环)机制

JS是单线程的非阻塞语言
为什么是单线程(如果js是多线程,那么两个线程同时对同一个Dom进行操作,一个增一个删,浏览器该如何执行?)
非阻塞(当代码需要执行一个异步操作,该操作不会立刻返回结果,主线程会挂起这个任务,再异步任务返回结果后再执行相应的回调)

2、原型链

每个函数都有一个属性prototype,这就是原型对象;如果我们拿这个函数通过new构造函数可以创建一个实例对象,这个实例对象自身会有一个指针(proto)指向它的构造函数的原型对象,这样再构造函数和实例对象之间就建立起了连接

使用原型链的作用

  • 避免代码冗余,公共的属性和方法可以放到原型对象中
  • 减少内存占用
  • 继承
  • propt (实例对象指向原型对象的指针,隐式原型,每个对象都有的属性)
  • prototype(构造函数的原型对象,显士原型,函数独有)
    在这里插入图片描述

3、操作数组的方法

索引方法名功能改变原数组返回内容用法
1push()在尾部添加元素返回数组的长度
2unshift()在头部添加元素返回数组的长度
3pop()在尾部删除元素返回删除的元素
4shift()在头部删除元素返回删除的元素
5slice()提取数组的一部分不会提取的新数组slice(开始位置,结束位置)提取内容不包含结束位置
6splice()删除数组的一部分返回删除的元素splice(开始位置,删除个数,插入元素)
7reverse()逆转放置元素位置返回逆转放置的数组
8sort()排序返回排序后的数组arr.sort((a,b)=>{ return a.key-b.key})
9join()将所有元素放入字符串字符串arr.join(‘/’) 什么都不加,用逗号分隔;只有引号是空白;
10for…in遍历数组更适合遍历对象,不建议遍历数组for( let value in arr){console.log(value, arr[value])}
11concat()连接两个数组不会
12forEach()遍历本身不会,如果修改了属性则会(可对数组进行深拷贝)无返回值arr.forEach((元素,索引,当前数组)=> {})
13map()遍历:本身不会,如果修改了属性则会(可对数组进行深拷贝)会返回新数组(需要加return否则是undefined)不会对空数组进行检测arr.map((元素,索引,当前数组)=> {})
14filter()按条件过滤不会新数组(满足条件项)arr.filter((value,index,arr)=>{return value>0})
15some()查找不会boolean如果所有元素都满足判断条件,则返回true,若所有元素都不满足判断条件,则返回falsearr.some(value=> value < 0)
16every()查找不会boolean此方法是将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回true,否则为falsearr.every((value,index,arr)=>{return value>0})
17indexOf()查找不会返回数组中某个指定的元素位置Array.indexOf(item,start)[NaN].indexOf(NaN) // -1
18includes查找不会返回一个Boolean[1, 2, 3].includes(2) //true; 返回布尔值,比indexOf更直观,对于NaN校验更准确
19lastIndexOf()查找不会可返回一个指定的元素在数组中最后出现的位置Array.lastIndexOf(item,start)
20fill()(ES6)用一个固定值填充返回新数组arr.fill(value, start, end)start–默认0;end–默认length
21find (ES6)查找不会返回满足条件的第一项(return)arr.find((value, index, arr)=> return value>0){} //两个参数,第二个为回调let param = [‘’].find((item)=>{// 同时检测多个字符串是否在当前内容中 return item==‘2’
22findIndex(ES6)查找不会返回满足条件的第一项的索引(return)arr.find((value, index, arr)=> return value>0){}//两个参数,第二个为回调
23reduce(return)numbers.reduce((preValue,currentValue)=>{return preValue + currentValue})//数组求和

4、数组遍历方法性能比较

  • 方法:通过一个时间函数,执行对应方法n次,计算时长
  • 结果:for循环遍历 < for…of遍历 < forEach遍历 < for…in遍历 < map遍历

5、深拷贝的方法

  • for 循环实现 ( for + push )
  • slice 方法 ( arr.slice(0) )
  • concat 方法 ( arr.concat() )
  • Es6的 … 扩展运算符 ( var […arrNew] = arr )
  • JSON.stringify()JSON.parse() (适用于对象的深拷贝,对象转为字符串后赋值给另一个变量)

6、数组去重的方法

  • for + for
  • for + indexOf
  • Set (Es6)
let arrList = [1,2,4,6,2,7,2]
let arrListNew = Array.from(new Set(arrList))
console.log(arrList)//[1, 2, 4, 6, 7]
  • filter + indexOf
let arrList = [1,2,4,5,2,1]
let arrNew = arrList.filter((item,index,arr)=>{ return arr.indexOf(item)==index;})
console.log(arrNew)

7、检验数组的方法(typeOf、instanceOf)

  • typeOf ( 返回一个字符串,如果检测数组返回 ‘object’ )
  • instanceof ( 返回一个布尔值,arr instanceof Array )
  • es5的 isArray (Array.isArray(arr))
  • 验证对象的构造函数 ( arr.constructor === Array
  • 检测对象的原型 ( Object.prototype.toString.call(arr)‘[object Array]’

8、数字精度处理(tiFixed、Number)

  • 简单的四舍五入*((0.1+0.2).toFixed(1);//0.3)有弊端:(2.445).toFixed(2)* IE显示2.45,但是chrome显示2.44
  • Math.round() 函数返回一个数字四舍五入后最接近的整数,但 2.445 * 100=244.49999999999997,不是244.5,Math.round(2.445 * 100) // 244
  • 先toPrecision取固定位数,parseFloat()解析字符串并返回浮点数
  • bigInt()
let test = '9999999999999999';
let num = BigInt(test)
console.log(num);//9999999999999999n
console.log(String(num));//9999999999999999

9、This指向问题

  • this出现在全局函数中,指向window
  • this出现在严格模式中,永远不会指向window
  • 当某个函数为对象的某个属性时,在这个函数内部this指向这个对象
  • this出现在构造函数中,指向构造函数新创建的对象
  • 当一个函数被绑定事件处理函数时,this指向被点击的这个元素
  • this出现在箭头函数中时,this和父级作用域的this指向相同
  • 修改this的指向:
    – 使用call、apply、bind修改this指向
    – 使用new关键字改变this指向

10、节流和防抖(针对相应跟不上触发频率这类问题)

  • 节流:设置一个定时器,在固定时间段内多次点击只会执行一次
// 
  • 防抖:在固定时间段连续点击,会清除掉上次点击的定时器重新计时,最终只会执行最后一次的点击
const debounce = (function(){//防抖函数let time = null;return function(fn, sec){clearTimeout(time);time = setTimeout(fn, sec)}
})()
// 滚动事件window.addEventListener('scroll', ()=>{debounce(()=>{console.log(Math.random());})});
<!-- * @description: * 功能:首次点击立即执行;n次点击判断与上次点击的间隔,* 如果大于指定时间,则立即执行,否则延迟执行。
!-->fangdou() {let num = Math.random();this.times = new Date().getTime();this.list.push(num);if (!this.times_old) {this.listAll.push(num);console.log(this.list);this.times_old = this.times;this.list = [];} else {let res = this.times - this.times_old;if (res > 1000) {this.listAll.push(this.list[this.list.length - 1]);console.log(this.list);if (this.timer) {clearTimeout(this.timer);}this.times_old = this.times;this.list = [];} else {if (this.timer) {clearTimeout(this.timer);}this.timer = setTimeout(() => {this.listAll.push(num);console.log(this.list);this.times_old = this.times;this.list = [];}, 1000 - res);}}},

11、垃圾回收机制

  • 垃圾指什么:指的是一些不再使用的内存;
  • 回收指什么:针对不再使用的内存,需要进行释放,以便再次使用;
  • 什么是垃圾回收:在JS中有一套自动的回收机制,通过一些回收算法,找出不再使用的引用的变量或者属性,由JS引擎按照固定周期释放其所占内存;
  • 常见的算法策略
    • 引用计数算法
      • 思路:记录每个变量使用次数,当被引用时标记 +1,当被其它值覆盖引用标记 -1,变为0时被垃圾回收器收回;
      • 优点:引用计数为0时,发现垃圾立即回收;最大限度减少程序暂停;
      • 缺点:无法回收循环引用的对象;控件开销比较大;
    • 标记清除算法
      • 思路:垃圾回收器在运行时会假设所有对象都是垃圾,全部标记为0;然后从根对象开始遍历,把不是垃圾的标记为1;清除掉所有标记为0的垃圾,回收其内存;然后把所有节点都改为0,等待下一次回收;
      • 优点:实现简单;能够回收循环引用的对象;是V8引擎使用最多的算法;
      • 缺点:在清除对象后剩余对象的内存的位置不变,出现一些内存碎片,需要重新分配;
    • 标记整理算法
      • 在标记结束后将不需要清理的对象向一侧移动,最后清理边界的内存
    • 分代回收算法
      • V8引擎主要使用标记清除算法和分代回收算法;
  • 自动回收什么时候执行:全局变量在关闭页面才会回收,局部变量在调用函数完之后就会回收;
  • 针对闭包:可以通过将内部变量置空null来释放内存;

12、闭包

13、bind、apply、call

(文档持续更新中。。。文中如有错误或者描述不清的地方,欢迎各位大佬指正;旨在巩固前端基础,相互进步!)

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

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

相关文章

6JS对象

6.1对象简介 对象是JavaScript的基本数据类型。对象是一种复合值&#xff1a;它将很多值&#xff08;原始值或者其他对象&#xff09;聚合在一起&#xff0c;可通过名字访问这些值。对象也可看做是属性的无序集合&#xff0c;每个属性都是一个名/值对。属性名是字符串&#xf…

动态分析C语言代码生成函数调用关系的利器——perf

大纲 环境准备安装开启监控 分析采集解析 可视化处理环境准备转换成dot转换为图片 参考资料 perf是一套linux操作系统上分析工具集&#xff0c;分析函数调用关系只是其一个子集功能。它并不像《动态分析C语言代码生成函数调用关系的利器——gprof》中介绍的需要在被分析程序的编…

Java关于Excel文件的导入导出

人生如梦 荣华富贵 如木槿之花 朝荣夕逝 需求 导出&#xff1a; 能够将库表内的数据导出多个Excel表&#xff0c;并且生成一个压缩包&#xff0c;提供用户下载导入&#xff1a; 能够将一个压缩包内的多个Excel表解压&#xff0c;并获取表内的所有数据 FileUtils 工具类 publi…

flutter+go构建的即时通讯app,ChatCraft

前言 Hi&#x1f44b;all.好久不见&#xff0c;已经两个多月没有发文章了&#xff0c;这段时间一直在反思过去的一年&#xff0c;有好有坏。对博客文章这块我对自己是不满意的&#xff0c;文章的质量参差不齐&#xff0c;有时候在没有好的题材时&#xff0c;我会选择写一些泛泛…

微信小程序(二十五)条件判断语句与结构隐藏

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.条件判断语句的演示 2.隐藏结构的演示 源码&#xff1a; index.wxml <view><!-- wx:if和wx:else为条件判断语句 --><text wx:if"{{isLogin}}">已登入的用户</text><tex…

《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)

文章目录 2.1 文本格式化标签&#xff08;&#x1f3a9;✨&#x1f4dc; 网页的“时尚搭配师”&#xff09;2.1.1 基础示例&#xff1a;一篇博客的格式化2.1.2 案例扩展一&#xff1a;产品介绍页面2.1.3 案例扩展二&#xff1a;个人简历 2.2 链接和锚点&#xff08;&#x1f6a…

20240127在ubuntu20.04.6下配置whisper

20240131在ubuntu20.04.6下配置whisper 2024/1/31 15:48 首先你要有一张NVIDIA的显卡&#xff0c;比如我用的PDD拼多多的二手GTX1080显卡。【并且极其可能是矿卡&#xff01;】800&#xffe5; 2、请正确安装好NVIDIA最新的驱动程序和CUDA。可选安装&#xff01; 3、配置whispe…

【Linux】模拟实现一个简单的minishell

目录 从显示屏获取输入字符流 分割字符串 取出命令名称及选项 去除输入时多按的那个换行符 创建子进程&#xff0c;实现程序替换 如果替换失败&#xff0c;进程终止exit 查看子进程情况 实现echo $?功能 实现cd 最终代码 基本思路 让父进程创建一个子进程&#xff0c…

fullcalendar案例

fullcalendar案例 <script srchttps://cdn.jsdelivr.net/npm/fullcalendar6.1.10/index.global.min.js></script><script srchttps://code.jquery.com/jquery-3.6.0.min.js></script> <!-- 引入 jQuery CDN --><script>document.addEventL…

python爬虫-多线程-数据库——微博用户

数据库database的包: Python操作Mysql数据库-CSDN博客 效果: 控制台输出: 数据库记录: 全部代码: import json import os import threading import tracebackimport requests import urllib.request from utils import make_headers, base64_encode_img, url_img_cv2i…

华为VRP系统简介

因为现在国内主流是华为、华三、锐捷的设备趋势&#xff0c;然后考的证书也是相关的&#xff0c;对于华为设备的一个了解也是需要的。 一、VRP概述 华为的VRP(通用路由平台)是华为公司数据通信产品的通用操作系统平台&#xff0c;作为华为公司从低端到核心的全系列路由器、以太…

深度学习之卷积神经网络

前言 如果我们采用多层BP神经网络去训练1000x1000像素的图像&#xff0c;有1百万个隐层神经元&#xff0c;那么他们全连接的话&#xff0c;就有 1 0 12 10^{12} 1012个连接&#xff0c;也就是 1 0 12 10^{12} 1012个权值参数。这训练量是很惊人的.卷积神经网络使用权值共享网络…

Excel得到JSON串

很多时候业务都需要做一种从Excel读取或者导入数据的功能&#xff0c;这在cs程序比较简单&#xff0c;在BS程序上如果封装不好的话那么写起来还是很费劲的&#xff0c;这次封装Excel读取操作。 先看使用 对&#xff0c;你没有看错&#xff0c;就是这么简单。 封装 基础设计…

远程连接服务器:Ping通但SSH连接失败的解决办法

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需引用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 前言常见问题影响SSH的因素本地影响因素防火墙设置网络配置文件 远程主机影响因素放行…

Redis内存设置

通过redis-cli进入Redis命令行 redis权限认证命令&#xff1a;auth 查看redis内存使用情况的命令&#xff1a;info memory 查看最大内存命令&#xff1a;config get maxmemory 设置最大内存命令&#xff1a;config set maxmemory 也可以通过redis.conf配置文件修改最大内存…

搭建幻兽帕鲁需要什么样的服务器

作为一个开放世界生存制造类游戏《幻兽帕鲁》收获了空前绝后的热度&#xff0c;玩家们在游戏中通过在地图上捕捉收集到的“帕鲁”进行训练&#xff0c;合理利用他们的能力进行战斗&#xff0c;建立自己的家园、开辟新的世界、解锁新的冒险情节&#xff0c;获取更多游戏信息增加…

blender关于几何接近(geometry proximity)节点的理解

如图&#xff0c;可以见到&#xff0c;我输入了一个立方体&#xff0c;一个圆锥体&#xff0c;为了便于区分 &#xff0c;将原生的立方体与圆锥转为了曲线&#xff0c;而进行了几何接近处理的网格不进行此转换。 几何接近的输入端&#xff0c;分为target&#xff08;目标&…

Cache Lab:Part A【模拟出使用LRU策略的高速缓存存储器组织结构】

目录 任务描述 知识回顾 实验内容 测试结果 Cache Lab 对应《CS:APP》6.3节至第六章结束的内容。 任务描述 Your job for Part A is to fill in the csim.c file so that it takes the same command line arguments and produces the identical output as the reference …

2024年最新 MySQL的下载、安装、启动与停止

一、MySQL的下载 MySQL最常用的2个版本&#xff1a; 社区版&#xff1a;免费开源&#xff0c;自由下载&#xff0c;不提供官方技术支持&#xff0c;大多数普通用户选择这个即可。企业版&#xff1a;需要付费&#xff0c;不能在线下载&#xff0c;可以使用30天&#xff0c;提供…

Java学习笔记(十一)——常用类

一、包装类 &#xff08;一&#xff09;包装类和基本数据类型的转换 ​编辑 &#xff08;二&#xff09;包装类型和String类型的相互转换 &#xff08;三&#xff09;Integer类和Character类的常用方法 二、String &#xff08;一&#xff09;创建String对象的两种方式 …