前端面试题(JS部分)

news2024/10/7 18:21:03

目录

  • 一, 数据类型
    • 1,什么是引用类型,值类型?
    • 2,哪些值类型
    • 3,哪些引用类型
    • 4,判断数据类型
    • 5,typeof判断
    • 6,instanceof
    • 7,construtor
  • 二,浅拷贝 / 深拷贝
    • 1, 浅拷贝
    • 2,深拷贝
  • 三,隐式转换
  • 四,严格等于
  • 五,if判断
  • 六, 逻辑且逻辑或
  • 七,原型与原型链
    • 1,名词
    • 2,原型与原型链的作用
    • 3,显与隐关系
    • 4,原型链
  • 八,js实现继承
    • 1, class 的 extends方法
    • 2,使用原型链
  • 九,实例公用方法
  • 十,闭包
  • 十一,js变量和函数声明的提升
  • 十二,箭头函数与普通函数的区别?
  • 十三,事件流
  • 十四, let 与var的区别
  • 十五,重绘和回流
  • 十六,防抖和节流
  • 十七, this指向问题

一, 数据类型

1,什么是引用类型,值类型?

值类型key与value存储在栈中(量小)
引用类型在栈存储的引用地址,在堆中存储是数据(量大)
把引用类型赋值给一个变量,是吧变量的引用地址指向引用类型堆中地址

2,哪些值类型

  • String字符,
  • Number数字,
  • Boolean布尔,
  • undefined未定义
  • null空(特殊)
  • Symbol符号

3,哪些引用类型

  • Object对象
  • Array数字
  • Function 函数
  • Map图
  • Set集合

4,判断数据类型

  • typeof 类型
  • instanceof 实例
  • constructor 构造函数
  • Array.isArray() 是否为数组
  • Object.prototype.toString.call(obj) 原型

5,typeof判断

typeof “abc” string
typeof 123 number
typeof true boolean
typeof undefined undefined
typeof null object
typeof Symbol() symbol
typeof {} object
typeof [] object
typeof function(){} function
typeof new Map() object
typeof new Set() object

适合判断 值了与引用类型 不能判断具体引用类型

6,instanceof

[] instanceof Array true
[] instanceof Object true
{} instanceof Array false
{} instanceof Object true

  1. 判断是否是其原型链上的实例 只要这个构造函数在原型链都返回true
  2. ([] 由Array创建的,Array是 Object的子类, instanceof Array和 Object 都返回true)

7,construtor

判断实例对象构造函数
[].constructor === Array true 最精确

最精确

Object.prototype.toString.call(obj).slice(8,-1)
返回数据的精确类型

二,浅拷贝 / 深拷贝

1, 浅拷贝

扩展{...obj}
for遍历
Object.assgin()

2,深拷贝

2.1,JSON.parse(JSON.stringify(数据))

json数据类只支持 布尔,字符串,数字 null,undefined array object 会忽略函数 等其他类型数据

2.2, 通过判断类型 递归深拷贝

递归就是函数调用自己
一定要有结束条件

三,隐式转换

看符号
+

    • 字符串连接符号 会尝试把其他类型转换为 字符串
  1. ±*/ == 会尝试把其他类型转换为数字
    转换失败 NaN
    false 转换为 0
    true 转换 1

3.<>= <= ! != == 判断与逻辑返回会尝试把其他类型转换布尔值
falsely变量转换为false “” null NaN undefined 0 转换为false

四,严格等于

  1. === 判断类型和值是否都相对

  2. 应该在任何时候都使用=== (当判断是否为null或者为undefined可以为特例)

  3. null === null true

  4. == 判断隐式转换后的值 “100” == 100 // true null == undefined //true 0 == false //true 特例:NaN === null // false

  5. {} == {} // false [] == {} //false 指向不同的内存地址

五,if判断

  1. if()中判断的是否为truely变量
  2. falsely变量:false “” 0 NaN undefined null 两次取反 !!a得到结果为false
  3. 除了falsely变量其他都为truely变量

六, 逻辑且逻辑或

