妹纸有话说：
呕心沥血，精心整理，路过给个赞呗~👍
1.html5 新特性有哪些？ CSS3 新特性？
html5 新特性
(1)用于绘画的 canvas 元素
(2)用于媒介回放的 video 和 audio 元素
(3)对本地离线存储的更好的支持 localStorage&sessionStorage
(4新的特殊内容元素，比如 article、footer、header、nav、section
(5)新的表单控件，比如 calendar、date、time、email、url、search(几乎不用，兼容性太差)
移除元素：big / center / font / frame
css3 新特性
(1)阴影:
文本阴影 text-shadow
盒子阴影 box-shadow
(2)边框圆角 border-radius
(3)边框图片 boeder-image
(4)过渡效果 trasition :
transition-duration:定义过渡过程需要的时间（必选，否则不会产生过渡效果）
(5)animation动画
(6)2D /3D动画
(7)伪类选择器 first-child last-child nth-child(n)
(8)背景：
背景大小 background-size
背景原点 background-origin
多背景 background: url() ,url(),url()
(9)渐变 ：
线性渐变：background-image:linear-gradient(渐变方向开始和结束状态，渐变范围（距离）)
径向渐变background-image:radial-gradient(圆点，开始、结束)
2.rem/em/px的区别
px是固定的像素，一旦设置了就无法因为适应页面大小而改变;
em相对于父元素，rem相对于根元素;
em/rem用法比较：用于做响应式页面，不过我更倾向于rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰
3.本地存储指的是什么? localStorage&sessionStorage&cookie 的区别?什么是离线存储?
本地存储指的是储存在用户本地终端上的数据
sessionStorage，只会在窗口打开的时候才有效，一次性缓存会话，关闭浏览器自动释放，不参与和服务器的通信
localStorage，只要没有手动清除，就会一直保留，永久存储，以文件形式存储，不参与和服务器的通信
cookie：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它。单个cookie保存的数据不能超过4kb。
HTML5提出的一个新的特性：离线存储。通过离线存储，我们可以通过把需要离线存储在本地的文件列在一个manifest配置文件中，这样即使在离线的情况下，用户也可以正常使用App。
4.如何使元素垂直水平居中? (起码记住四种)
(1) 弹性盒方法——flex布局
元素：display: flex;justify-content: center;align-items: center;
(2) 定位+transform：
父元素 position: relative
子元素 position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)
(3) 纯absolute（需知道要居中元素的宽高）
父元素 position: relative
子元素 position: absolute;top: 50%;left: 50%; margin-left:-1/2子元素宽度; margin-top: -1/2子元素高度;
(4) margin：auto+absolute
父元素 position: relative
子元素 position: absolute；top: 0； left: 0; right:0; bottom:0;margin:auto
(5) table-cell
父元素上一层：display table
父元素: display: table-cell;vertical-align: middle;text-align: center;
子元素：display: inline-block;
(6) inlineblock法：
父元素：
text-align: center;
line-height: 父元素高度
font-size: 0;
子元素：
display: inline-block;
background-color:yellow;
vertical-align:middle;
5. 前端性能优化的方法有哪些? (起码记住六点，可分为html/css/js三方面)
(1) 优化图片资源的格式和大小;
如何压缩图片？借助工具 : 熊猫压缩
(2) 开启网络压缩;
(3) 压缩css和js内容;
(4) 样式放在页头，JS放在页尾;
(5) 使用浏览器缓存;
(6) 减少重定向请求;
(7) 避免频繁操作DOM节点；
(8) 使用CDN(内容分发网络)存储静态资源;
析：就像猫超会把货物提前存储在菜鸟建设在全国各地的本地仓库来减少物流时间一样，网站也可以预先把内容分发至全国各地的加速节点。这样用户就可以就近获取所需内容，避免网络拥堵、地域、运营商等因素带来的访问延迟问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。
"内容分发网络"就像前面提到的"全国仓配网络"一样，解决了因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度和成功率。
(9) 减少DNS(域名系统)查询次数;
(10) 不使用EVAL；
6.浏览器兼容的bug有哪些？说出对应兼容bug的解决方式
兼容性问题本身，不是能力问题，是经验问题*
css兼容问题
(1) 不同浏览器的标签默认的外边界和内填充不同
解决方案：css里 *{margin:0; padding:0;}
(2) 块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大
解决方案：在float的标签样式控制中加入display:inline;转化为行内属性
(3) 设置较小高度标签(一般小于10px)，在IE6、IE7，遨游中高度超出设置高度值
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度
(4) 标签最低高度设置min-height不兼容
解决方案：如果设置一个标签最小高度为200px，需要进行设置 {min-height:200px; height:auto !important;height: 200px; overflow:visible;}
(5) 为什么无法定义1px左右高度的容器 ?
IE6下这个问题是因为默认的行高造成的,
例如:overflow:hidden | zoom:0.08 | line-height:1px
(6) 被点击过后的超链接不再具有hover和active属性
解决办法:按lvha的顺序书写css样式，
“:link”: a标签还未被访问的状态；
“:visited”: a标签已被访问过的状态；
“:hover”: 鼠标悬停在a标签上的状态；
“:active”: a标签被鼠标按着时的状态；
JS兼容问题
(1)获取非行内样式
funtion getStyle(obj,name){
if(obj.currentStyle){
//IE
return obj.currentStyle[name];
}else{
//Chrom,FF
return getComputedStyle(obj,false)[name];
}
}
调用：getStyle(oDiv,'width');
(2) 阻止事件冒泡
e.stopPropagation() || e.cancelBubble
(3) 阻止浏览器默认行为(例如点击右键出来菜单栏)
e.preventDefault() || e.returnValue = false
7…写出一个简单的$.ajax()的请求方式
$("a").click(function(){
$.ajax({
type:'post',
url:'/index/jquerydata',
data:$("#myform").serialize(),
cache:false,
dataType:'json',
success:function(data){
$("#divp").html('after: ' + data);
}
});
});
8.写一段js进行数组去重
法一：
function uniq(array){
var temp = []; //一个新的临时数组
for(var i = 0; i < array.length; i++){
if(temp.indexOf(array[i]) == -1){
temp.push(array[i]);
}
}
return temp;
}
var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));
法二：
ES6:set对象与数组之间的转换
var arr = [1,2,3,4,4];
var set = new Set(arr) //数组转换set对象
set //{1,2,3,4}
//方法一
Array.from(set) //[1,2,3,4]
//方法二
[...set] //[1,2,3,4]
9.写一个function，去除字符串前后的空格，兼容所有浏览器
// 删除左右两端的空格
function trim(str) {
if (str && typeof str === "string") {
return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
}
}
// 删除左边的空格 /(^\s*)/g
// 删除右边的空格 /(\s*$)/g
10.页面导入样式时，使用link和@import有什么区别？
link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
11.call()和apply()的含义和区别
apply：调用一个对象的一个方法，用另一个对象替换当前对象,都是实现继承。例如：B.apply(A, arguments);即A对象应用B对象的方法。
call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法
从定义中可以看出，call和apply都是调用一个对象的一个方法，用另一个对象替换当前对象。而不同之处在于传递的参数，apply最多只能有两个参数——新this对象和一个数组argArray，如果arg不是数组则会报错TypeError；
call则可以传递多个参数，第一个参数和apply一样，是用来替换的对象，后边是参数列表。
12.“use strict”是什么意思？使用它区别是什么？
进入严格模式的标志，老版本浏览器会把它当做一行普通的字符串，加以忽略
将“use strict”放在函数体的第一行，则整个函数以“严格模式”运行
13.HTML全局属性有哪些？作用是什么？
(1) accesskey
作用：浏览器用来创建激活或聚焦元素的快捷键
支持该属性的元素有
<a>、<area>、<button>、<input>、<label>、<legend>、<textarea>
<div>
<a href="https://www.baidu.com" accesskey="b">百度</a>
<a href="https://www.taobao.com" accesskey="a">阿里</a>
<a href="https://www.qq.com" accesskey="t">腾讯</a>
<p>快捷键(alt+b)可以跳转到百度；快捷键(alt+a)可以跳转到阿里；快捷键(alt+t)可以跳转到腾讯</p>
</div>
(2) class
作用：规定元素的一个或多个类名
(3) id
作用：规定元素的唯一标识
(4) lang
作用：规定元素内容的语言
en:英文
zh:中文
zh-CN：简体中文
(5) style
作用：设置元素的行间样式
(6) title
作用：规定关于元素的额外信息，鼠标移到元素上时显示一段提示文本
14.css选择器 优先级如何计算?
用0,0,0,0表示，权重计算规则如下：
行间样式，加1,0,0,0.
ID选择器的特殊性值，加0,1,0,0。
类选择器、属性选择器或伪类，加0,0,1,0。
元素和伪元素，加0,0,0,1。
通配选择器 * 对特殊性没有贡献，即0,0,0,0。
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
内嵌样式 > 内部样式表 > 外联样式表
15.CSS 哪些属性默认会继承?哪些不会继承?
继承:color，font-family，font-size，font，font-style等.
不继承：margin、border、padding、background、height、width等.
16.浏览器是如何渲染页面的？
渲染的流程如下：
1.解析HTML文件，创建DOM树。
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
3.将CSS与DOM合并，构建渲染树（Render Tree）
4.布局和绘制，重绘（repaint）和重排（reflow）
17.清除浮动的方法
(1) 父级div定义伪类：after和zoom
<style>
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2"> div2</div>
(2) 在结尾处添加空div标签clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2"> div2 </div>
(3) 结尾处加br标签clear:both父级div定义zoom:1来解决IE浮动问题。不推荐使用，只作了解
<style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2"> div2 </div>
(4) 父级div定义height
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2"> div </div>
18.get和post的区别
（1）get请求通常表示获取数据，post请求通常表示提交数据；
（2）get请求发送的数据都显示在地址栏上，用户可见，post请求发送的数据用户不可见；
（3）get请求不能提交大量的数据，post可以，因此不要混用二者。
19.HTTP的状态码有哪些?仔细说明
1开头：（被接受，需要继续处理。）这一类型的状态码，代表请求已被接受，需要继续处理。
2开头: （请求成功）这一类型的状态码，代表请求已成功被服务器接收、理解、并接受
3开头 :（请求被重定向）这类状态码代表需要客户端采取进一步的操作才能完成请求。通常，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。
4开头：（请求错误）这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。
5开头：（服务器错误）这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。
具体：
200 OK 服务器成功处理了请求（这个是我们见到最多的）
304 Not Modified：服务端的资源与客户端上一次请求的一致，不需要重新传输，客户端使用本地缓存的即可（资源从本地缓存获取）
400 Bad Request：用于告诉客户端它发送了一个错误的请求
404 Not Found(页面丢失)未找到资源
403 表示资源不可用
500 Internal Server Error：服务器内部出现了错误，数据库问题
501 Internal Server Error服务器遇到一个错误，使其无法对请求提供服务
20.如何处理跨域（跨域名，跨端口，跨协议）请求?
注：跨域是浏览器行为，不是服务器行为。
假如一个网址是 http://baidu.com:8080?user=name&pwd=password
http:// 是协议
baidu.com 是域名（注意：前面加上“wwww”即www.baidu.com不是域名）
8080 是端口
user=name&pwd=password 是地址带的参数
前提要知道什么是同源策略/SOP:
请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
方法一：jsonp
通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。
(由于同源策略的限制，XMLHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。)
JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。
jsonp缺点：只能实现get一种请求
方法二：postMessage
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
a.） 页面和其打开的新窗口的数据传递
b.） 多窗口之间消息传递
c.） 页面与嵌套的iframe消息传递
d.） 上面三个场景的跨域数据传递
用法：postMessage(data,origin)方法接受两个参数
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/“。
方法三：跨域资源共享（CORS）
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。如果想实现当前页cookie的写入，可参考：nginx反向代理中设置proxy_cookie_domain 和NodeJs中间件代理中cookieDomainRewrite参数的设置。
目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。
方法四：nginx反向代理接口跨域
Nginx是一个 Web服务器，也可以用作反向代理，负载平衡器和 HTTP缓存。
通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。通过Nginx反向代理将对真实服务器的请求转移到本机服务器来避免浏览器的"同源策略限制"。
方法五：Nodejs中间件代理跨域
node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。
21.Jsonp的原理,解释一下JSONP为什么不是真正的ajax
jsonp的原理:就是利用浏览器可以动态地插入一段js并执行的特点完成的。
为什么不是真正的 ajax?
（1） 实质不同
ajax的核心是 ： 通过XMLHttpRequest获取非本页内容，
jsonp的核心 ： 动态添加script标签来调用服务器提供的js脚本。
（2）
ajax和jsonp的调用方式很像，目的都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
（3）
ajax通过服务端代理实现跨域
jsonp可获取同源数据
（4）
jsonp是一种方式或者说非强制性的协议
ajax也不一定非要用json格式来传递数据
（5）jsonp只支持get请求，ajax支持get和post请求
22. 什么是事件委托? 列举使用事件委托的地方
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。
好处:
1.提高性能。
2.新添加的元素还会有之前的事件。
使用场景：
很多商品放在一个ul下面的li标签里面，点击添加或删除商品，就可以绑定商品的父元素ul标签，通过事件代理去找到要点击的商品，完成添加删除事件
23.输入URL到页面加载显示完成发生了什么？(浏览器原理)
（1）浏览器的地址栏输入URL并按下回车
（2）浏览器查找当前URL的DNS(域名系统)缓存记录
（3）DNS解析URL对应的IP
（4）根据IP建立TCP连接（三次握手）
（5）HTTP发起请求。完整的HTTP请求包含请求起始行、请求头部、请求主体三部分
（6）服务器处理请求，浏览器接收HTTP响应
（7）渲染页面，构建DOM树
（8）关闭TCP连接（四次挥手）
24.如何获取浏览器URL中查询字符串中的参数？
function showWindowHref(){
var sHref = window.location.href;
var args = sHref.split('?');
if(args[0] == sHref){
return "";
}
var arr = args[1].split('&');
var obj = {};
for(var i = 0;i< arr.length;i++){
var arg = arr[i].split('=');
obj[arg[0]] = arg[1];
}
return obj;
}
var href = showWindowHref(); // obj
console.log(href['name']); // xiaoming
25.什么是ajax, 简述一下 ajax 请求数据的过程
AJAX即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax的使用
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
getData(url, fn) {
// 实例化XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 监听状态
xhr.onreadystatechange = () => {
// 数据请求完毕 判断状态码
if (xhr.readyState === 4&&xhr.status === 200) {
// 将数据转化成json在、数组
fn && fn(JSON.parse(xhr.responseText))
}
}
// 打开数据请求 请求方式，路径，同步false 异步true(默认)
xhr.open('get/post', "路径", "true/false");
// 发送数据
xhr.send(null)
}
缺点：
1.AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.
2.AJAX只是局部刷新,所以页面的后退按钮是没有用的.
3.对流媒体还有移动设备的支持不是太好等.
26.简述 this 的 四种指向问题
a.如果是一般函数,this指向全局对象window;
function foo(){
console.log(this)
}
foo()
b.在严格模式下"use strict",为undefined.
'use strict'
function foo(){
console.log(this)
}
foo()
c.对象的方法里调用,this指向调用该方法的对象.
var obj={
name:'xiaobu',
show(){
console.log(this)
},
show2:()=>{
console.log(this)
}
}
obj.show() //this 指向obj这个对象
// var showName = obj.show
// showName() //函数自运行，指向window
//obj.show2() //window,箭头函数的this，与执行无关，指向定义它时所处的对象
d.构造函数里的this,指向创建出来的实例.
function Person(name,age){
this.name=name;
this.age=age;
this.sayname=function(){
alert(this.name);
};
}
var p1=new Person('tom',10); //this指向p1
27.什么是闭包? 项目如何使用闭包? 闭包有什么优缺点?
解释：有权访另一个函数作用域中变量的函数。
闭包两个需求：
1.必须有两个函数，并且是嵌套关系，外面的函数必须返回里面的函数；
2.在全局中必须接收返回函数作为变量储存。比如做一个随机抽题功能、选项卡、幻灯片等。一般用setInterval的地方用的比较多。
特性：
函数嵌套函数；
函数内部可以引用函数外部的参数和变量；
函数变量和参数不会被垃圾回收机制(GC)回收；
闭包产生的原因：
Js 最大的缺点就是没有类，尤其是es5，自身没有面向对象，变量和函数通常都是写在同一个空间中，变量重名—污染，函数名重名—污染
而闭包能够形成一个封闭的空间，可以避免污染，储存私有变量，存在函数里面，这个私有变量不会在函数运行完后被清理，可以像全局变量一样被使用，不会失效。
(JS没有类，变量和函数名容易冲突，而闭包是一个封闭的空间，能避免污染)
优点：
1.内容更封闭，保证命名不会冲突；
2.模块化开发,封闭模块化环境
缺点：闭包最大缺点就是会造成内存泄漏，存在堆中，不会被垃圾回收机制回收；
// 标准的闭包函数
function Add() {
var i = 0;
return function() {
return (++i);
}
}
var add = Add();
add(); // 1
add(); // 2
28.如何区分 宿主对象 内置对象 本地对象 分别有哪些?
宿主对象 window document 简单的说就是官方未定义的都是宿主对象
内置对象 不可以实例化的对象 例如: Global Math
本地对象 可以实例化的对象 例如: Object Array Function Number RegExp Date …
29.箭头函数有什么特点？
（1）不能作为构造函数，不能使用new；
（2）没有arguments，caller，callee；
（3）通过call和apply调用，不会改变this指向，只会传入参数；
（4）没有原型属性；
（5）this为父作用域的this，不是调用时的this；
30.谈谈你对面向对象的理解？面向对象的特点？
类：是一个抽象的概念，就是对某些个体的所有方法和属性的集合
对象：实际的内容
Array 类
var obj =new Array() 变为了对象
面向对象：先构造概念，然后将概念实例化，所有实例化对象都可以使用概念(类)内的方法
通俗的理解就是：万物皆对象！世界上的任何事和物都可以被视为对象，而我们需要关注的是对象本身可以实现的功能，不需要深入理解构成对象的元素。
面向对象的特点
（1）抽象：抓住核心问题
（2）封装：即把能够实现功能的函数写成封装起来，在面向对象里叫做方法。简单来说就是把实现功能的函数写成方法。
（3）继承：继承的意思是，在实现同一种功能的前提下，新对象可以使用就对象的属性和方法。
（4） 多态：一个变量在引用不同类型的情况下的不同状态。多态开发在开发组件和模块化开发的时候能节省很多资源。
31.谈谈你对原型的理解。
原型（prototype）：每个构造函数在创建出来的时候系统会自动给这个构造函数创建并且关联一个空的对象。这个空的对象，就叫做原型。
访问原型的方式：构造函数名.prototype
function Dog(name,age){
this.name = name;
this.age = age;
}
// 给构造函数的原型 添加say方法
Dog.prototype.say = function(){
console.log('汪汪汪');
}
var dog1 = new Dog('哈士奇', 1.5);
var dog2 = new Dog('大黄狗', 0.5);
dog1.say(); // 汪汪汪
dog2.say(); // 汪汪汪
由此延伸出原型链
原型链就是创建一个构造函数，它会默认生成一个prototype属性并指向原型对象。使用下一个构造函数的原型对象作为这个构造函数的实例。即 nextFuction.prototype = new thisFuction();
在下下一个构造函数的原型对象 = new nextFuction。这样下去就会构成一条实例与原型之间的链条，这就是原型链。
通俗上来讲，就是进行方法调用的时候，会先在自身上查找，若没有就去该实例的原型链上查找，直到找到为止，如果大写的Object上面没找到就返回Undefined。
32. 如何判断你当前手机浏览器的类型 userAgent (QQ , 微信 ，微博 ，华为)
注：题型较老
(1)通过navigator.userAgent获取浏览器的userAgent字符串
(2)然后indexOf去查找各个浏览器名称/浏览器内核的名称，如果返回值不为-1，则该浏览器名称/内核即为你当前手机的手机浏览器/浏览器内核的类型
以pc端为例：
var userAgent = navigator.userAgent
if (userAgent.indexOf("Opera")> -1) {
return "Opera"
};
//判断是否Firefox浏览器
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
}
//判断是否chorme浏览器
if (userAgent.indexOf("Chrome") > -1){
return "Chrome";
}
//判断是否Safari浏览器
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
}
var browser = {
versions: function() {
var u = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
iPhone: u.indexOf('iPhone') > -1 , //iPhone
iPad: u.indexOf('iPad') > -1, //iPad
webApp: u.indexOf('Safari') > -1 //Safari
};
}()
}
33.DOM 操作——怎样添加、移除、复制、创建和查找节点？
(1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
(2)添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
(3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
**34.如何阻止事件的冒泡?
//阻止冒泡的方法
function stopPP(e)
{
var evt = e|| window.event;
//IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法
evt.stopPropagation ?evt.stopPropagation() : (evt.cancelBubble=true);
}**
35.jQuery 中如何将数组转化为 json 字符串，然后再转化回来？
jQuery 中没有提供这个功能，所以需要先编写两个 jQuery 的扩展：
$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}
$.fn.parseArray = function(array) {
return JSON.parse(array)
}
//然后调用:
$("").stringifyArray(array)
36.写一个冒泡排序
即实现数组由小到大进行排序；思路为：每次比较相邻的两个数，如果后一个比前一个小，换位置。如果要实现由大到小排序，使用reverse()即可；
var arr = [3, 1, 4, 6, 5, 7, 2];
function bubbleSort(arr) {
var len = arr.length;
for (var i = len; i >= 2; --i) {
for (var j = 0; j < i - 1; j++) {
if (arr[j + 1] < arr[j]) {
var temp;
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
var arr2 = bubbleSort(arr);
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7]
var arr3 = arr2.reverse();
console.log(arr3); // [7, 6, 5, 4, 3, 2, 1]
最直接简单粗暴的写法：
方法一：
//冒泡排序，从小到大排序
var arr = [1, 2, 3, 5, 7, 4, 8, 9, 10];
for(var i = arr.length-1; i >= 0; i--){
for(var j = 0; j < i; j++){
if(arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log(arr); // [1,2,3,4,5,7,8,9,10]
方法二：
// 冒泡排序 从小到大排序
var arr = [1, 2, 3, 5, 7, 4, 8, 9, 10];
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr); // [1,2,3,4,5,7,8,9,10]
36.说几条javasprit的基本规范
（1）、不要在同一行声明多个变量。
（2）、请使用 ===/!==来比较true/false或者数值
（3）、使用对象字面量替代new Array这种形式
（4）、不要使用全局函数。
（5）、Switch语句必须带有default分支
（6）、函数不应该有时候有返回值，有时候没有返回值。
（7）、For循环必须使用大括号
（8）、If语句必须使用大括号
（9）、for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。
37.看下列代码,输出什么?解释原因。
for(var i = 1; i <= 3; i++){ //建议使用let 可正常输出i的值
setTimeout(function(){
console.log(i);
},0);
};
答案：4 4 4。
原因：Javascript事件处理器在线程空闲之前不会运行。setTimeout是异步
38.看下列代码,输出什么?解释原因。
var a = null;
alert(typeof a);
答案：object
解释：null是一个只有一个值的数据类型，这个值就是null,表示一个空指针对象，所以用typeof检测会返回”object”。
39.alert的值分别是多少？
<script>
var a = 100;
function test(){
alert(a);
a = 10; //去掉了var 就变成定义了全局变量了
alert(a);
}
test();
alert(a);
</script>
正确答案是： 100， 10， 10
这里涉及到全局变量和局部变量的区别：函数外部用var定义的变量和函数内部不用var定义的变量为全局变量；形参和函数内部用var定义的变量为局部变量。
40.什么叫优雅降级和渐进增强？
**渐进增强 progressive enhancement：**
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
**优雅降级 graceful degradation：**
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
41.浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
42.作用域和作用域链
作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。可以说，变量和函数在什么时候可以用，什么时候被摧毁，这都与作用域有关。
JavaScript中，变量的作用域有全局作用域和局部作用域两种。
全局作用域：定义在函数外部的变量，这个变量在任何函数中都有效，即作用域范围是当前文件的任何地方。
(函数外部用var定义的变量 / 函数内部不用var 定义的变量)
局部作用域：定义在函数内部的变量，这个变量只能在函数内部使用，即作用域范围只是函数内部，另外，形参也是局部变量。
(函数内部用var定义的变量 / 函数的形参是局部变量)
var num = 10; // 全局变量
function print(num){ // 形参是局部变量
num = 100; // 全局变量 => 局部变量
console.log(num); // 100
}
print(123);
console.log(num); // 10
作用域链
全局作用域和局部作用域中变量的访问权限，其实是由作用域链决定的。
每次进入一个新的执行环境，都会创建一个用于搜索变量和函数的作用域链。作用域链是函数被创建的作用域中对象的集合。作用域链可以保证对执行环境有权访问的所有变量和函数的有序访问。
44.数组对象常用操作函数及其功能
注：注意对比区别，面试可能会问之间的区别.
（1）concat() 连接两个或更多的数组，并返回结果。
var arr = [1,2,3,4];
var arr2 = [5,6,7,8];
var arr3 = arr.concat(arr2);
console.log(arr3); // 连接之后返回的数组为：[1, 2, 3, 4, 5, 6, 7, 8]
（2）join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
var arr = ['xiao','lin','qiqi','mingtian'];
var arr2 = arr.join(',');
console.log(arr2); // 根据','隔开返回的字符串为："xiao,lin,qiqi,mingtian"
（3）pop() 删除并返回数组的最后一个元素。
var arr = [2,3,4,5];
var arr2 = arr.pop();
console.log(arr2); // 删除的数组的最后一个元素为：5
console.log(arr); // 删除元素之后的数组为：[2, 3, 4]
（4）shift() 删除并返回数组的第一个元素
var arr = [2,3,4,5];
var arr2 = arr.shift();
console.log(arr2); // 删除的数组的第一个元素为：2
console.log(arr); // 删除元素之后的数组为：[3, 4，5]
（5）push() 向数组的末尾添加一个或更多元素，并返回新的长度。
var arr = [2,3,4,5];
var arr2 = arr.push(6);
console.log(arr2); // 返回的数组长度：5
console.log(arr); // [2, 3, 4, 5, 6]
（6）unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
var arr = ['xiao','ming','qiqi','aiming'];
var arr1 = arr.unshift('lang');
console.log(arr1); // 返回的数组的长度： 5
console.log(arr); //向数组开头添加元素返回的结果：["lang", "xiao", "ming", "qiqi", "aiming"]
（7）reverse() 颠倒数组中元素的顺序。
var arr = [2,3,4,5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2]
（8）slice() 从某个已有的数组返回选定的元素
var arr = [2,3,4,5];
var arr2 = arr.slice(1,3);
console.log(arr2); // 截取区间返回的数组为：[3, 4]
console.log(arr); // [2, 3, 4, 5]
（9）sort() 对数组的元素进行排序
借助排序函数，实现数值由小到大排序
function sortNumber(a,b){
return a - b
}
var arr = [23,30,42,5];
var arr2 = arr.sort(sortNumber);
console.log(arr2); // [5, 23, 30, 42]
console.log(arr); // [5, 23, 30, 42]
借助排序函数，实现数值由大到小排序
function sortNumber(a,b){
return b - a
}
var arr = [23,30,42,5];
var arr2 = arr.sort(sortNumber);
console.log(arr2); // [42, 30, 23, 5]
console.log(arr); // [42, 30, 23, 5]
（10）toString() 把数组转换为字符串，并返回结果。
var arr = ['xiao','ming','qiqi','aiming'];
arr.toString();
console.log(arr); // ["xiao", "ming", "qiqi", "aiming"]
807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
