前端面试题
麦子穗
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Grid网格布局、Grid容器和Grid项目
1.Grid网格布局(基础知识)①Grid容器(container)和项目(item)采用grid网格布局的元素,称为Grid容器display:grid|inline-grid;Grid容器的所有子元素自动成为容器成员,称为grid项目。②列、行和单元格容器中的水平区域称为"行"(row),垂直区域称为“列”(column).行和列的交叉区域,称为“单元格”(cell).③网格线划分网格的线,称为“网格线”(grid line)水平网格线划分出行,垂直网格线划分出.原创 2022-03-31 14:55:57 · 842 阅读 · 0 评论 -
Flex布局、flex容器和flex项目
1.Flex布局基础知识⑴ Flex弹性布局。任何一个HTML元素都可以指定为flex布局。Display:inline-flex; flex容器是内联块元素Display:flex;flex容器是块级元素⑵ flex容器:采用flex布局的元素称为flex容器。⑶ Flex项目:flex容器的所有子元素自动成为容器成员,称为flex项目。⑷ 默认情况下,水平方向的是主轴,垂直于主轴方向的轴就是交叉轴。Flex项目默认沿着主轴起始排列。2.flex容器的属性//1...原创 2022-03-31 14:33:21 · 752 阅读 · 0 评论 -
rem与vw布局和响应式布局
媒体查询、移动布局之rem与vw布局和响应式布局原创 2022-03-30 13:38:58 · 1147 阅读 · 0 评论 -
移动webApp的基础知识点总结
px/rem/em/%/vw等常用单位的区别、设备像素比(dpr)、获取视口宽度、获取设备像素比、多行文字省略、流体布局注意事项、一个div设置宽度为屏幕宽度的20%,如何让这个div在不同屏幕下,高度都与宽度一样,实现正方形效果?用两种方法实现。原创 2022-03-30 13:30:46 · 570 阅读 · 1 评论 -
跨域问题以及解决方法和FormData 构造函数
跨域问题和解决方法、FormData 构造函数原创 2022-03-25 16:38:22 · 1346 阅读 · 0 评论 -
XHR的属性、方法和事件
1. XHR的属性属性一般放在open()之后,send()之前。⑴ responseType 和 response (IE10才开始支持)当responseType没有设置或者’’或 ’text’时使用ResponseText/response都可以获取文本形式的响应内容;当responseType=’json’时,只能用response获取内容,而且是解析后的内容。⑵ timeout 属性设置请求的超时时间(单位是毫秒),超过这个时间就不报错。(IE8开始支持)⑶with原创 2022-03-25 16:34:23 · 2190 阅读 · 0 评论 -
Ajax的使用步骤和JSON格式
(1)Ajax是Asynchronous JavaScript and XML(异步JavaScript和XML)的简写。就是浏览器和服务器之间的一种异步通信方式。使用Ajax可以在不重新加载整个页面的情况下,对页面的某部分进行更新。Ajax中的异步:可以异步地向服务器发送请求,在等待响应的过程中,不会阻塞当前页面。浏览器可以做自己的事。直到成功获取响应后,浏览器才开始处理响应数据。XML(可扩展标记语言)是前后端数据通信时传输数据的一种格式(现在用json)。(2)基本用法:Ajax想要实原创 2022-03-24 11:30:07 · 1544 阅读 · 0 评论 -
Cookie 、localStorage、sessionStorage 的详细知识点总结,面试常考
Cookie 、localStorage、sessionStorage 的详细知识点总结,面试常考、cookie、localStorage、sessionStorage的区别原创 2022-03-23 16:03:19 · 921 阅读 · 0 评论 -
Webpack 知识点
⑴是静态模块打包器,当webpack处理应用程序时,会将所有这些模块打包成一个或多个文件。⑵模块:Webpack 可以处理js/css/图片、图标字体等单位静态:开发过程中存在与本地的js/css/图片/图标字体等文件就是静态的,动态的内容webpack没办法处理⑶初始化项目:npm init ;安装webpack需要的包:npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1配置webpack:新建配置文件,所有包.原创 2022-03-22 15:37:30 · 642 阅读 · 0 评论 -
class类 的理解
class 的基本使用、注意事项、总结super的不同用法原创 2022-03-22 15:24:45 · 1647 阅读 · 0 评论 -
Promise的理解(面试题)
Promise的基本用法、promise三种状态?总结Promise.resolve()方法参数的几种情况、Promise.all()和promise.race()、promise.any()的区别?Then方法中return的作用?原创 2022-03-22 13:25:42 · 5690 阅读 · 0 评论 -
es6新增方法
es6新增方法、字符串新增方法、数组新增方法、对象新增方法、数组的keys()、values()、entries()与对象的这些方法之间的区别原创 2022-03-20 13:41:43 · 1591 阅读 · 0 评论 -
Iterator遍历器和原生可遍历
1.Iterator遍历器①Iterator是一个遍历器(迭代器),是一个统一的遍历方式。Iterator寻找是找不到,该方法在对象原型链上可以找到,Symbol.iterator();调用该方法可以得到一个对象,该对象被称为可遍历对象(可迭代对象),所以Symbol.iterator()是可迭代对象的生成方法。②可迭代对象的必要条件:必须有next()方法,next()方法在调用之后会返回一个对象,这个对象拥有value和done属性。value是遍历的值,done代表是否遍历完成。Iterat.原创 2022-03-20 10:39:15 · 394 阅读 · 0 评论 -
Map数据结构的理解
①Map和对象都是键值对的集合;②对象和map的区别:对象的键只能是字符串。Map的键,基本数据类型和引用数据类型都可以。③方法和属性set方法可以连续写,new Map().set('age',18).set(true,'true')。添加的新成员,键如果已经存在,后添加的键值对会覆盖已有的;get方法获取不存在的成员,会返回undefined;has方法、delete方法、clear方法都和Set集合一样;new Map().forEach(function(value,key,原创 2022-03-18 16:39:36 · 1388 阅读 · 0 评论 -
set 数据结构的理解
①set是一系列无序(因为set没有下标(索引号))、没有重复值的数据集合(数组有序)。不可以用字面量的形式创建,只能用实例化形式创建②方法和属性//1.方法 //add()添加成员 const s = new Set(); s.add(1).add(2).add(3); console.log(s); // {1, 2, 3} //has()判断是否有某个成员 console.log(s.has(1)原创 2022-03-18 16:00:30 · 2715 阅读 · 0 评论 -
ES6的剩余参数和展开运算符
ES6的剩余参数和展开运算符、对象展开运算符原创 2022-03-18 10:37:26 · 602 阅读 · 0 评论 -
this指向的9个规则和new操作符调用函数的步骤
this指向的9个规则、new操作符调用函数的步骤、call和apply方法的区别、DOM动态获取元素的方法有什么区别原创 2022-03-17 15:40:36 · 958 阅读 · 0 评论 -
继承和实现继承的方法
继承和实现继承的方法原创 2022-03-17 14:56:00 · 1185 阅读 · 0 评论 -
HTML与CSS面试题汇总
h5、css3、es6 的新特性分别是哪些、CSS的盒子模型?Margin 负值的问题、margin的传递问题以及它的解决方式、button 和 div 的区别、元素的隐藏、脱离标准文档流的方法、堆叠顺序z-index 属性、图片与下方盒子之间有缝隙解决方法、利用CSS样式制作三角形、浏览器渐变需要加私有前缀、手写清除浮动原创 2022-03-17 13:33:11 · 532 阅读 · 0 评论 -
JS面试题汇总(二)
原型和原型链、== 与 === 运算符的区别、undefined和null的区别、Truly变量、falsely变量和逻辑判断、substring()、substr()和slice() 三种截取子字符串方法的区别、Instanceof 判断引用类型原创 2022-03-17 08:54:57 · 400 阅读 · 0 评论 -
ES6面试题(二)
判断数组的方法有哪些?模板字符串和字符串的区别?箭头函数的理解?严格模式和非严格模式的区别是什么?对象字面量的增强、方括号语法和点语法的区别原创 2022-03-15 21:47:37 · 160 阅读 · 0 评论 -
解构赋值中的数组的解构赋值和对象解构赋值
1解构赋值①定义.解析某一数据结构,将我们想要的东西提取出来,赋值给变量或者常量②应用场景:交换变量的值;从函数返回多个值,可以返回一个数组,也可以返回一个对象;函数参数的定义,方便将一组参数与变量名对应起来,数组的参数是有次序的,对象的参数是没有次序的;指定函数参数的默认值;遍历Map解构,方便获取键名和键值;加载模块;提取JSON数据2.数组的解构赋值①原理:模式(结构)匹配;索引值相同的完成赋值,不取的就用逗号隔开②默认值:const/let [a,b] = [];是一个空数组时,原创 2022-03-13 20:29:03 · 2309 阅读 · 0 评论 -
箭头函数和this指向问题
①结构:const/let 函数名 = (参数) = > {函数体};②一般函数转为箭头函数步骤:声明形式->函数表达式形式->箭头函数function fun() {}; ->const/let add = function() {}; -> const/let add = ()=>{};③注意事项:单个参数可以省略圆括号,无参或者有多个参数不能省略圆括号;④单行函数体可以同时省略{}和return,多行函数体不能省略。⑤单行对象:如果箭头函数返回.原创 2022-03-13 20:13:08 · 483 阅读 · 0 评论 -
let、var和const的区别
①Let和var是用来声明变量的可以重新赋值Const是用来声明常量的,设置初始值后,不可以重新赋值②重复说明:已经存在的变量或常量,又声明了一次(包括函数的参数)Var允许重新声明,let和const不允许③变量提升:var可以提升变量的声明到当前作用域的顶部,不会提升变量的值而let和const不会提升变量④暂时性死区:只要作用域内存在let、const,它们所声明的变量或者常量就自动“绑定”在这个区域里面,不再受外部作用域的影响,并且只有在声明变量之后,才可以获取和使用该变量,原创 2022-03-13 20:09:56 · 991 阅读 · 0 评论 -
ES6相关面试题(一)
ES6新增的特性有哪些?const的注意事项、暂时性死区;什么是事件委托,事件代理?函数参数的默认值、原创 2022-03-13 20:06:45 · 429 阅读 · 0 评论 -
JS 面试题汇总
字符串拼接的方法、变量声明提升、数据类型、NaN的理解、0.1+0.2!=0.3的原因、Break与continue 的区别、Indexof()和includes()方法的区别、数组的常用方法中哪些方法改变原数组,哪些方法不改变原数组吗?、闭包、作用域有哪些?作用域链?原创 2022-03-13 14:15:33 · 947 阅读 · 0 评论 -
闭包的概念和应用场景、== 与 === 运算符区别、margin的传递问题以及它的解决方式、CSS与元素隐藏、标准文档流、堆叠次序、
两种符号的定义: "=="叫做相等运算符; "==="叫做严格相等运算符(全等运算符)它们之间的区别: "=="允许隐式类型转换,只判断等号两边的值是否相等,而不判断类型是否相同。值相同则返回true ; "==="允许隐式类型转换,既要判断值是否相等,也要判断类型是否相同,即全等才能返回true ;“==”运算符认为null和undefined是相等的;“===”运算符认为null和undefined是不相等的。......原创 2022-03-09 13:12:06 · 292 阅读 · 0 评论 -
1. 浅克隆和深克隆的区别
(1)、区别浅克隆:克隆出来的数据并不能完全脱离原数据,克隆前与克隆后的变量各自的变化会相互影响。这是因为引用变量存储在栈中,而实际的对象存储在堆中。每一个引用变量都有一根指针指向其堆中的实际对象。即当一个变量值改变时,另一个变量也会跟着发生变化。深克隆:所有元素或属性均完全复制,与原对象完全脱离,也就是说所有对于新对象的修改都不会反映到原对象中。这是因为原始变量之间的赋值操作本质上就是当一个原始变量把值赋给另一个原始变量时,只是把栈中的内容复制给另一个原始变量,在这种操作下,引用变量指向的将不再是堆原创 2022-03-09 10:39:40 · 2301 阅读 · 0 评论 -
居中对齐有哪些实现方式?
(1)Inline 元素:text-align: center;line-height 的值等于height 值;(2)Block元素:margin:0 auto;只用于水平居中对齐(3)Absolute 元素(3种):第一种方法left:50%; margin-left:-width/2;top:50%; margin-top:-height/2;此种无兼容性问题,但是必须知道宽度和高度。第二种方法left:50%;top:50%;transform:tra..原创 2022-03-06 21:14:46 · 414 阅读 · 0 评论 -
清除浮动的方式有四种方法
利用浮动可以实现并排、网页布局。当盒子因为浮动影响布局时,就要清除浮动。清除浮动的方法有四种:①让父盒子形成BFC,设置overflow:hidden 属性;②给后面的父盒子上设置clear:both 属性,clear表示清除其他盒子的浮动对自己的影响,both表示左右盒子的浮动都清除;③使用::after伪元素给盒子添加最后一个子元素,并且给::after 设置clear:both属性和display:block属性;.clearfix { overflow:原创 2022-03-06 17:22:21 · 471 阅读 · 0 评论 -
BFC 理解和应用-什么是BFC ?如何应用?
BFC 是 Block format context 块级格式化上下文的缩写。表示一块独立渲染区域,内部元素的渲染不会影响边界以外的元素。形成BFC 的常见条件:float不是 none ;position是 absolute 或 fixed ;overflow 不是 visible ;Display 是 flex、inline-block等。形成BFC 的常见应用: 清除浮动、取消盒子margin塌陷问题、可以阻止元素被浮动元素覆盖...原创 2022-03-01 17:45:41 · 480 阅读 · 0 评论 -
Margin 负值的问题-对 margin 的top、left、right、bottom 设置负值,有何效果?
margin-top 和 margin-left 为负值,元素会向上、向左移动;margin-right 为负值,右侧元素会左移,但自身不会受影响;margin-bottom 为负值,下方元素上移,但自身不会受影响。原创 2022-03-01 17:33:36 · 932 阅读 · 0 评论 -
HTML5行内元素有哪些,块级元素和内联元素有哪些?两者有什么区别?
块级元素的display属性是block/table。其中块级元素有div、h1~h6、table、p、ul、ol、audio、video等;内联元素的display属性是inline/inline-block。其中内联元素有span、img、input、button、a等。区别:块级元素:独占一行;可以设置宽高,当不设置宽高时,内容自动撑满;可以包含行内元素和其他块级元素。行内元素:一行内可以放多个,不独占一行;不可以设置宽高,宽高由元素内部的内容决定,padding和margin的top原创 2022-02-28 17:41:54 · 987 阅读 · 0 评论 -
说说你对HTML语义化的理解?
语义化的标签旨在让标签有自己的含义,简单说就是用正确的标签做正确的事。优点:①HTML语义化让页面的内容结构化,便于阅读维护理解②搜索引擎的爬虫也依赖于HTML来确定上下文和各个关键字的权重,利于SEO,便于对浏览器、搜索引擎解析。例如h1是一级标题,可以让文字放大加粗。常见的语义化标签:头部、导航栏、有语义化的div等...原创 2022-02-28 17:40:11 · 295 阅读 · 0 评论 -
前端接口如何调试
“接口地址写错”、“参数写错”这些错误,可以通过查看接口文档,获取关键信息,并解决问题;如果是自己的个人练习项目的话,可以模拟创建fastmock接口,发送ajax时,先传错误的参数,再改成正确的参数,看看代码效果;“后端返回的数据格式不正确”这样的错误,就需要和后端沟通,看后端能否调整数据结构、更改返回的数据。...原创 2022-02-11 15:37:49 · 991 阅读 · 0 评论
分享