常见前端面试问题汇总2018

转载请注明来源
--------------------- 
作者：MrCris 
来源：CSDN 
原文：https://blog.csdn.net/weixin_37861326/article/details/80620576?utm_source=copy 
版权声明：本文为博主原创文章，转载请附上博文链接！

2）2018/6/10

1. 如何解决跨域问题

JSONP：

原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。
JSONP：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里

CORS：

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

通过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域
主域相同的使用document.domain

使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5中新引进的window.postMessage方法来跨域传送数据

还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。

2. XML和JSON的区别？

(1).数据体积方面。
JSON相对于XML来讲，数据的体积小，传递的速度更快些。
(2).数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(3).数据描述方面。
JSON对数据的描述性比XML较差。
(4).传输速度方面。
JSON的速度要远远快于XML。

3. 快速排序的思想并实现一个快排？

“快速排序”的思想很简单，整个排序过程只需要三步：
（1）在数据集之中，找一个基准点
（2）建立两个数组，分别存储左边和右边的数组
（3）利用递归进行下次比较

 
3）2018/6/16

window.onload和$(function(){})区别

window.onload是js原生的事件，$(function(){})是Jquery的方法(等价于$(document).ready(function(){}) )，两者主要有以下几点差别：
1、window.onload：在页面所有资源加载完后执行，如果有多个定义则只执行最后一个
2、$(function(){})：在Dom节点创建完成后执行，如果有多个定义则依次执行
可以看出$(function(){})在window.onload前执行
比如：页面中只有一个img标签，当img节点创建完后就会执行$(function(){})中的代码，当img的src指定的图片完全加载完后才会触发window.onload事件。

4）2018/6/20

1. 用div+css写出文字水平垂直居中，图片水平垂直居中的样式及布局

// 单文字垂直居中:
.align_cc{height:30px;line-height:30px;text-align:center; }
// 多行文字垂直居中：
.align_box {width: 220px;height: 200px;display: table-cell;vertical-align: middle;text-align: center;*position: relative;}                
.align_box span.align_word {display: inline-block;*position: absolute;*left: 0;*top: 50%;*width: 100%;}
.align_box span.align_word a {*display: inline-block;*position: relative;*top: -50%;}

       
                文字垂直居中对齐文字垂直居中对齐文字垂直居中对齐
       

// 图片垂直居中： 
.ver_pic {width: 200px; height: 200px;line-height:200px;text-align: center;background: #eee;} 
.ver_pic img { vertical-align:middle;width:100px;height:100px;}
2.  用div+css写出左侧固定(width：200px)，右侧自适应的页面布局

.c_left{float:left;display:inline-block;width:200px;} 
.c_right{margin-left:200px;} 
3.  css浏览器兼容性的写法

* ：IE6、IE7可以识别；
_和- ：IE6可以识别；
!important ：表示高优先级，IE7及以上、Firefox都支持，IE6认识带!important的样式属性，但不认识!important的优先级
-webkit- ：针对谷歌浏览器内核支持的CSS样式
-moz- ：针对Firefox浏览器的内核CSS写法
-ms- ：针对ie内核CSS写法

-o- ：针对opera内核CSS写法

4. jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off

bind()可以向匹配的元素绑定一个或者多个事件处理器。但是它不会在没有存在dom树中的元素绑定该事件;而live()、delegate()则可以实现在不存在dom树中的元素继续绑定事件.
live方法其实是bind方法的变种，其基本功能同bind方法的功能一样都是为一个元素绑定某个事件，但是bind方法只能给当前存在的元素绑定事件，对于事后采用JS等方式新生成的元素无效，而live方法则正好弥补了bind方法的这个缺陷，它可以对后生成的元素也可以绑定相应的事件。
live()方法用到了事件委托的概念来处理事件的绑定，会绑定相应的事件到你所选择的元素的根元素上，即是document元素上，一旦事件冒泡到document上，jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。
delegate()有点像.live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.
其实.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的。
bind的缺点：
它会绑定事件到所有的选出来的元素上，当元素很多时，会出现效率问题；
当页面加载完的时候，你才可以进行bind()；
它不会绑定到在它执行完后动态添加的那些元素上。
live的优点：
仅有一次的事件绑定，绑定到document上；
动态添加的elemtns依然可以触发那些早先绑定的事件，因为事件真正的绑定是在document上；
可以在document ready之前就可以绑定那些需要的事件。
live的缺点：
从jq1.7开始已经不被推荐了;
当一个元素采用live方法进行事件的绑定的时候，如果想阻止事件的传递或冒泡，就要在函数中return false,仅仅调用stopPropagation()是无法实现阻止事件的传递或者冒泡的,因为都要到达document，所以速度也会非常慢；
delegate的优点：
可以选择把这个事件放到哪个元素上了，可以有效的减小你所要查找的元素；
可以用在动态添加的元素上。
delegate的缺点：
需要查找哪个元素上发生了那个事件，尽管比document少很多了，不过，还是得浪费时间来查找。
on的优点：
提供了一种统一绑定事件的方法,可以用.on()来代替上述的3种方法。

one是在dom树加载后，对元素的绑定，和bind一样属于后期绑定，但是会在事件执行之后移除元素的绑定事件，事件只执行一次。

5. js浏览器兼容性的写法（查看）

6. 造成js内存泄漏的问题

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。 
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

1）setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
2）闭包
3）控制台日志
4）循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

7. 谈你对js闭包的理解

考的是变量的作用域。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。 
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，
在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。 
2）闭包会在父函数外部，改变父函数内部变量的值。
所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

8.  js面向对象的几种方式 

第一种模式：工厂方式 
var lev=function(){ return "脚本之家"; }; 
function Parent(){ var Child = new Object(); Child.name="脚本"; Child.age="4"; Child.lev=lev; return Child; }; 
var x = Parent(); 
alert(x.name); 
alert(x.lev()); 
第二种模式：构造函数方式 
var lev=function(){ return "脚本之家"; }; 
function Parent(){ this.name="脚本"; this.age="30"; this.lev=lev; }; 
var x =new Parent(); 
alert(x.name); 
alert(x.lev()); 
第三种模式：原型模式 
var lev=function(){ return "脚本之家"; }; 
function Parent(){ }; 
Parent.prototype.name="李小龙"; 
Parent.prototype.age="30"; 
Parent.prototype.lev=lev; 
var x =new Parent(); 
alert(x.name); 
alert(x.lev()); 
第四种模式：混合的构造函数，原型方式（推荐） 
function Parent(){ this.name="脚本"; this.age=4; }; 
Parent.prototype.lev=function(){ return this.name; };
var x =new Parent(); 
alert(x.lev()); 
第五种模式：动态原型方式 
function Parent(){ this.name="脚本"; this.age=4; if(typeof Parent._lev=="undefined"){ 
        Parent.prototype.lev=function(){ return this.name; } Parent._lev=true; } 
}; 
var x =new Parent(); 
alert(x.lev());

5）2018/6/21

1. display:none和visibility:hidden

CSS display:none; 
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”，视为不存在，不加载; 
一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见 
隐藏产生reflow和repaint(回流与重绘)
visibility:hidden; 
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

2. 清除浮动 

方法一：使用带clear属性的空元素
在浮动元素后使用一个空元素如

，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
优点：简单，代码少，浏览器兼容性好。 
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
方法二：使用CSS的overflow属性 
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动
方法三：给浮动的元素的容器添加浮动 
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
方法四：使用邻接元素处理 
给浮动元素后面的元素换行符 br 添加clear属性。
方法五：父级div定义 height 
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
方法六：父级div定义 伪类:after 和 zoom
在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在**小模块如ul里使用overflow:hidde**n;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。最后可以使用相对完美的:after伪元素方法清理浮动，文档结构更加清晰。

6）2018/7/16

1.HTML 定义了网页的内容

2.CSS 描述了网页的布局

3.JavaScript 网页的行为

 

console.log()，会在浏览器控制台打印出信息。
console.dir()可以显示一个对象所有的属性和方法。

1 null和undefined的区别？

null是一个表示”无”的对象，转为数值时为0

undefined是一个表示”无”的原始值，转为数值时为NaN

 

当声明的变量还未被初始化时，变量的默认值为undefined 

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象

undefined表示 “缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

1. 变量被声明了，但没有赋值时，就等于 undefined 

2. 调用函数时，应该提供的参数没有提供，该参数等于 undefined

3. 对象没有赋值的属性，该属性的值为 undefined 

4. 函数没有返回值时，默认返回 undefined

null表示“没有对象”，即该处不应该有值。典型用法是： 

1. 作为函数的参数，表示该函数的参数不是对象 

2. 作为对象原型链的终点

2 new操作符具体干了什么?

1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型

2）属性和方法被加入到 this 引用的对象中

3）新创建的对象由 this 所引用，并且最后隐式的返回 this

3 js延迟加载的方式有哪些？ 

1）defer和async 

没有defer或async，浏览器会立即加载并执行指定的脚本，立即是在渲染该script标签下的文档元素之前，不等待后续载入的文档元素，读到就加载并执行

 有async，加载和渲染后续文档元素的过程和script.js加载和执行并行执行（异步）

 有defer，并行，但是在所有元素解析完成后执行。 

2）动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack） 

3）按需异步载入js

4 有哪些性能优化的方法

1）减少http请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托管，data 缓存 ，图片服务器

2）前端模板 JS + 数据，减少由于HTML标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数

3）用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能

4）当需要设置的样式很多时设置 className 而不是直接操作 style

5）少用全局变量、缓存DOM节点查找的结果。减少 IO 读取操作

6）避免使用 CSS Expression（css表达式)又称 Dynamic properties(动态属性)

