[前端面试]javascript

news2024/12/25 4:13:15

js数据类型

简单数据类型
null undefined string number
boolean
bigint 任意精度的大整数
symbol 创建唯一且不变的值,常用来表示对象属性的唯一标识
复杂数据类型
object,数组,函数,正则,日期等
区别

  1. 存储区别
    简单数据类型因为其大小固定且经常使用,存储在栈中
    复杂数据类型因为占据空间太大,大小不固定,存储在堆中,栈中存放指向他的指针
    栈 内存分配效率高,自动管理
    堆 内存分配灵活,需要手动管理

  2. 赋值方式的区别
    复制的是值本身,两个变量互不影响
    复制的是引用,一个变量修改影响其他变量

数据类型检测的方式

  1. typeof
    检查原始类型 返回类型字符串
    null 比较特殊检查返回object
    检查引用类型时,返回object,除了function返回’function’
  2. instance of
    (检查当前类型是否在当前实例的原型链上)
    检查引用类型 返回布尔值
  3. object prototype tostring call
    适用于所有类型的判断检测, 返回的是该数据类型的字符串。

判断数组

  1. instance of
  2. Array.isArray
  3. Object.prototype.toString.call()

== 与 === 的区别

1)当两边类型不一致,类型转换后比较相等

2)不进行类型转化,不止比较值相等,还比较类型是否相等

null 与 undefinded的区别

  1. 类型检查区别
    type of检查null 返回object
  2. 比较操作区别
    == 比较两个会认为相等,都表示没有值
    === 比较不相等,因为是不同类型
  3. 变量赋值区别
    undefined是js引擎自动赋予未赋值变量,当定义未初始化是变量的值为undefined
    null是开发者手动显示赋值表示变量没有值

变量提升

what:
变量提升是指JS的变量和函数声明会在代码编译期,提升到用域顶部
如此可以在实际声明代码位置之前使用变量
how

  1. 变量提升成立的前提:
    使用Var关键字进行声明的变量,声明被提升,赋值不会被提升
  2. 函数的声明提升:
    使用function声明,会比变量的提升优先。
    函数表达式提升,不可在声明之前调用
//函数声明提升
console.log(myFunction()); // 输出: "Hello, World!"
function myFunction() {
    return "Hello, World!";
}
  
//函数表达式

console.log(myFunction2()); // 报错: myFunction2 is not function

var myFunction2 = function() {

    return "Hello, World2!";

}

  

//变量提升

console.log(myVariable); // 输出: undefined

var myVariable = 10;

why

  • 代码可读性与可维护性下降
  • 潜在bug,使用未初始化的变量可能导致不可预测的问题
    解决
    ES6使用let和const声明的变量是不会创建提升,
    在初始化之前访问let和const创建的变量会报错。

作用域与作用域链

变量的作用范围

  1. 全局作用域

    最外层作用域,

  2. 函数作用域

    在函数内部声明的变量只在函数内部可见

  3. 块级作用域

    使用let/const 声明的变量,作用域只在定义的代码块内

作用域链是当变量在当前作用域无法找到的时候,js会一层一层向外寻找,直到找到变量或到达全局作用域,这种层级关系就是作用域链

词法作用域
作用域在定义的时候确定
不在运行时确定
js采取的是静态作用域,函数的作用域在函数定义的时候就确定了,在取自由变量的值的时候,要到创建当前函数的作用域去取,而不是调用函数时的作用域

立即执行函数表达式

立即调用匿名函数来创建一个新的作用域,避免污染全局作用域

用来封装独立的代码模块

说一说你对执行上下文的理解

代码在执行时所处的上下文环境

包括了代码在运行时能够访问的变量对象,作用域链,和this值

  1. 全局上下文

    默认执行上下文,当js代码开始执行,全局上下文被创建,this指向全局对象

  2. 函数执行上下文

    每调用一个函数都会创建一个函数上下文,可以被嵌套

  3. Eval执行上下文

