前端面试
关注
分享
扫一扫
前端卡卡西呀
前端程序员。面向搜索引擎开发，熟练掌握CV大法的拷贝程序员---前端卡卡西
展开
-
js实现 indexOf()
if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(selectElement,fromIndex) { if (this == null) { throw new TypeError('对象是null') } let k, o = Object.create(this); let len = o.length; if (!len) return -1; let n = +fromI原创 2020-12-28 16:00:26 · 789 阅读 · 0 评论 -
手写EventBus
class EventBus { constructor() { this.events = this.events || {}; //{key:Array} } /** * @param {String} eventName * @param {Function} callback */ $on(eventName, callback) { if (thi原创 2022-01-21 20:04:46 · 554 阅读 · 0 评论 -
const name=“global“； var obj ={ name: ‘123‘, getName:()=＞{ console.log(this.name)； } } obj.getName()
题目描述：如下代码，执行完 输出内容？const name="global";var obj = { name: '123', getName:()=>{ console.log(this.name); }}obj.c输出结果：空如下所示：易错项：“123”；“global”解析：1.为什么不是 “123”如 this指向这篇文章 第 3 条所示：3.函数是否在某个上下文对象中调用(隐式绑定)？如果是的话，this绑定的是那个上下文对象。如： v原创 2021-12-17 16:25:19 · 930 阅读 · 12 评论 -
算法系列：5. 二分搜索
/** * @Desc 二分搜索 * 二分搜索 前提是 有序数组 * 从数组中间值开始，如果中间值正好等于搜索值，结束搜索； * 如果搜索值比 中间值大或小，则在大于或小于中间值的那一半数组中继续搜索 */Array.prototype.binarySort = function (selector) { let low = 0; let high = this.length - 1; while(low <= high) { let midInd原创 2021-11-27 22:35:41 · 338 阅读 · 4 评论 -
你知不知道Vue 的初始化过程都做了什么？
1.处理组件配置项2.初始化组件实例的关系属性，比如 $parent、$children、$root、$refs 等3.处理自定义事件4.调用 beforeCreate 钩子函数5.初始化组件的 inject 配置项，得到 ret[key] = val 形式的配置对象，然后对该配置对象进行响应式处理，并代理每个 key 到 vm 实例上6.数据响应式，处理 props、methods、data、computed、watch 等选项7.解析组件配置项上的 provide 对象，将其挂载到 vm._provid原创 2021-06-21 09:52:46 · 1866 阅读 · 2 评论 -
aaabbaaacc 最长连续子序列
问题描述：给定一个字符串 如 'aaabbaaacc', 输出它的最长连续子序列解题思路：遍历这个字符串，用一个map 对象存储字符和重复次数，字符为key，重复次数为value；最后遍历该map对象，取出重复次数最大的即可。代码实现：let str = 'aaabbaaacc';function getmax(str) { if (str.length < 2) return ('重复次数最多的是'+str+',重复了：'+str.length + '次'); /原创 2020-12-30 11:04:15 · 703 阅读 · 0 评论 -
前端面试代码题
总结了几道 this 指向的代码题，做过之后我发现我对 this 一无所知。1.var num = 1;var myObject = { num: 2, add: function() { this.num = 3; (function() { console.log(this.num); this.num = 4; })(); console.log(this.num原创 2020-12-09 12:58:19 · 592 阅读 · 3 评论 -
setTimeout中的this指向问题
当你向setTimeout()(或者其他函数)传递一个函数时,该函数中的this指向跟你的期望可能不同。由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致，这些代码中包含的 this 关键字会指向 window （严格模式和非严格模式都会指向window）。举例；let myArray = ["zero", "one", "two"];myArray.myMethod = function (sProperty) { alert(arguments..原创 2020-12-07 08:07:26 · 2451 阅读 · 2 评论 -
async function async1() {console.log(‘async1 start‘)；await async2()；console.log(‘async1 end‘)
async function async1() {console.log('async1 start');await async2();console.log('async1 end')写出下边程序输出内容：async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { console.log('原创 2020-12-06 20:14:13 · 4060 阅读 · 4 评论 -
css实现0.5px线条，解决移动端兼容问题
1.利用background-image 渐变样式2.可以利用scale缩放3.给伪元素设置边框在这里插入代码片<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>0.5px线实现方法</title> <style type="text/css"> /*标准1px边框*/ .b1{ height: 40px; border: 1.原创 2020-11-23 09:50:52 · 1106 阅读 · 0 评论 -
腾讯前端面试题（一）
一. 有一个类如下：function Person(name) { this.name = name}let p = new Person('Tom');1. p._proto_等于什么？答案：Person.prototype2. Person._proto_等于什么？答案：Function.prototype解析：1，2两个是同一个问题，都是考察原型链...原创 2020-10-21 18:48:44 · 1614 阅读 · 15 评论 -
JS中判断this指向问题总结
我们可以根据优先级来判断函数在某个调用位置应用的是哪条规则，可以按照下面的顺序进行判断：1.函数是否在new中调用(new 绑定)？是的话 this 绑定的是新创建的对象。var bar = new foo();2.函数是否通过 call、apply（显示绑定）或者硬绑定调用？如果是的话，this绑定的是指定的对象。var bar = foo.call(obj2);3.函数是否在某个上下文对象中调用(隐式绑定)？如果是的话，this绑定的是那个上下文对象。var bar = o原创 2020-08-21 14:24:11 · 389 阅读 · 0 评论 -
实现lodash.get方法
lodash.get 参考lodash中文文档get功能如下示例var object = { 'a': [{ 'b': { 'c': 3 } }] }; get(object, 'a[0].b.c');// => 3 get(object, ['a', '0', 'b', 'c']);// => 3 get(object, 'a.b.c', 'default');// => 'default'可以看到，不管是使用下标[0]方法还是使用连续字符串['a',..原创 2020-08-20 11:20:23 · 8289 阅读 · 1 评论 -
new new Foo().getName()面试题解析
经典面试题 Foo().getName() 解析题目如下，写出输出内容（注释：abcde为步骤标号，便于下边分析定位）解析：1. Foo.getName(); // 2Foo为一个函数对象，对象都可以有属性，题目 b 处定义Foo的getName属性为函数，输出22. getName(); // 4这里看d、e处，d为函数表达式，e为函数声明，两者区别在于变量提升，这两处可以等价于可见函数声明的 5 会被后边函数表达式的 4 覆盖。3. Foo().getName(); // 1这里要看原创 2020-08-12 14:17:06 · 2522 阅读 · 2 评论 -
js将数据转成树形结构
有如下数据，数组中为一条条单个数据，每条数据都有唯一的ID标识，pid表示此条数据的父级 ID，根据pid和id的对应关系，实现一个函数将数据转成树形结构数据。var data = [ {'id':101,'name':'语文','pid': -1}, {'id':102,'name':'语文知识点1','pid': 101}, {'id':103,'name':'语文知识点11','pid': 102}, {'id':104,'name':'语文知识点2','pid': 101},原创 2020-08-11 12:37:38 · 5018 阅读 · 1 评论 -
vue页面权限控制及操作级权限控制
第一种前端将公共部分的路由直接写在前端代码中，其余部分前端开发完成后，将对应路由复制一份给后端根据权限匹配存储在数据库中，用户登录时，从后端数据库中根据用户权限读取对应路由返回给前端，再添加到前端路由中动态渲染上。这样操作，需要前后端密切配合，而且页面中的操作级权限不能控制；第二种在路由的meta属性中增加 roles字段，用来存储可访问当前路由的权限，在路由全局守卫router.beforeEach中进行拦截处理，示例如下：路由信息routes: [ {原创 2020-08-05 10:21:10 · 2440 阅读 · 2 评论 -
js实现new关键字
对new关键字的描述：引自MDNnew关键字会做以下操作：1.创建一个空的简单Javascript对象 （即{}）;2.链接带对象（即设置该对象的构造函数）到另一个对象；3.将步骤1新创建的对象作为this的上下文；4.如果该函数没有返回对象，则返回this；function myNew(fn) { // 以构造函数fn的prototype为原型 创建一个新的简单对象 let o = Object.create(fn.prototype) // 改变f.原创 2020-08-04 21:29:48 · 2040 阅读 · 0 评论 -
js实现instanceof+实现原理
instanceof是干什么的？instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。只要遍历实例对象的原型，看看是否跟构造函数的prototype相等，即可实现。function instance_of (obj, Fn) { // 判断传入的构造函数是不是函数类型 if (typeof Fn !== 'function') { throw new TypeError('不是函数'); } ...原创 2020-08-04 21:06:16 · 1507 阅读 · 25 评论 -
快手前端面试都问什么？
1.以下css最后是什么颜色<style> .classA{ color:blue; } .classB{ color:red; }</style> <p class="classB classA">123</p>2.以下代码运行结果 Function.prototype.a = () => alert(1); Object.prototype...原创 2020-07-30 14:50:45 · 2559 阅读 · 7 评论 -
js实现Promise.all 解析Promise.all 和race
Promise.all 接收一个 promise 对象的数组，等所有都完成之后，统一执行success；Promise.race 也接受一个 Promise 对象的数组，但是只要一个对象完成，就执行 success示例：let p1 = new Promise((resolve,reject) => { resolve('p1');});let p2 = new Promise((resolve,reject) => { resolve('p2');})原创 2020-07-26 16:58:02 · 837 阅读 · 0 评论 -
CSS选择器权重计算和优化规则
1.CSS优先级：!important > 行内样式 > ID选择器 > class选择器 || 属性选择器 > 标签选择器 > 通配符*2.复杂嵌套中css样式权重的计算：权重计算规则（下文数字均为虚拟数字，便于计算，并非真实数值）行内(内联)样式：style="", 权重 1000； ID选择器，权重 100； 类、伪类、属性选择器，权重10； 标签选择器、类型选择器、伪元素选择器，如div p，权重1； 通配符、子选择器、相邻选择器，如*、>原创 2020-07-17 12:59:48 · 339 阅读 · 0 评论 -
js数组全排列（leetcode 46题）
题目链接问题描述：给定一个没有重复数字的序列，返回其所有可能的全排列。示例：输入: [1,2,3]输出:[ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1]]思路：让每一个元素放一次第一位，后边元素排列组合var permute = function(nums) { let res = []; per(nums,0,nums.length-1,res); retur...原创 2020-07-16 13:11:22 · 1401 阅读 · 1 评论 -
剑指 Offer 38. 字符串的排列
问题描述：输入一个字符串，打印出该字符串中字符的所有排列。你可以以任意顺序返回这个字符串数组，但里面不能有重复元素。示例：输入：s = "abc"输出：["abc","acb","bac","bca","cab","cba"]var permutation = function(str) { let res = new Set(); // 使用set结构去重存储 let path = []; // 存储路径 let visited = []; // 标记访问原创 2020-07-16 12:55:16 · 184 阅读 · 0 评论 -
JS数组乱序的几种方法
1. 使用sortfunction shuffle(arr) { return arr.sort(() => Math.random() - 0.5)}2.洗牌算法先从数组末尾开始，将最后一个元素与前边任意随机元素交换位置；在已经排好的最后一个元素以外的位置中，随机产生一个位置，让该位置元素与倒数第二个元素进行交换；循环操作...function shuffle(arr) { for (let i=arr.length;i;i--){ //原创 2020-07-15 11:11:40 · 1545 阅读 · 0 评论 -
前端CSS水平垂直居中的4种方式（元素宽高固定或者宽高不固定）
如未说明，HTML均使用如下模板<div class="parent"> <div class="son"></div></div>1.flex布局.parent { display: flex; justify-content: center; align-items: center;}2.position:absolute; + margin 负值 (需要固定宽高)，负值分别为子元素宽高的一半原创 2020-07-09 17:09:29 · 311 阅读 · 0 评论 -
typeof和instanceof区别
typeof用于判断js数据类型，返回值为string、number、boolean、undefined、function、object注意，typeof校验数组、对象、null都会返回objectinstanceof 是判断实例是否是构造函数的实例使用方法，obj1 instanceof obj2它的判断根据原型链搜寻，在实例对象obj1的原型链上如果存在另一个对象obj2的原型属性，那么上边表达式返回 true例如：function func() {...原创 2020-07-08 17:16:40 · 248 阅读 · 0 评论 -
a == 1 && a == 2 && a == 3
如果a是一个对象，那在执行a==的时候首先会去先执行valueOf方法，如果没有value方法，就会去执行toString方法。因此我们可以改写a对象的valueOf和toString方法：1. 1.1改写对象的valueOflet a = { valueOf: (function() { let i = 1; // 闭包，i不会被清除 return function() { return i ++;原创 2020-07-06 23:10:48 · 652 阅读 · 0 评论 -
原生js实现手写call、apply、bind
实现call()方法Function.prototype.mycall = (context,...args) { // 判断this是否函数，否返回typeerror if (typeof this !== 'function') { throw new TypeError('不是函数'); } context = context || window; context.fn = this; const res = context.f原创 2020-07-02 22:04:46 · 798 阅读 · 15 评论 -
百度前端面试题及答案
一、单选题（共25题，每题5分）1.该正则可以匹配下列哪个字符串？ /^sjm/A、absjmB、phpsjmC、sjmphpD、phpsimd2.新窗口打开网页，用到以下哪个值（）。A、_selfB、_blankC、_topD、_parent3.如果一个HTML文档内含有阿拉伯文，则应该？A、使用utf-8编码B、将阿拉伯文转为图片并嵌入到文档内C、使用GBK编码D、使用iso-8859-2编码4.以下哪个选项不是块级元素（）A、div原创 2020-06-23 22:58:01 · 3402 阅读 · 1 评论 -
css 上中下三行布局 4种方式
css 上中下三行布局，上下高度固定，中间自动填充满整个屏幕 的 4种方式左中右三列布局，左右固定宽度，中间自适应的5种方式原创 2020-06-20 22:33:52 · 3951 阅读 · 0 评论 -
CSS 左中右三列布局5种方式
CSS 左中右三列布局左右固定宽度，固定位置，中间自适应的5种方式上中下三行布局，上下固定高度，中间自适应的4种方式原创 2020-06-20 22:23:12 · 4617 阅读 · 0 评论 -
前端面试 页面通信
1.什么是同源策略及限制同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互。（请求协议、域名、端口不同，都算跨域）Cookie、LocalStorage和IndexDB无法读取 DOM无法获得 AJAX请求不能发送2.前后端通信Ajax WebSocket不受同源策略限制 CORS 允许跨域通信3.创建Ajax// 第一步，创建一个XHR对象 IE不支持XMLHttpRequest，所以要做兼容性校验var xhr = XMLHttpRequest.原创 2020-06-09 18:53:53 · 292 阅读 · 0 评论 -
JS面向对象 继承的几种方式
1. 借助构造函数实现继承function Parent1() { this.name = 'Parent1';}Parent1.prototype.say = function() { console.log('你好');}function Child1() { Parent1.call(this); // ！！！关键点 apply也可以 this.type = 'child1';}let s1 = new Child1();console.lo原创 2020-06-09 16:13:48 · 412 阅读 · 0 评论 -
前端面试 HTTP协议类、GET和POST区别
1.http协议特点简单快速：URI 统一资源符是固定的 灵活： 无连接：连接一次就会断开 无状态：客户端、服务端两种身份2.请求报文请求行（http 方法，页面地址，请求方法）、请求头（参数key：value）、空行、请求体3.响应报文状态行、响应头、空体、响应体4.HTTP方法GET -- 获取资源 POST -- 传输资源 PUT -- 更新资源 DELETE -- 删除资源 HEAD -- 获取报文首部 5.HTTP get和post区别GET在浏原创 2020-06-09 10:28:20 · 345 阅读 · 0 评论 -
前端面试 DOM事件
1.事件级别DEMO0 element.onclick=function() {};DEMO1 element.addEventListener('click', function(){},false)DEMO2 element.addEventListener('keyup', function(){},false)2.事件模型事件捕获（自上向下），时间冒泡（自下向上）事件流：事件捕获 -> 目标阶段 -> 事件冒泡描述事件捕获的具体流程wind...原创 2020-06-08 23:50:48 · 296 阅读 · 0 评论 -
前端面试CSS篇（一）CSS盒子模型、BFC块级格式化上下文、清除浮动
1. 基本概念：标准模型和IE模型2.两者区别？标准模型的 宽和高，就是content的宽和高， 低版本IE模型的宽和高，包括了padding和border的宽和高3.css如何设置这两种模型？box-sizing: content-boxl; 标准模型 box-sizing:border-box; 低版本IE4.js如何获取设置和模型的宽和高？ 4.1 dom.style.width/height 只能获取行内样式（style设置的）； 4.2 dom.cu...原创 2020-06-08 22:50:39 · 324 阅读 · 0 评论 -
webpack4.0 使用 postcss-loader 的 autoprefixer无效，并没有自动添加前缀
参考 webpack官网配置1. 安装npm i -D postcss-loader再安装 autoprefixernpm install autoprefixer -D2. 新建postcss.config.js文件（与package.json同级）module.exports = { plugins: [ require('autoprefixer') ]}3. webpack.config.js 中module: { rul..原创 2020-06-06 22:17:16 · 983 阅读 · 2 评论 -
前端面试vue-router路由跳转方式(传参数)
详见vue-router官网1.router-link1.1 不传参<router-link :to="/home">跳转</router-link>1.2 传参<router-link :to="{name:'home', params: {id:1}}"></router-link>params传参数 (类似post) 路由配置 path: "/home/:id" 或者 path: "/home:id" ...原创 2020-06-02 18:27:45 · 882 阅读 · 0 评论 -
前端面试 vuex 使用详解
vuex是什么？“Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。” -----援引自vuex官网一、安装npm install vuex --save二、核心概念state：单一状态树，用一个对象就包含了全部的应用层级状态。Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：...原创 2020-05-31 14:06:57 · 1048 阅读 · 2 评论 -
前端跨域三种解决方式（CORS、JSONP、代理跨域）
什么是跨域？跨域是浏览器为了安全而作出的限制策略（所以服务端不涉及到跨域）； 浏览器请求必须遵循同源策略，即同域名、同端口、同协议；例如：http://www.abc.com到http://www.def.com的请求会出现跨域（域名不同） http://www.abc.com:3000到http://www.abc.com:3001的请求会出现跨域（端口不同） http://www.abc.com到https://www.abc.com的请求会出现跨域（协议不同）解决方法：1. ..原创 2020-05-12 11:59:18 · 21640 阅读 · 1 评论