常见js笔试面试题（持续更新）

本文提供最简便的解答方式，方便快速记忆，复盘，详细答案可自己再搜一下。

js基础知识

1. javascript typeof返会的数据类型有哪些

object,string,undefined,number,function,boolean

基本数据类型：
string,number,boolean,undefined,null

2. 列举三种强制类型转换和两种隐式类型转换

parseInt(),parseFloat(),Number()
==,!!

3. 数组相关集合

3.1. 创建数组方法

var array = new Array()
var array = []

Array.of(1,2) //[1,2]
这是es6新增的一个Array方法，创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
（感谢 haru 的宝贵建议）

4. 判断是否为数组的方法

• console.log(arr instanceof Array)
• console.log(arr.construct === Array)
• console.log(Array.isArray(arr))

5. pop(),push(),unshift(),shift()

• pop()尾部删除
• push()尾部插入
• unshift()头部插入
• shift()头部删除

6. DOM0 DOM2

dom0级

• 不支持添加多个事件，后面的会覆盖前面的
• 无法取消

var btn = document.getElementById("button");
btn.onclick = function(){
    alert(1);
}
btn.onclick = function(){
    alert(2);
}       //只弹出2

dom2

• 可以添加多个事件
• 不兼容低版本IE
• 支持事件冒泡，事件捕获

var btn = document.getElementById("button");
btn.addEventListener("click",function(){
    alert("1");
})
btn.addEventListener("click",function(){
    alert("2");
})              //先弹出1，再弹出2

7. IE和DOM事件流的区别

• 执行顺序不一样
• 参数不一样 低版本ie没有回调函数，只能进行冒泡
• 第一个参数是否加"on",低版本IE不支持addEventListener(),支持attachEvent,第一个参数需要加"on"
• this指向问题，IE指向windows,不指向触发的函数

8. IE标准下有哪些兼容性写法

var ev = ev||window.event

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

var target = ev.srcElement||ev.target

9. call apply bind

改变this的指向，
其中call的写法

function add(a,b)  
{  
    alert(a+b);  
}  
function sub(a,b)  
{  
    alert(a-b);  
}  
  
add.call(sub,3,1);   

这个例子中的意思就是用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4); // 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。
apply写法

function add(a,b)  
{  
    alert(a+b);  
}  
function sub(a,b)  
{  
    alert(a-b);  
}  
add.apply(sub,[4,2]);　

不同就在于第二个参数，apply写成数组

bind写法

function add(a,b)  
{  
    alert(a+b);  
}  
function sub(a,b)  
{  
    alert(a-b);  
}  
add.bind(sub,4,2)();　

bind是返回了一个改变上下文的一个函数，可以稍后调用，而apply，call是立即执行函数

10. b继承a的方法（js面向对象复习）

• 原型链继承
• 构造函数继承
• 实例继承
• 组合继承
• 拷贝继承
• 寄生组合继承

11. 如何阻止事件冒泡和默认事件

• cancelBubble(IE),
• return false,
• event.preventDefault,
• event.stopPropagation()

12. 添加 删除 替换 插入到某个DOM节点的方法

• obj.appendChild()
• obj.insertBefore()
• obj.replace()
• obj.remove()

13. window.onload和$(document).ready的区别

• window.onload只能出现一次，$(document).ready能出现多次
• window.onload需要等所有文件都加载完才开始加载，$(document).ready只需等文档结构加载完了就开始加载

14. == 和 === 区别

前者会自动转换类型
后者不会

15. javascript的同源策略（跨域问题）

跨域是什么：实际上就是一个网站不能执行其他网站上的网址，是由浏览器同源策略造成的，是浏览器对js施加的安全限制
所谓同源，实际上是指域名，协议，端口都相同
也就是说当，域名或者协议，或者端口不同的时候，就是跨域，

15.1. 解决方法：

jsonp

json with padding,是一种json的一种使用模式
产生的原因，ajax不支持跨域，由于浏览器的同源策略，但是script的src支持跨域
主要的原理是动态创建一个script标签的，通过src调用服务器提供的js脚本，该脚本的内容是一个函数调用，该函数在本地js文件中进行定义，其中的参数就是，本地函数请求的数据，也就是服务器所将返回的数据

与ajax的不同，ajax是通过xhr获取非本页面的数据内容，而jsonp获取的是服务器提供js脚本

代理

