前言
我前面的文章，也有几篇讲过面试的，不过都没有很细致的讲，例如：总结前端面试过程当中最容易出现的问题，等等。还有一些文章，也是面试中可能提问的。今天，分享几个小知识，算是干货吧！前端面试中也常常会问及，不过问及的概率相对较少。我我的认为，面试中你把基础的知识打好，就能够无敌！哪些基础知识呢？例如：js的继承、js函数等等，万变不离其宗，都是这些的扩展及应用。这些知识理解透彻了，再加一些面试技巧就能够了！
1、怎么让Chrome支持小于12px 的文字？
这个咱们在作移动端的时候，设计师图片上的文字假如是10px，咱们实如今网页上以后。每每设计师回来找咱们，这个字体能小一些吗？我设计的是10px？为啥是12px?其实咱们都知道，谷歌Chrome最小字体是12px，无论你设置成8px仍是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢？
咱们的作法是：
针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放！
<style> p span{font-size:10px;-webkit-transform:scale(0.8);display:block;} </style> <p><span>haorooms博客测试10px</span></p>
2、IOS手机浏览器字体齿轮
修改-webkit-font-smoothing属性，结果是： -webkit-font-smoothing: none: 无抗锯齿 -webkit-font-smoothing: antialiased | subpixel-antialiased | default: 灰度平滑
3、如何修改chrome记住密码后自动填充表单的黄色背景？
大致能够经过input : -webkit-autofill来进行修改！
input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; }
4、谷歌浏览器运行下面代码，并解释！
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })
运行上面代码以后，会发现HTML层都被使用不一样的颜色添加了一个高亮的边框。为何会这样呢？
首先咱们来看
[].forEach.call()，关于call()和apply()，我前面有文章也写过，具体能够看http://www.haorooms.com/post/js_constructor_pro
[].forEach.call()等价于Array.prototype.forEach.call()
其次咱们来看$$("*")
你能够在你的Chrome浏览器控制台中输入$$('a')，而后你就能获得一个当前页面中全部锚元素的列表。
$$函数是许多现代浏览器命令行API中的一个部分，它等价于document.querySelectorAll,你能够将一个CSS选择器做为这个函数的参数，而后你就可以得到当前页面中全部匹配这个CSS选择器的元素列表。若是你在浏览器控制台之外的地方，你可使用document.querySelectorAll('')来代替$$('')
为元素添加颜色
为了让元素都有一个漂亮的边框，咱们在上面的代码中使用了CSS属性outline。outline属性位于CSS盒模型以外，所以它并不影响元素的属性或者元素在布局中的位置，这对于咱们来讲很是有用。这个属性和修改border属性很是相似，所以下面的代码应该不会很难理解：
a.style.outline="1px solid #" + color
真正有趣的地方在于定义颜色部分：
（~~(Math.random()*(1<<24))).toString(16)
~~的做用至关于parseInt，和我前面讲解的“|”功能相似，关于运算符“I” ，能够去看看！
经过上面代码能够获取到一个随机的颜色值！
5、input [type=search] 搜索框右侧小图标如何美化？
美化效果以下图：
右侧默认的比较难看的按钮，美化成右侧效果。
input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none;height: 15px; width: 15px;border-radius: 8px;background:url("images/searchicon.png") no-repeat 0 0;background-size: 15px 15px;}
用到的是伪元素::-webkit-search-cancel-button，关于什么是伪类和为元素，请看：http://www.haorooms.com/post/css_wl_wys
6、iOS safari 如何阻止“橡皮筋效果”？
能够参考一下知乎上的回答 https://www.zhihu.com/question/22256539 。
可是，咱们遇到的问题不是这样，我是要解决弹跳致使弹出层（position:absolute）的覆盖层高度小于100%;
针对这个问题，我想到的解决方案以下：
方法一： 把position:absolute改为position:fixed，并在弹出层以后，设置body的高度是100%；overflow是hidden。
方法二：
思路是获取苹果浏览器导航栏的高度。而后滚动的时候，从新获取其高度。在导航栏高度变小的时候，给弹出层增长高度的百分比！
代码以下：
//ios safari 伸缩判断 var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true; $(window).scroll(function () { if(agent.indexOf("iPhone")!=-1 || agent.indexOf("iPad")!=-1){ var topbarHeightNow=window.outerHeight-window.innerHeight; if(topbarHeightNow<topbarHeight){ globleflag=false //此处写处理逻辑 }else{ globleflag=true //此处写处理逻辑 } } });
7、实现点击文字，文字后面radio选中效果
这个效果是前端很常常用到和遇到的效果了，实现这个效果的方式也不少，不少朋友用js和jquery来实现，可是最简单的，咱们能够直接用lable标签的 for 属性来实现。
看下下面例子：
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>
label 的for属性后面跟着input的id,就能够点击label，来触发input效果了，你们能够试一试！
8、网站中，图片文件（jpg，png,gif），如何点击下载？而非点击预览？
咱们平时在网站中的图片，假如咱们要下载，以下写：
<a href="haorooms博客.jpg">下载</a>
咱们点击下载按钮，只会预览“haorooms博客.jpg”这张图片，并不会出现下载框，另存为那种？那么咱们如何作呢？
咱们只须要以下写
<a href="haorooms博客.jpg" download >下载</a>
就能够下载了。点击以下进行尝试吧！下载
不但如次，咱们还能够指定文件名称，以下写法：
<a href="haorooms博客.jpg" download="haoroom前端博客图片下载" >下载</a>
测试以下：下载
上面就是指定下载的写法！
9、Math.min()比Math.max()大
Math.min() < Math.max() // false Math.min() > Math.max() // true
由于Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。
10、经典面试题目
const Greeters = [] for (var i = 0 ; i < 10 ; i++) { Greeters.push(function () { return console.log(i) }) } Greeters[0]() // 10 Greeters[1]() // 10 Greeters[2]() // 10
把 var 改为 let试试！
const Greeters = [] for (let i = 0 ; i < 10 ; i++) { Greeters.push(function () { return console.log(i) }) } Greeters[0]() // 0 Greeters[1]() // 1 Greeters[2]() // 2
11、数组对象全等比较
// 这些能够 'abc' === 'abc' // true 1 === 1 // true // 然而这些不行 [1,2,3] === [1,2,3] // false {a: 1} === {a: 1} // false {} === {} // false
由于[1,2,3]和[1,2,3]是两个不一样的数组，只是它们的元素碰巧相同。所以，不能简单的经过===来判断。
12、关于数字和点号
3.toString() 3..toString() 3...toString()
这个题也挺逗, 答案是
error, '3', error
你若是换一个写法就更费解了
var a = 3; a.toString()
这个答案就是 '3';
为啥呢?
由于在 js 中 1.1, 1., .1 都是合法的数字. 那么在解析 3.toString 的时候这个 . 究竟是属于这个数字仍是函数调用呢? 只能是数字, 由于3.合法啊!
十3、变量提高
以下题目
var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();
理解这个，咱们能够先看下面的题目：
var x = 1; // Initialize x console.log(x + " " + y); // '1 undefined' var y = 2;
至关于：
var x = 1; // Initialize x var y; // Declare y console.log(x + " " + y); // '1 undefined' y = 2; // Initialize y
变量提高了！
因此上面的自调用函数能够以下理解：
var name = 'World!'; (function () { var name; if (typeof name === 'undefined') { name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();
name在scope里面，所以，先找里面，里面找到了name,所以执行的结果是
'Goodbye Jack'
十4、局部变量和全局变量
(function(){ var x = y = 1; })(); console.log(y); console.log(x);
输出：
1, error
y 被赋值到全局。x 是局部变量，全局中获取不到。因此打印 x 的时候会报 ReferenceError
十5、正则表达式字面一致也不相等
var a = /123/, b = /123/; a == b a === b
即便正则的字面量一致, 他们也不相等.
答案 false, false
十6、函数名称不可改变
function foo() { } var oldName = foo.name; foo.name = "bar"; [oldName, foo.name]
答案
['foo', 'foo']
例如：
function doSomething() {} doSomething.name; // "doSomething" var f = function() {}; var object = { someMethod: function() {} }; console.log(f.name); // "f" console.log(object.someMethod.name); // "someMethod"
函数的名字是不能够改变的。
十7、写出最简单的去重方式
一、es6的new Set()方式，具体请看：http://www.haorooms.com/post/js_map_set
例如：
let array=[0,3,4,5,3,4,7,8,2,2,5,4,6,7,8,0,2,0,90]; [...new Set(array)]
或者直接
[...new Set([1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0])]
二、es5的Array filter()
[1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0].filter(function(elem,index,Array){ return index === Array.indexOf(elem); })