为什么listeners数组长度是3而不是最后一个console.log中的2？

listeners数组长度是3而不是2的原因是因为在代码中，我们先将一个匿名函数作为事件监听器添加到listeners数组中，然后又将同一个匿名函数作为事件监听器添加到listeners数组中。这样做的结果是，listeners数组中存在两个相同的匿名函数。

在JavaScript中，当我们将一个函数作为事件监听器添加到数组中时，实际上是将该函数的引用添加到数组中。因此，尽管两个匿名函数的函数体是相同的，但它们是两个不同的函数对象。

所以，当我们在最后一个console.log中打印listeners数组的长度时，它的长度是3，因为数组中存在两个相同的匿名函数。

相关·内容

2022-08-24：给定一个长度为3N的数组，其中最多含有0、1、2三种值，你可以把任何一个连续区间上的数组，全变成0、1、2中的一种，目的是让0、1、2

2022-08-24：给定一个长度为3N的数组，其中最多含有0、1、2三种值，你可以把任何一个连续区间上的数组，全变成0、1、2中的一种，目的是让0、1、2三种数字的个数都是N。返回最小的变化次数。...统计0,1,2扣去N/3的个数之和。比如1,1,1，1有3个，多了两个；而0和2都是0个，不统计；所以结果是2。时间复杂度：O(N)。代码用rust编写。...{ return time; } else { if time == 2 { return 3; } let mut...// 只有一种数的个数是小于m的 return if once(arr, &mut cnt, m) { 1 } else { 2 }; }}// 只有一种数是少于N/3fn once...个// 1 -> 10个// 2 -> 10个// ==========// 0 -> 7个// 2 -> 12个 1 -> 11个// 多的数 2// 少的数 0fn modify(arr: &mut

7701 0

美团前端一面高频面试题

1、Map是键值对，Set是值得集合，当然键和值可以是任何得值2、Map可以通过get方法获取值，而set不能因为它只有值3、都能通过迭代器进行for...of 遍历4、Set的值是唯一的可以做数组去重...GET的长度值 = URL（2083）- （你的Domain+Path）-2（2是get请求中?...{ console.log(args)}mutiple(1, 2, 3, 4) // [1, 2, 3, 4]这就是 … rest运算符的又一层威力了，它可以把函数的多个入参收敛进一个数组里。...什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？..., 不能修改对象 return res;}apply描述：与 call 类似，唯一的区别就是 call 是传入不固定个数的参数，而 apply 是传入一个参数数组或类数组。

6423 0

前端高频面试题(六)（附答案）

1、意外的全局变量：由于使用未声明的变量,而意外的创建了一个全局变量,而使这个变量一直留在内存中无法被回收2、被遗忘的计时器或回调函数：设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话...但是它有一个很大的问题就是创建出来的对象无法和某个类型联系起来，它只是简单的封装了复用代码，而没有建立起对象和类型间的关系。（2）第二种是构造函数模式。...为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素：（1）关键资源的数量。（2）关键路径长度。（3）关键字节的数量。关键资源是可能阻止网页首次渲染的资源。...冒泡排序--时间复杂度 n^2题目描述:实现一个冒泡排序实现代码如下:function bubbleSort(arr) { // 缓存数组长度 const len = arr.length; //...return arr;}// console.log(bubbleSort([3, 6, 2, 4, 1]));CSS 优化和提高性能的方法有哪些？

4733 0

2023秋招前端面试必会的面试题_2023-03-15

方法2：当页面出现业务定义的错误码时，则认为是白屏。比如“网络或服务异常”。方法3：当页面出现业务定义的特征值时，则认为是白屏。比如“数据加载中”。...总的来说，render 阶段在执行过程中允许被打断，而 commit 阶段则总是同步执行的。为什么这样设计呢？...偏偏在面试场景下，10 个人里面有 9 个都走这条歧路，最后9个人里面自然没有一个能自圆其说，实在让人惋惜。为什么需要浏览器缓存？...数组扁平化题目描述:实现一个方法使多维数组变成一维数组最常见的递归版本如下：function flatter(arr) { if (!...[...pre, ...flatter(cur)] : [...pre, cur], [] );}// console.log(flatter([1, 2, [1, [2, 3, [4, 5,

5862 0

前端高频面试题(四)（附答案）

说一下data为什么是一个函数而不是一个对象?JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。...除此之外，PNG-8还支持透明度的调节，而GIF并不支持。除非需要动画的支持，否则没有理由使用GIF而不是PNG-8。（5）PNG-24是无损的、使用直接色的点阵图。...优点：1.体验好，不刷新，减少请求数据ajax异步获取页面流程；2.前后端分离3.减轻服务端压力4.共用一套后端程序代码，适配多端缺点：1.首屏加载过慢；2.SEO 不利于搜索引擎抓取为什么函数的...arguments 参数是类数组而不是数组？...，b赋值为3，b此时是一个全局变量，而将3赋值给a，a是一个局部变量，所以最后打印的时候，a仍旧是undefined。

6094 0

2021前端面试必备题+答案

其次是 VDOM 和真实 DOM 的区别和优化：虚拟 DOM 不会立马进行排版与重绘操作虚拟 DOM 进行频繁修改，然后一次性比较并修改真实 DOM 中需要改的部分，最后在真实 DOM 中进行排版与重绘...方法2：当页面出现业务定义的错误码时，则认为是白屏。比如“网络或服务异常”。方法3：当页面出现业务定义的特征值时，则认为是白屏。比如“数据加载中”。...实例，该方法接受一个由Promise对象组成的数组作为参数(Promise.all()方法的参数可以不是数组，但必须具有Iterator接口，且返回的每个成员都是Promise实例)，注意参数中只要有一个实例触发...需要注意的是，立即resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。...if (Array.isArray(target) && isValidArrayIndex(key)) { // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误

8053 0

京东前端二面必会vue面试题（持续更新中）_2023-02-24

访问根组件中的属性或方法，是根组件，不是父组件。...$root 访问根组件中的属性或方法作用：访问根组件中的属性或方法注意：是根组件，不是父组件。...// 修改数组的长度, 避免索引>数组长度导致splcie()执行有误 target.length = Math.max(target.length, key) // 利用数组的splice...中,sth => value; （2）作用在组件上在自定义组件中，v-model 默认会利用名为 value 的 prop和名为 input 的事件本质是一个父子组件通信的语法糖，通过prop和$....AST元素节点总共三种类型：type为1表示普通元素、2为表达式、3为纯文本（2）对静态节点做优化 optimize(ast,options) 这个过程主要分析出哪些是静态节点，给其打一个标记，为后续更新渲染可以直接跳过静态节点做优化

8313 0

2021-07-27：给定一个数组arr，长度为N，arr中的值只有1，2，3三种。arr == 1，代表汉诺塔问题中，从

2021-07-27：给定一个数组arr，长度为N，arr中的值只有1，2，3三种。...arr[i] == 1，代表汉诺塔问题中，从上往下第i个圆盘目前在左；arr[i] == 2，代表汉诺塔问题中，从上往下第i个圆盘目前在中；arr[i] == 3，代表汉诺塔问题中，从上往下第i个圆盘目前在右...那么arr整体就代表汉诺塔游戏过程中的一个状况。如果这个状况不是汉诺塔最优解运动过程中的状况，返回-1。如果这个状况是汉诺塔最优解运动过程中的状况，返回它是第几个状况。...福大大答案2021-07-27： 1-7的汉诺塔问题。 1. 1-6左→中。 2. 7左→右。 3. 1-6中→右。单决策递归。 k层汉诺塔问题，是[2的k次方-1]步。时间复杂度：O(N)。...to 另一个是啥？

9323 0

阿里前端面试题

NaN在===中是不相等的，而在Object.is中是相等的 2. +0和-0在===中是相等的，而在Object.is中是不相等的实现代码如下:Object.is = function (x,...[] : {}; // 备份存在hash中，newObj目前是空对象、数组。...最后程序输出变量值的时候，就是从AO对象中拿。...解释一下js执行上下文的创建、执行过程。解释一下闭包所产生的变量放在哪了。最后请把以上3点结合起来说给面试官听。为什么 0.1 + 0.2 !...为什么 Vuex 的 mutation 中不能做异步操作?

3493 0

高频js手写题之实现数组扁平化、深拷贝、总线模式_2023-02-23

三道js手写题的思路和代码实现数组扁平化演示效果将[1, 1, 2, [1, 2]] 变成 1, 1, 2, 1, 2 第一种：直接使用.flat console.log([1, [1,2],[...1,[2]]].flat(3)); 可以将多维数组，降维，传的参数是多少就降多少维一般直接传参数为 Infinity(简单粗暴) 第二种: 递归方法的方法 + 借用数组的API完成 (1) function...(即其自身定义的属性，而不是其原型链上的枚举属性)将为新创建的对象添加指定的属性值和对应的属性描述符。...，其中的键是弱引用对象，而值可以是任意。...，必须是一个函数， // 另外判断是否是object这块递归的去找对象中是否还存在函数，如果不是函数， // 自定义事件没有回调肯定是不行的 return isValidListener

4241 0

源码共读-Redux

2: subscribe: 监听事件，实际上就是把事件添加到事件数组中，并返回移除事件函数。 3: getState：获取当前的状态。 4: replaceReducer：替换reducer。...最新的源码与我们的实现理念大致相同，只是多了类型的校验，另外事件采用双map形式（防止dispatch中调用subscribe/unsubscribe）而不是我们简单的数组，最后在事件触发时会使用变量标记...console.log('next state', store.getState()) // 更新后的状态 return result } 中间件是一个嵌套三层的函数，每一层都有一个参数，参数分别是...dispatch是处理过的函数，其他的都是与store中的一致，也就是说中间件的作用实际上是强化dispatch函数。...middlewareAPI实际上就是中间件的第一层函数的参数store，这里需要注意的是dispatch调用的时候，下面的代码已经走完了，所以里面的dispatch函数是加强后的dispatch而不是上面定义的抛出异常的函数

951 0

高频js手写题之实现数组扁平化、深拷贝、总线模式

]].flat(3));可以将多维数组，降维，传的参数是多少就降多少维一般直接传参数为 Infinity(简单粗暴) 第二种: 递归方法的方法 + 借用数组的API完成(1)function flattten...使用以weakMap进行巧妙处理使用Reflect.ownKeys返回一个由目标对象自身的属性键组成的数组，对于剩下的拷贝类型为object和function但不是null进行递归操作,对于除了上述的类型外直接进行...(即其自身定义的属性，而不是其原型链上的枚举属性)将为新创建的对象添加指定的属性值和对应的属性描述符。...，其中的键是弱引用对象，而值可以是任意。...，必须是一个函数， // 另外判断是否是object这块递归的去找对象中是否还存在函数，如果不是函数， // 自定义事件没有回调肯定是不行的 return isValidListener

3724 0

JavaScript常见手写题熬夜整理

所以这里([^;]*)表示的是除了";"这个字符串别的都匹配(*应该都知道什么意思吧，匹配0次或多次)有的大佬等号后面是这样写的'=([^;]*)(;|$)'，而最后为什么可以把'(;|$)'给省略呢？...因为其实最后一个cookie项是没有';'的，所以它可以合并到=([^;]*)这一步。最后获取到的match其实是一个长度为4的数组。...示例 1:输入: s = "abcabcbb"输出: 3解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。...示例 3:输入: s = "pwwkew"输出: 3解释: 因为无重复字符的最长子串是 "wke"，所以其长度为 3。...请注意，你的答案必须是子串的长度，"pwke" 是一个子序列，不是子串。

8883 0

那些高级前端是如何回答面试题的_2023-02-28

DOM2 级事件模型，在该事件模型中，一次事件共有三个过程，第一个过程是事件捕获阶段。...: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在数组扁平化数组扁平化就是将 [1, [2, 3]] 这种多层的数组拍平成一层 1, 2, 3。..., 不能修改对象 return res; } apply 描述：与 call 类似，唯一的区别就是 call 是传入不固定个数的参数，而 apply 是传入一个参数数组或类数组。...第一种情况是由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。...Static 关键字有了解嘛为这个类的函数对象直接添加方法，而不是加在这个函数对象的原型对象上如果一个构造函数，bind了一个对象，用这个构造函数创建出的实例会继承这个对象的属性吗？为什么？

