2024前端面试准备2-JS基础知识回顾

变量类型和计算

1.值类型和引用类型的区别
常见值类型:undefined(定义undefined只能用let,不能用const)、字符串、bool、number、 Symbol;
常见引用类型: 对象, 数组、null(特殊引用类型,指针指向为空地址) 、function(特殊引用类型);
值类型的值直接存储在栈中;引用类型值存储在堆中,栈中存储的是内存地址;

2.typeof能判断哪些类型
所有的值类型、函数、识别引用类型(不能在细分只能识别到是不是object)

3. 深拷贝&浅拷贝
浅拷贝: 赋值给一个新对象,如果是基本数据类型,赋予的直接是值,如是引用类型数据,赋予的则是内存地址, 引用对象=赋值不是浅拷贝,因为没有产生新的对象,只是新增了指向同一内存地址的指针。常用浅拷贝方法:object.assign()、…展开语法、Array.prototype.concat()拷贝数组、Array.prototype.slice()拷贝数组

深拷贝: 赋值给一个新对象,会在堆内存当中为新对象建立空间,跟原对象不共享内存,完全分离。 22年3月起有原生深拷贝方法了 structuredClone 此方法可能无法在较旧的设备或浏览器中工作。

手写简易深拷贝
注意判断值类型和引用类型
注意判断是数组还是对象
递归遍历