7）图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳

5 哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或不再需要它之后仍然存在。 

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

1）setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

2）闭包

3）控制台日志

4）循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

垃圾回收机制？

答：在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。

6 javascript的typeof返回哪些数据类型（7种）

Object number function boolean underfind string symbol

typeof ‘123’    // string  

typeof null   // object  

typeof 123    //number

typeof false // boolean

typeof [1,2,3]    // object

typeof {‘name’:’tony’} // object

typeof undefined // undefined

typeof function fn(){}   // function

另外ES6新加一种  symbol

var symbol = Symbol()

typeof symbol //"symbol"

7 例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）

隐式（== – ===）

8 split() join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

('string').split('')     // ["s", "t", "r", "i", "n", "g"]

('string').split('t')    // ["s", "ring"]

["s", "t", "r", "i", "n", "g"].join('')  // “string”

["s", "t", "r", "i", "n", "g"].join()     // "s,t,r,i,n,g"

["s", "t", "r", "i", "n", "g"].join(',')  // "s,t,r,i,n,g"

["s", "t", "r", "i", "n", "g"].join('.')  // "s.t.r.i.n.g"

9 数组方法pop() push() unshift() shift()

push()尾部添加 pop()尾部删除

unshift()头部添加 shift()头部删除

 

var arr = [1,2,3,4]

arr.push(5) // arr = [1, 2, 3, 4, 5]

 

var arr = [1,2,3,4]

arr.pop(3) // 返回的值为4

// arr = [1, 2, 3]

 

var arr = [1,2,3,4]

arr.unshift(5)    // arr = [5, 1, 2, 3, 4]

 

var arr = [1,2,3,4]

arr.shift() // arr = [2, 3, 4]

 

10 事件绑定和普通事件有什么区别

事件绑定是指把事件注册到具体的元素之上，普通事件指的是可以用来注册的事件

11 IE和DOM事件流的区别

1.执行顺序不一样

2.参数不一样

3.事件加不加on

4.this指向问题

12 IE和标准下有哪些兼容性的写法

var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

var target = ev.srcElement||ev.target

13 call和apply的区别

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

14 已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)

document.getElementById(“ID”).value

15 希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;　　//缓存到局部变量
while (len--) {　　//使用while的效率会比for循环更高
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}
16 设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)

var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”
17 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？

直接在DOM里绑定事件：

在JS里通过onclick绑定：xxx.onclick = test

通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)

那么问题来了，Javascript的事件流模型都有什么？

“事件冒泡”：事件开始由最具体的元素接收，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

18 看下列代码输出为何？解释原因。

var a;
alert(typeof a); // undefined
alert(b); // 报错
解释：undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

--------------------------------------------------------

var a = null;
alert(typeof a); //object
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。

--------------------------------------------------------

var undefined;
undefined == null; // true
1 == true;   // true
2 == true;   // false
0 == false;  // true
2 == false; // false
0 == '';     // true
NaN == NaN;  // false
null == null // true
undefined == undefined // true
[] == false; // true
[] == ![];   // true
[] == [] // false
!NaN  // true
undefined与null相等，但不恒等（===）

一个是number一个是string时，会尝试将string转换为number

尝试将boolean转换为number，0或1

尝试将Object转换成number或string，取决于另外一个对比量的类型

所以，对于0、空字符串的判断，建议使用 “===” 。“===”会先判断两边的值类型，类型不匹配时为false。

--------------------------------------------------------

var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);
执行完后foo的值为111，foo的类型为number。

--------------------------------------------------------

console.log(1+ "2"+"2");//1+"2"先转化为“12”然后进行字符串的相加结果是“122”

console.log(1+ +"2"+"2");//由于一元运算符“+”的优先级更高，因此+“2”转换为数值2，然后1+2=3，最后数值和字符串相加，转换为字符串的拼接，结果“32”

console.log(1+ -"1"+"2");//先执行取反，变成1-1=0，然后0+“2”，结果“02”

console.log(+"1"+  "1"+"2");//先执行数值转换，相当于执行1+“1”+“2”，结果“112”

console.log("A"- "B"+"2");//先执行"A"- "B"返回NaN,再执行NaN+"2"=>"NaN2"

console.log("A"- "B"+2);//先执行"A"- "B"返回NaN+2,NaN执行加减法均返回NaN

--------------------------------------------------------

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);
答案：2（考察引用数据类型细节）

--------------------------------------------------------

var foo = 1;
function(){
    console.log(foo);
    var foo = 2;
    console.log(foo);
}
答案：输出undefined 和 2。上面代码相当于：

var foo = 1;
function test(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2;  
}
test()
函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升声明不会提升赋值部分。

--------------------------------------------------------

for(var i=1;i<=3;i++){
  setTimeout(function(){
      console.log(i);   
  },0); 
};
答案：4 4 4。

原因：Javascript事件处理器在线程空闲之前不会运行。追问，如何让上述代码输出1 2 3？

for(var i=1;i<=3;i++){
   setTimeout((function(a){  //改成立即执行函数
       console.log(a);   
   })(i),0); 
};
1           //输出
2
3
--------------------------------------------------------

var arr = new Array(1 ,3 ,5);

arr[4]='z';

arr2 = arr.reverse();  // arr = [“z”,‘’,5,3,1]

arr3 = arr.concat(arr2);

alert(arr3);

 

弹出提示对话框：z,,5,3,1,z,,5,3,1

提示：引用类型

--------------------------------------------------------

输出结果为 1；声明提前

--------------------------------------------------------

var a;

var b = a * 0; // undefined*0 = NaN

if (b == b) {

     console.log(b * 2 + "2" - 0 + 4);

} else {

     console.log(!b * 2 + "2" - 0 + 4);

}

答案输出 26

--------------------------------------------------------

答案输出 6

--------------------------------------------------------

var t = 10;

function test(t){

       var t = t++;

}

test(t);

console.log(t);

答案输出10

--------------------------------------------------------

var t = 10;

function test(test){

      var t = test++;

    console.log(t) // 10

}

test(t);

console.log(t);

答案输出10

--------------------------------------------------------

var t = 10;

function test(test){

       t = test++;

}

test(t);

console.log(t);

答案：10

--------------------------------------------------------

var t = 10;

function test(test){

       t = ++test;

}

test(t);

console.log(t);

答案：11

--------------------------------------------------------

var t = 10;

function test(test){

      t = t + test;

      console.log(t);

      var t = 3;

}

test(t);

console.log(t);

答案：NaN  10

--------------------------------------------------------

var a;

var b = a / 0;  // NaN

if (b == b) {

        console.log(b * 2 + "2" - 0 + 4);

} else {

        console.log(!b * 2 + "2" - 0 + 4);

}

答案：26

--------------------------------------------------------

答案：Infinity24

此外 ！Infinity = false

--------------------------------------------------------

var iNum = 0;