A||B
A为真(truely) 结果为A ,否则结果为B
A&&B
A为假(falsely) 结果为A,否则结果为B
判断对象
if(a&&a.b&&a.b.c){}
if(a?.b?.c){}
如果有a并且有a.b并且有a.b.c
if(a.b.c){}

七,原型与原型链

1,名词

  1. 类:(创建对象实例的模板) 本质上都是函数

    	构造函数 用new来执行的函数
    	class xxx { }
    
  2. 实例:由类创建的对象(本质上讲就是对象)

  3. 显示原型

类/构造函数都一个显示显示原型protype (本质是就是个对象)

  1. 隐式原型

每个实例都有一个隐私原型__proto__

  1. 显与隐关系

类显示原型protype等于其创建的实例的隐式原型__proto__

  1. 原型链

查找对象实例的方法和属性时,先在自身找,找不到则沿着__proto__向上查找,__proto__形成的链条关系我们称为原型链(实现了js继承)

2,原型与原型链的作用

实现了js的继承
实现了实例的公用属性和方法

3,显与隐关系

var arr = [];
arr.proto === Array.prototype

类显示原型protype等于其创建的实例的隐式原型__proto__

4,原型链

在这里插入图片描述

八,js实现继承

1, class 的 extends方法

class Student extends People{
   constructor(name,age,no){
     //类中继承构造函数
     super(name,age)
     ....
   }
}

2,使用原型链

  1. Stuent构造函数中继承People
function Student(name,age,no){
  People.call(this,name,age)
  ....
}

2.继承原型链

Student.prototype = Object.create(People.prototype)
  1. 修正Student构造函数
Stuent.prototype.constructor = Student

九,实例公用方法

所有数组将拥有max方法

Array.prototype.max = function(){
	return Math.max(...this))
}

所有字符串将拥有 reverse 方法

String.prototype.reverse = function(){ 
	return this.split("").reverse().join("")
}

注意:一般不要修改默认对象上的方法,扩展也谨慎

十,闭包

闭包就是能够读取其他函数内部变量的函数
闭包基本上就是一个函数内部返回一个函数

好处

可以读取函数内部的变量
将变量始终保持在内存中
可以封装对象的私有属性和私有方法

坏处

比较耗费内存、使用不当会造成内存溢出的问题

十一,js变量和函数声明的提升

在js中变量和函数的声明会提升到最顶部执行
函数的提升高于变量的提升
函数内部如果用 var 声明了相同名称的外部变量,函数将不再向上寻找
匿名函数不会提升。

十二,箭头函数与普通函数的区别?

箭头函数this指向函数的上一层作用域的this
箭头函数不能作为构造函数,没有constructor

十三,事件流

冒泡流:事件由最具体的元素响应然后组件冒泡到最不具体的元素(html)
捕获流:从最不具体的元素捕获事件
开启捕获 addEventListenter第三个参数 true
阻止事件冒泡:e.stopPropagation()

十四, let 与var的区别

let 不会变量提升,var声明的变量会变量提升
let 不能重复声明 var可重复声明
const 声明必须赋值,值类型的值不能修改

十五,重绘和回流

1,重绘
简单来说就是重新绘画,当给一个元素更换颜色、更换背景,虽然不会影响页面布局,但是颜色或背景变了,就会重新渲染页面,这就是重绘

2,回流
当增加或删除dom节点,或者给元素修改宽高时,会改变页面布局,那么就会重新构造dom树然后再次进行渲染,这就是回流。

总结

重绘不会引起dom结构和页面布局的变化,只是样式的变化,有重绘不一定有回流。
回流则是会引起dom结构和页面布局的变化,有回流就一定有重绘。
不管怎么说都是会影响性能。

十六,防抖和节流

防抖
防抖就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间

节流
节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

十七, this指向问题

构造函数 new 函数名() this执行的 new出来对象的实例
箭头函数的this上一层作用域的this
对象中的this指向对象
事件响应函数的this指向 调用者
setTimout setInterval 里面this指向window
call,apply,bind 响应的函数this指向第一个参数

在这里插入图片描述

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

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

相关文章

好物推荐:文字转语音朗读软件哪个好?

