前端经典面试题
syx_12
新时代农民工
展开
-
js手写实现eventBus事件总线订阅者发布者模式
EventBus 几个常用方法如下:eventBus的4个基本事件 on 发布和订阅 emit 执行该订阅下的所有函数 off 取消某个函数的订阅 once 只执行一次订阅事件 这里用Map 存储 EventBus 的数据(发布者-订阅者)。代码如下: // 组件通信,一个触发与监听的过程 class EventBus原创 2021-10-06 18:35:41 · 648 阅读 · 0 评论 -
js手写call,apply,bind方法
一、手写call()方法call的四部曲:call手写四部曲 1. 处理传进来的对象context:把对象context||window给到一个新建的对象如obj,obj现在代表那个传进来的娃儿 2. 处理当前的this:把这个this给到obj的fn上挂到起。fn就是随便起的一个函数名。这里要保证这个函数名唯一唷 3. 处理call的参数:也就是要遍历那个arguments,从下标1开始遍历,因为下标0的参数是那个传进来的对象哇,所以从0开始不得行 4. 运行原创 2021-09-05 15:14:16 · 313 阅读 · 0 评论 -
闭包的几大应用场景js
1.返回值: 以闭包的形式将函数中的变量返回 // 1.返回值 //这个很好理解就是以闭包的形式将 name 返回。 function fn() { var name = "hello"; return function () { return name; } } var fnc = fn(); console.log(fnc());//hello2.函数赋值在闭包里面给fn2函数设置值,闭包的形原创 2021-08-28 18:53:14 · 538 阅读 · 0 评论 -
js浅拷贝与深拷贝的区别,实现深拷贝的方法
一、引❀言如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。什么是浅拷贝?举个栗子: //1.浅拷贝 let a = [0, 1, 2, 3, 4], b = a; console.log(a === b); a[0] = 1; console.log(a, b); //这里a和b的输出一样,所以是浅拷贝因为a和b是浅拷贝指向的原创 2021-08-26 21:01:06 · 179 阅读 · 0 评论 -
实现一个不设置宽高的盒子水平垂直居中的方法
记录面试题-----------大佬直接扔了两个嵌套div让实现垂直居中不能加宽高(还不能调试,靓仔落泪)。下面记录下实现方法的代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte原创 2021-08-26 11:30:13 · 594 阅读 · 0 评论 -
js修改对象数组中的对象属性名一看就懂yyds
最近看到一个面试题要求如下:将数组中所有id变为code,所有title变为name<script>const list = [{ id: 'a', title: 'A'}, { id: 'b', title: 'B', children: [{ id: 'c', title: 'C' }, { id: 'd', title: 'D' }]}]</s原创 2021-08-22 16:57:00 · 7016 阅读 · 13 评论 -
CSS实现圣杯布局
圣杯布局分为header,内容分为左中右三个部分,最后是footer。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc原创 2021-08-17 10:05:44 · 116 阅读 · 0 评论 -
flex实现div左上角、中间、左下角布局css
这部分需要提前理解flex布局的使用哦~。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-08-17 10:00:19 · 4225 阅读 · 1 评论 -
CSS实现上下固定中间自适应布局
废话不多数哦,直接上代码!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-08-17 09:54:38 · 216 阅读 · 0 评论 -
CSS实现三栏布局/圣杯布局
三栏布局也可以有多种方法包括flex,position和float等<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca原创 2021-08-17 09:51:18 · 105 阅读 · 0 评论 -
CSS实现两栏布局
两栏布局:左边固定,右边自适应。首先就会想到用flex布局。方法1:flex布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini原创 2021-08-17 09:46:19 · 218 阅读 · 0 评论 -
JS数组扁平化flat,reduce等六种方式实现
数组扁平化:将数组中嵌套的数组拉平变成一维数组。方法1:reduce,遍历数组每一项,若值为数组则递归遍历,否则concat代码如下 let arr = [1, [2, 3, [4, 5], 6]]; //方法1:reduce,遍历数组每一项,若值为数组则递归遍历,否则concat function flatten(arr) { return arr.reduce((prev, item) => { return prev.concat(原创 2021-08-15 21:08:18 · 1450 阅读 · 1 评论 -
js数组去重和复杂数组去重reduce,set,filter,indexOf,lastIndex
数组去重的六种方法请查收~~~~~~。方法1:简单方便之Set()let arr = [1, 2, 3, 2, 1, 3, 4, 2, 5];//方法1:set去重let res1 = new Set(arr);console.log([...res1]);记得输出时用展开语法将结果放到数组里面呀~~~~~输出:[1,2,3,4,5].方法2:使用数组自带的filter()函数//方法2:filterlet res2 = arr.filter((item, index)原创 2021-08-15 17:08:26 · 725 阅读 · 2 评论