for(var i = 1; i< 10; i++){

     if(i % 5 == 0){

         continue;

    }

    iNum++;

}

console.log(iNum)

答案：8

--------------------------------------------------------

var obj = {proto: {a:1,b:2}};

function F(){};

F.prototype = obj.proto;

var f = new F();

obj.proto.c = 3;

obj.proto = {a:-1, b:-2};

console.log(f.a);

console.log(f.c);

delete F.prototype['a'];

console.log(f.a);

console.log(obj.proto.a);

答案

1

3

undefined

-1

--------------------------------------------------------

function setName(){

    name="张三";

}

setName();

console.log(name);

答案："张三"

--------------------------------------------------------

//考点：1、变量声明提升 2、变量搜索机制

var a=1;

function test(){

    console.log(a);

    var a=1;

}

test();

答案：undefined

--------------------------------------------------------

var b=2;

function test2(){

    window.b=3;

    console.log(b);

}

test2();

答案：3

--------------------------------------------------------

c=5;//声明一个全局变量c

function test3(){

    window.c=3;

    console.log(c);     //答案：undefined，原因：由于此时的c是一个局部变量c，并且没有被赋值

    var c;

    console.log(window.c);//答案：3，原因：这里的c就是一个全局变量c

}

test3();

--------------------------------------------------------

var arr = [];

arr[0]  = 'a';

arr[1]  = 'b';

arr[10] = 'c';

alert(arr.length);  //答案：11

console.log(arr[5]);    //答案：undefined

--------------------------------------------------------

var a=1;

console.log(a++);       //答案：1

console.log(++a);       //答案：3

--------------------------------------------------------

console.log(null==undefined);   //答案：true

console.log("1"==1);        //答案：true，因为会将数字1先转换为字符串1

console.log("1"===1);       //答案：false，因为数据类型不一致

--------------------------------------------------------

typeof 1;       "number"

typeof "hello";     "string"

typeof /[0-9]/;     "object"

typeof {};      "object"

typeof null;        "object"

typeof undefined;   "undefined"

typeof [1,2,3];     "object"

typeof function(){};    //"function"

--------------------------------------------------------

parseInt(3.14);         //3

parseFloat("3asdf");        //3

parseInt("1.23abc456"); // 1

parseInt(true);// NaN

--------------------------------------------------------

//考点：函数声明提前

function bar() {

    return foo;

    foo = 10;

    function foo() {}

    //var foo = 11;

}

alert(typeof bar());//"function"

--------------------------------------------------------

var foo = 1;

function bar() {

    foo = 10;

    return;

    function foo() {}

}

bar();

alert(foo);//答案：1

--------------------------------------------------------

console.log(a);//是一个函数

var a = 3;

function a(){}

console.log(a); //3

--------------------------------------------------------

//考点：对arguments的操作

function foo(a) {

    arguments[0] = 2;

    alert(a);//答案：2，因为：a、arguments是对实参的访问，b、通过arguments[i]可以修改指定实参的值

}

foo(1);

--------------------------------------------------------

function foo(a) {

    alert(arguments.length);//答案：3，因为arguments是对实参的访问

}

foo(1, 2, 3);

--------------------------------------------------------

bar();//报错

var foo = function bar(name) {

    console.log("hello"+name);

    console.log(bar);

};

//alert(typeof bar);

foo("world");//"hello"

console.log(bar);//undefined

console.log(foo.toString());

bar();//报错

--------------------------------------------------------

function test(){

    console.log("test函数");

}

setTimeout(function(){

    console.log("定时器回调函数");

}, 0)

test();

function foo(){

    var name="hello";

}

--------------------------------------------------------

19 已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。

var stringArray = ["This", "is", "Baidu", "Campus"];

console.log(stringArray.join(" "))

 

答案：alert(stringArray.join(" "))

20 输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26

var d = new Date();

// 获取年，getFullYear()返回4位的数字

var year = d.getFullYear();

// 获取月，月份比较特殊，0是1月，11是12月

var month = d.getMonth() + 1;

// 变成两位

month = month < 10 ? '0' + month : month;

// 获取日

var day = d.getDate();

day = day < 10 ? '0' + day : day;

alert(year + '-' + month + '-' + day);

21 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义

function escapeHtml(str) {

return str.replace(/[<>”&]/g, function(match) {

    switch (match) {

     case “<”:

         return “<”;

     case “>”:

       return “>”;

     case “&”:

       return “&”;

     case “\””:

        return “"”;

    }

  };

}

22 foo = foo||bar ，这行代码是什么意思？为什么要这样写？

答案：if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。

短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

23 用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

var iArray = [];

funtion getRandom(istart, iend){

        var iChoice = iend - istart +1;

        return Math.floor(Math.random() * iChoice + istart);

}

for(var i=0; i<10; i++){

        iArray.push(getRandom(10,100));

}

iArray.sort();

24 把两个数组合并，并删除第二个元素。

var array1 = ['a','b','c'];

var bArray = ['d','e','f'];

var cArray = array1.concat(bArray);

cArray.splice(1,1);

25 怎样添加、移除、移动、复制、创建和查找节点

1）创建新节点

createDocumentFragment()    //创建一个DOM片段

createElement()   //创建一个具体的元素

createTextNode()   //创建一个文本节点

2）添加、移除、替换、插入

appendChild()      //添加

removeChild()      //移除

replaceChild()      //替换

insertBefore()      //插入

3）查找

getElementsByTagName()    //通过标签名称

getElementsByName()     //通过元素的Name属性的值

getElementById()        //通过元素Id，唯一性

26 简述创建函数的几种方式

第一种（函数声明）：

function sum1(num1,num2){

   return num1+num2;

}

第二种（函数表达式）：

var sum2 = function(num1,num2){

   return num1+num2;

}

第三种（函数对象方式）：

var sum3 = new Function("num1","num2","return num1+num2");

27 documen.write和 innerHTML 的区别？

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分

28介绍一下box-sizing属性？

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

29 什么是闭包？写一个简单的闭包？

闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

function outer(){

    var num = 1;

    function inner(){

        var n = 2;

        alert(n + num);

    }

    return inner;

}

outer()();

30 常见 == 和 === 运算结果

console.log(NaN==NaN) // false

console.log(NaN===NaN) // false

console.log(!NaN)  // true

 

console.log(undefined = undefined)  // undefined

console.log(undefined == undefined) // true

console.log(undefined === undefined) // true

console.log(undefined == null)  // true

console.log(undefined === null)  // false

按位与 &

console.log(1&2) // 0    0001&0010  = 0000  0

console.log(2&2) // 2    0010&0010  = 0010  2

console.log(0&2) // 0    0000&0010  = 0000  0

console.log(2&3) // 2    0010&0011  = 0010  2

按位或 |

console.log(1|2) // 3    0001&0010  = 0011  3

console.log(2|2) // 2    0010|0010  = 0010  2

console.log(0|2) // 2    0000|0010  = 0010  2

console.log(2|3) // 3    0010|0011  = 0011  3

 

且 && （第一个量为true则输出第二个量；第一个量为false 直接为false）

console.log(1&&2) // 2

console.log(0&&2) // 0

console.log("string"&&2) // 2

console.log(true&&2) // 2

console.log([1,2,3]&&2) // 2

 

console.log(2&&true) // true

console.log(2&&[1,2,3]) // [1,2,3]

console.log(2&&"string") // string

console.log(2&&1) // 1

 

或 || （第一个量为true输出第一个量）

console.log(2||3) // 2

console.log(1||3) // 1

console.log("string"||3) // string

console.log(NaN||3) // 3

console.log(undefined||3) // 3

console.log(undefined||NaN) // NaN

 

31 请描述一下cookies，sessionStorage和localStorage的区别？

cookies兼容所有的浏览器，Html5提供的storage存储方式。

• Document.cookie

•  Window.localstorage

•  Window.sessionstorage

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

32 js取消事件冒泡

function stopBubble(e) {

// 如果提供了事件对象，则这是一个非IE浏览器

var ev = e||window.event;

    if (ev.stopPropagation ) {

        // 因此它支持W3C的stopPropagation()方法

        ev.stopPropagation();

    } else {

        // 否则，我们需要使用IE的方式来取消事件冒泡

        ev.cancelBubble = true;

    }

}

33 js阻止事件默认行为

function stopDefault( e ) {

// 阻止默认浏览器动作(W3C)

var ev = e||window.event;

    if (ev.preventDefault ) {

        ev.preventDefault();

    } else {

        // IE中阻止函数器默认动作的方式

        ev.returnValue = false;

    }

    return false;

}

34 js数组元素添加、删除、排序等方法有哪些？

1)Array.concat( ) //连接数组

