当前位置: 首页 > Web前端 > HTML

2017前端面试题整理

时间:2023-04-02 20:24:02 HTML

Javasript1.请定义一个方法,传入一个字符串类型的参数,然后在字符串的每个字符之间添加一个空格returnspacify('helloworld')//=>'helloworld'functionspacify(str){returnstr.split('').join('');}先用split将字符串分割成数组,然后用join在每个数组后面加一个空格,拼接成字符串2.如何把这个方法放在String对象'helloworld'.spacify();String.prototype.spacify=function(){returnthis.split('').join('');};三、函数声明与函数表达式的区别1、函数声明创建的函数在定义之前可以调用,而函数表达式创建的函数在赋值之前不能调用。2.造成这种差异的原因是这两种类型现在在Javascript函数提升(functionhoisting)和运行时(analysistime/runtime)的区别4.e.target和e.currentTarget的区别e.curretnTarge是指注册了事件监听器的对象,e.target指的是对象对象中的子对象,真正触发这个事件的对象5.有多少种方法可以在另一个函数中保持这个上下文?1.可以将this赋值给另一个变量(self,_this,that),改变上下文后继续引用它2.使用Function.prototype.bind,bind()方法创建一个新的函数,调用时,会它的this关键字设置为提供的值,当调用新函数时,在任何提供的参数之前使用给定的参数序列。三、使用箭头函数六、箭头函数与传统JavaScript函数的主要区别1、与this的关联。函数内置的this的值取决于箭头函数的定义位置,而不是箭头函数执行的上下文。2.新品不可用。箭头函数不能使用new关键字来实例化对象,否则会报错。3.这是不可变的。函数内置的this是不可变的,在函数体的整个执行环境中是一个常量。4.没有arguments对象。传入的参数不能通过arguments对象访问。7.截取并清除数组vararr=[1,2,3,4];arr.length=2;//拦截,arr=[1,2];arr.length=0;//清除,arr将等于[]8。获取数组的最大值和最小值varnumbers=[1,3,5,-10];varmaxInNumbers=Math.max.apply(Math,numbers);//5varminInNumbers=Math.min.apply(Math,numbers);//-109。Js中的new()到底是干什么的?1.创建一个空对象。2、给this引用的对象添加属性和方法。3、新创建的对象被this引用,最后隐式返回this。varobj={};obj.__proto__=fn.prototype;fn.call(obj);10.评估是做什么的?它的作用是将对应的字符串解析成JS代码并运行;你应该避免使用eval,它不安全并且非常耗性能(2次,一次解析成js语句并执行一次)。11.哪些操作会导致内存泄漏?内存泄漏是指在您不再拥有或不再需要它之后仍然存在的任何对象。垃圾收集器定期扫描对象并计算引用每个对象的其他对象的数量。如果一个对象的引用计数为0(没有其他对象引用它),或者对该对象的唯一引用是一个循环,那么该对象的内存就可以被回收。使用字符串而不是函数作为setTimeout的第一个参数将导致内存泄漏。闭包、控制台日志、循环(当两个对象相互引用并相互保留时,会产生循环)12、call()和apply()的区别和作用?区别:apply()和call()在功能上没有区别,用法与call()方法略有不同,即传入call()的第二个参数(调用函数的参数)逐个;whileapply()的第二个参数的值以数组的形式传入:在Javascript中,每个函数包含两个非继承的方法,call和apply。这两个方法的目的是在特定范围内调用函数,实际上等于在函数体中设置了this对象的值。apply方法接收两个参数,第一个参数是运行函数的范围,第二个是参数数组或参数对象。call方法与apply方法功能相同,第一个参数也相同。不同的是,其余参数需要一一列出。应用(thisArg,argArray);调用(thisArg[,arg1,arg2...]);使用call还是apply要看具体情况。如果知道所有的参数或者参数个数少,可以用call;如果参数个数不确定,或者个数很大,或者你收到的是一个数组或者一个arguments对象,你需要使用apply。13.什么是闭包,闭包的特点,闭包的优缺点?闭包是一个函数,它可以访问另一个函数范围内的变量。最常见的创建闭包的方式是在一个函数内创建另一个函数,并通过另一个函数访问这个函数的局部变量1.函数嵌入函数集2.函数内部可以引用外部参数和变量3.参数和变量不会被垃圾回收机制回收。好处是可以避免全局变量的污染,变量和方法都是私有化的,而且这些属性不允许被外部修改。缺点是closure会常驻内存,会增加内存占用。使用不当很容易造成内存泄漏。CSS1。有几种方法可以清除浮动。浮动带来的问题1.在所有浮动标签后添加一个空标签,cssclear:both缺点添加2.使用overflow添加css属性overflow:auto;缩放:1;zoom:1到包含浮动元素的父标签,以便与IE63兼容。之前用过css伪类,这个方法只适用于非IE浏览器。具体的写法可以参考下面的例子。使用过程中要注意以下几点。1、该方法中需要清除浮动元素的伪对象必须设置height:0,否则元素会比实际元素高几个像素;在{内容:“。”之后;高度:0;可见性:隐藏;display:block;clear:both;}浮动元素带来的问题:1.父元素的高度无法展开,影响与父元素同级的元素2.非浮动元素(内联元素)同级level作为浮动元素会跟随它3.如果第一个元素不浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构2.浏览器中盒模型有什么区别低于IE8?IE8以下浏览器的盒模型中定义的元素的宽高不包括padding和border3。什么是CSS选择器?哪些属性可以继承?优先级算法是如何计算的?1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul>li)6.后代选择器(lia)7.通配符选择器(*)8.属性选择器(a[rel="external"])9.伪类选择器(a:hover,li:nth-child)可继承样式:font-sizefont-family颜色,文本缩进;不可继承的样式:borderpaddingmarginwidthheight;!important>id>class>tag4.CSS3中有哪些新的伪类?p:first-of-type选择作为其父元素的第一个

元素的每个

元素。p:last-of-type选择作为其父元素的最后一个

元素的每个

元素。p:only-of-type选择作为其父元素唯一的

元素的每个

元素。p:only-child选择每个

元素,该元素是其父元素的唯一子元素。p:nth-child(2)选择作为其父元素的第二个子元素的每个

元素。:enabled:disabled控制表单控件的禁用状态。:checked单选或复选框被选中。5、position的值,relative和absolute是相对于谁定位的?absolute生成绝对定位的元素,相对于最近的非静态定位的父元素定位。fixed(旧IE不支持)生成绝对定位的元素,相对于浏览器窗口定位。relative生成??一个相对定位的元素,相对于它在正常流中的位置定位。静态默认。没有定位,元素出现在正常流中6.CSS中的link和@import有什么区别?1.link是HTML标签,@import是CSS提供的;2、页面加载时,链接会同时加载,@import引用的css会等到页面加载完成后再加载;3.import只在IE5下可用只能识别上面的,link是HTML标签,所以不存在兼容性问题;4.链接样式的权重高于@import。七、href和src的区别1.src是指向对象的源地址,导入。用在img、script、iframe等元素上。2.href是超文本引用,指向需要链接的地方,与页面关联,是引用。用于link和a等元素。3、使用区别:src通常用作“retrieve”(介绍),href用作“linkto”(参考)。8、什么是盒子模型?由content、padding、border、margin组成的元素就是盒模型,用来设置元素在网页中的大小和位置。9.transform属性有几种动画效果?(3种就够了)rotate(旋转)scale(缩放)translate(位移)最近很多面试的痛苦我都快忘记了。