上下文内容

  • 变量对象

      包含函数所有的形参,内部变量,函数声明
    
      对于函数上下文,它被称为活动对象
    
  • 作用域链

      包含当前上下文的变量对象+所有父级上下文的变量对象
    
  • this值

      全局上下文,指向全局对象
    
      函数上下文,this的值取决于函数调用方式
    

上下文生命周期

  • 创建阶段

    • 创建变量对象:包括函数参数,函数声明,变量声明(不会立刻赋值)

    • 创建作用域:形成作用域,与当前上下文相连

    • 确定this:根据调用位置,确定上下文的this

  • 执行阶段

    • 变量分配:变量赋值,函数引用开始执行

    • 执行代码:根据代码逻辑逐行执行

简单说js的闭包

一个函数,引用了另一个函数作用域中变量
也就是说能够从外部访问函数内部的变量
用于隐藏与封装

问题
垃圾回收器不会将闭包中变量销毁,于是就造成了内存泄露,内存泄露积累多了就容易导致内存溢出。

解释一下什么是原型与原型链

1)每个js对象都有一个内部属性_proto_,

指向一个对象—-原型对象,可以从原型对象上继承属性与方法

2)原型对象也是对象也有_proto_,指向自己的原型对象,

这样相互关联的原型对象形成的链式结构构成原型链

构造函数

构造函数有一个prototype属性指向原型对象
原型对象有constructor属性 指向构造函数

遍历对象属性的方法有哪些

1)获取对象自身属性(不包含原型链)

返回值是属性数组
  • Object.keys() //返回对象自身可枚举属性

  • Object.getOwnPropertyNames() //返回对象自身所有属性(不包含Symbol属性)

  • Object.getOwnPropertySymbols()//获取对象自身Symbol属性
  • Reflect.ownKeys()//获取对象自身所有属性,包括字符串与Symbol属性

2)获取对象自身属性以及原型链继承的属性

  • for……in
  • Object.hasOwnProperty() 判断是否是对象自身属性

new过程发生了什么

  1. 创建一个空对象 {}

  2. 将这个新对象的_proto_属性指向构造函数的原型对象

  3. 将构造函数的this绑定到新对象,并执行构造函数中的代码

  4. 如果一个构造函数返回了一个对象,那么new 表达式最后返回这个对象,否则返回新创建的对象

call/apply/bind有什么区别

改变函数运行时的this指向

  1. 执行时机不同

    call/apply 立即执行

    bind 返回新函数,手动调用新函数执行

  2. 传参方式不同

    call 第一个参数 this的值,参数2,参数3,………

    apply 第一个参数 this的值,[参数1,参数2,……]

    bind 第一个参数 this的值,参数作为新函数的参数

  3. 修改this性质

    call/apply 临时修改this指向

    bind 永久修改this指向

this绑定的规则

1)普通函数
this 指向函数的调用者,是动态的
2)箭头函数
所处上下文的this,保持不变

箭头函数与普通函数的区别

箭头函数

没有自己的this
不适用事件绑定,定义对象上的方法

 //this指向问题
    var dog = { lives: 20, jumps: () => { this.lives--; } }

    dog.jumps();

    console.log(dog.lives); // 20

    // this指向的是window对象,无法切换

    var button = document.querySelector('button');

    button.addEventListener('click', () => { this.classList.toggle('on'); });

继承的实现方式

  1. 原型链继承
    所有实例共享父类的属性。修改子类可能影响所有的实例
  2. 构造函数继承
    子类构造函数中调用父类构造函数,子类便可继承父类的属性
    不能继承父类的原型方法
  3. 组合继承
    调用父类构造函数继承属性
    通过原型链继承方法
    调用两次父类构造函数开销较大
  4. 寄生组合继承
    在组合继承的基础上
    通过原型链继承方法时使用
    Object.create(Coder.prototype)
  5. class语法
    extends/super关键字

深拷贝与浅拷贝实现方式

浅拷贝

  1. 拷贝的是普通类型,拷贝值
  2. 拷贝的是对象类型,拷贝地址(修改其中一个,会影响另外一个,两个对象指向同一份地址空间)
    在这里插入图片描述