arrayObject.concat(arrayX,arrayX,......,arrayX)

arrayX //必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

 

var arr = [1,2];

arr2 = [4,5];

arr3 = arr.concat(arr2)

// arr3 = [1,2,4,5]

 

2)Array.join( ) //将数组元素连接起来以构建一个字符串

arrayObject.join(separator)

separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

 

var arr = [2,3,4,5];

var arr2 = arr.join()

// arr2 = "2,3,4,5"

var arr2 = arr.join(‘’)

// arr2 = "2345"

 

3)Array.length //数组的大小

var arr = [2,3,4,5];

arr.length

// arr.length = 4

 

4)Array.pop( ) //删除并返回数组的最后一个元素

pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

 

var arr = [1,2,3,4];

var result = arr.pop();

console.log(result) // 4

console.log(arr) // [1,2,3]

 

5)Array.push( ) //给数组添加元素

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

arrayObject.push(newelement1,newelement2,....,newelementX)

newelement1 //必需。要添加到数组的第一个元素。

newelement2 //可选。要添加到数组的第二个元素。

newelementX可选。可添加多个元素。

 

var arr = [1,2,3,4];

var result = arr.push(5);

console.log(result);// 5

console.log(arr) // [1,2,3,4,5]

 

6)Array.reverse( ) //颠倒数组中元素的顺序

该方法会改变原来的数组，而不会创建新的数组

 

var arr = [1,2,3,4];

var result = arr.reverse();

console.log(result); // [4, 3, 2, 1]

console.log(arr); // [4, 3, 2, 1]

 

7)Array.shift( ) //将第一个元素移出数组

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值

 

var arr = [1,2,3,4];

var result = arr.shift();

console.log(result) // 1

console.log(arr) // [2, 3, 4]

 

8)Array.unshift( ) //在数组头部插入一个元素,返回数组长度

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度

arrayObject.unshift(newelement1,newelement2,....,newelementX)

newelement1  //必需。向数组添加的第一个元素

newelement2 //可选。向数组添加的第二个元素

newelementX //可选。可添加若干个元素

 

var arr = [1,2,3,4];

var result = arr.unshift(0);

console.log(result)// 5

console.log(arr) //  [0, 1, 2, 3, 4]

 

9)Array.sort( ) //对数组元素进行排序

var arr = [2,4,7,1,0,9];

var result = arr.sort()

console.log(result)// [0, 1, 2, 4, 7, 9]

console.log(arr)// [0, 1, 2, 4, 7, 9]

 

若需要规定排序方式  则需传入一个排序函数

arrayObject.sort(sortby)

sortby  // 可选。规定排序顺序。必须是函数。

 

// 从小到大排序

function sortby(a,b){

return a - b

}

Exp:

function sortNumber(a,b){

return a - b

}

arr = [2,7,3,1,9,7,0];

arr.sort(sortNumber) // 结果  [0, 1, 2, 3, 7, 7, 9]

 

// 从大到小排序

function sortby(a,b){

return b - a

}

Exp:

function sortNumber(a,b){

return b - a

}

arr = [2,7,3,1,9,7,0];

arr.sort(sortNumber) // 结果 [9, 7, 7, 3, 2, 1, 0]

 

10)Array.splice(开始索引号，长度) //插入、删除或替换数组的元素

arrayObject.splice(index,howmany,item1,.....,itemX)

index   //必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

Howmany   //必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, ..., itemX  //可选。向数组添加的新项目。

 

// 删除 并返回删除的结果

var arr = [1,2,3,4];

var result = arr.splice(2,9)

console.log(result)// [3, 4]

console.log(arr)// [1, 2]

 

// 从指定位置删除并开始添加项目

var arr = [1,2,3,4];

var result = arr.splice(2,0,5,6)

console.log(result)// [ ]

console.log(arr)// [1, 2, 5, 6, 3, 4]

 

11)Array.toLocaleString( ) //把数组转换成本地字符串

把数组转换为本地字符串。

 

var arr = [1,2,3,4];

var result = arr.toLocaleString();

console.log(arr);//  [1, 2, 3, 4]

console.log(result)// 1,2,3,4

 

12)Array.toString( ) //将数组转换成一个字符串

var arr = [1,2,3,4];

var result = arr.toString();

console.log(arr); // [1, 2, 3, 4]

console.log(result) // 1,2,3,4

 

toString() 方法可把一个逻辑值转换为字符串，并返回结果。

var boo = new Boolean(true);

var result = boo.toString();

console.log(boo); // Boolean {true}

console.log(result); // "true"

 

13)Array.slice( ) //返回数组的一部分

slice() 方法可从已有的数组中返回选定的元素。

arrayObject.slice(start,end)

start  //必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

End    //可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

 

var arr = [2,3,5,6,9,0,3,4];

var result = arr.slice(2,5);

console.log(arr); // [2, 3, 5, 6, 9, 0, 3, 4]

console.log(result) // [5, 6, 9]

35 标识符变量定义规则

标识符是一个名字。在javascript中，标识符用来对变量和函数进行命名，或者用作javascript代码中某些循环语句中的跳转位置标记。

Js中标识符必须以字母、下划线（_）或者美元（$）开始。后续字符可以是字母、数字、下划线或美元符（数字不允许作为首字母出现），另外关键字不允许做标识符。

36 cookies，sessionStorage和localStorage的区别

共同点：都是保存在浏览器端，且同源的。

区别：

1）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。

2）而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

3）cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

4）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

5）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

 

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

 

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

 

Cookies:服务器和客户端都可以访问；大小只有4KB左右；有有效期，过期后将会删除；

本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用Javascript代码移除

 

37 JavaScript的数据类型都有什么？

基本数据类型：String,boolean,Number,Undefined, Null

引用数据类型：Object(Array,Date,RegExp,Function)

 

如何判断某变量是否为数组数据类型？

1）方法一.判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效

2）方法二.obj instanceof Array 在某些IE版本中不正确

3）方法三.方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下

 

if(typeof Array.isArray==="undefined")

{

  Array.isArray = function(arg){

        return Object.prototype.toString.call(arg)==="[object Array]"

    };  

}

38 什么是Ajax和JSON，它们的优缺点

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。

优点：

　1）可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量

　2）避免用户不断刷新或者跳转页面，提高用户体验

缺点：

　1）对搜索引擎不友好

　2）要实现ajax下的前后退功能成本较大

　3）可能造成请求数的增加

　4）跨域问题限制

JSON是一种轻量级的数据交换格式，ECMA的一个子集

优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

39 将字符串”{$id}{$name}”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）

”{$id}{$id}_{$name}”.replace(/{\$id}/g, ’10’).replace(/{\$name}/g, ‘Tony’);

40 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义

function escapeHtml(str) {

      return str.replace(/[<>”&]/g, function (match) {

        switch (match) {

          case“ <”:

            return“ <”;

          case“ >”:

            return“ >”;

          case“ &”:

            return“ &”;

          case“\”” :

          return“ "”;

        }

      });

    }

41 对BFC规范的理解？

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

（W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

42 Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

1）、 声明位于文档中的最前面，处于  标签之前。告知浏览器以何种模式来渲染文档。

2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

 43你知道多少种Doctype文档类型？

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks

（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

44 这样一个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:”, d:’xxx’, e:undefined}

function serilizeUrl(url){

    var result = {};

    url = url.split("?")[1];

    var map = url.split("&");

    for(var i = 0,len = map.length; i < len; i++) {

       result[map[i].split("=")[0]] = map[i].split("=")[1];

    }

    return result;

 }

45 对作用域上下文和this的理解，看下列代码：

var User = {

  count: 1,

 

  getCount: function() {

    return this.count;

  }

};

 

console.log(User.getCount());  // what?

 

var func = User.getCount;

console.log(func());  // what?

答案 1和undefined

 

func是在winodw的上下文中被执行的，所以会访问不到count属性。

