首页 > 其他分享 >原生js面试题

原生js面试题

时间:2023-10-09 14:36:28浏览次数:32  
标签:原生 闭包 面试题 obj 对象 js 原型 __ 拷贝

一、深拷贝和浅拷贝
  - 1 js的数据类型 基本类型和复杂类型
  - 2 堆和栈 基本类型的值和复杂类型的地址存在栈中,复杂类型的地址指向堆中的内存
  - 3 深拷贝和浅拷贝的概念 深拷贝的前提是复杂类型的复制

  - 4 举例说明
  如果有个变量a和一个变量b 如果a是一个对象 此时let b = a a中的属性发生变化
  则b中的属性也会发生变化,原因是因为赋值的过程中他们a,b都
  指向堆中同一块内存空间,因此他们的属性会一起改变,这就是一个浅拷贝的过程
  深拷贝就是使得a和b指向不同的内存空间 互不影响

  - 5 实现方式
  通常我在开发中一般使用json.stringify 去将对象转为字符串 再通过json.parse
  转为对象 这样实现一个简单的深拷贝,但是这个有一定的缺陷(什么缺陷?),所以
  在特定情况下我会自己封装一个深拷贝的函数完成深拷贝!

var deepClone = function(obj) {
  if (typeof obj !== 'object') return;
  var newObj = obj instanceof Array ? [] : {};
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) :
      obj[key];
    }
  }
  return newObj;
}

  

二、原型\原型链\构造函数

  显式原型:prototype

  隐式原型:__proto__

  - 1 构造函数才有显式原型 String.prototype 对 str.prototype错!
  let str; //没有原型
  let str = new String()

  - 2 原型本质上是个对象

  - 3 构造函数(constructor)其实就是new关键字后面那个函数

  - 4 只有对象才有隐式原型(__proto__)

  - 5 普通对象的隐式原型(__proto__)等于构造函数的显示原型(prototype),普通对象就可以调用构造函数的
  原型方法,原型本质上是个对象,只要是对象就会有隐式原型,如果一个__proto__找不到需要的原型方法他可以
  一直向上找,直到为null为止,这个形成的就称为原型链

 

三、promise

  - 1 Promise是一个构造函数(class) 生成promise的实例对象用来解决异步
  - 2 Promise 是一个只要存在就有结果 状态有三个 resolve成功 reject失败 pending 等待
  - 3 可以解决传统的异步编程嵌套太多带来的回调地狱的问题 可以使用链式调用以同步的方式呈现
  - 4 通常可以使用Promise对一些异步编程进行封装
  有些Promise内置的函数可以提供相应的扩展 如.all的方法可以使得发送多个请求

 

四、宏任务和微任务

  -1  js 代码的执行顺序是按照代码书写的先后顺序执行的
  -2 如果代码出现阻塞或者代码运行时间过长怎么办?
  -3 如果发生异步请求,等待异步结果返回再接着执行

  在js中任务分为宏任务和微任务,分别各自维护一个队列
  均采用先进先出的原则,***同步的任务在宏任务上执行!!!***

    宏任务:script中代码,setTimeout,setInterval,

    微任务:Promise.then(),process.nextTick()-node环境中

 

五、事件循环机制(eventloop)
  -1 先从宏任务中的头部取出一个任务执行
  -2 执行过程中如果遇到微任务怎将其添加到微任务的列表中
  -3 宏任务执行完毕以后看微任务队列中是否存在任务如果存在则挨个执行,直到全部执行完毕
  -4 渲染页面(GUI渲染)
  -5 回到第一步直到宏任务全部执行完毕

 

六、闭包(简单说下闭包?你了解闭包? )

  闭包的概念:函数嵌套函数且在内部函数中可以访问外部函数作用域中的变量就称为闭包.
  首先,js中的作用域分为全局作用域和局部作用域,全局作用域任何地方都可以访问,

  但是局部作用域只能在局部或者函数内部才可以访问.

  然后,有时候需要得到函数内的局部变量,但是在正常情况下,这是不能读取到的,这时候就需要用到闭包.


  ①闭包形成的条件
    1.函数嵌套
    2.内部函数引用外部函数的变量

  ②闭包的使用场景
    1.防抖和节流
    2.延长的变量的生命周期


  闭包的优缺点去谈垃圾回收机制
  // GC 垃圾回收机制 js在运行的过程中如有不用的变量或者用完的变量会被回收
  JavaScript中的垃圾回收机制主要有两种:
    标记清除算法(Mark-and-Sweep)和引用计数(Reference Counting)。
  标记清除是JavaScript中主流的垃圾回收算法,而引用计数则已经很少被使用。

  实现标记清除(Mark-and-Sweep)算法的主要步骤如下:

    -1 创建一个根对象,例如window对象;
    -2 遍历根对象及其所有引用的对象,并标记它们是可达对象;
    -3 遍历内存中所有对象,如果发现某个对象未被标记,就将其清除。
    -4 在JavaScript中,标记清除算法是由浏览器自动完成的,开发者无需手动实现。

 

