成都市住房和城乡建设局网站,wordpress建站收录快,福州建设工程招投标信息网,宁波优质网站制作哪家好前言 博主主页#x1f449;#x1f3fb;蜡笔雏田学代码 专栏链接#x1f449;#x1f3fb;【前端面试专栏】 今天继续学习前端面试题相关的知识#xff01; 感兴趣的小伙伴一起来看看吧~#x1f91e; 文章目录 什么是事件监听事件委托以及冒泡原理介绍一下 promise#…前言 博主主页蜡笔雏田学代码 专栏链接【前端面试专栏】 今天继续学习前端面试题相关的知识 感兴趣的小伙伴一起来看看吧~ 文章目录 什么是事件监听事件委托以及冒泡原理介绍一下 promise及其底层如何实现Promise 的基本用法 深浅拷贝的区别浅拷贝深拷贝 let、const、var的区别ES6 箭头函数的特性setTimeout 和 Promise 的执行顺序 什么是事件监听
addEventListener()方法用于向指定元素添加事件句柄它可以更简单的控制事件。语 法为
element.addEventListener(event, function, useCapture);第一个参数是事件的类型(如 “click” 或 “mousedown”)。第二个参数是事件触发后调用的函数。第三个参数是布尔值用于描述事件是冒泡还是捕获。(该参数是可选的。) 事件传递有两种方式冒泡和捕获。 事件传递定义了元素事件触发的顺序如果你将 P 元素插入到 div 元素中用户点击 P元素在冒泡中内部元素先被触发然后再触发外部元素在捕获中外部元素先被触发再触发内部元素。 事件委托以及冒泡原理 事件委托是利用冒泡阶段的运行机制来实现的就是把一个元素响应事件的函数委托到另一个元素一般是把一组元素的事件委托到他的父元素上委托的优点是减少内存消耗节约效率动态绑定事件。事件冒泡就是元素自身的事件被触发后如果父元素有相同的事件如 onClick 事件那么元素本身的触发状态就会传递也就是冒到父元素父元素的相同事件也会一级一级根据嵌套关系向外触发直到 document/window冒泡过程结束。 介绍一下 promise及其底层如何实现
Promise 是一个对象保存着未来将要结束的事件有两个特征 对象的状态不受外部影响Promise 对象代表一个异步操作有三种状态pending进行中fulfilled已成功rejected已失败只有异步操作的结果才可以决定当前是哪一种状态任何其他操作都无法改变这个状态这也就是 promise 名字的由来。一旦状态改变就不会再变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)
})深浅拷贝的区别
浅拷贝
只是复制指向某个对象的指针而不是复制对象的本身新旧对象还是共享同一块内存修改新对象会改变原对象。拷贝指向对象的指针 如果是数组我们可以利用数组的一些方法比如 sliceconcat 方法返回一个新数组的特性来实现拷贝但假如数组嵌套了对象或者数组的话使用 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的区别
var 声明的变量是全局或者整个函数块的而 letconst 声明的变量是块级的变量。var 声明的变量存在变量提升let,const 不存在。let 声明的变量允许重新赋值const 不允许。
ES6 箭头函数的特性
ES6 增加了箭头函数基本语法为
let func value value;
相当于
let func function (value) {
return value;
};箭头函数与普通函数的区别在于 箭头函数没有 this所以需要通过查找作用域链来确定 this 的值这就意味着如果箭头函数被非箭头函数包含this 绑定的就是最近一层非箭头函数的 this。箭头函数没有自己的 arguments 类数组 对象但是可以访问外围函数的 arguments 对象。不能通过 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要先弄清楚 setTimeoutfunction0何时执行Promise 何时执行then 何时执行。 setTimeout 这种异步操作的回调只有主线程中没有执行任何同步代码的前提下才会执行异步回调而setTimeoutfun,0表示立刻执行也就是用来改变任务的执行顺序要求浏览器尽可能快的进行回调。Promise 何时执行Promise 新建后立即执行所以 Promise 构造函数里代码同步执行的。then 方法指向的回调将在当前脚本所有同步任务执行完成后执行。 那么 then 为什么比 settimeout 执行的早呢? 因为 settimeoutfun,0不是真的立即执行经过测试得出结论执行顺序为同步执行的代码 Promise.then setTimeout 今天的分享就到这里啦✨ \textcolor{red}{今天的分享就到这里啦✨} 今天的分享就到这里啦✨ 原创不易还希望各位大佬支持一下 \textcolor{blue}{原创不易还希望各位大佬支持一下} 原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力 \textcolor{green}{点赞你的认可是我创作的动力} 点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向 \textcolor{green}{收藏你的青睐是我努力的方向} 收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富 \textcolor{green}{评论你的意见是我进步的财富} 评论你的意见是我进步的财富