继续追问，那么如何确保Uesr总是能访问到func的上下文，即正确返回1。正确的方法是使用Function.prototype.bind。兼容各个浏览器完整代码如下：

 

Function.prototype.bind = Function.prototype.bind || function(context){

    var self = this;

    return function(){

       return self.apply(context, arguments);

    };

 }

var func = User.getCount.bind(User);

console.log(func());

46 原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

47 CSS中 link 和@import 的区别是？

(1) link属于HTML标签，而@import是CSS提供的;

(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

(4) link方式的样式的权重 高于@import的权重.

48 css中的盒子模型

1）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)

2）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;

标准的盒子模型width只包括content， 
IE的盒子的width包括content，padding和border。

49 CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

CSS 选择符：

1.id选择器(# myid) 
2.类选择器(.myclassname) 
3.标签选择器(div, h1, p) 
4.相邻选择器(h1 + p) 
5.子选择器(ul > li) 
6.后代选择器(li a) 
7.通配符选择器( * ) 
8.属性选择器(a[rel = “external”]) 
9.伪类选择器(a: hover, li:nth-child)

可继承的样式：

1.font-size 
2.font-family 
3.color 
4.text-indent

不可继承的样式：

1.border 
2.padding 
3.margin 
4.width 
5.height

优先级算法： 

1.优先级就近原则，同权重情况下样式定义最近者为准; 
2.载入样式以最后载入的定位为准; 
3.!important > id > class > tag 
4.important 比内联优先级高，但内联比 id 要高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type  选择属于其父元素的最后

元素的每个

元素。

p:only-of-type  选择属于其父元素唯一的

元素的每个

元素。

p:only-child    选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个

元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked        单选框或复选框被选中。

50 CSS3有哪些新特性？

1）CSS3实现圆角（border-radius），阴影（box-shadow），

2）对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4）增加了更多的CSS选择器 多背景 rgba

5）在CSS3中唯一引入的伪元素是 ::selection.

6）媒体查询，多栏布局

7）border-image

51 为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

52解释下 CSS sprites，以及你要如何在页面或网站中使用它

CSS Sprites：把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的”background-image”，”background-repeat”，”background-position” 的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了 http2。

---

概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

优点：

1）减少HTTP请求数，极大地提高页面加载速度

2）增加图片信息重复度，提高压缩比，减少图片大小

3）更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：

1）图片合并麻烦

2）维护麻烦，修改一个图片可能需要从新布局整个图片，样式

53 说说你对语义化的理解？

1）去掉或者丢失样式的时候能够让页面呈现出清晰的结构

2）有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

3）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

4）便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

54 Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

1. 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。

2. 严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。

3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

55 你知道多少种Doctype文档类型？

1. 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 
2.HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。 
3.XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。 
4. Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

56 HTML与XHTML——二者有什么区别

1）所有的标记都必须要有一个相应的结束标记

2）所有标签的元素和属性的名字都必须使用小写

3）所有的 XML 标记都必须合理嵌套

4）所有的属性必须用引号 “” 括起来

5）把所有 < 和 & 特殊符号用编码表示

6）给所有属性赋一个值

7）不要在注释内容中使用 “–”

8）图片必须有说明文字

57 html常见的兼容性问题

1.浏览器默认的margin和padding不同 
解决办法：*{margin:0;padding:0;} 
2.IE的双边距：块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大

**出现条件：**block元素+浮动+margin。

解决办法： 
在float标签样式控制中加入 display:inline，将其转化为行内属性。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示 
解决方法：可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决

4 超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active 了 
解决方法：改变CSS属性的排列顺序 L-V-H-A

5 上下margin重合问题：ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。 
解决方法：养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

58 浮动的原理和浮动引起的问题

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动的元素引起的问题： 
1. 父元素的高度无法被撑开，影响与父元素同级的元素 
2. 与浮动元素同级的非浮动元素会跟随其后 
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

59 html5的新属性和移除了那些属性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性： 
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 
1. 拖拽释放(Drag and drop) API 
2. 语义化更好的内容标签（header,nav,footer,aside,article,section） 
3. 音频、视频API(audio,video) 
4. 画布(Canvas) API 
5. 地理(Geolocation) API 
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； 
7. sessionStorage 的数据在浏览器关闭后自动删除 
8. 表单控件，calendar、date、time、email、url、search 
9. 新的技术webworker, websocket, Geolocation

移除的元素： 
1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u； 
2. 对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签： 
1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：

60 iframe的优缺点？ 

优点： 
1. 解决加载缓慢的第三方内容如图标和广告等的加载问题 
2. Security sandbox 
3. 并行加载脚本 
缺点： 
1. iframe会阻塞主页面的Onload事件 
2. 即时内容为空，加载也需要时间 
3. 没有语意

61 如何对网站的文件和资源进行优化？三种减少页面加载时间的方法？

优化： 
1. 文件合并 
2. 文件最小化/文件压缩 
3. 使用 CDN 托管 
4. 缓存的使用（多个域名来提供缓存）

减少页面的加载时间： 
1. 优化图片 
2. 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方） 
3. 优化CSS（压缩合并css，如 margin-top, margin-left…) 
4. 网址后加斜杠（如www.campr.com/目录，会判断这个目录是什么文件类型，或者是目录。） 
5. 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了） 
6. 减少http请求（合并文件，合并图片）

62 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤： 
1)当发送一个 URL 请求时，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。

2）浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。 
该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

3）一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。

4）此时，Web 服务器提供资源服务，客户端开始下载资源。

请求返回后，浏览器会解析 HTML 生成 DOM Tree，其次会根据 CSS 生成 CSS Rule Tree，而 javascript 又可以根据 DOM API 操作 DOM

 

CSDN更具体的解释：

在浏览器地址栏输入URL
浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
如果资源未缓存，发起新请求
如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：
HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
浏览器解析URL获取协议，主机，端口，path
浏览器组装一个HTTP（GET）请求报文
浏览器获取主机ip地址，过程如下：
浏览器缓存
本机缓存
hosts文件
路由器缓存
ISP DNS缓存
DNS递归查询（可能存在负载均衡导致每次IP不一样）
打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
客户端发送ACK=Y+1， Seq=Z
TCP链接建立后发送HTTP请求
服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
服务器将响应报文通过TCP连接发送回浏览器
浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：
主动方发送Fin=1， Ack=Z， Seq= X报文
被动方发送ACK=X+1， Seq=Z报文
被动方发送Fin=1， ACK=X， Seq=Y报文
主动方发送ACK=Y， Seq=X报文
浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
如果资源可缓存，进行缓存
对响应进行解码（例如gzip压缩）
根据资源类型决定如何处理（假设资源为HTML文档）
解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
构建DOM树：
Tokenizing：根据HTML规范将字符流解析为标记
Lexing：词法分析将标记转换为对象并定义属性和规则
DOM construction：根据HTML标记关系将对象组成DOM树
解析过程中遇到图片、样式表、js文件，启动下载
构建CSSOM树：
Tokenizing：字符流转换为标记流
Node：根据标记创建节点
CSSOM：节点创建CSSOM树
根据DOM树和CSSOM树构建渲染树:
从DOM树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none
对每一个可见节点，找到恰当的CSSOM规则并应用
发布可视节点的内容和计算样式
js解析如下：
浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容
当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素
当文档完成解析，document.readState变成interactive
所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
浏览器在Document对象上触发DOMContentLoaded事件
此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete,window触发load事件
显示页面（HTML解析过程中会逐步显示页面）
63 javasript对象的几种创建方式 

7种模式

查看 https://blog.csdn.net/weixin_37861326/article/details/80773708

 

1，工厂模式

2，构造函数模式

3，原型模式

4，混合构造函数和原型模式

5，动态原型模式

6，寄生构造函数模式

7，稳妥构造函数模式

64 javascript继承的 6 种方法 

6种方式

查看 https://blog.csdn.net/qq_31280709/article/details/52137086

 

1，原型链继承

2，借用构造函数继承

3，组合继承(原型+借用构造)

4，原型式继承

5，寄生式继承

6，寄生组合式继承

65 ajax 的过程是怎样的

1）创建XMLHttpRequest对象,也就是创建一个异步调用对象

2）创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

3）设置响应HTTP请求状态变化的函数