• 例如www.123.com/index.html需要调用
• www.456.com/server.php，可以写一个接口
• www.123.com/server.php，由这个接口在后端去调用
• www.456.com/server.php并拿到返回值，然后再返回给 index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。

PHP端修改header（XHR2方式）
在php接口脚本中加入以下两句即可：
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

16. javascript是一种什么样的语言

• 解释性脚本语言，代码不进行预编译
• 主要用来向HTML页面添加交互行为
• 可以直接嵌入HTML页面，但单独写成js文件有利于结构和行为的分离
• 跨平台性，在绝大多数浏览器支持下，可以在多种平台下运行，linux,windows

17. javascript基本数据类型和引用数据类型

基本类型 undefind null number string boolean

• 基本类型的值是不能改变的
• 基本类型不能添加属性和方法
• 基本类型的比较是值的比较
• 基本类型变量存放在栈区（栈内存）
• 也就是说基本类型在赋值操作后，两个变量是相互不受影响的。

引用类型 object Function Array

• 引用类型可以添加属性和方法，属性方法内又可以添加基本类型
• 引用类型的值是可变的
• 引用类型的值时同时保存在栈内存和堆内存里的对象，准确地说，引用类型的存储需要内存的栈区和堆区（堆区是指内存里的堆内存）共同完成，栈区内存保存变量标识符和指向堆内存中该对象的指针，
• 引用类型的比较是引用的比较 引用类型时按引用访问的，换句话说就是比较两个对象的堆内存中的地址是否相同，那很明显，person1和person2在堆内存中地址是不同的
• 引用类型的赋值其实是对象保存在栈区地址指针的赋值，因此两个变量指向同一个对象，任何的操作都会相互影响

18. js原生不要与jq搞混

• document.getELementById("ID").value

获取值的时候原生不是方法，不带括号

• 获取所有checkbox

var boxs =document.getELementsByTagName("input");
var boxArray = [];
var len = boxs.length;
while(len--){
    if(boxs[len].type == 'checkbox'){
        boxArray.push(boxs[len]);
    }
}

• 设置div html内容以及设置样式

var dom = document.getElementById("ID");
dom.innerHTML = "xxxx"
dom.style.color="#000"

19. DOM,BOM

javascript由ECMAScript,DOM,BOM三部分组成，

• ECMAScript也是一种语言，也就是对规定的语法，操作，关键字，语句等的一个描述，javascript实现了ECMAScript
• DOM是文档对象模型，包括了获取元素，修改样式，操作元素三方面内容，也是我们进行最多的操作，有很多兼容性写法
• BOM是浏览器对象模型，包括浏览器的一些操作，window.onload,window.open等还有浏览器事件，监听窗口的改变onresize,监听滚动事件onscroll等

20. null和undefind的区别

• null是表示一个空的对象，转为数值为0，undefind表示一个空的原始值，转为数值为NAN
• undefind指本该有一个值，但却并有定义，null表示没有对象，不应该有值

21. XML和JSON的区别

• JSON相对于XML来讲传递速度更快，因为光看代码量就能看出
• JSON与js的交互更容易，解析更方便

22. 实现多个标签之间的通信

调用localStorage,cookies等本地存储进行存储相关信息
三者的共同点：都保存在浏览器。
三者的区别：

与服务器的交互

• cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
• 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

存储大小限制也不同，

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

数据有效期不同，

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

作用域不同，

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

23. 哪些操作会造成内存泄露

内存泄露指任何对象在不再拥有或不再需要它之后依然存在

• setTimeout第一个参数是字符串而不是函数的时候就会造成内存泄露
• 闭包
• 控制台日志
• 循环（两个对象彼此引用且彼此保留）

24. js垃圾回收方式

• 标记清除：这是js最常用的垃圾回收方法，当一个变量进入执行环境时，例如函数中声明一个变量，将其标记为进入环境，当变量离开环境时，（函数执行结束），标记为离开环境
• 引用计数: 跟踪记录每个值被引用的次数，声明一个变量，并将引用 类型赋值给这个变量，则这个值的引用次数+1，当变量的值变成了另一个，则这个值的引用次数-1，当值的引用次数为0的时候，就回收

25. 闭包

• 函数嵌套函数
• 子级函数调用父级函数的参数或变量

经典闭包

function outer(){
    var a = 1;
    function inner(){
        alert(a);
    }
    return inner
}
var inn = outer();
inn();

点击li返回li下标