function deepClone(obj={}){if(typeof obj !=='object' || obj == null){return obj; // 不是对象和数组 直接返回}let res = obj instanceof Array ? [] : {};for(let key in obj){if(obj.hasOwnProperty(key)){// 保证key 不是原型的属性res[key] = deepClone(obj[key])}}return res;
}

4.何时使用=== 何时使用==
==会尝试做类型转换使两边相等, 所以除了 == null 之外, 其他一律用 ===


原型和原型链

1. 如何准确判断一个变量是不是数组?
使用instanceof 判断是不是在数组的原型链上
2.手写一个简易的jQuery,考虑插件和扩展性

	class jQuery{constructor(selector){const res = document.querySelectorAll(selector)const length = res.length;for(let i = 0; i < length; i++){this[i] = res[i]}this.length = length;this.selector = selector;}get(index){return this[index];}each(fn){for(let i = 0; i<this.length; i++){const elem = this[i];fn(elem);}}on(type,fn){return this.each(elem =>{elem.addEventListener(type, fn, false);})}}

3. class 的原型本质,怎么理解?
class本质就是function的一个语法糖,因为JS中没有类(Class)这个概念,所以JS的设计者使用了构造函数来实现继承机制。
4. 原型链
原型链:
JS的每个函数在创建的时候,都会生成一个属性prototype,这个属性指向一个对象,这个对象就是此函数的原型对象。该原型对象中有个属性为constructor,指向该函数。每个通过该构造函数创建出来的实例对象都有隐式原型__proto__;实例的__proto__指向对应函数的prototype;获取实例的属性时,先在自身属性中寻找,如果找不到就通过__proto__ 寻找对应构造函数的prototype,如果还未找到就会去该构造函数的prototype的__proto__,这样一层一层向上查找就会形成一个链式结构,这就是原型链。


作用域和闭包

1.this的不同应用场景,如何取值?
所有的自由变量的查找,是在函数定义的地方,向上级作用域查找,而不是在函数执行的地方
this取什么样的值是在函数执行的地方确定的,不是函数定义的地方

  • 当作普通函数调用 返回 window
  • 使用call apply bind 传入什么绑定什么
  • 作为对象方法调用,就返回对象本身
  • 在calss的方法中调用时,是实例本身
  • 在箭头函数中,永远会找上级作用域中的this确定
    2.手写bind函数?
 Function.prototype.bind1 = function(){// 将参数拆解为数组const args = Array.prototype.slice.call(arguments)// 获取this 数组第一项const t = args.shift();// fn1.bind(...) 中的fn1const self = this;// 返回一个函数return function(){return self.apply(t, args);}}

3.实际开发中闭包的应用场景,举例说明

闭包让你可以在一个内层函数中访问到其外层函数的作用域。因为使用闭包会包含其他函数的作用域,会比其他函数占据更多的内存空间,不会在调用结束之后被垃圾回收机制回收,多度使用闭包会过度占用内存,造成内存泄漏。

  1. retur一个内部函数,读取内部函数的变量;
 	 function f1(){let n = 999;function f2(){console.log(n)}return f2;}let res = f1();res(); // 999
  1. 函数作为参数
 	let n = 999;function f1(){let n = 1000;function f2(){console.log(n);}return f2}function f3(p){let n = 1001;p();}f3(f1());//1000
  1. 自执行函数、使用回调函数就是在使用闭包
 let n = 100;
(function f1(){console.log(n);
})() //100
  1. 使用回调函数就是在使用闭包
   	window.p = 999;setTimeout(function f1(){console.log(window.p);},1000)
  1. 封装对象的私有对象和私有方法;
let counter = (function(){let privteCount = 0;function change(val){privteCount += val;}return {add:function(){change(1);},remove:function(){change(-1);},value:function(){return privteCount;}}})();console.log(counter.value());//0
counter.add();
counter.add();
console.log(counter.value());//2
counter.remove();
console.log(counter.value());//1
异步和单线程

1.同步和异步的区别是什么

JS是单线程语言,只能同时做一件事儿; 浏览器和nodejs已支持js启动进程,如web worker;js和DOM渲染共用一个线程,因为JS可修改DOM结构。

基于JS是单线程语言,异步不会阻塞代码执行,同步会阻塞代码执行。
2. 前端使用异步的场景有哪些?

  • 网络请求, 如ajax图片加载
  • 定时任务, 如setTimeout

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

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

相关文章

如何避免Python中默认参数带来的陷阱

Python编程中&#xff0c;我们有时会给函数或方法提供默认参数。然而&#xff0c;这种做法在某些情况下可能会导致意想不到的行为&#xff0c;尤其是当默认参数是可变对象&#xff08;例如列表、字典或类实例对象&#xff09;时。本文将通过几个具体的例子来解释这个问题&#…

MQTT协议使用总结

MQTT是基于TCP/IP协议栈构建的异步通信消息协议&#xff0c;是一种轻量级的发布/订阅信息传输协议MQTT在时间和空间上&#xff0c;将消息发送者与接受者分离&#xff0c;可以在不可靠的网络环境中进行扩展。适用于设备硬件存储空间有限或网络带宽有限的场景。 物联网平台支持设…

2.1.4 采用配置类与注解方式使用MyBatis

实战概述&#xff1a;采用配置类与注解方式使用MyBatis 创建MyBatis配置类 在net.huawei.mybatis.config包中创建MyBatisConfig类&#xff0c;用于配置MyBatis核心组件&#xff0c;包括数据源、事务工厂和环境设置。 配置数据源和事务 使用PooledDataSource配置MySQL数据库连接…

苍穹外卖中的Druid问题

一、jar包启动解决报错 discard long time none recevied connection 升级druid版本到1.2.9 更新maven包

kafka-消费者服务搭建配置简单消费(SpringBoot整合Kafka)

文章目录 1、使用efak 创建 主题 my_topic1 并建立6个分区并给每个分区建立3个副本2、创建生产者发送消息3、application.yml配置4、创建消费者监听器5、创建SpringBoot启动类6、屏蔽 kafka debug 日志 logback.xml7、引入spring-kafka依赖 1、使用efak 创建 主题 my_topic1 并…

DP动态规划(上)

文章目录 动态规划基本概念斐波那契数列问题C 实现Python 实现Java 实现 迷你结C、Python和Java在实现动态规划时有哪些性能差异&#xff1f;迷你结哪种语言在动态规划中更适合大规模数据处理?迷你结C有哪些知名的库适用于动态规划和大数据处理?动态规划辅助库大数据处理库 迷…

【网络协议 | HTTP】HTTP总结与全梳理(一) —— HTTP协议超详细教程

&#x1f525;博客简介&#xff1a;开了几个专栏&#xff0c;针对 Linux 和 rtos 系统&#xff0c;嵌入式开发和音视频开发&#xff0c;结合多年工作经验&#xff0c;跟大家分享交流嵌入式软硬件技术、音视频技术的干货。   ✍️系列专栏&#xff1a;C/C、Linux、rtos、嵌入式…

二叉树练习题(2024/6/5)

1翻转二叉树 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出&#xff1a;[2,3,1]…

dirfuzz-web敏感目录文件扫描工具

dirfuzz介绍 dirfuzz是一款基于Python3的敏感目录文件扫描工具&#xff0c;借鉴了dirsearch的思路&#xff0c;扬长避短。在根据自身实战经验的基础上而编写的一款工具&#xff0c;经过断断续续几个月的测试、修改和完善。 项目地址&#xff1a;https://github.com/ssrc-c/di…

运维开发介绍

目录 1.什么是运维开发 2.作用 3.优点 4.缺点 5.应用场景 5.1.十个应用场景 5.2.网站和Web应用程序 6.案例 7.小结 1.什么是运维开发 运维开发&#xff08;DevOps&#xff09;是一种结合软件开发&#xff08;Development&#xff09;与信息技术运维&#xff08;Opera…

什么是回调函数?callback()

首先要知道一个点就是 在js中&#xff0c;函数是可以作为函数的参数传递的 所以其实回调函数 就是这个传进去的参数 其实回调函数的本质样子和普通函数是一样的 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">…

embedding层的理解

一文读懂Embedding的概念&#xff0c;以及它和深度学习的关系 - 知乎 (zhihu.com) 感觉这篇知乎真的大道至简。个人感觉embedding层和普通的线性层没有什么区别~就是为了降维和升维用的。也就是向量的维度变化&#xff01;

基于SOA海鸥优化算法的三维曲面最高点搜索matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于SOA海鸥优化算法的三维曲面最高点搜索matlab仿真&#xff0c;输出收敛曲线以及三维曲面最高点搜索结果。 2.测试软件版本以及运行结果展示 MATLAB2022A版本…

Wireshark抓包工具使用 项目实战

Wireshark 是一个开源的网络协议分析器&#xff0c;它可以让你捕获和分析网络数据包&#xff0c;帮助你诊断网络问题、监控网络流量、分析协议和进行安全审计。以下是一些基本的 Wireshark 用法&#xff1a; 捕获数据包&#xff1a; 打开 Wireshark&#xff0c;选择要捕获数据包…

国外创意二维码营销案例:巴西宠物食品品牌户外活动“救救宠物爪子吧”

2024年5月份&#xff0c;巴西宠物食品品牌Purina Brasil 与广告公司Publicis Brasil合作&#xff0c;推出了一次特别的户外营销活动——Salve as Patinhas(Save the Paws)&#xff08;救救宠物爪子吧&#xff09;&#xff0c;非常有意思&#xff01; 随着全球气候变暖&#xf…

C++240605

设计一个 Per类&#xff0c;类中包含**私有**成员:姓名、年龄、**指针成员**身高、体重&#xff0c; 再设计一个Stu类&#xff0c;类中包含**私有**成员:成绩、 Per类对象p1&#xff0c; 设计这 两个类 的 **构造函数、析构函数**。 #include <iostream>using namespace…

PPT文件损坏且无法读取怎样修复?文档损坏修复方法推荐

PPT文件已经成为工作汇报、商务演示、学术交流以及教学培训中最常用到的文件&#xff0c;随着文件数量的增多和存储设备的频繁使用&#xff0c;我们有时会遇到PPT文件损坏无法打开的情况&#xff0c;这无疑给工作和学习带来了极大的困扰。 PPT文件损坏的原因可能多种多样&#…

VS2022,DLL1调用lib,lib调用DLL2

DLL1调用lib&#xff0c;lib调用DLL2 问题1&#xff1a;为什么在dll1中需要引入dll2的.lib文件 当你有一个工程&#xff08;dll1&#xff09;调用静态库&#xff08;lib&#xff09;&#xff0c;而静态库&#xff08;lib&#xff09;又调用另一个DLL&#xff08;dll2&#xf…

甜蜜约会网页制作html

创建一个简单的“甜蜜约会”主题网页&#xff0c;你需要编写HTML代码来定义网页的结构和内容。下面是一个基本的HTML页面示例&#xff0c;它展示了一个简单的“甜蜜约会”网页布局&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><met…

vivado BEL

描述 通常&#xff0c;BEL或基本元素对应于设计的网表视图中的叶单元。 BEL是目标Xilinx FPGA上的设备对象&#xff0c;用于放置或映射基本网表 触发器、LUT和进位逻辑等对象。 BEL在SITE对象&#xff08;如SLICE和IO块&#xff09;中的设备上分组在一起 &#xff08;IOB&#…