4）发送HTTP请求

5）获取异步调用返回的数据

6）使用JavaScript和DOM实现局部刷新

 

    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open('GET','demo.php','true');

    xmlHttp.send()

    xmlHttp.onreadystatechange = function(){

        if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

        }

    }

66 请解释一下 JavaScript 的同源策略

概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。

指一段脚本只能读取来自同一来源的窗口和文档的属性。

为什么要有同源限制： 
我们举例说明：

比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

缺点：

现在网站的JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

67 GET和POST的区别，何时使用POST？ 

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符 
POST：一般用于修改服务器上的资源，对所发送的信息没有限制

GET方式需要使用 Request.QueryString 来取得变量的值 
POST方式通过 Request.Form 来获取变量的值 
也就是说 Get 是通过地址栏来传值，而 Post 是通过提交表单来传值。

 

在以下情况中，请使用 POST 请求： 
1. 无法使用缓存文件（更新服务器上的文件或数据库） 
2. 向服务器发送大量数据（POST 没有数据量限制） 
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

68 什么是 “use strict”; ? 使用它的好处和坏处分别是什么？

ECMAscript 5添加了第二种运行模式：”严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。

设立”严格模式”的目的，主要有以下几个： 
1. 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为; 
2. 消除代码运行的一些不安全之处，保证代码运行的安全； 
3. 提高编译器效率，增加运行速度； 
4. 为未来新版本的Javascript做好铺垫。 
注：经过测试 IE6,7,8,9 均不支持严格模式。

缺点： 
现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被merge后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

69 Flash、Ajax各自的优缺点，在使用中如何取舍？

Flash： 
1. Flash适合处理多媒体、矢量图形、访问机器 
2. 对CSS、处理文本上不足，不容易被搜索

Ajax： 
1. Ajax对CSS、文本支持很好，支持搜索 
2. 多媒体、矢量图形、机器访问不足

共同点： 
1. 与服务器的无刷新传递消息 
2. 可以检测用户离线和在线状态 
2. 操作DOM

70 eval是做什么的？

1. 它的功能是把对应的字符串解析成JS代码并运行 
2. 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）

71 jQuery的美元符号$有什么作用？

其实美元符号$只是”jQuery”的别名，它是jQuery的选择器，如下代码：

$(document).ready(function(){

 

});

当然你也可以用jQuery来代替$，如下代码：

jQuery(document).ready(function(){

 

});