7041 0

腾讯前端面试题

端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口（HTTP协议默认端口是80，HTTPS协议默认端口是443）；虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分...虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”；文件名部分：从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”...,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.asp”。...文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名；锚部分：从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分；参数部分：从“？”...margin 值来实现的，而不是通过父元素的 padding 来实现的。

1K2 2

前端手写面试题合集

支持异步的 action// 如果 action 是个函数，就调用这个函数// 如果 action 不是函数，就传给下一个中间件// 发现 action 是函数就调用const thunk = ({...若是输入的目标长度小于字符串原本的长度则返回字符串本身'xxx'.padStart(2, 's') // 'xxx'// 2. 第二个参数的默认值为 " "，长度是为1的// 3....而此参数可能是个不确定长度的字符串，若是要填充的内容达到了目标长度，则将不要的部分截取'xxx'.padStart(5, 'sss') // ssxxx// 4....数组去重实现的基本原理如下：① 初始化一个空数组② 将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中③ 将需要去重处理的数组中的第2项在初始化数组中查找...(300,"3"); addTask(400,"4"); 的输出顺序是：2 3 1 4 整个的完整执行流程：一开始1、2两个任务开始执行500ms时，2任务执行完毕，输出2，任务3开始执行800ms时，

3122 0

Nodejs学习笔记（二）--- 事件模块