深拷贝

  1. 拷贝的是普通类型,拷贝值
  2. 拷贝的是对象类型,新建地址,复制原始地址中的值,放入新的地址中(修改不会影响原始对象)
    在这里插入图片描述

什么是暂时性死区

代码块中使用 letconst 声明变量,
如果尝试在声明之前使用它们,就会抛出 ReferenceError 错误。就形成了暂时性死区

好处
有利于防止在变量尚未初始化之前访问,避免潜在错误

什么是同步与异步,js异步解决方案

  • 同步:
    指令按顺序指向,上一条指令未完成,下一条指令只能一直等待
  • 异步:
    类似系统中断,在上一条指令执行期间,可以执行下一条指令
  • js异步方案:
    回调函数/promise/async,await

对事件循环的理解

事件循环是js的一个执行机制,用于实现异步、非阻塞编程的操作。

在一个事件循环中,程序会不断地检查事件队列,如果有新事件到达,就会触发相应处理程序的回调函数来执行。允许程序在等待 I/O 操作完成的同时继续执行其他任务,而不会阻塞整个进程。

举个生活中的例子,老师要收整个班级的作业,可以找一位课代表,课代表 每小时 循环检查所有同学交的作业情况,如果发现有新的提交,就通知老师批改。这样老师就不用一直等着学生完成作业(I / O 操作),不去做其他的事情。
在这里插入图片描述

宏任务与微任务

在任务队列中,分为宏任务队列(Task Queue)微任务队列(Microtask Queue),对应的里面存放的就是宏任务微任务

异步任务优先级
如果异步任务的优先级不区分,按照队列先进先出的机制,如果前一个任务耗时长,会影响后续任务

耗时长的异步任务放入宏任务队列
耗时短的异步任务放入微任务队列

  • 宏任务:DOM 渲染后触发,如 setTimeoutsetIntervalDOM 事件script
  • 微任务:DOM 渲染前触发,如 Promise.thenMutationObserver 、Node 环境下的 process.nextTick

Promise,以及常见方法

Promise 是 JavaScript 中用于处理异步操作的一种对象。它代表了一个尚未完成但承诺会在未来某个时候完成的操作,并允许你在操作完成前注册回调函数。

  • 三个状态 pending fuilied rejected
  • 原型上的方法 then catch finnaly
  • Promise类上的静态方法
    Promise.all/allSettled/race/any/resovle/reject

async 与await关键字作用

async/await 是基于Promises的语法糖
async函数返回一个Promise,
await表达式会暂停async函数的执行并等待Promise解决,然后恢复async函数的执行

这样一来就可以控制异步任务的执行顺序,
当后一个任务需要前一个任务的结果时就非常方便

proxy 与 Object.defineProperty

js中用于实现数据拦截和响应式处理

  • 灵活性Proxy 更加灵活,因为它可以拦截对象的几乎所有操作,而 Object.defineProperty 只能控制属性的特性。
  • 兼容性Object.defineProperty 在 ES5 中就已经存在,因此在兼容性方面可能更胜一筹。
  • 性能:在某些情况下,Proxy 的性能可能不如 Object.defineProperty,因为 Proxy 需要在每次操作时都进行拦截和处理。
  • 适用场景Proxy 更适合需要动态改变对象行为或进行复杂操作拦截的场景,而 Object.defineProperty 则更适合对属性进行精确控制的场景。

map与普通对象,WeakMap的区别

Map 和 WeakMap 都是键值对的集合

  1. 键的类型
    • Map的键可以是任何数据类型。
    • WeakMap的键只能是对象(原始数据类型如字符串、数字不能作为WeakMap的键)。
  2. 引用类型
    • Map对键是强引用。这意味着只要Map存在,其中的键就不会被垃圾回收器回收(除非显式地删除它们)。
    • WeakMap对键是弱引用。如果键不再被其他对象引用(即它是不可达的),那么垃圾回收器可以随时回收它,同时WeakMap中对应的键值对也会自动消失。这个特性使得WeakMap非常适合用于缓存等场景,因为它不会阻止垃圾回收器回收不再使用的对象。
  3. 遍历性
    • Map是可遍历的。它提供了keys()values()entries()forEach()等方法来遍历Map中的键值对。
    • WeakMap是不可遍历的。WeakMap 没有内置的迭代器,因此不能直接遍历键值对。