jQuery中就是通过这个美元符号来实现各种灵活的DOM元素选择的，例如$(“#main”)即选中id为main的元素。

72 body中的onload()函数和jQuery中的document.ready()有什么区别？

onload()和document.ready()的区别有以下两点：

1、我们可以在页面中使用多个document.ready()，但只能使用一次onload()。

2、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。

73 jQuery中有哪几种类型的选择器？

可以有3种类型的选择器，如下：

1、基本选择器：直接根据id、css类名、元素名返回匹配的dom元素。

2、层次选择器：也叫做路径选择器，可以根据路径层次来选择相应的DOM元素。

3、过滤选择器：在前面的基础上过滤相关条件，得到匹配的dom元素。

74 请使用jQuery将页面上的所有元素边框设置为2px宽的虚线？

这正是jQuery选择器上场的时候了，代码如下：

75 当CDN上的jQuery文件不可用时，该怎么办？

为了节省带宽和脚本引用的稳定性，我们会使用CDN上的jQuery文件，例如google的jquery cdn服务。但是如果这些CDN上的jQuery服务不可用，我们还可以通过以下代码来切换到本地服务器的jQuery版本：

 

76 如何使用jQuery实现点击按钮弹出一个对话框？

代码如下：

HTML：

jQuery：

77 jQuery中的Delegate()函数有什么作用？

delegate()会在以下两个情况下使用到：

1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：

 

$("ul").delegate("li", "click", function(){

$(this).hide();

});

2、当元素在当前页面中不可用时，可以使用delegate()

78 怎样用jQuery编码和解码URL？

在jQuery中，我们可以使用以下方法实现URL的编码和解码。

encodeURIComponent(url) and decodeURIComponent(url)

79 如何用jQuery禁用浏览器的前进后退按钮？

实现代码如下：

80 tcp的三次握手

SYN(SYNchronization)：在连接建立时用来同步序号。当SYN=1而ACK=0时，表明这是一个连接请求报文。对方若同意建立连接，则应在响应报文中使SYN=1和ACK=1. 因此, SYN置1就表示这是一个连接请求或连接接受报文。

ACK ：TCP协议规定，只有ACK=1时有效，也规定连接建立后所有发送的报文的ACK必须为1

seq：(sequence number) 顺序号码

ack:(acknowledge number) 确认号码
 

首先由Client（客户端）发出请求连接即 SYN=1 ACK=0 (请看头字段的介绍), TCP规定SYN=1时不能携带数据，但要消耗一个序号,因此声明自己的序号是 seq=x
然后 Server 进行回复确认，即 SYN=1 ACK=1 seq=y, ack=x+1,
再然后 Client 再进行一次确认，但不用SYN 了，这时即为 ACK=1, seq=x+1, ack=y+1.然后连接建立。

有人会困惑为什么要进行三次握手呢（两次确认）？这主要是为了防止已失效的请求连接报文忽然又传送到了，从而产生错误。如何产生这种情况的呢？假定A向B发送一个连接请求，由于一些原因，导致A发出的连接请求在一个网络节点逗留了比较多的时间。此时A会将此连接请求作为无效处理又重新向B发起了一次新的连接请求，B正常收到此连接请求后建立了连接，数据传输完成后释放了连接。如果此时A发出的第一次请求又到达了B，B会以为A又发起了一次连接请求，如果是两次握手此时连接就建立了，B会一直等待A发送数据，从而白白浪费B的资源。三次握手的话，由于A没有发起连接请求，也就不会理会B的连接响应，B没有收到A的确认连接，就会关闭掉本次连接。

可能还有人困惑大写ACK和小写ack是有什么区别，为什么两个值还不一样。大写ACK是一种TCP协议规定的标识，小写ack是 acknowledge number 为确认号码，值是seq + 1。

81 深入理解ES6箭头函数的this以及各类this

https://blog.csdn.net/yangbingbinga/article/details/61424363

 

普通函数中的this:

1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj

2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

箭头函数中的this

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this

要整明白这些, 我们需要首先了解一下作用域链:

当在函数中使用一个变量的时候,首先在本函数内部查找该变量,如果找不到则找其父级函数,

最后直到window,全局变量默认挂载在window对象下

1.全局变量默认挂载在window对象下

我们仅仅声明了一个全局变量aa,但是打印出window.aa却和aa保持一致,为什么呢?

眼见为实, 我们使用console.dir(window) 打印 window对象看看

我们可以看到在window属性中,看到 aa 属性了;此外,函数也适用于此情况,全局函数也会挂在在window对象下

我们常见的window的属性和方法有: alert, location，document，parseInt，setTimeout，setInterval等,window的属性默认可以省略window前缀!

2.在普通函数中,this指向它的直接调用者;如果找不到直接调用者,则是window

来看一些例子

示例1

结果是: window 

原因: test()是一个全局函数,也就是说是挂在window对象下的,所以test()等价于 window.test() ,所以此时的this是window

示例2

结果是: window

匿名函数,定时器中的函数,由于没有默认的宿主对象,所以默认this指向window

问题: 如果想要在setTimeout/setInterval中使用这个对象的this引用呢?

用一个 变量提前把正确的 this引用保存 起来, 我们通常使用that = this, 或者 _this = this来保存我们需要的this指针!

我们也可以使用 func.bind(this) 给回调函数直接绑定宿主对象, bind绑定宿主对象后依然返回这个函数, 这是更优雅的做法

示例3(改变自360面试题):

window.val = 1;

 var obj = {

   val: 2,

   dbl: function () {

     this.val *= 2;

     val *= 2;

     console.log(val);

     console.log(this.val);

   }

 };

 // 说出下面的输出结果

 obj.dbl();

 var func = obj.dbl;

 func();

结果是:  2   4    8   8

<1> 12行代码调用

val变量在没有指定对象前缀,默认从函数中找,找不到则从window中找全局变量

即 val *=2 就是 window.val *= 2

this.val默认指的是 obj.val ;因为 dbl()第一次被obj直接调用

<2>14行代码调用

func() 没有任何前缀,类似于全局函数,即  window.func调用,所以

第二次调用的时候, this指的是window, val指的是window.val

第二次的结果受第一次的影响

3.在严格模式下的this

结果是: undefined

4.箭头函数中的 this

此时的 this继承自obj, 指的是定义它的对象obj, 而不是 window!

示例(多层嵌套的箭头函数):

因为f1定义时所处的函数 中的 this是指的 obj, setTimeout中的箭头函数this继承自f1, 所以不管有多层嵌套,都是 obj

示例(复杂情况: 普通函数和箭头函数混杂嵌套)

结果: 都是 window,因为 箭头函数在定义的时候它所处的环境相当于是window, 所以在箭头函数内部的this函数window

示例(严格模式下的混杂嵌套)

 

结果都是undefined

说明: 严格模式下,没有宿主调用的函数中的this是undefined!!!所以箭头函数中的也是undefined!

总结:

使用箭头函数,可以让我们解决一些在匿名函数中 this指向不正确的问题; 但是要注意在和普通函数混合的时候,this的指向可能是window !

另外一个精简版的理解：

箭头函数需要注意的地方

*当要求动态上下文的时候，就不能够使用箭头函数，也就是this的固定化。

1、在使用=>定义函数的时候，this的指向是定义时所在的对象，而不是使用时所在的对象；
2、不能够用作构造函数，这就是说，不能够使用new命令，否则就会抛出一个错误；
3、不能够使用arguments对象；
4、不能使用yield命令；

下面来看一道面试题，重点说明下第一个知识点：

class Animal {

  constructor() {

    this.type = "animal";

  }

  say(val) {

    setTimeout(function () {

      console.log(this); //window

      console.log(this.type + " says " + val);

    }, 1000)

  }

}

var animal = new Animal();

animal.say("hi"); //undefined says hi

【拓展】

《JavaScript高级程序设计》第二版中，写到：“超时调用的代码都是在全局作用域中执行的，因此函数中this的值在非严格模式下指向window对象，在严格模式下是undefined”。也就是说在非严格模式下，setTimeout中所执行函数中的this，永远指向window！！

我们再来看看箭头函数（=>）的情况：

class Animal {

  constructor() {

    this.type = "animal";

  }

  say(val) {

    setTimeout(() => {

      console.log(this); //Animal

      console.log(this.type + ' says ' + val);

    }, 1000)

  }

}

var animal = new Animal();

animal.say("hi"); //animal says hi

【特点】

1.不需要function关键字来创建函数

2.省略return关键字

3.继承当前上下文的 this 关键字

82 前端需要注意哪些SEO

1.合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可

2.语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

3.重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取

4.重要内容不要用js输出：爬虫不会执行js获取内容

5.少用iframe：搜索引擎不会抓取iframe中的内容

6.非装饰性图片必须加alt

7.提高网站速度：网站速度是搜索引擎排序的一个重要指标

CSDN关于SEO:

由于上一家公司主营业务包括SEO，平时会接触到SEO的相关知识，建站期间也会有很多相关的注意事项。在此结合自己的理解做个总结与分享，所识有限，还可能会有误解之处，但也希望给大家树立SEO的意识，因为做好SEO，可以提高网站在搜索引擎中的排名，带来更多流量，才会获得更多的业务和询盘。

在这里主要想讲的有以下三点：

第一， 什么是SEO?

搜索引擎优化（Search Engine Optimization）,简称SEO。是按照搜索引擎给出的优化建议，以增强网站核心价值为目标，从网站结构、内容建设方案、用户互动传播等角度进行合理规划，以改善网站在搜索引擎中的表现，吸引更多搜索引擎用户访问网站。SEO与搜索引擎，互相促进，互利互助。 
要想更好理解以上一段废话，首先需要理解关于搜索引擎的两个概念。

1、 索引擎工作原理

可以将搜索引擎比喻为一个偌大的图书馆，里面所有的图书都已经分门别类排列整齐了，分类分成大分类（可以理解为书架）小分类（可以理解为书架上搁架）以及具体到最小的分类（书的名字）。图书馆每天都在增加新的图书，那么一个新的网站就等于一本书，我们进入搜索引擎输入的关键词就是图书馆里面分类的名字或者直接是书名，通过搜索引擎这个庞大的图书馆系统可以很快的找到我们需要的内容。那么什么书归置于什么分类下，如何摆到更容易被找到的位置就需要理解下面的内容了。

2、 搜索引擎蜘蛛工作原理

搜索引擎蜘蛛是搜索引擎工程师开发出的模拟蜘蛛在蜘蛛网爬行的一个程序，因为类似蜘蛛的行为，就称为搜索引擎蜘蛛，用来抓取网页信息，分门别类的存储在上面所说的图书馆里，有需要的时候再进行调取。所以为了让蜘蛛更容易抓取网页内容，就要投其所好，才能为我所用。

第二， 我们为什么需要SEO?

那么我们为什么需要做SEO呢，就是为了提高网站的权重，增强搜索引擎友好度，以达到提高排名，增加流量，改善用户体验，促进销售的作用。

1、 什么样的网站需要被搜索引擎检索到？

我有百度过关键词“合肥房产网”，出来的结果是好居网排名21位，也就是说翻到第三页第一个才是我们的网站。如果我是一位准备买房或者卖房的用户，我用百度搜索也不太可能会翻到第三页才决定我要找谁给我买或者卖这个房子吧。就算我们的服务我们的产品是最好的，但是用户搜索不到也是白搭，这就是SEO的作用所在，通过更高的排名，让潜在用户可以更便捷的找到我们。

2、 什么样的网站可以更好的被搜索引擎检索到？

对搜索引擎越友好，网站权重越高，排名就越高，就更容易被检索到。从拟人化的角度来看待搜索引擎蜘蛛，可以得出一些结论。首先你需要投其所好，网站结构脉络需要符合蜘蛛阅读的习惯，代码杂乱无章，蜘蛛看着都头疼，就无法给他留个好印象了；其次，网站深度不能太深，从首页到目标页跳转最好不能超过四次，再多的话蜘蛛就头晕了，转不出来，下次他就不再光顾，我们只能往后站；再次，当蜘蛛进入一个网站，半天加载不出来，他每天这么繁重的工作量，哪里会有时间慢慢等加载完成，相信印象也不会有多好了；最后，内容是一个网站存在的基础，蜘蛛循着一个关键词来到我们的网站，转了一圈，发现跟他想找的东西风马牛不相及，他可就头大了，直接就打入冷宫吧。 
看到这里相信大家会对SEO充满好奇了吧，到底怎样才能做好SEO呢？虽然说SEO更多的是运营的工作，布关键词发外链是一项繁重而长期的工程，但是作为网站建设人员，我们也有一些点可以注意，一样可以对SEO有所帮助，下面就是从前端的角度对网站进行的一些优化。

第三， 从前端角度出发有哪些注意事项有利于SEO?

1、提高页面加载速度。 能用css解决的不用背景图片，背景图片也尽量压缩大小，可以几个icons放在一个图片上，使用background-position找到需要的图片位置。可以减少HTTP请求数，提高网页加载速度。 
2、 结构、表现和行为的分离。另外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上，每次看到有人直接在页面上编写CSS和JS我都很痛心疾首。通过外链的方式能大大加快网页加载速度的，css文件可以放在head里，JS文件可以放置在body的最下方，在不影响阅读的情况下再去加载JS文件。 
3、 优化网站分级结构。在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路，有条件的话，最好能单独加个Sitemap页面，将网站结构一目了然地展示在蜘蛛面前，更有利于蜘蛛抓取信息。 
4、 集中网站权重。由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，那么为了集中网站权重，可以使用”rel=nofollow”属性，它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。 
5、 文本强调标签的使用。当着重强调某个关键词需要加粗表示，选用strong标签比使用b标签要更有强调作用。 
6、 a标签的title属性的使用。在不影响页面功能的情况下，可以尽量给a标签加上title属性，可以更有利于蜘蛛抓取信息。 
7、 图片alt属性的使用。这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息，作用同上。 
8、 H标签的使用。主要是H1标签的使用需要特别注意，因为它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。

其实还有很多也没法一一列举出来，只是举出几个相比比较常用和重要的点吧。由于对SEO也只是知道皮毛，有很多不对之处还望海涵。

83 web开发中会话跟踪的方法有哪些

1) cookie

