前端面试题
1. 数据类型
基本六个类型，亮点 提到了ES6 的symbol 如果问到 判断数据类型 除了说明typeof还要提到instanceof typeof检测返回值：记住null返回的是object 还有function 一共是六个 算上symbol是七个，他也是可以返回的。
2. ===和==的区别
===会判断类型和值 ==只判断值 比如 “6”==6是成立的undefined==null判断值的时候 想到 []!=[] NAN!=NAN ES6新语法Number.isNaN(NaN)的结果是truees6中专门用来判断变量是NAN的方法Number.isNaN()
3. js onload和DOMcontentloaded的区别 这也是jq加载函数和JS 的onload的区别
window.onload 事件在所有页面元素（包括图片，脚本等）都下载完毕后才会触发。 除了 IE，其它浏览器支持 DOMContentLoaded 事件。当 DOM 内容下载完毕，就会立刻触发。 针对 IE，有各种模拟 DOMContentLoaded 事件的办法。目前被广泛采纳的方案是判断document是否可以滚动（doScroll）。一旦可以 滚 动，就意味着 DOM Content 已经加载完毕。
4. 给10个li添加点击事件。弹出下标
es5写法:
var lis = documentgetElementsByTagName('li')
for(var i=0; i
lis[i].index = i
lis[i].addEventListener('click',function(){
alert(this.index)
})
};
es6写法:
var lis = documentgetElementsByTagName('li')
for(let i=0; i
lis[i].addEventListener('click',function(){
alert(this.index)
})
};
5. 通过字符串拼接添加dom元素和通过appendchild添加dom有什么区别，那个更好
字符串拼接好一点，如果我们用for循环渲染的信息量很大的话，字符串会把所有要渲染的内容拼接上然后一次性渲染上去，而appendchild是一个元素一个元素的插入，影响用户的体验不说，消耗流量也比较多
6. 你都使用什么实现模块加载
import，export
7. 如何对数组随机排序
如下代码：
var arr = [1,2,3,4,5,6]
arr.sort(function(a,b){
return Math.random()-0.5
});
8. 如何理解原型和原型链
下面的链接是原型与原型链详解
http://www.cnblogs.com/ningyn0712/p/6216711.html
9. JQ 中链式操作的原理
$("#id").css("width","100px") .css("height","100px").css("background","red");
链式调用原理
var MyJQ = function(){
}
MyJQ.prototype = {
css:function(){
console.log("设置css样式");
return this;
},
show:function(){
console.log("将元素显示");
return this;
},
hide:function(){
console.log("将元素隐藏");
}
};
var myjq = new MyJQ();
myjq.css().css().show().hide();
10. this 指向问题
this要在执行时才能确认值，定义时无法确认
this指向问题
11. 从输入URL到现实页面的过程
浏览器查找域名对应的 IP 地址；
浏览器根据 IP 地址与服务器建立 socket 连接；
浏览器与服务器通信： 浏览器请求，服务器处理请求；
浏览器与服务器断开连接。
12. 图片懒加载原理
一个页面有很多的图片，比如：京东、淘宝等，如果一上来就发送这么多请求，页面加载就会很漫长，用户多了一次来上一堆请求，服务器就吃不消了。
因此优点就很明显了：不仅可以减轻服务器的压力，而且可以让加载好的页面，用户体验更好了
页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，一旦通过javascript设置了图片路径，浏览器才会送请求。
如何获取正真的路径，将真正的路径放到一个自定义的'data-url'属性里，要用的时候就取出来，再给src
对象顶部与文档顶部之间的距离，如果它小于父元素底部与文档顶部的距离，则说明垂直方向上已经进入可视区域了，就可以将真正的src给它了！
13. 对于一个无限下拉加载图片的页面。如何给图片加点击事件 原生js事件委托和JQ委托的写法
事件委托，js的addEventListener()，jq的on()
addEventListener()
document.getElementById("ul").addEventListener("click",function(e){
if(e.target.nodeName=="LI"){
alert("xxx")
}
});
也可以将判断写成e.target.nodeName.toLowerCase()=="li";
jq里面on()事件
$('#id').on('click','li',function(){}
14. ajax 对象建立 open send 等待数据 接受数据
AJAX的open ( )方法
open ( ) 有三个参数 （method ， url ， boolean） ;
method 对应的取值是“GET”和“POST”
url 是 文件在服务器上的位置 .
boolean 的取值是“true”和“false”，boolean 取值为“true” 的时候，服务器的请求是异步的，beelean取值为“false”的时候，服务器的请求是同步的
15. 跨域是如何产生的，解决方式是什么
跨域是指在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。
1. 通过jsonp跨域
我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。
比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是http://example.com/data.php,那么a.html中的代码就可以这样：
jsonp跨域
其他跨域方式：https://www.cnblogs.com/2050/p/3191744.html
作者：青青菜鸟
链接：https://www.jianshu.com/p/79123e66e56a
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论