不知道大家有没有像我一样的&#xff0c;对“语音播放”、“语音朗读”是又爱又恨的。有时工作繁忙&#xff0c;而同事或客户发来语音资料需要整理时&#xff0c;就会很烦躁&#xff0c;因为语音的整理起来比文字的繁琐一些。而像有时在家休息&#xff0c;还得看一些资料时&…

亚马逊鲲鹏系统之亚马逊买家号养号时需要注意哪些?

经常做亚马逊测评的朋友应该都清楚&#xff0c;亚马逊买家号养号是很有必要的&#xff0c;如果一个新买家号没有养过号就进行刷单测评&#xff0c;那么是很容易就死号了的。但是想要养好号也不是那么容易的&#xff0c;需要注意好多问题。 第一&#xff1a;养号的重点是号&…

Linux 软连接与硬链接

文件链接概念介绍&#xff1a; 软连接文件&#xff1a; 概念介绍&#xff1a;用于存放指向源文件的路径信息&#xff08;文件快捷方式&#xff09; 应用场景&#xff1a;对于要操作文件数据提供方便 硬链接介绍 硬链接不能跨分区创建 补充&#xff1a; 1.目录硬链接数代…

k8s-List机制及resourceVersion语义

kube-apiserver 核心职责 提供Restful API&#xff1b;代理集群组件&#xff0c;如dashboard、流式日志、kubectl exec 会话&#xff1b;缓存全量的etcd 数据且无状态服务可水平扩展。 kube-List操作 绝大部分情况下&#xff0c;kube-apiserver 都会直接从本地缓存提供服务&…

MybatisX插件 逆向工程

MybatisX插件 逆向工程 目录MybatisX插件 逆向工程安装插件使用插件安装插件 File->Settings->Plugins 使用插件 点击DataSource->点击“” 点击DataSource->点击MySQL 驱动选择MySQL for 5.1 输入主机IP、端口号、数据库的用户名和密码->点击Test Connec…

浅谈系统架构设计-从架构设计原理、架构设计原则、架构设计方法展开

我们工作中一直强调要做架构设计、系分&#xff0c;最近前端同学在追求前端质量提升的时候&#xff0c;也在进行架构设计、前端系分的推广&#xff0c;那到底什么是架构设计和系分&#xff1f;该怎么做架构设计和系分&#xff1f;本文尝试对架构设计进行全面的介绍和分享&#…

【机器学习】SVM入门-硬间隔模型

本站原创文章&#xff0c;转载请说明来自《老饼讲解-机器学习》ml.bbbdata.com 目录 一. SVM的目标和思想 1.1 SVM硬间隔模型的原始目的 1.2 SVM的直接目标 1.3 什么是支持向量 二. SVM的支持平面的表示方式 2.1 支持面表示方式的初步思路 2.2 初步思路的缺陷与改进 2…

基于Vue+ElementUI+MySQL+Express的学生管理系统(2)

2.搭建Express Web服务器 1.在E:\vue\shiyan9路径下创建score-server的文件夹放置Express Web服务器的相关文件。 图3 初始化package.json的信息 2.用Vscode打开score-server。并创建如图4所示的项目结构图。 以下目录中的文件依次为&#xff1a; 考试信息增删改查的接口。…

【BP回归预测】改进的鲸鱼算法优化BP神经网络回归预测(多输入单输出)【含Matlab源码 2184期】

⛄一、鲸鱼算法优化BP神经网络简介 1 鲸鱼优化算法&#xff08;Whale Optimization Algorithm&#xff0c;WOA&#xff09;简介 鲸鱼优化算法(WOA)&#xff0c;该算法模拟了座头鲸的社会行为&#xff0c;并引入了气泡网狩猎策略。 1.1 灵感 鲸鱼被认为是世界上最大的哺乳动物…

DBCO-mPEG,5 kDa,二苯并环辛炔-MPEG, 5 KDA白色结晶状

●外观以及性质&#xff1a; DBCO-mPEG,5 kDa白色结晶状&#xff0c;其的分子量有多种&#xff0c;10kDa&#xff0c;20kDa&#xff0c;30kDa等一系列的。DBCO活化的聚乙二醇化试剂通过无铜“点击化学”反应与叠氮化物反应&#xff0c;形成稳定的三唑&#xff0c;不需要铜催化剂…

