【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等

这篇具有很好参考价值的文章主要介绍了【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

博主主页👉🏻蜡笔雏田学代码
专栏链接👉🏻【前端面试专栏】
今天继续学习前端面试题相关的知识!
感兴趣的小伙伴一起来看看吧~🤞

深拷贝箭头函数和普通函数,验证,前端面试,前端,javascript,面试

什么是事件监听

addEventListener()方法,用于向指定元素添加事件句柄,它可以更简单的控制事件。语
法为:

element.addEventListener(event, function, useCapture);
  1. 第一个参数是事件的类型(如 “click” 或 “mousedown”)。
  2. 第二个参数是事件触发后调用的函数
  3. 第三个参数是布尔值,用于描述事件是冒泡还是捕获。(该参数是可选的。)

事件传递有两种方式:冒泡捕获
事件传递定义了元素事件触发的顺序,如果你将 P 元素插入到 div 元素中,用户点击 P元素,在冒泡中,内部元素先被触发,然后再触发外部元素,在捕获中,外部元素先被触发,再触发内部元素。

事件委托以及冒泡原理

  • 事件委托是利用冒泡阶段的运行机制来实现的,就是把一个元素响应事件的函数委托到另一个元素,一般是把一组元素的事件委托到他的父元素上,委托的优点是减少内存消耗,节约效率,动态绑定事件
  • 事件冒泡就是元素自身的事件被触发后,如果父元素有相同的事件,如 onClick 事件,那么元素本身的触发状态就会传递,也就是冒到父元素,父元素的相同事件也会一级一级根据嵌套关系向外触发,直到 document/window,冒泡过程结束。

介绍一下 promise,及其底层如何实现

Promise 是一个对象,保存着未来将要结束的事件,有两个特征:

  1. 对象的状态不受外部影响,Promise 对象代表一个异步操作,有三种状态,pending:进行中,fulfilled:已成功,rejected:已失败,只有异步操作的结果,才可以决定当前是哪一种状态,任何其他操作都无法改变这个状态,这也就是 promise 名字的由来。
  2. 一旦状态改变,就不会再变,promise 对象状态改变只有两种可能:从 pending 到fulfilled 或者从 pending 到 rejected,只要这两种情况发生,状态就凝固了,不会再改变,这个时候就称为定型 resolved。

Promise 的基本用法

let promise1 = new Promise(function(resolve,reject){
	setTimeout(function(){
		resolve('ok')
	},1000)
})
promise1.then(function success(val){
	console.log(val)
})

深浅拷贝的区别

浅拷贝

只是复制指向某个对象的指针,而不是复制对象的本身,新旧对象还是共享同一块内存,修改新对象会改变原对象。(拷贝指向对象的指针)
如果是数组,我们可以利用数组的一些方法,比如 slice,concat 方法返回一个新数组的特性来实现拷贝,但假如数组嵌套了对象或者数组的话,使用 concat 方法克隆并不完整,如果数组元素是基本类型,就会拷贝一份,互不影响,而如果是对象或数组,就会只拷贝对象和数组的引用,这样我们无论在新旧数组进行了修改,两者都会发生变化,我们把这种复制引用的拷贝方法称为浅拷贝

深拷贝

会创造另外一个一模一样的对象,即使嵌套了对象,两者也互相分离(把这个对象原封不动地再copy出新的一份,和原对象互不相干),新对象和原对象不共享同一块内存,修改新对象不会修改原对象。(拷贝对象)

如何深拷贝一个数组
这里介绍一个技巧,不仅适用于数组还适用于对象!

var arr = ['old', 1, true, ['old1', 'old2'], { old: 1 }]
console.log(JSON.stringify(arr))   //["old",1,true,["old1","old2"],{"old":1}]
var new_arr = JSON.parse(JSON.stringify(arr));
console.log(new_arr); //['old', 1, true, ['old1', 'old2'], { old: 1 }]

原理是 JOSN 对象中的 stringify 可以把一个 js 对象序列化为一个 JSON 字符串parse 可以把 JSON 字符串反序列化为一个 js 对象,通过这两个方法,也可以实现对象的深复制。但是这个方法不能够拷贝函数。

let、const、var的区别

  1. var 声明的变量是全局或者整个函数块的,而 let,const 声明的变量是块级的变量
  2. var 声明的变量存在变量提升,let,const 不存在。
  3. let 声明的变量允许重新赋值,const 不允许。

ES6 箭头函数的特性

ES6 增加了箭头函数,基本语法为:

let func = value => value;
相当于
let func = function (value) {
return value;
};

箭头函数与普通函数的区别在于:

  1. 箭头函数没有 this,所以需要通过查找作用域链来确定 this 的值,这就意味着如果箭头函数被非箭头函数包含,this 绑定的就是最近一层非箭头函数的 this。
  2. 箭头函数没有自己的 arguments 类数组 对象,但是可以访问外围函数的 arguments 对象。
  3. 不能通过 new 关键字调用,同样也没有 new.target 值和原型。

setTimeout 和 Promise 的执行顺序

首先我们来看这样一道题:

setTimeout(function () {
      console.log(1)
    }, 0);
    new Promise(function (resolve, reject) {
      console.log(2)
      for (var i = 0; i < 10000; i++) {
        if (i === 10) { console.log(10) }
        i == 9999 && resolve();
      }
      console.log(3)
    }).then(function () {
      console.log(4)
    })
    console.log(5);

 //打印结果:2 10 3 5 4 1