七、防抖、节流

  -1 防抖:在一段时间内如果再次触发,则会重新计时,直到你不触发,展示最后一次触发的事件

let debounce = function (handler,delay) {
    let timer=null;
    return function () {
        if(timer) clearTimeout(timer);
        timer = setTimeout(()=>{
            fn.apply(this,arguments)
        },delay)
    }
}

  

  -2 节流:在一段时间内只能触发一次,如果重复触发不管用只有等时间过完才会再触发

let throttle = function(handler,delay) {
    let timer = null;
    return function () {
        if(timer) return;
        timer = setTimeout(() => {
            fn.apply(this,arguments)
            timer = null
        })
    }
}

  

  应用场景:
    ①防抖:
      search搜索联想,用户在不断输入值时,用防抖来减少http请求,提升性能
      window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次

    ②节流:
      鼠标不断点击触发,mousedown(单位时间内只触发一次)
      监听滚动事件,比如是否滑到底部自动加载更多

 

标签:原生,闭包,面试题,obj,对象,js,原型,__,拷贝
From: https://www.cnblogs.com/persistIn/p/17751651.html

相关文章

  • HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Stack
    堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。该组件从APIVersion7开始支持。可以包含子组件。一、接口Stack(value?:{alignContent?:Alignment})从APIversion9开始,该接口支持在ArkTS卡片中使用。二、属性除支持通用属性外,还支持以下属性:三、示例//xxx.e......
  • js实现文件分片上传
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>文件分片上传</title></head&......
  • js函数,js对象
    1定义一个函数21.functionfuctionName(参数1,参数2){3//要执行的代码4return要返回的结果5}6782.varfunctionName=function(a,b)91011ES6箭头函数:(...)=>{...}12arr.forEach((e)=>{13console.log(e);14})基础对象模......
  • WebForm后端调用前端JS
    /*注意:定义的js方法一定要放在head里面,不能放下面,否则不生效*/<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs"Inherits="WebFormBackEndCallFrontJsDemo.WebForm1"%><!DOCTYPEhtml><htmlxmlns=&qu......
  • js实现分片上传文件
    <template><div><inputtype="file"@change="fileEvent"/></div></template><script>importaxiosfrom"axios";exportdefault{data(){return{size:1*......
  • 云原生周刊:Docker 推出 Docker Debug | 2023.10.9
    开源项目推荐SchemaHeroSchemaHero是一个KubernetesOperator,用于各种数据库的声明式架构管理。SchemaHero有以下目标:数据库表模式可以表示为可以部署到集群的Kubernetes资源。可以编辑数据库模式并将其部署到集群。SchemaHero将计算所需的更改(ALTERTABLE语句)并应用......
  • 【webapp】jsp EL 的基本语法和用法
    EL(表达式语言)是用于在JSP页面中访问和操作数据的简洁表达式语言。EL提供了一种简化和统一的方式来访问变量、属性、集合和其他对象。以下是EL的基本语法和用法:基本语法:${expression}:用于在JSP页面中嵌入EL表达式。${object.property}:访问对象的属性。${map.key}:访......
  • 【webapp】jsp 操作数据库
    在JSP中连接和操作数据库需要使用Java的JDBC(JavaDatabaseConnectivity)API。下面是学习在JSP中使用JDBC连接和操作数据库的基本步骤:导入JDBC驱动程序:下载并导入适合您所使用的数据库的JDBC驱动程序JAR文件。不同的数据库有不同的驱动程序。将JDBC驱动程......
  • 【webapp】在 JSP 页面中引入标签库和使用自定义标签
    自定义标签的基本步骤:创建自定义标签库文件:首先,您需要创建一个包含自定义标签定义的标签库文件(通常以 .tld 扩展名结尾)。该文件描述了标签的名称、属性和处理逻辑。引入标签库:在JSP页面中,通过使用 <%@taglib%> 指令来引入自定义标签库。该指令告诉JSP引擎在页面中......
  • js数组转字符串方法(转)
    JavaScript 允许数组与字符串之间相互转换。其中Array 方法对象定义了3 个方法,可以把数组转换为字符串,如表所示。数组方法说明toString()将数组转换成一个字符串toLocalString()把数组转换成本地约定的字符串join()将数组元素连接起来以构建一个字符串......