注册了一个监听后，我用emiiter.removeListener移除some_events的监听，随后再调用emitter.emit去触发，最后发现不是按我想像的在进行！...为什么呢？我理所当然的认为emiiter.removeListener第二个参数是个回调函数，API还是要认真看清楚啊！！！下面再看个成功的场景～～～ ?...('some_events', 'Wilson', 'Zhong'); 我用示例中写法，给some_events添加了三个监听，又移除了第一个和第三个监听，最后再用emitter.emit触发some_events...emitter.removeAllListeners([event]) emitter.removeListener用过了，但一个事件可以有多个监听，需要全部移除时，一个个移除明显不是愉快的做法，不符合偷懒的天性...("其它监听事件,参数foo=" + foo + ",bar="+bar ); }); /* EventEmitter.listeners(event) //返回指定事件的监听数组

1.2K8 0

2023前端一面vue面试题合集_2023-02-27

EventBus: 通过EventBus进行信息的发布与订阅 vuex: 是全局数据管理库，可以通过vuex管理全局的数据流 $attrs/$listeners: Vue2.4中加入的$attrs/$listeners...虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象状态变更时，记录新树和旧树的差异最后把差异更新到真正的dom中说说Vue的生命周期吧什么时候被调用？...这个可以是这个节点的唯一标识，告诉 diff 算法，在更改前后它们是同一个DOM节点扩展 v-for 为什么要有<code...并且可以多人协作，每个人写不同的组件，最后像撘积木一样的把它构成一个页面 Vue3.0 和 2.0 的响应式原理区别 Vue3.x 改用 Proxy 替代 Object.defineProperty。...(key)) { // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误 target.length = Math.max(target.length, key) // 利用数组的splice

7424 0

Redux 原理与实现

数组中的每一个监听函数 listeners.forEach(listener => listener()); return action; // 返回 action } subscribe...这个函数主要是往 listeners 数组中放入监听函数，参数就是一个监听函数。...middlewareAPI 是传递给中间件函数的参数，每个中间件在书写时都应该有一个参数，里面有 getState 方法和 dispatch 包装函数。而 chain 数组里面就是中间件函数。...在 redux 中也是如此，并且中间件是有顺序的，chain 数组最左侧的中间件会先调用，然后在内部调用 next 方法，表示执行下一个中间件。...这也就是为什么 redux-logger 中间件为什么放在数组最右边，最左边的中间件会先执行，不那样做可能就无法打印出准确的 action 信息。

4.5K3 0

vue面试经常会问的那些题

当 cache 内原有组件被使用时会将该组件 key 从 keys 数组中删除，然后 push 到 keys数组最后，以便清除最不常用组件。...max 所设置的范围，超过，那么削减未使用时间最长的一个组件的 key最后将这个组件的 keepAlive 设置为 true（3）keep-alive 本身的创建过程和 patch 过程缓存渲染的时候...得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组$children 的值是数组，而$parent是个对象（5）$...$emit("test2"); // 触发APP.vue中的test2方法 },};在上述代码中：C组件中能直接触发test的原因在于 B组件调用C组件时使用 v-on 绑定了$listeners...这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。编译的最后一步是将优化后的AST树转换为可执行的代码。为什么vue组件中data必须是一个函数？

1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云