要先弄清楚 setTimeout(function,0)何时执行,Promise 何时执行,then 何时执行。

  • setTimeout 这种异步操作的回调,只有主线程中没有执行任何同步代码的前提下,才会执行异步回调,而setTimeout(fun,0)表示立刻执行,也就是用来改变任务的执行顺序要求浏览器尽可能快的进行回调
  • Promise 何时执行:Promise 新建后立即执行,所以 Promise 构造函数里代码同步执行的。
  • then 方法指向的回调将在当前脚本所有同步任务执行完成后执行
    那么 then 为什么比 settimeout 执行的早呢?
    因为 settimeout(fun,0)不是真的立即执行,经过测试得出结论:执行顺序为:同步执行的代码 => Promise.then => setTimeout

今天的分享就到这里啦✨ \textcolor{red}{今天的分享就到这里啦✨} 今天的分享就到这里啦

原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下

🤞 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!
文章来源地址https://www.toymoban.com/news/detail-806002.html

到了这里,关于【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端面试的话术集锦第 5 篇:高频考点( 类型转换 & 深浅拷贝 & 模块化机制等)

    这是记录 前端面试的话术集锦第五篇博文——高频考点(类型转换 深浅拷贝 模块化机制等) ,我会不断更新该博文。❗❗❗ typeof 对于原始类型来说,除了 null 都可以显示正确的类型:

    2024年02月09日
    浏览(54)
  • 深浅拷贝,类型检测及继承面试题

    基本类型:基本类型的值存在栈内存中 引用类型: 引用类型的地址存储在栈内存中,他的值存储在堆内存中,通过指针(地址)连接 基本类型:基本类型拷贝的是值 引用类型:引用类型拷贝的是变量的地址,会造成数据共享问题 基本类型: 基本类型传递的是值 引用类型:

    2024年02月02日
    浏览(32)
  • 〖大前端 - 基础入门三大核心之JS篇㊿〗- 面向对象之对象的方法、遍历、深浅克隆

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超级个体得主、谷

    2024年02月04日
    浏览(72)
  • 前端面试宝典~Symbol、相同的Set、Getter、控制动画、js中哪些操作会造成内存泄漏?等......

    html页面的骨架,相当于人的骨头,只有骨头是不是看着有点瘆人,只有HTML也是如此。 css,相当于把骨架修饰起来,相当于人的皮肉。 js(javascripts),动起来,相当于人的血液,大脑等一切能使人动起来的器官或者其他的。 在刷题之前先介绍一下牛客。Leetcode有的刷题牛客都有,

    2024年01月20日
    浏览(45)
  • 前端常见面试题之js基础(手写深拷贝、原型和原型链、作用域和闭包)

    值类型包括 :字符串(string)、数字(number)、布尔值(boolean)、undefined。 引用类型包括 :对象(object)、数组(array)、函数(function)和null。 二者的区别 当你将一个值类型赋给另一个变量时,会复制该值的副本。而当你将一个引用类型赋给另一个变量时,只会复制对

    2024年01月22日
    浏览(47)
  • web前端面试-- js深拷贝的一些bug,特殊对象属性(RegExp,Date,Error,Symbol,Function)处理,循环引用weekmap处理

    本人是一个web前端开发工程师,主要是vue框架,整理了一些面试题,今后也会一直更新,有好题目的同学欢迎评论区分享 ;-) web面试题专栏:点击此处 在JavaScript中,深拷贝和浅拷贝是两种不同的对象复制方式。 浅拷贝是指将一个对象的引用复制给另一个对象,这意味着两个

    2024年02月07日
    浏览(43)
  • python的深浅拷贝

    copy函数是浅拷贝,只对可变类型的第一层对象进行拷贝,对拷贝的对象开辟新的内存空间进行存储,不会拷贝对象内部的子对象。对于不可变对象而言,浅拷贝只是引用赋值。 deepcopy函数是深拷贝,对于可变类型,深拷贝是逐层进行拷贝。对于不可变类型而言,也是引用赋值

    2024年02月12日
    浏览(31)
  • 浅析深浅拷贝

           我们在对对象进行复制时就用到深浅拷贝。 一、普通复制 控制台打印结果:               之所以我们要用到拷贝,是因为直接赋值的复制可能不能满足我们的需求。向上面代码所展示的,我们复制代码时,复制到的是 地址 ,所以对 复制体修改实际修改的是原对

    2024年02月12日
    浏览(30)
  • 深浅拷贝、函数

    普通函数 1、函数的定义与特性 2、函数的创建 3、函数的参数 4、函数的返回值 5、可变与不可变数据类型 6、作用域 递归函数 匿名函数 高级函数 装饰器 1、闭包 2、装饰器 3、装饰器之登录练习 列表生成式 1、列表推导式的概念 2、基本的使用方式 3、在循环的过程中使用i

    2024年02月03日
    浏览(33)
  • JavaScript深浅拷贝

    1. js浅拷贝只是创建了一个新的对象,复制了原有对象的基本类型的值。 手写实现  2. 深拷贝的原理和实现 将一个对象从内存中完整地拷贝出来一份给目标对象,并从堆内存中开辟一个全新的空间存放新的对象,且新对象的修改并不会改变原对象,二者实现真正的分离

    2024年01月18日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包