Map与普通对象的区别

  1. 键的类型
    • Map对象的键可以是任何数据类型,包括原始数据类型(如字符串、数字)和对象。
    • 普通对象的键只能是字符串或Symbol类型。如果你尝试使用其他类型的值作为键,它们会被自动转换为字符串(例如,数字会被转换为字符串形式的数字)。
  2. 键的顺序
    • Map对象保持键值对的插入顺序。
    • 普通对象不保证键值对的顺序。在不同的JavaScript引擎中,对象的属性顺序可能会有所不同,甚至在同一引擎的不同版本中也可能有所不同。
  3. 方法
    • Map对象提供了一些特殊的方法,如size属性(返回Map中键值对的数量)、forEach()方法(遍历Map中的每个键值对)等。
    • 普通对象使用点语法或方括号语法来访问和操作键值对,没有提供像size这样的内置属性来获取键值对的数量(需要手动计算)。
  4. 性能
    • 在大多数情况下,Map和对象的性能是相似的。然而,在频繁添加和删除键值对的情况下,Map可能会表现出更好的性能,因为它的内部实现是基于哈希表的。

for,foreach,map的区别/for in,for of

forEach是数组的一个方法,用于遍历数组中的每个元素,并对每个元素执行一个提供的函数。
map也是数组的一个方法,它创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
for...in循环用于遍历对象的可枚举属性(包括原型链上的属性)。
for...of循环用于遍历可迭代对象(如数组、字符串、Set、Map等)的值。

array.forEach((item, index) => { console.log(item); });
const newArray = array.map(item => item * 2); console.log(newArray);
const obj = {a: 1, b: 2}; for (let key in obj) { console.log(key, obj[key]); }
const array = [1, 2, 3]; for (let value of array) { console.log(value); }

对ComonnJS与ES6模块化理解

1)相同点:
两者都是 JavaScript 的模块化规范,都可以用来导入导出模块。
2)不同点:
ES Module (ESM) 是 ES6 引入的标准化模块系统,支持动态导入,在编译时加载,可以异步加载模块。
export import
CommonJS (CJS) 出现在 ES6 之前,不支持动态导入,在运行时加载,采取的是同步加载模块的方式。
module.exports require

事件流的过程

事件流可以分为三个阶段:事件捕获、目标阶段和事件冒泡。

  1. 事件捕获阶段:事件从最外层的文档节点一直往下传递,直到事件到达事件的目标元素。在这个过程中,事件会经过父节点和祖先节点,直到到达目标节点。如果在这个过程中有事件处理程序,则事件将被调用。
  2. 目标阶段:事件到达了目标元素后,将在目标元素上调用事件处理程序。如果有多个事件处理程序绑定到目标元素上,将按照它们的顺序执行。
  3. 事件冒泡阶段:事件在目标元素上处理后,会从目标元素开始,向上传递回文档节点。在这个过程中,事件也会遇到任何绑定的事件处理程序。

目前有两种事件流模型:

  1. W3C 标准事件模型(DOM2级事件模型):事件流由三个阶段组成:捕获阶段、目标阶段和冒泡阶段。这种事件模型中,事件处理程序的调用顺序与它们注册的顺序相同。
  2. Microsoft 事件模型(IE 事件模型):事件流由两个阶段组成:目标阶段和冒泡阶段。在这个事件模型中,事件处理程序的调用顺序与它们注册的相反。

事件委托

其核心思想是利用事件冒泡机制,将子元素的事件委托到父元素,从而通过一个事件处理程序来管理多个子元素的事件。

具体来说,如果我们有多个子元素都需要响应某个事件(比如点击),与其在每个子元素上绑定事件处理器,不如在它们的父元素上绑定一个事件处理器。当子元素触发事件时,事件会冒泡传递到父元素,由父元素的事件处理程序来处理这个事件。

