前端面试基础题
HTML和CSS
1、cookies , sessionStorage 和 localStorage 的区别
2、position 有几个值以及他们的作用
3、浏览器的内核（呈现引擎）
4、img 的 alt 与 title 有何异同？strong 与 em 的异同？
5、为什么利用多个域名来存储网站资源会更有效？
6、网页制作会用到的图片格式有哪些？
7、一次 js 请求一般情况下有哪些地方会有缓存处理？
8、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载？
9、你如何理解 HTML 结构的语义化？
10、有哪项方式可以对一个 DOM 设置它的 CSS ？
11、CSS 都有哪些选择器？
12、<p>标签内的文字是什么颜色的?
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
13、CSS 中可以通过哪些属性定义 ，使得一个 DOM 元素不显示在浏览器可视范围内？
14、超链接访问的 L-V-H-A ？
15、请用 CSS 写一个简单的幻灯片效果页面？
16、行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
17、浏览器默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
18、什么是外边距重叠？重叠的结果是什么？
19、什么是BFC？
20、rgba() 和 opacity 的透明效果有什么不同？
21、 css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
22、如何垂直居中一个浮动元素？
23、如何垂直居中一个<img>?
24、px 、em 和 rem 的区别？
25、Sass 、Less 是什么？大家为什么要使用他们？
26、display:none 与 visibility:hidden 的区别是什么？
27、CSS 中 link 和 @import 的区别？
28、盒子模型？
29、HTML 与 XHTML 二者有什么区别？
30、!important的作用？
31、IE5-8 不支持 opacity，解决办法？
32、IE6 不支持 PNG 透明背景，解决办法？
33、CSS属性选择器和伪类选择器？
34、position 跟 display 、margin collapse 、overflow 、float 这些特性相互叠加后会怎么样？
35、css 优先级算法如何计算？
36、我想让行内元素跟上面的元素距离 10px，加 margin-top 和 padding-top 可以吗？
37、说说 display 属性有哪些？可以做什么？
38、哪些 css 属性可以继承？
39、介绍display为flex的应用
40、vh、vm是什么单位？
41、css中的calc()怎么用？
JS基础
1、typeof 返回的数据类型
'undefined' --值未定义
'boolean' --布尔值
'string' --字符串
'number' --数值
'object' --对象或者null
'function' --函数
2、事件
事件冒泡：事件开始时由最具体的元素逐级向上传播到不具体的节点
事件捕获：与事件冒泡相反
事件委托：利用事件冒泡的原理，让父元素代替执行事件（做代理）
DOM0级事件处理程序：btn.onclick
DOM2级事件处理程序：addEventListener,removeEventListener
阻止事件冒泡：e.stopPropagation();
e.canceBubble=true;（IE9之前）
阻止默认事件：e.preventDefault();
3、call、apply和bind的区别
用途：在特定的作用域中调用函数
区别：call和apply接收参数的方式不同，call接收逐个列出的，apply接收数组，bind会返回一个函数在后面加()才可以执行，而call和apply是直接执行的
4、this指针
指向调用上下文，在执行的时候才会被确定指向，定义的时候不会
5、闭包
内层作用域可以访问外层作用域的变量
function createFunctions(){
var result = new Array();
for (var i=0 ; i < 10; i++){
result[i] = function(num){
return function(){
return num;
}
}(i)
}
return result
}
6、编写一个数组去重的方法
https://mp.weixin.qq.com/s/IIP2allAOMVFO3r4N-42yw
12种数组去重的方法（史上最全）
1、利用for嵌套for，然后splice去重（ES5中最常用）
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二个
arr.splice(j,1);
j--;
}
}
}
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] //NaN和{}没有去重，两个null直接消失了
2、利用ES6 Set去重（ES6中最常用）
function unique (arr) {
return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]
不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。
简化版本只需一行代码：
[...new Set(arr)]
3、利用hasOwnProperty
function unique(arr) {
var obj = {};
return arr.filter(function(item, index, arr){
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}] //所有的都去重了
利用hasOwnProperty 判断是否存在对象属性
4、利用递归去重
function unique(arr) {
var array= arr;
var len = array.length;
array.sort(function(a,b){ //排序后更加方便去重
return a - b;
})
function loop(index){
if(index >= 1){
if(array[index] === array[index-1]){
array.splice(index,1);
}
loop(index - 1); //递归loop，然后数组去重
}
}
loop(len-1);
return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]
7、将伪数组（argument）转变为真数组的ES5方法及原理
[].slice.call(argument)
变相的使没有slice方法的argument伪数组拥有slice方法从而转化为真数组
8、添加、删除、替换、插入到某个接点的方法
node.appendChild(newnode)
node.insertBefore(newnode,existingnode) /*原生的 js 中不提供 insertAfter()*/
node.replaceChild(newnode,oldnode)
node.removeChild(node)
9、javascript 的同源策略
域名、协议、端口一致，有三个标签可以不受同源策略的限制，有<img>、<link>、<script>，jsonp的原理就是利用了<script>标签。
10、判断变量类型
简单类型可用typeof、instanceof，数组有重写的函数方法Array.isArray(arr)，复杂类型如数组、正则等可以用toString.call(variable)来判断，返回字符串如"[object Array]"。
11、已知 id 的 Input 输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)
document.getElementById(“id”).value
12、写一个贴近实际开发的原型链继承的例子
function Elem(id){
this.elem = document.getElementById(id);
}
Elem.prototype.html = function(val){
var elem = this.elem;
if(val){
elem.innerHTML = val;
return this;
}else{
return elem.innerHTML;
}
}
Elem.prototype.on = function(type, fn){
var elem = this.elem;
elem.addEventListener(type, fn);
return this;
}
var div = new Elem('div1');
div.html('44').on('click', function(){
alert('44');
})
13、希望获取到页面中所有的 checkbox 怎么做？(不使用第三方框架)
var domList = document.getElemnetsByTagName('name');
var checkBoxList = [];
var len = domList.length;
while(len--){ /*使用while的效率比for高*/
if(domList[len].type == 'checkbox'){
checkBoxList.push(domList[len]);
}
}
14、设置一个已知 id 的 div 的 的 html 内容为 xxxx ，字体颜色设置为黑色？(不使用第三方框架)
var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”;
dom.style.color = “#000”;
15、看下列代码, , 输出什么？解释原因。
var a = null;
alert(typeof a); //输出object，因为null表示一个空指针对象
16、看下列代码, , 输出什么？foo的变量类型。
var foo = "11"+2-"1";
console.log(foo); //输出111
console.log(typeof foo); //foo的变量类型是Number
17、数组、对象实现深拷贝
//用递归去复制所有层级属性
function deepClone(obj){
let objClone = Array.isArray(obj) ? [] : {};
if(obj && typeof obj === 'object'){
for(key in obj){
if(obj.hasOwnProperty(key)){
if(obj[key] && typeof obj[key] === 'object'){
objClone[key] = deepClone(obj[key]);
}else{
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
let a = [1, 2, 3];
let b = deepClone(a);
a[0] = 0;
console.log(a, b);
let o = {
a: 1,
b: 2,
c: {
j: 1,
b: 2
}
}
let p = deepClone(o);
o.c.j = 2;
console.log(o, p);
//借用JSON对象的parse和stringify
function deepClone(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}
18、已知有字符串 foo=”get-element-by-id”，写一个 function 将其转化成驼峰表示法”getElementById”
//考察基础啊API
function combo(msg){
var arr = msg.split('-');
for(var i = 1; i < arr.length; i++){
arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1);
}
msg = arr.join('');
return msg;
}
19、[3,6,2,4,1,5]实现倒排和倒序排列
//考察基础啊API
[3,6,2,4,1,5].reverse() //输出[5,1,4,2,6,3]
[3,6,2,4,1,5].sort(function(a, b){return b-a}) //输出[6, 5, 4, 3, 2, 1]
20、日期相关
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
month = month < 10 ? '0' + month : month; //变成两位
var day = d.getDate();
day = day < 10 ? '0' + day : day;
//星期是getDay()
21、将字符串 ” <tr><td>{name}</td></tr> ” 中的 {$id} 替换成10，{$name} 替换成 Tony（使用正则表达式）
"<tr><td>{$id}</td><td>{$name}</td></tr>"
.replace(/{\$id}/g, '10')
.replace(/{\$name}/g, 'Tony')
22、为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数 escapeHtml ，将 <, >, &, “ 进行转义
function escapeHtml(str){
return str.replace(/[<>“&]/g, function(match){
switch(match){
case "<":
return "<";
case ">":
return ">";
case "“":
return """;
case "&":
return "&";
}
})
}
23、foo = foo||bar ，这行代码是什么意思？为什么要这样写？
短路表达式，foo值存在则直接赋值，否则为bar，&&也是短路表达式。
24、看下列代码将会输出什么？为什么？
var foo = 1;
function ff(){
console.log(foo);
var foo = 2;
console.log(foo);
}
undefined
2
因为函数作用域内部的变量提升
25、用 js 实现随机选取10到100之间的10个数字，存入一个数组，并排序。
var arr = [];
function getRandom(start, end){
return Math.floor(Math.random() * (end - start + 1) + start);
}
for(var i = 0; i < 10; i++){
arr.push(getRandom(10, 100));
}
console.log(arr.sort());
26、把两个数组合并，并删除第二个元素。
var arr1 = ['a','b','c'];
var bArr = ['d','e','f'];
var cArr = array1. concat(bArr);
cArr.splice(1,1);
27、怎样创建新节点？
createDocumentFragment() //创建一个 DOM 片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
28、怎样查找节点？
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的 Name 属性的值
getElementById() //通过元素 Id，唯一性
29、有这样一个url：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e ，请写一段 JS 程序提取 url 中的各个 GET 参数(参数名和参数个数不确定) ， 将其按 key-value 形式返回到一个 json 结构中，如 {a:‘1’,b:'2',c:'3',d:xxx'',e:undefined}
function seUrl(url){
var para = url.split('?')[1]
var data = para.split('&')
var result = {}
for(var i = 0; i < data.length; i++){
result[data[i].split('=')[0]] = data[i].split('=')[1]
}
return result
}
console.log(seUrl('http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e'))
30、正则表达式构造函数 var reg=new RegExp('xxx') 与正则表达式字面量 var reg=// 有什么不同？
当使用 RegExp()构造函数的时候，转义引号需要双反斜杠（即\表示正则字面量的一个\），使用正则字面量的效率更高。
31、看下面代码回答会输出什么？解释原因。
for(var i=1; i<=3; i++){
setTimeout(function(){
console.log(i);
},0);
};
输出：4 4 4
原因：Javascript 事件处理器在线程空闲之前不会运行，也就是说，所有setTimeout会挂起，当执行的时候i已经加到了4，追问，如何让上述代码输出 1 2 3？
//es6做法
for(let i=1; i<=3; i++){ //将var变成let
setTimeout(function(){
console.log(i);
},0);
};
//es5做法
for(var i=1;i<=3;i++){
setTimeout((function(a){ //改成立即执行函数
console.log(a);
})(i),0);
};
32、写一个 function ，清除字符串前后的空格。（兼容所有浏览器）
if(!String.prototype.trim){
String.prototype.trim = function(){
return this.replace(/^\s+/, '').replace(/\s+$/, '')
// \s 匹配空白字符：回车、换行、制表符 tab 空格
}
}
33、Javascript 中 callee 和 和 caller 的作用？
callee是对象的一个属性，该属性是一个指针，指向参数arguments对象的函数,例子如写一个阶乘函数。
function factorial(x){
if (x<=1) {
return 1;
}else{
return x * arguments.callee(x-1);
};
};
caller是函数对象的一个属性，该属性保存着调用当前函数的函数的引用（指向当前函数的直接父函数）
function a(){
b();
};
function b(){
alert(b.caller);
};
a(); //结果就是弹出函数a和内容
var result=[];
function fn(n){ //典型的斐波那契数列
if(n==1){
return 1;
}else if(n==2){
return 1;
}else{
if(result[n]){
return result[n];
}else{
//argument.callee()表示 fn()
result[n]=arguments.callee(n-1)+arguments.callee(n-2);
return result[n];
}
}
}
34、Javascript 中，以下哪条语句一定会产生运行错误？答案( BC )
A、 var _变量=NaN; B、var 0bj = []; C、var obj = //; D、var obj = {};
变量名不能以数字开头。
35、以下两个变量 a 和 b ，a+b 的哪个结果是 NaN ？ 答案( C )
A、var a=undefind; b=NaN //拼写错误
B、var a=‘123’; b=NaN //字符串
C、var a =undefined , b =NaN
D、var a=NaN , b='undefined'//”Nan”
36、var a=10; b=20; c=4; ++b+c+a++ 以下哪个结果是正确的？答案( B )
A、 34 B、35 C、36 D、37
++在前面先加再赋值，++在后面先赋值再加
37、下面的 JavaScript语句中，（ D ）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空。
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==”text”) form1.elements.value="";
}
B. for(vari=0;i<document.forms.length;i++) {
if(forms[0].elements.type==”text”) forms[0].elements.value="";
}
C. if(document.form.elements.type==”text”){
form.elements.value="";
}
D. for(var i=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==”text”)
document.forms.elements[j].value="";
}
}
38、写出程序运行的结果？
for(i=0, j=0; i<10, j<6; i++, j++){
//j=5 i=5
k = i + j;//k=10
}
//结果：10
39、补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口
function closeWin(){
//在此处添加代码
if( confirm(“确定要退出吗？”)){
window.close();
}
40、写出简单描述 html 标签（ 不带属性的开始标签和结束标签 ）的正则表达式。
var reg = /<\/?\w+\/?>/gi; // x? 匹配问号前面的内容出现 0 或 1 次
var str = '<div>这里是 div<p>里面的段落</p></div>';
console.log(str.replace(reg, ''));
41、截取字符串 abcdefg 的 efg
console.log('abcdefg'.substring(4))
42、列举浏览器对象模型 BOM 里常用的至少 4 个对象 ，并列举 window 对象的常用方法至少 5 个
对象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()
43、JavaScript 的数据类型都有什么？
基本数据类型：String,Boolean,Number,Undefined,Null
引用数据类型：Object(Array,Date,RegExp,Function)
44、简述创建函数的几种方式
第一种（函数声明）：
function sum1(num1,num2){
return num1+num2;
}
第二种（函数表达式）：
var sum2 = function(num1,num2){
return num1+num2;
}
匿名函数：
function(){}:只能自己执行自己
第三种（函数对象方式）：
var sum3 = new Function("num1","num2","return num1+num2");
45、Javascript 创建对象的几种方式？
1、工厂方式：没有解决对象识别的问题
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
}
return o
}
var person = createPerson('tao', 15, 'engineer')
2、构造函数模式：函数不能共享
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name)
}
}
var person = new Person('tao', 15, 'engineer')
3、原型模式: 共享的太多
function Person(){
Person.prototype.name = 'tao'
Person.prototype.age = 15
Person.prototype.job = 'engineer'
Person.prototype.friend = [1, 2, 3]
Person.prototype.sayName = function(){
alert(this.name)
}
}
var person = new Person()
4、组合使用构造函数原型模式：认可度高
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
}
Person.prototype = {
constructor: Person, //使用简写模式会使constructor变为object
sayName:function(){
alert(this.name)
}
}
var person = new Person()
5、动态原型模式：稳妥
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
if(this.sayName != 'function'){
Person.prototype.sayName = function(){
alert(this.name)
}
}
}
6、寄生构造函数模式：特殊使用
function SpecialArray(){
var values = new Array();
valuse.push.apply(values, argument);
values.toPipedString = function(){
return this.join("|");
}
return values;
}
7、稳妥构造函数模式：安全
与寄生构造函数类似，不使用this，不用new操作符
46、Javascript 如何实现继承？
原型链：全部共享一个实例属性，不能向超类型的构造函数中传递参数
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
}
function SubType(){
this.subproperty = false;
}
SubType.prototype = new SuperType();
SuperType.prototype.getSubValue = function(){
return this.subproperty;
}
var instance = new SubType();
借用构造函数继承：函数复用存在问题
function SuperType(){
this.color = ['red', 'green', 'blue'];
}
function SubType(){
SuperType.call(this);
}
var instance = new SubType();
组合继承
function SuperType(name){
this.color = ['red', 'green', 'blue'];
this.name = name;
}
SuperType.prototype.sayName = function(){
alert(this.name);
}
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
}
var instance = new SubType();
原型式继承
function object(o){
function F(){}
F.prototype = o;
return new F();
}
ES5新增方法object.create()接受两个参数，第一个为用作原型的对象，第二个为一个覆盖原属性的对象
寄生式继承
function createAnother(original){
var clone = Object(original);
clone.sayHi = function(){
alert('hi');
}
return clone;
}
寄生组合式继承：最理想的继承范式
function inheritPrototype(subType, superType){
var prototype = Object(superType.prototype);
prototype.constructor = subType;
subType.prototype = superType;
}
function SuperType(name){
this.color = ['red', 'green', 'blue'];
this.name = name;
}
SuperType.prototype.sayName = function(){
alert(this.name);
}
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
inheritPrototype(subType, superType)
SubType.prototype.sayAge = function(){
alert(this.age);
}
var instance = new SubType();
47、substr()、substring()、slice()、split()、splice()的使用方法
https://blog.csdn.net/u011741996/article/details/79031529（曾经写过的一篇详细文章）
48、iframe 的优缺点？
优点：
1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
2. Security sandbox
3. 并行加载脚本
缺点：
1. iframe 会阻塞主页面的 Onload 事件
2. 即时内容为空，加载也需要时间
3. 没有语义
49、请你谈谈 Cookie 的弊端？
1.Cookie 数量和长度的限制。每个 domain 最多只能有 20 条 cookie，每个 cookie 长度不能超过 4KB，否则会被截掉。
2.安全性问题。如果 cookie 被人拦截了，那人就可以取得所有的 session 信息。即使加密也与事无补，因为拦截者并不需要知道 cookie 的意义，他只要原样转发 cookie 就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
50、js 延迟加载的方式有哪些？
1. defer 和 async（区别：https://segmentfault.com/q/1010000000640869）
2. 动态创建 DOM 方式（创建 script，插入到 DOM 中，加载完毕后 callBack）
3. 按需异步载入 js
51、documen.write 和 和 innerHTML 的区别？
document.write 只能重绘整个页面，innerHTML 可以重绘页面的一部分
52、以下代码输出什么？（ 连等赋值的运算顺序 ）
var a = {n:1};
a.x = a = {n:2};
console.log(a.x); // 输出undefined
在连等赋值A=B=C中真正的运算规则是 B = C；A = B；即连续赋值是从右至左永远只取等号右边的表达式结果赋值到等号左侧。（详解：https://www.cnblogs.com/xxcanghai/p/4998076.html）
53、AMD和CommonJS规范的区别
CommonJS是适用于服务器端的，著名的Node执行环境就是采用的CommonJS模式。它是同步加载不同模块文件。
AMD，Asynchronous Module Definition，即异步模块定义。它是适用于浏览器端的一种模块加载方式。从名字可知，AMD采用的是异步加载方式（js中最典型的异步例子就是ajax）。浏览器需要使用的js文件（第一次加载，忽略缓存）都存放在服务器端，从服务器端加载文件到浏览器是受网速等各种环境因素的影响的，如果采用同步加载方式，一旦js文件加载受阻，后续在排队等待执行的js语句将执行出错，会导致页面的‘假死’，用户无法使用一些交互。所以在浏览器端是无法使用CommonJS的模式的。目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js
54、判断一个字符串中出现次数最多的字符，统计这个次数
var str = 'asaashhgnghrgcsasasaassasaaasjbhkasasassa'
var json = {}
for (var i = 0; i < str.length; i++){
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++
}
}
var iMax = 0
var iIndex = ''
for(var i in json){
if(json[i] > iMax){
iMax = json[i]
iIndex = i
}
}
console.log('出现次数最多的是：' + iIndex + '出现' + iMax + '次')
55、IE 和 DOM 事件流的区别
1、执行顺序的区别，IE采用冒泡型事件，Netscape使用捕获型事件，DOM使用先捕获后冒泡型事件。
2、this指向有区别，IE下利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素，这时的this为window对象了。
3、事件监听函数的区别
IE使用:
[Object].attachEvent("onclick", fnHandler); //绑定函数
[Object].detachEvent("onclick", fnHandler); //移除绑定
DOM使用：
[Object].addEventListener("click", fnHandler, bCapture); //绑定函数
[Object].removeEventListener("click", fnHandler, bCapture); //移除绑定
[bCapture]: true为在捕获阶段处理，false为在冒泡阶段处理
56、解释 jsonp 的原理，以及为什么不是真正的 ajax？
动态创建 script 标签，回调函数
Ajax 是页面无刷新请求数据操作
57、javascript 的本地对象，内置对象和宿主对象？
（详细：https://www.cnblogs.com/luckyXcc/p/5892896.html）
1、本地对象
ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。
本地对象包含：
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError
2、内置对象
我们似乎很难分清“内置对象”与“本地对象”的区别。而ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。
3、宿主对象
由ECMAScript实现的宿主环境提供的对象，可以理解为：浏览器提供的对象。所有的BOM和DOM都是宿主对象。
58、写一个原生Ajax请求
（详：https://www.cnblogs.com/cythia/p/6978323.html）
var xhr = XMLHttpRequest()
xhr.open('get', 'getStar.php?starName='+name)
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText)
}
}
58、字符串反转
先将字符串转换为数组 split()，利用数组的反序函数 reverse()颠倒数组，再利用 jion() 转换为字符串
59、字符串反转 + 数字转换成货币形式
function re(str){
if(typeof str != 'string'){
var str = String(str)
}
return str.split('').reverse().join('')
}
function rmb(str){
var tmp = ''
var str = re(str)
for(var i = 1; i <= str.length; i++){
tmp += str[i - 1]
if(i % 3 == 0 && i != str.length){
tmp += ',';
}
}
return re(tmp)
}
var str = 12345678
console.log(rmb(str))
60、
escape方法是什么？在哪里可以用到？
数组的split方法！重要
ES6 短路操作符
变量提升
正则表达式构造函数 r var w reg=new RegExp( “ xxx ”) ) 与正则表达字面量 var
reg=// 有什么不同？
JS的单线程问题
