JS面试
关注
分享
扫一扫
文章平均质量分 61
一颗腐烂的橘子
这个作者很懒，什么都没留下…
展开
-
我对BFC的理解
BFCBFC 是什么东西BFC 称为块级格式化上下文，是一个拥有独立渲染区域的盒子，规定内部元素如何布局，并且盒子内部元素与外部元素互不影响BFC 渲染规则内部的盒子会在垂直方向，一个接一个的放置盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻的盒子的 margin 会发生重叠计算 BFC 高度的时，浮动的元素也参与计算BFC 就是页面上一个隔离的独立容器，里面的子元素不会影响到外面的元素BFC 解决了什么问题两栏布局<!DOCTYPE html>原创 2021-06-07 20:51:53 · 233 阅读 · 2 评论 -
前端安全：XSS和CSRF
谈谈你对XSS攻击的理解什么是XSS攻击XSS全称是Cross Site Scripting,为了与CSS区分开来，故简称XSS，翻译过来就是跨站脚本XSS是指黑客往HTML文件或者DOM中注入恶意脚本,从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段最开始的时候，这种攻击是通过跨域来实现的，所以叫跨域脚本，现在插入恶意代码的方式越来越多，所以是否跨域注入脚本已经不是唯一的注入手段了，但是这个XSS名字却一直保留至今注入恶意脚本可以完成这些事情窃取cookie监听用户行为，比如原创 2021-06-07 20:45:19 · 377 阅读 · 4 评论 -
深入跨域
深入跨域，理论和实践讲一下跨域是什么一个源加载文档或者脚本和来自另一个源的文档和脚本等资源进行交互(也就是不满足同源策略的两个源之间进行一些交互)，就是跨域2.同源策略2.1同源策略是什么所谓的同源指的是"三个相同”协议相同域名相同端口相同举个例子:http://www.wuhuiluo.com/dir/page.html这个而网址，协议是http://,域名是www.wuhuiluo.com,端口是80(默认端口可以省略),来看看下面改变的哪些是同源哪些不是同源http://w原创 2021-05-19 16:42:10 · 233 阅读 · 0 评论 -
Vue自测
1.说说你对SPA单页面的理解。它的优缺点分别是什么？SPA仅在Web页面初始化加载相应的HTML、Javascript和CSS，一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，取而代之的是利用路由机制实现HTML内容的变换，UI与用用户的交互，避免页面重新加载。优点用户体验好，快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染基于上面一点，SPA相对对服务器压力小前后端分离职责，架构清晰，前端进行交互逻辑，后端负责数据处理缺点初次加载耗时多，为实现原创 2021-05-18 14:19:49 · 161 阅读 · 0 评论 -
HTTP协议与计算机网络总结
HTTP协议与计算机网络1.TCP和UDP-UDPTCP是否可连接无连接面向连接是否可靠不可靠传输，不使用流量控制和拥塞控制可靠传输链接对象个数一对一，一对多，多对一，多对多一对一传输方式面向报文面向字节流首部开销首部开销小，8字节首部最小20字节，最大60字节使用场景实时应用（IP电话，视频会议，直播等）适用于可靠传输的应用，比如文件传输2.TCP三次握手，两次行不行，四次行不行，四次挥手三次握手第一次: clien原创 2021-05-15 14:42:00 · 110 阅读 · 0 评论 -
xx和xx的区别
1.箭头函数和普通函数的区别1.箭头函数和普通函数的样式不同，箭头函数语法更加简洁、清晰，箭头函数是=>定义函数，普通函数是function定义函数2.箭头函数会捕获其所在上下文的this值，作为自己的this值，定义的时候就确定并固定了。3.箭头函数不能作为构造函数使用，也不能使用new关键字(因为箭头函数没有自己的this，他的this其实是继承了外层执行环境中的this，且this指向永远不会改变，作为构造函数其的this要是指向创建的新对象)4.箭头函数没有自己的grg原创 2021-05-08 13:41:32 · 2274 阅读 · 0 评论 -
同一个套路实现 Promise 的 all、allSettled、any、race 方法
共同点这些方法的参数都接受一个promise的iterable类型(Array,Map,Set都属于ES6的iterable类型)的输入这些方法都返回一个Promise实例不同点1.返回的Promise实例的状态改变时机不同all 方法在所有输入的Promise实例都resolve后执行自身的resolve回调，在任意一个输入的Promise实例reject后执行自身的reject回调allSettled方法在所有输入的Promise实例都改变了状态(执行resolve回到或rejec原创 2021-04-11 16:20:36 · 754 阅读 · 0 评论 -
完整实现原生Promise
手写前需要了解这些1.什么是宏任务我们都知道JS是单线程的，但是一些高耗时操作就带来了进程阻塞的问题，为了解决这个问题，JS有两种任务的执行模式，同步模式和异步模式。在异步模式下，创建异步任务主要分为宏任务和微任务两种，宏任务是由宿主（浏览器、Node）发起的，而微任务由JS自身发起。宏任务与微任务的几种创建方式 ????宏任务（Macrotask）微任务（Microtask）setTimeoutrequestAnimationFrame（有争议）setIntervalMutationObserv原创 2021-04-08 20:25:31 · 737 阅读 · 1 评论 -
冒泡排序，选择排序，插入排序，快速排序
1.冒泡排序 Bubble Sort原理: 冒泡排序在每次冒泡操作时会比较相邻的两个元素，看是否满足大小关系要求，不满足就将它俩互换。一直迭代到不再需要交换，也就是排序完成。function BubbleSort(arr) { let temp for(let i = 0 ; i < arr.length - 1 ; i++) { for(let j = 0 ; j < arr.length - 1 - i; j++) { if(arr原创 2021-04-07 20:56:40 · 210 阅读 · 0 评论 -
实现instanceof
instanceof用来检测某个实例对象的原型链上是否存在构造函数的prototype属性手写instanceof原理：原型链的向上查找function myInstanceof(L, R) { // 基本数据类型直接返回false if (typeof L !== 'object' || L === null) return false //getProtypeOf是Object对象自带的一个方法，能够拿到参数的原型对象 let proto = Object.get原创 2021-04-06 20:00:40 · 212 阅读 · 2 评论 -
实现一个简易的new操作符
new的用法// 定义构造函数function Person (name) { this.name = name;}Person.prototype.age = 18;// 创建实例var person = new Person('whl');// 调用实例console.log(person.name); // whlconsole.log(person.age); // 18console.log(person); // Person {name: whl"}这是一个很原创 2021-04-06 19:31:30 · 201 阅读 · 0 评论 -
ES5-ES6数组方法
ES51.indexOf用途：用于查找数组中是否存在某个值，如果存在则返回某个值的下标，否则返回-1let list = [1, 2, 3];console.log(list.indexOf(2)) // 1console.log(list.indexOf("whl")) // -12.map用途：map是一个数组函数方法，接收三个参数，value，index，arr，返回值是处理完的结果。let list = [1, 2, 3]const res = list.map((原创 2021-04-05 00:01:18 · 349 阅读 · 0 评论 -
Vue声明周期
什么是vue的生命周期Vue实例从创建到销毁的过程，就是生命周期创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、销毁等一系列过程Vue生命周期可以简单分为四个阶段:创建阶段 beforeCreate,created挂载阶段 beforeMount,mounted运行阶段 beforeUpdate,updated销毁阶段 beforeDestroy,destroyed所有生命周期钩子函数自动绑定this上下文实例中，因此你可以访问数据,你不能用箭头函数来定义一个生命周期方法（原创 2021-03-31 15:10:06 · 469 阅读 · 0 评论 -
Vue组件通信的方式
1.父组件向子组件传值在父组件中引入子组件注册子组件在页面中使用，子组件标签上动态绑定传入动态值/静态值在子组件中，使用props来接受父组件传递过来的值子组件接收的父组件的值分为引用类型和普通类型两种：普通类型: String,Number,Boolean,Null引用类型: Array,Object#父组件<template> <div> <!-- 传递值 --> <Test :obj="obj"原创 2021-03-29 16:40:17 · 130 阅读 · 0 评论 -
函数柯里化
什么是柯里化只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。柯里化有什么作用let add = function (x) { return function (y) { return x + y }}let add1 = add(1)let add2 = add(2)console.log(add1(10)); // 11console.log(add2(20)); // 22这个例子表明柯里化是一种预加载函数能力，通过传递一到两个参数，原创 2021-03-28 22:15:16 · 89 阅读 · 0 评论 -
JS实现继承的几种方式
1.原型链法继承(使用原型)基本思想：利用原型让一个引用类型继承另外一个引用类型的方法和实例。我的理解是: 将父类的实例作为子类的原型function Father() { this.qwe = 'abc' this.info = { name: 'whl', age: 22 }}Father.prototype.getInfo = function () { console.log(this.info);}functio.原创 2021-03-25 22:08:47 · 184 阅读 · 2 评论 -
我对闭包的理解
闭包是什么闭包是指有权访问另一个函数作用域中的变量的函数`在我看来就是内嵌函数,在函数中嵌套函数由于在JS中，变量的作用域属于函数作用域，在函数执行后作用域就会被清理、内存也随之回收，但是由于闭包是建立在一个函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会随之销毁，这时的子函数——也就是闭包，便拥有了访问上级作用域中的变量的权限，即使上级函数执行完后作用域内的值也不会被销毁。闭包的作用内部函数调用外部变量function Father() { va原创 2021-03-23 22:58:32 · 155 阅读 · 0 评论 -
深拷贝和浅拷贝
深拷贝和浅拷贝浅拷贝对于基本数据类型（number,boolean,string,null,undefined），拷贝的是数据的值，对于引用数据类型（object），拷贝的是数据的内存地址深拷贝对比浅拷贝，深拷贝需要拷贝到引用数据类型中堆里面的值，并开辟新的堆空间，且修改新对象不会影响原对象。var a1 = { b: { c: {} } }var a2 = shallowClone(a1) // 浅拷贝方法a2.b.c === a1.b.c // true 新旧对象还是共享一块内容原创 2021-03-22 16:36:32 · 309 阅读 · 4 评论 -
数组去重
数组去重第一种ES6写法new Set() Set结构不会添加重复的值扩展运算符…转换成数组var arr = [1,3,5,7,9,1,3,5]let result = new Set(arr)console.log([...result]); // [1,3,5,7,9]第二种ES6写法new Set() Set结构不会添加重复的值Array.from()转换成数组var arr = [1,3,5,7,9,1,3,5]let result = new Set(arr)原创 2021-03-20 14:57:06 · 81 阅读 · 2 评论 -
var、let、const
var let constconst 在声明变量时必须初始化(声明变量的同时并赋值即初始化),var和let可以不用// varvar aa = 1console.log(a) // 1// letconst bb = 2console.log(b) //Uncaught SyntaxError: Missing initializer in const declaration//const const c c = 3console.log(c) // 3var存在原创 2021-03-19 17:25:33 · 93 阅读 · 0 评论 -
原型和原型链
JS原型链构造函数、实例对象person是Person函数的实例对象Person是函数person的构造函数function Person()let person = new Person()person // Person {__proto__} 是一个对象，有一个__proto__属性person.constructor === Person // true 指向Person的构造函数本身实例对象的 constructor 属性指向构造函数本身其实这么说不准确。后面会说明其实原创 2021-03-18 15:20:48 · 98 阅读 · 0 评论 -
this、new、call、apply、bind
this、call、apply、bindthis的指向问题在ES5中，this的指向始终坚持一个原理：this永远指向最后调用它的那个对象，注意是在ES5中。Case1: var name = "windowsName"; function a() { var name = "Cherry"; console.log(this.name); // windowsName console.log("inner:"原创 2021-03-18 12:48:45 · 147 阅读 · 0 评论 -
大白话带你理解防抖和节流
防抖和节流在工作中我们可能会碰到这样的问题原创 2021-03-16 15:15:39 · 220 阅读 · 0 评论 -
JS前端面试-异步和单线程
JS前端面试-异步和单线程一、单线程和异步二、应用场景三、callbeck hell（回调地狱）和promise四、问题解答1.同步和异步的区别是什么？2.手写promise加载一张图片3.前端使用异步的场景4.场景题setTimeout五、小结题目1.同步和异步的区别是什么2.手写promise加载一张图片3.前端使用异步的场景4.场景题setTimeout知识点1.单线程和异步...原创 2020-04-20 12:15:24 · 678 阅读 · 0 评论 -
JS前端面试基础-作用域和闭包
JS基础作用域和闭包一、作用域四、this的使用五、题目解答1.this在不同场景下应该如何取值？2.手写bind函数3.实际开发中的闭包应用场景，举例说明4.面试题 创建10个a标签，点击的时候弹出对应的序号 六、小结题目1.this在不同场景下应该如何取值？2.如何手写bind函数？3.实际开发中闭包的应用场景、举例说明4.创建10个a标签，点击的时候弹出对应序号知识点1.作用...原创 2020-04-19 16:49:51 · 439 阅读 · 0 评论 -
JS前端面试基础-原型和原型链
JS重点原型和原型链一、class和继承二、类型判断和instanceof三、原型四、原型链五、重要提示六、题目解答1.如何判断一个变量是不是数组？2.Class的原型本质，如何理解？七、小节JS是基于原型集成的语言题目引入1.如何判断一个变量是不是数组2.Class的原型本质，如何理解？知识点Class和继承类型判断和instanceof原型和原型链一、class和继承1....原创 2020-04-17 17:26:08 · 571 阅读 · 0 评论 -
JS前端面试基础-变量类型与计算
JS面试之-变量类型和计算一、JS基础1.值类型和引用类型2.typeof运算符3.深拷贝(重点)二、变量计算和类型转换1.字符串拼接2. == 和 ===3.if语句与逻辑计算三、问题解答和总结1.typeof可以判断哪些类型2. 何时使用==，何时使用===？3.值类型 和 引用类型的区别？4.手写深拷贝四、小结 题目引入 1.typeof能判断哪些类型? 2.何时使用 ==...原创 2020-04-16 21:51:26 · 587 阅读 · 1 评论