e.target / e.currentTarget 区别

  • e.target:
    触发事件的元素
  • e.currentTarget
    绑定事件的元素
 <div class="parent">

        <button>click Me</button>

    </div>

  

  <script>

    let parent = document.querySelector('.parent')

    let button = document.querySelector('button')

    parent.addEventListener('click', function(e) {

        console.log("e.target: ", e.target);//e.target:  <button>​click Me​</button>​

        console.log("e.currentTarget: ", e.currentTarget);//e.currentTarget:  <div class=​"parent">​…​</div>​

    })

讲一讲js垃圾回收机制

基于V8引擎,使用标记-清除算法来管理内存

哪些操作会导致内存泄漏

定时器没有被清除
闭包
dom元素引用
循环引用

手写instanceof

防抖与节流实现

ES6新特性,常用那些

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

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

相关文章

[DEBUG] 服务器 CORS 已经允许所有源,仍然有 304 的跨域问题

背景 今天有一台服务器到期了&#xff0c;准备把后端迁移到另一台服务器上&#xff0c;结果前端在测试的时候&#xff0c;出现了 304 的跨域问题。 调试过程中出现的问题&#xff0c;包括但不限于&#xff1a; set the request’s mode to ‘no-cors’Redirect is not allow…

深入理解接口测试:实用指南与最佳实践5.0(五)

✨博客主页&#xff1a; https://blog.csdn.net/m0_63815035?typeblog &#x1f497;《博客内容》&#xff1a;.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 &#x1f4e2;博客专栏&#xff1a; https://blog.csdn.net/m0_63815035/cat…

头歌网络安全(11.12)

头歌禁止复制解决 必须先下篡改猴&#xff01;&#xff01;&#xff01;&#xff01; 头歌复制助手 Educoder Copy Helperhttps://scriptcat.org/zh-CN/script-show-page/1860 Java生成验证码 第1关&#xff1a;使用Servlet生成验证码 任务描述 本关任务&#xff1a;使用se…

项目管理人员的自我评估与职业目标设定

在当今快速发展的商业环境中&#xff0c;项目管理人员的职业规划至关重要。它不仅涉及到个人职业发展的方向、目标和路径选择&#xff0c;还包括如何提升自身的专业技能、管理能力和行业知识。项目管理人员需要明确自己的职业目标、制定合理的职业发展计划、不断学习新知识和技…

关于 MSVCP110.dll 缺失的解决方案

背景&#xff1a;之前使用 PR&#xff08;Adobe Premiere&#xff09; 从来没有遇到过这样的问题。今天重装系统后&#xff08;window 10&#xff09;&#xff0c;想要重新安装以前的软件时&#xff0c;遇到了以下 DLL 文件缺失的错误。 解决方案&#xff1a; 可以到微软官网的…