2) session

3) url重写

4) 隐藏input

5) ip地址

84 的title和alt有什么区别

1.title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。

2.alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

85 doctype是什么,举例常见doctype及特点

声明必须处于HTML文档的头部，在标签之前，HTML5中不区分大小写
声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令
现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
在HTML4.01中声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容
HTML5不基于SGML，所以不用指定DTD
常见dotype：

HTML4.01 strict：不允许使用表现性、废弃元素（如font）以及frameset。声明：
HTML4.01 Transitional:允许使用表现性、废弃元素（如font），不允许使用frameset。声明：
HTML4.01 Frameset:允许表现性元素，废气元素以及frameset。声明：
XHTML1.0 Strict:不使用允许表现性、废弃元素以及frameset。文档必须是结构良好的XML文档。声明：
XHTML1.0 Transitional:允许使用表现性、废弃元素，不允许frameset，文档必须是结构良好的XMl文档。声明： 
XHTML 1.0 Frameset:允许使用表现性、废弃元素以及frameset，文档必须是结构良好的XML文档。声明：
HTML 5: 
HTML全局属性(global attribute)有哪些

参考资料：MDN: html global attribute或者W3C HTML global-attributes

accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素
class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素
contenteditable: 指定元素内容是否可编辑
contextmenu: 自定义鼠标右键弹出菜单内容
data-*: 为元素增加自定义属性
dir: 设置元素文本方向
draggable: 设置元素是否可拖拽
dropzone: 设置元素拖放类型： copy, move, link
hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
id: 元素id，文档内唯一
lang: 元素内容的的语言
spellcheck: 是否启动拼写和语法检查
style: 行内css样式
tabindex: 设置元素可以获得焦点，通过tab可以导航
title: 元素相关的建议信息
translate: 元素和子孙节点内容是否需要本地化
86 什么是web语义化,有什么好处

web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。 HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义，如Microformat通过添加符合规则的class描述信息 为什么需要语义化：

1.去掉样式后页面呈现清晰的结构

2.盲人使用读屏器更好地阅读

3.搜索引擎更好地理解页面，有利于收录

4.便团队项目的可持续运作及维护

87 HTTP method

一台服务器要与HTTP1.1兼容，只要为资源实现GET和HEAD方法即可

1.GET是最常用的方法，通常用于请求服务器发送某个资源。

2.HEAD与GET类似，但服务器在响应中值返回首部，不返回实体的主体部分

3.PUT让服务器用请求的主体部分来创建一个由所请求的URL命名的新文档，或者，如果那个URL已经存在的话，就用干这个主体替代它

4.POST起初是用来向服务器输入数据的。实际上，通常会用它来支持HTML的表单。表单中填好的数据通常会被送给服务器，然后由服务器将其发送到要去的地方。

5.TRACE会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个6.TRACE响应并在响应主体中携带它收到的原始请求报文。TRACE方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应链。

7.OPTIONS方法请求web服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。

DELETE请求服务器删除请求URL指定的资源

88 圣杯布局 和 双飞翼布局 以及 全局布局的方式

圣杯布局 以及 双飞翼布局

真实名称: 统称—”三栏布局”

圣杯布局：

利用relative 和 margin-left 以及 margin-right实现三栏布局。

结构层：

视图层：

先从#main块开始，到#left到#right ,在#left 和 #right设置margin-left 和 margin-right 以及left之前他们渲染出来的图形如下：

效果图：

89 移动端性能优化

1.尽量使用css3动画，开启硬件加速。

2.适当使用touch事件代替click事件。

3.避免使用css3渐变阴影效果。

4.可以用transform: translateZ(0)来开启硬件加速。

5.不滥用Float。Float在渲染时计算量比较大，尽量减少使用

6.不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。

7.合理使用requestAnimationFrame动画代替setTimeout

8.CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加

PC端的在移动端同样适用

90 栈和队列的区别?

1.栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。

2.队列先进先出，栈先进后出。

3.栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除

91 栈和堆的区别？

1.栈区（stack）—   由编译器自动分配释放   ，存放函数的参数值，局部变量的值等。

2.堆区（heap）   —   一般由程序员分配释放，   若程序员不释放，程序结束时可能由OS回收。

3.堆（数据结构）：堆可以被看成是一棵树，如：堆排序；

4.栈（数据结构）：一种先进后出的数据结构。

92 你觉得jQuery或zepto源码有哪些写的好的地方

jQuery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链。

(function( window, undefined ) {

 

//用一个函数域包起来，就是所谓的沙箱

//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局

//把当前沙箱需要的外部变量通过函数参数引入进来

//只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数

     window.jQuery = window.$ = jQuery;

 

})( window );

 

jquery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法。

有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度。

jquery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率。

93 ES6的了解

新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。ES6将promise对象纳入规范，提供了原生的Promise对象。增加了let和const命令，用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。。还有就是引入module模块的概念

94 关于Http 2.0 你知道多少？

HTTP/2引入了“服务端推（server push）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。

HTTP/2提供更多的加密支持

HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。

它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽。

95 什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法简单的出奇，只要在之间加入一个或者

此技术的重点在于：无论在何处启动下载，文件额下载和运行都不会阻塞其他页面处理过程，即使在head里（除了用于下载文件的 http 链接）。

123 写一个通用的事件侦听器函数

// event(事件)工具集，来源：github.com/markyun
markyun.Event = {
    //页面加载完成后
    readyEvent: function(fn) {
       if (fn==null) {
           fn=document;
       }
       var oldonload = window.onload;
       if (typeof window.onload != 'function') {
           window.onload = fn;
       } else {
           window.onload = function() {
               oldonload();
               fn();
           };
       }
    },
    //视能力分别使用dom0||dom2||IE方式 来绑定事件
    //参数： 操作的元素,事件名称 ,事件处理程序
    addEvent: function(element, type, handler) {
       if (element.addEventListener) {
           //事件类型、需要执行的函数、是否捕捉
           element.addEventListener(type,handler, false);
       } else if (element.attachEvent) {
           element.attachEvent('on' + type, function(){
               handler.call(element);
           });
       } else {
           element['on' + type] = handler;
       }
    },
    //移除事件
    removeEvent: function(element, type, handler) {
       if (element.removeEnentListener) {
           element.removeEnentListener(type,handler, false);
       } else if (element.datachEvent) {
           element.detachEvent('on' + type, handler);
       } else {
           element['on' + type] = null;
       }
    }, 
    //阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
    stopPropagation: function(ev) {
       if (ev.stopPropagation) {
           ev.stopPropagation();
       } else {
           ev.cancelBubble = true;
       }
    },
    //取消事件的默认行为
    preventDefault: function(event) {
       if (event.preventDefault) {
           event.preventDefault();
       } else {
           event.returnValue = false;
       }
    },
    //获取事件目标
    getTarget: function(event) {
       return event.target || event.srcElement;
    },
    //获取event对象的引用，取到事件的所有信息，确保随时能使用event；
    getEvent: function(e) {
       var ev = e || window.event;
       if (!ev) {
           var c = this.getEvent.caller;
           while (c) {
               ev = c.arguments[0];
               if (ev && Event ==ev.constructor) {
                   break;
               }
               c = c.caller;
           }
       }
       return ev;
    }
};
124 Node.js 的适用场景

1. 高并发

2. 聊天

3. 实时消息推送   

125 JavaScript 原型，原型链 ? 有什么特点？

1. 原型对象也是普通的对象，是对象一个自带隐式的__proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链

2. 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链

126 怎么重构页面？

1. 编写 CSS

2. 让页面结构更合理化，提升用户体验

3. 实现良好的页面效果和提升性能

127 WEB应用从服务器主动推送Data到客户端有那些方式？

1. html5 websocket

2. WebSocket 通过 Flash

3. XHR长时间连接

4. XHR MultipartStreaming

5. 不可见的Iframe

6.
--------------------- 
作者：MrCris 
来源：CSDN 
原文：https://blog.csdn.net/weixin_37861326/article/details/80620576?utm_source=copy 
版权声明：本文为博主原创文章，转载请附上博文链接！