evpp mingw64编译过程

evpp是奇虎360的基于libevent的网络通讯库&#xff0c;源代码不错&#xff1a; https://github.com/Qihoo360/evpp/blob/master/readme_cn.md 它提供vs的编译结构&#xff0c;我用的是mingw64cmake&#xff0c;使用gnu12&#xff0c;把修改过程分享给大家。 步骤1. 修改CMake…

软考中级系统集成项目管理工程师自学好不好过?

可以试试&#xff0c;中级系统集成算是比较好考的一科目&#xff0c;每天的通过率都有30%的&#xff01;是软考中通过率比较高的。 至于是否自学&#xff0c;有时间有精力就可以自学&#xff0c;在校生一般学习时间多&#xff0c;可以各个渠道搜集信息资料&#xff0c;可以自学…

高分子PEG点击试剂DBCO-PEG20K-OMe,二苯并环辛炔-PEG20K-甲基

DBCO-PEG20K-OMe​产品描述&#xff1a; DBCO-PEG20K-OMe属于高分子PEG点击试剂&#xff0c;DBCO 试剂是一类点击化学标记试剂&#xff0c;含有非常活泼的 DBCO&#xff08;&#xff08;二苯并环辛炔&#xff09;基团&#xff0c;​DBCO 试剂可以通过无铜点击化学与叠氮化物标…

vscode连接远程服务器进行cmake调试

一、cmake安装 cmake cmake-3.17.4.tar.gz : https://cmake.org/files/v3.17/cmake-3.17.4.tar.gz sudo apt-get install libssl-dev tar xvf cmake-3.17.4.tar.gz cd cmake-3.17.4 ./configure --prefix/usr make -j18 && sudo make install测试 二、配置 准备两…

如何找回删除的文件?数据恢复,看这几个方法

如果您的电脑出现了问题&#xff0c;或者是因为使用不当而删除了一些文件&#xff0c;那么您需要了解一下如何找回删除的文件。想要清理电脑文件数据&#xff0c;很多人会将其直接删除。其实这种做法是不可取的&#xff0c;因为这种做法可能会造成损失。如何找到已经删除的文件…

怎么把开源项目放到自己的github,gitee,gitea上

一、创建仓库&#xff08;大部分可以不填&#xff09; 二、删除.git文件夹 三、执行初始化命令&#xff08;初始出.git文件夹&#xff09; 在本地项目下执行命令 git init 四、与远程仓库建立关系 git remote add origin ssh://gitxx.xx.xx.xx:61022/shengbaitong/inst_ops…

IOC和DI入门案例

IOC案例 创建BookDao接口、BookDaoImpl类和BookService接口、BookServiceImpl类 1.BookDao package dao;public interface BookDao {public void save(); }2.BookDaoImpl类 package dao;public class BookDaoImpl implements BookDao{public void save(){System.out.printl…

Invisible Backdoor Attack with Sample-Specific Triggers 论文笔记

1. 论文信息 论文名称Invisible Backdoor Attack with Sample-Specific Triggers作者Yuezun Li&#xff08;香港大学&#xff09;出版社ICCV 2021pdf在线pdf 本地pdf代码TensorFlow简介提出了 sample-specific 以及 invisible 的 trigger。使用数字水印技术生成看不见的后门 …

MCE | 肿瘤微环境在癌症中的作用

在过去数十年中&#xff0c;通过使用免疫疗法、靶向疗法和联合方案&#xff0c;癌症治疗领域取得了很大的进步。但这些治疗方案中的绝大多数最终都无法治愈患者&#xff0c;甚至对治疗有显著初始反应的肿瘤也经常复发为耐药恶性肿瘤。另一方面&#xff0c;越来越多的证据表明&a…

A-Level经济例题解析及练习Budget Constraint

知识点&#xff1a;Budget Constraint例题 Question: Budget Constraint Hurley’s income: $1200, Prices: PF $4 per fish, PM $1 per mango A. If Hurley spends all his income on fish, how many fish does he buy? B. If Hurley spends all his income on mangos…