036集——查询CAD图元属性字段信息:窗体显示(CAD—C#二次开发入门)

提取CAD图元所有属性字段&#xff0c;通过窗体显示&#xff0c;效果如下&#xff1a;&#xff08;curve改为entity&#xff09; 代码如下&#xff1a; public void 属性查询() {List<Curve> ents Z.db.SelectEntities<Curve>();if (ents is null ||ents.Cou…

反转链表

反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示例 3&#xff1…

使用 Ansys Mechanical 中的“螺栓工具”插件导出螺栓反作用力

概括&#xff1a; 对于处理复杂组件和结构的工程师和分析师来说&#xff0c;提高在 Ansys Mechanical 中提取多个螺栓反作用力表格的效率至关重要。在有限元分析 (FEA) 中&#xff0c;准确确定螺栓上的反作用力对于评估机械连接的完整性和性能至关重要。但是&#xff0c;手动提…

《FreeRTOS任务基础知识以及任务创建相关函数》

目录 1.FreeRTOS多任务系统与传统单片机单任务系统的区别 2.FreeRTOS中的任务&#xff08;Task&#xff09;介绍 2.1 任务特性 2.2 FreeRTOS中的任务状态 2.3 FreeRTOS中的任务优先级 2.4 在任务函数中退出 2.5 任务控制块和任务堆栈 2.5.1 任务控制块 2.5.2 任务堆栈…

【HAProxy09】企业级反向代理HAProxy高级功能之压缩功能与后端服务器健康性监测

HAProxy 高级功能 介绍 HAProxy 高级配置及实用案例 压缩功能 对响应给客户端的报文进行压缩&#xff0c;以节省网络带宽&#xff0c;但是会占用部分CPU性能 建议在后端服务器开启压缩功能&#xff0c;而非在HAProxy上开启压缩 注意&#xff1a;默认Ubuntu的包安装nginx开…

Gin 框架入门(GO)-1

解决安装包失败问题&#xff08;*&#xff09; go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.cn,direct 1 介绍 Gin 是一个 Go (Golang) 编写的轻量级 http web 框架&#xff0c;运行速度非常快&#xff0c;Gin 最擅长的就是 Api 接口的高并发。 2 Gin 环境搭建…

前端知识点---this的用法 , this动态绑定(Javascript)

文章目录 this动态绑定 , this的用法01. 全局作用域下的 this02. 函数中的 this2.1 普通函数调用2.2 构造函数调用2.3 箭头函数中的 this 03对象方法调用04. 事件处理中的 this05. 动态绑定的方式5.1 call 方法5.2 apply 方法5.3 bind 方法 06类中的 this07. 总结 this动态绑定…

Unity 跳过启动屏/Logo

使用官方API跳过Unity启动页 1.通过Unity的SplashScreen提供的接口 [Preserve]public class SkipSplash{[RuntimeInitializeOnLoadMethod(RuntimeInitializeLoadType.BeforeSplashScreen)]private static void BeforeSplashScreen(){ #if UNITY_WEBGLApplication.focusChanged…

matplotlib2

第六部分&#xff1a;保存与导出图表 在实际的应用场景中&#xff0c;我们不仅需要在程序中展示图表&#xff0c;有时候还需要将这些图表保存为文件&#xff0c;以便在其他地方使用&#xff0c;比如插入文档、报告或网页中。matplotlib 提供了非常方便的保存图表功能。 6.1 保…

Linux卸载金仓KingBaseES数据库

Linux卸载金仓KingBaseES数据库 1、卸载前删除数据库服务2、图形化卸载3、控制台卸载4、静默卸载 1、卸载前删除数据库服务 如果在安装后执行root.sh脚本在系统中注册了数据库服务&#xff0c;需要在卸载前执行rootuninstall.sh脚本删除已注册的数据库服务。具体步骤如下&#…

【C#设计模式(11)——外观模式(Facade Pattern)】

前言 外观模式隐藏了子系统的复杂性&#xff0c;简化了客户端与子系统之间的交互。 代码 public class Facade{private CommunicationModel communicationModel;private AcquisitionModel acquisitionModel;private ToolModel toolModel;public Facade(){communicationModel n…

Spring Boot编程训练系统:数据管理与存储

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了编程训练系统的开发全过程。通过分析编程训练系统管理的不足&#xff0c;创建了一个计算机管理编程训练系统的方案。文章介绍了编程训练系统的系统分析部分&…

OceanBase 升级过程研究(4.2.1.6-4.2.1.8)

模拟业务 使用benchmark加载10仓数据模拟业务场景 升级方法 使用滚动升级方式来进行OB升级。该方法前提是OB集群必须满足官方规定的高可用架构(如果 Zone 个数小于 3&#xff0c;滚动升级时则无法构成多数派), 滚动升级的原理就是轮流完成每个ZONE的升级工作&#xff0c;由于…

三周精通FastAPI:42 手动运行服务器 - Uvicorn Gunicorn with Uvicorn

官方文档&#xff1a;Server Workers - Gunicorn with Uvicorn - FastAPI 使用 fastapi 运行命令 可以直接使用fastapi run命令来启动FastAPI应用&#xff1a; fastapi run main.py如执行 fastapi run openapi.py启动后显示&#xff1a; INFO Using path openapi.py …

springboot的社区团购系统设计录像

springboot的社区团购系统设计录像 springboot的社区团购系统设计