前端笔试题及面试题记录（下）

w3c标准盒模型和IE怪盒模型下这个盒的宽度是多少?标准盒模型：totalwidth=content100px+border10px*2+padding10px*2//140pxweirdboxmodel:totalwidth=content60px+border10px*2+padding10px*2//100pxps:box-sizing:content-box||border-box;//css3box-sizing设置为border-box时怪异框的宽度会使用怪异框模型小于border+设置padding的宽度时，content宽度会变成0，box的宽度会扩大border和padding的总宽度，请问ES5继承和ES6继承有什么区别？ES5的继承是通过原型或者构造函数机制来实现的，ES5的继承本质上是先创建子类的实例对象，然后在this上添加父类的方法(Parent.apply(this))。ES6的继承机制完全不同，本质上是先创建父类的实例Objectthis（所以必须先调用父类的super()方法），然后再使用子类的构造函数来修改this。具体来说：ES6通过class关键字定义一个类，类有构造方法，类之间通过extends关键字实现继承。子类必须在构造方法中调用super方法，否则新建实例会报错。因为子类没有自己的this对象，而是继承了父类的this对象，然后对其进行处理。如果不调用super方法，子类就无法获取到这个对象。ps：super关键字指的是父类的实例，即父类的this对象。在子类构造函数中，this关键字只能在调用super之后使用，否则会报错。问：CSS3有哪些新特性？可以分为边框，背景，渐变，阴影，2D转换，3D转换等，例如：borders(border-radius,border-shadow,border-image)之类的，具体可以参考菜鸟教程：关联。类似的镜像问题还有HTML5的新属性，大家可以自行google。问：你知道哪些HTTP状态码？1xx:1开头是信息状态码2xx:2开头是请求成功3xx:3开头是重定向4xx:4开头是客户端错误5xx:5开头是服务器错误这道题不难，在笔试中遇到过面试。巧合的是，之前总结过一篇类似的文章。Q：如何对数组进行去重？这个问题出现过好几次了，很多面试官不满意你只给一两种方法。1.Set结构去重。这是ES6提供的一种新的数据结构Set。类似于数组，但是成员的值都是唯一的，没有重复值。letunique=[...newSet(array)];//es6Set数据结构类似于数组，成员值唯一，重复值会自动去重。//Set内部使用===判断是否相等，类似'1'和1都会保存两个，NaN和NaN只会保存一个2，遍历，将值添加到一个新的数组中，使用indexOf()来判断该值是否存在，如果已经存在则不添加，从而达到去重的效果。让a=['1','2','3',1,NaN,NaN,undefined,undefined,null,null,'a','b','b'];让unique=arr=>{让newA=[];arr.forEach(key=>{if(newA.indexOf(key)<0){//遍历newA中是否有key，如果有大于0的key则跳过push步骤newA.push(key);}});返回新A；}console.log(unique(a));//["1","2","3",1,NaN,NaN,undefined,null,"a","b"]//ps:这个方法无法区分NaN，会出现两个NaN。有个问题，下面的方法比较好。3.遍历，将数组的值添加到一个对象的属性名上，给属性赋值。该对象不能添加相同的属性名称。基于此，可以对数组进行去重，然后使用Object.keys(object)返回对象的一个??由可枚举属性组成的数组，这个数组就是去重后的数组。让a=['1','2','3',1,NaN,NaN,undefined,undefined,null,null,'a','b','b'];constunique=arr=>{varobj={}arr.forEach(value=>{obj[value]=0;//这一步添加一个新的属性，并赋值，如果不赋值，则该属性不会})returnObject.keys(obj);//`Object.keys(object)`返回这个对象的可枚举属性数组，这个数组就是去重后的数组}console.log(unique(a));//["1","2","3","NaN","undefined","null","a","b"]注意：这个方法会将number,NaN,undefined,null变成string形式，因为对象的属性名只是一个字符串，根据自己的需要来吧，想想看，去重Set是最简单有效的。Q：垂直居中的方法有哪些？对于单行文本，可以使用height和line-height设置相同的高度。position+margin：设置父元素：position：relative；，子元素height：100px；位置：绝对；顶部：50%；保证金：-50px000；(固定高度)position+transform：设置父元素position:relative，子元素：position:absolute；顶部：50%；转换：翻译（0，-50%）；(可变高度)多功能flex布局(ie10+)，设置父元素显示：flex；对齐项目：居中；（不定高）类似的还有很多。在实际应用中，可以采用一种或两种方法。如果您有兴趣，可以阅读这篇文章。Q：翻转字符串的问题主要是在笔试题中遇到的。思路是先把字符串转成数组，然后用数组的reverse()+join()方法。letstr="helloword";letb=[...str].reverse().join("");//drowolleh后续前端笔试题面试题记录（下）总结WhatI想说的是：在找工作的过程中，一定有自己做的不好或者不知道怎么做的问题。晚上一定要自己学习总结。尽量不要在一个问题上犯错两次。你学到的是你自己的。以上是近期面试遇到的一些问题和记录的总结。其实还有一些题没有写。好久没写文章了。写的很慢，有点累。先给自己立个flag，下周再写一篇。希望大家看完这篇文章后有所收获，感谢阅读。最后：如需转载，请放上原文链接并署名。码字不易，谢谢支持！我写文章本着交流记录的心态。如果我写的不好，我不想拆，但欢迎指出。那么希望看完的小伙伴们喜欢，也可以关注我哦。个人博客和掘金个人主页以上2018.3.18参考链接：title和alt的区别CSS-StandardBoxModel&WeirdBoxModel常见js算法面试题合集，es6中CSS垂直居中的11种实现