<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    var oUL = document.getElementById("test");
    var oLi = oUl.getElementByTagName("li");
    for(var i=0;i<oLi.length;i++){
        oLi[i].index = i;
        oLi[i].onclick = function(){
            alert(this.index);
        }
    }

</script>

<!-- 闭包 -->
<script>
    var oUL = document.getElementById("test");
    var oLi = oUl.getElementByTagName("li");
    for(var i=0;i<oLi.length;i++){
        oLi[i].index = i;
        oLi[i].onclick = (function(a){
            return function(){
                alert a;
            }
        })(i)
    }

</script>

26. this指向问题

普通函数调用，指向windows

window.value=1;
function getValue(){
 console.log(this.value);
}
getValue();//输出1，此时的this指向window

对象的方法调用，指向对象

var Obj={
  value:2,
  getValue:function(){
       console.log(this.value);//输出2,this指向Obj
  }   
}

构造器方法调用，指向构造函数实例出来的对象

function main(val){
  this.value=val;
}
main.prototype.getValue=function(){
  console.log(this.value);
}

var fun=new main(3);
fun.getValue();
fun.value;//输出3，this指向main的实例对象fun

call,apply,bind可以自定义this指向第一个参数

function showValue(){
  console.log(this.value);
}
var obj={
  value:4
}
showValue.call(obj)//输出4，this指向了obj对象

function showValue(){
  console.log(this.value);
}
var obj={
  value:4
}
var showValue2=showValue.bind(obj);
showValue2()//输出4，this指向了obj对象

27. 高阶函数

• 函数作为参数传递，
• 函数作为返回值输出

28. new操作符到底干了什么

• 创建一个新对象
• 将构造函数的作用域赋值给新对象（所以this指向了这个新对象）
• 执行构造函数的代码（为这个新对象添加属性）
• 返会新对象

29. js严格模式

"use strict"
消除js一些不合理的用法
消除代码运行的一些不安全之处
增加运行速度
为未来新版本js做铺垫

• 变量必须声明
• 对象不能出现重复属性名
• arguments改变，不会影响函数参数
• eval，arguments变为关键字，不能作为变量名
• 不允许使用with
• 不用call，apply，bind改变this指向，一般函数调用指向null

30. 事件代理事件委托

• 原理是使用dom的冒泡，将事件绑定到父元素上，让父元素进行监听，提高性能

31.什么是版本控制，

版本控制是一种记录一个或若干文件内容变化，以便将来查阅修改以及更新。

32.ajax请求

ajax请求四步

• 创建一个xhr对象 var xhr = new XmlHttpRequest()
• 判断就绪状态为4时执行代码

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        console.log(responseText);
    }
}

• 创建请求 xhr.open('get','url',true)
• 发送请求 xhr.send(null)

33.在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么

• DNS解析
• TCP连接
• 发送HTTP请求
• 服务器处理请求并返回HTTP报文
• 浏览器解析渲染页面
• 连接结束

详细：

首先根据url中的域名，在远程服务器中查询对应

34.ajax和json

ajax用于web页面中实现异步数据交互，实现页面局部内容刷新

• 优点：能够进行内容局部加载刷新，减少带宽，避免用户不断刷新以及页面跳转，提高用户体验
• 缺点：对搜索引擎不友好；浏览器不支持ajax的后退；

json是一种请求轻量级的数据交互格式

• 优点：轻量级，便于人的阅读理解，便于机器解析

35.http考点

常用的HTTP方法有哪些

GET:
POST:
PUT:
DELETE:

GET与POST方法的区别

• get主要是从服务器获取资源，post主要是像服务器发送数据
• get传输数据通过url请求，利用k=v的形式放在url后面，用?连接，多个用&连接而post是存放在，ajax中的data中的，get传输的过程使用户可见 的，而post是对用户不可见的。
• get传输的数据量小，因为受url的长度限制，但是效率高，post能上传的数据量大
• post较get更安全一些
• get方式传递的中文字符可能会乱码，post支持标准字符集，可以正确传递中文字符

http请求报文与响应报文格式

请求报文包含三部分：

• 请求行：包含请求方法、URI、http版本信息
• 请求首部字段
• 请求内容实体

响应报文包含三部分：

• 状态行：包含HTTP版本、状态码、状态码的原因短语
• 响应首部字段
• 响应内容实体

http状态码

• 100-199：成功接收请求，但需要进行下一步请求
• 200-299：成功接收请求，并完成整个处理过程
• 300-399：为完成全部请求，客户需近一步细化需求
• 400-499：客户端请求有错误，包括语法错误或不能正常执行
• 500-599：服务器端出现错误

http缺点与https

• 通信使用明文不加密，内容可能被窃听
• 不验证通信方身份，可能遭到伪装
• 无法验证报文完整性，可能被篡改

https就是加上加密处理（一般是SSL安全通信线路）+认证+完整性保护

常用：

• 200 正常，表示一切正常，返会的是正常请求结果
• 302/307 临时重定向，表示请求的文档，已被临时移动到别处
• 304 未修改，调用缓存的数据
• 403 服务器拒绝客户请求
• 404 服务器不存在客户想要找的资源
• 500 服务器内部错误

36.数组去重的一种相对好理解的方法

利用indexOf方法的去重

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

var arr = [1,1,2,3,4,2,6,4,5,7];
var nArr = [];
function removeItem(arr){
    for(var i=0;i<arr.length;i++){
        if(nArr.indexOf(arr[i])==-1){
            nArr.push(arr[i]);
        }
    }
    return nArr;
}
console.log(removeItem(arr));

es6

let const

• let相当于给js新增了块级作用域，声明的变量只在let命令所在的代码块内有效
• const也是声明变量，它声明的变量，不能改变，可以用来声明第三方库变量的应用

class extends super

• class定义一个类，其中有一个construct方法，construct方法中的this代表实例对象，construct以外还有其他的方法，construct内定义的方法属性是实例对象自己的，construct外的方法属性是所有实例对象共享的
• class之间可以通过extends实现继承
• super指代父类的实例，子类construct中必须先调用super()方法，因为子类没有自己的this对象，是继承父类的this对象

arrow function(箭头函数)

除了书写简洁了很多，最大的优点是this指向，使用箭头函数，函数内部的this就是定义时所在的对象。箭头函数根本没有自己的this，this是继承外面的，它内部的this就是外层代码块的this

template string(模板字符串)

ajax调用数据库，需要向文档中插入大段html的时候，传统的字符串拼接太麻烦，引入模板工具库会稍微好点，不过还是没有es6的template string简单，可以直接用反单引号包括代码块``,用${}来引用变量，所有的空格缩进都会保留到输出中

destructuring(解构赋值)

es6按照一定模式，从数组和对象中提取值，对变量进行赋值，这就成为解构，也就是说，运用es5的方法，数组和对象中的变量需要，一个个进行赋值，而es6可以一步到位

default,rest(默认值，扩展语法)

当函数忘记传参的时候，给它一个默认值，传统方法是在函数中运用||，es6可以直接在参数中写上

function animal(type){
    type = type || 'cat'  
    console.log(type)
}
animal()

function animal(type = 'cat'){
    console.log(type)
}
animal()

function animals(...types){
    console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

gulp

gulp是一种自动化构建工具，前端工程化开发的一种工具，增强开发流程
使用方便，npm安装，新建gulpfile.js,导入gulp模块，let gulp = require('gulp')
通过default任务去定义工作流
最后在终端执行gulp来进行自动化操作

api很简单只有四种

• gulp.task 创建任务 ：参数任务名称，前置任务数组，回调函数
• gulp.src 寻找文件：通过路径找到一个或多个文件
• gulp.dest 输出到指定目录：如果没有就新建一个
• gulp.watch 监听文件变化，执行任务
• pipe具体不清楚，总之，除了gulp.src之外，其他执行条件都要放在.pipe()中

Bootstrap

Bootstrap和Foundation的比较

UI元素的不同

• Bootstrap给出了能想到的一切元素，也就是试图提供所有定义好的UI，比如一个导航，给予一个默认导航的样式
• Foundation只给定了限定的几种元素，可以自己自定义，更适合创造

尺寸单位不一样，

• Bootstrap是px
• Foundation是rem

网格布局有所不同

• Foundation 的网格可以自动适配当前浏览器的宽度，Foundation 则会灵活适配当前的浏览器宽度, 这是一种新的技术手段, 自动适配的同时, 可以表现的与 Transformer 一样的效果.
• Boostrap 则是预定义了几种网格尺寸来适配主流的设备和屏幕.Bootstrap 会在你改变浏览器宽度的时候突然改变它的网格.

移动设备

• Foundation移动设备优先
• Bootstrap也支持移动设备

社区

• Bootstrap有一个完备的社区,有什么问题几乎都可以迅速解决
• Foundation则没有，需要自力更生