个人总结的笔试面试题
js基础知识：
1.javaScript typeof返回的数据类型有哪些？
object,string,undefined,number,function,boolean
2.列举三种强制类型转换和两种隐式类型转换
强制：parseInt(),parseFloat(),Number
隐式：== ，！！（各种比较和计算的运算符）
区别：
强制类型转换是得到一个你想转换的类型，产生一个新的东西。
隐式类型转换只是在运算或者比较时转换，不产生新东西。
强制是我们需要它转换，调用函数主动转换；隐式是被动转换，自动进行。
3.数组相关集合
3.1创建数组方法：
var array = new Array()
var array = [];
Array.of(1,2) //[1,2] 这是es6新增的一个Array方法，创建一个具有可变的新数组实例，而不考虑参数的数量或者类型。将一组值转换成数组。
Array() //[]
Array(3) //[,,,]
区别：
Array.of(3) //[3]
3.2 判断是否为数组的方法：
（1）console.log(arr instanceof Array) instanceof是一个二目运算符，左边操作数是一个对象，，右边操作数是一个函数对象或者函数构造器，a instanceof b 判断a的构造器是否为b
(2)console.log(arr.constructor === Array)
constructor属性值是一个函数对象，而且函数指向的正式构造函数。
（3）console.log(Array.isArray(arr)) es5出的一个api,专门来判断一个对象是否为数组。
4.dom0级和dom2级的区别：
dom0级： 不支持添加多个事件，后面的会覆盖前面的，无法取消。
dom2级： 可以添加多个事件，不兼容低版本IE，支持事件冒泡，事件捕获。
5.改变this的指向：
call apply bind
call函数的功能就是把当前的this指向作为函数来执行，并且该函数的this指向传入call参数。
call和apply都是为了改变某个函数运行时的上下文而存在的。
两者传参方式不同：
call(): 参数直接传入 例如：add.call(sub,3,1);就是用add来替换sub函数。
apply(): 数组格式传入 例如：add.apply(sub,[3,1]);第二个参数是数组。
bind:
add.bind(sub,[4,2])();bind是返回一个改变上下文的一个函数，而apply和call是立即执行函数。
6.b继承a的方法：
（1）原型链继承
（2）构造函数继承 用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））
（3）原型式继承
（4）组合继承
（5）寄生式继承
（6）寄生组合继承（最优）
7.js阻止事件冒泡的三种方法之间的不同:
(1)cancelBubble(IE) IE中的方法和额，e.stopPropagation()差不多。
(2)event.stopPropagation() 防止冒泡和捕获；
(3)event.preventDefault() 可以取消默认事件（2级dom有效）
8.添加 删除 替换 插入到某个节点的方法：
>>>>创建新节点
（1）createElement()//创建一个具体的元素。
（2）createTextNode() //创建一个文本节点
>>>>添加 删除 替换 插入
（1）obj.appendChild() 向节点的最后添加一个节点
（2）obj.insertBefore() 在指定的已有子节点之前插入新的子节点。
（3）obj.replaceChild() 替换
（4）obj.removeChild() 删除
>>>>查找
（1）document.getElementByTagName() //通过标签名称
（2）document.getElementsByname() //通过元素的name属性值
（3）document.getElementById() //通过元素Id，唯一性。
（4）document.querySelector(".class") //通过class值
document.querySelectorAll(".class")
9. window.onload（）和$(document).ready的区别
window.onload()需要等所有的文件都加载完才开始加载
$(document).ready() 只需要等文档结构加载完就可以了。
10.js的同源策略（跨域问题）
跨域：实际就是一个网站不能执行其他网站的网址，是由浏览器同源策略导致的，四浏览器对js施加的安全限制。
同源：域名，协议，端口号都相同。
其中有一个不同就是跨域。
解决方法：（1）使用iframe + postMessage实现向另一个页面发送消息。
（2）JSONP
(3)Cors
总结：不管是那种方式的跨域，都需要服务器端的配合,服务器端是主导地位,决定了跨域成功与否
11.== 和 === 的区别：
前者会自动转换类型,再判断是否相等。
后者不会,直接比较。
12.XML和JSON的区别：
JSON相比XML来说传递速度更快。
JSON与js交互更容易，解析更方便。
13.sessionStorage，localStorage,cookies的区别：
共同点: 都保存在浏览器。
不同点：
（1）与浏览器的交互：
cookie数据始终在同源http请求中携带（即使不需要），即cookie在浏览器和服务器之间来回传递。
sessionStorage和localStorage不会把数据发给服务器，只会在本地保存。
cookie数据还有路径（path）,可以限制cookie只属于某个路径下。
（2）存储大小限制不同：
cookie数据不能超过4k,因为每次http请求都要携带cookie,所以cookie只保存很小的数据，比如：会话标识。
sessionStorage和localStorage可以达到5M或者更大。
（3）数据作用域不同：
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage在所有的同源窗口都是共享的；
cookie也是在所有的同源窗口都是共享的；
（4）数据的有效期不同：
sessionStorage仅在当前浏览器窗口关闭前有效。
localStorage：始终有效，窗口或者浏览器关闭也一直保存，因此用作持久数据。
cookie只在设置的cookie过期时间之前有效，即使窗口或者浏览器关闭。
14.js垃圾清除回收方式
（1）标记清除：这是js最常用的垃圾回收方法，当一个变量进入执行环境时，例如函数中声明一个变量，将其标记为进入环境，当变量离开环境时，（函数执行结束），标记为离开环境
（2）引用计数：跟踪记录每个值被引用的次数，声明一个变量，并将引用类型赋值给这个变量，则这个值的引用次数+1，当变量的值变成了另一个，则这个值的引用次数-1，当值的引用次数为0的时候，就回收
15.闭包
函数嵌套函数
子级函数调用父级函数的参数或变量。
在一个A函数中声明定义另一个B函数，B函数中使用了A函数中声明的局部变量，当A函数执行完毕后，在将来的某一时间调用B函数仍能访问A函数中生命的局部变量的现象叫做闭包。
解决闭包方法：
声明一个函数立即执行（function(){
}）（）；、就像forEach使用。
（1）解决全局变量的污染，保证里面的内容能够正常执行。
（2）解决多个函数闭包同一变量混淆的问题。
闭包最大的用处：（1）可以读取函数内部的变量；（2）就是让这些变量的值始终保存在内存中。
提高安全性。
坏处：内存泄露。
16.this指向问题：
（1）普通函数调用，指向windows
(2) 对象的方法调用，指向对象。
（3）构造器方法调用，指向构造函数实例出来的对象。
call,apply,bind可以改变this的指向。
17.new操作符到底干了什么？
（1）创建了一个对象
（2）将构造函数的作用域赋值给新的对象。（所以this指向了这个对象）
（3）执行构造函数的代码。（为这个新对象添加属性）
（4）返回一个新对象。
18.事件代理事件委托：
原理： 使用dom的冒泡，将事件绑定到父级元素上，让父亲元素监听，提高性能。
19.什么是版本控制：
版本控制:是记录一个或者若干个文件内容的变化，以便将来查阅修改及更新。
20.在浏览器输入Url到整个页面显示在用户面前这个过程到底发生了什么？
（1）DNS解析（DNS:域名系统）
（2）发送http请求；
（3）服务器处理请求，并返回http报文
（4）浏览器解析渲染页面。
（5）连接结束。
详细：首先根据url中的域名，在远程服务器中查询对应的域名系统。
21.ajax和json优缺点？
（1）ajax用于web页面中是实现异步数据交互，实现页面数据局部内容刷新。
优点：能够进行内容局部加载刷新，减少带宽，避免用户不断刷新一级页面跳转，提高用户体验。
缺点： 对搜索引擎不友好；浏览器不支持ajax后退；
（2）json是一种请求轻量级的数据交互格式。
优点：轻量级便于人理解，便于机器解析。
22.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：正常，表示一切正常，返回的是正常请求结果。
304：未修改，调用缓存的数据。
403：服务器拒绝客户请求。
404：服务器不存在客户想要请求的资源。
500：服务器内部错误。
23.数组去重的方法：
（1）利用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;
}
（2）利用ES6的Set方法去重
let arr = [1,0,0,2,9,8,3,1];
function unique(arr) {
return Array.from(new Set(arr))
}
console.log(unique(arr)); // [1,0,2,9,8,3]
（3）使用双重for循环，再利用数组的splice方法去重。
var arr = [1, 5, 6, 0, 7, 3, 0, 5, 9,5,5];
function unique(arr) {
for (var i = 0, len = arr.length; i < len; i++) {
for (var j = i + 1, len = arr.length; j < len; j++) {
if (arr[i] === arr[j]) {
arr.splice(j, 1);
j--; // 每删除一个数j的值就减1
len--; // j值减小时len也要相应减1（减少循环次数，节省性能）
// console.log(j,len)
}
}
}
return arr;
}
console.log(unique(arr)); // 1, 5, 6, 0, 7, 3, 9
（4）利用数组的sort方法去重。（相邻元素对比法）
var arr = [5,7,1,8,1,8,3,4,9,7];
function unique( arr ){
arr = arr.sort();
console.log(arr);
var arr1 = [arr[0]];
for(var i=1,len=arr.length;i<len;i++){
if(arr[i] !== arr[i-1]){
arr1.push(arr[i]);
}
}
return arr1;
}
console.log(unique(arr))l; // 1, 1, 3, 4, 5, 7, 7, 8, 8, 9
（5）利用includes（指定元素）检查新数组是否有原数组的值。
var arr = [-1,0,8,-3,-1,5,5,7];
function unique( arr ){
var arr1 = [];
for(var i=0,len=arr.length;i<len;i++){
if( !arr1.includes( arr[i] ) ){ // 检索arr1中是否含有arr中的值
arr1.push(arr[i]);
}
}
return arr1;
}
console.log(unique(arr)); // -1, 0, 8, -3, 5, 7
（6）利用数组的filter方法去重。
var arr = [1,2,8,9,5,8,4,0,4];
/*
模拟: 原始数组：[1,2,8,9,5,8,4,0,4]
索引值：0,1,2,3,4,5,6,7,8
伪新数组：[1,2,8,9,5,8,4,0,4]
使用indexOf方法找到数组中的元素在元素在中第一次出现的索引值
索引值：0,1,2,3,4,2,6,7,6
返回前后索引值相同的元素：
新数组：[1,2,8,9,5,4,0]
*/
function unique( arr ){
// 如果新数组的当前元素的索引值 == 该元素在原始数组中的第一个索引，则返回当前元素
return arr.filter(function(item,index){
return arr.indexOf(item,0) === index;
});
}
console.log(unique(arr)); // 1, 2, 8, 9, 5, 4, 0
（7）利用函数的递归去重
var arr = [1,1,5,6,0,9,3,0,6]
function unique( arr ){
var arr1 = arr;
var len = arr1.length;
arr1.sort((a,b)=>{
return a-b
})
function loop(index){
if(index >= 1){
if(arr1[index] === arr1[index-1] ){
arr1.splice(index,1);
}
loop(index - 1); // 递归loop，然后数组去重
}
}
loop(len-1);
return arr1
}
console.log(unique(arr)); // 0, 1, 3, 5, 6, 9
（8）利用ES6中的map方法去重。
/*
创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果。
*/
let arr = [1, 0, 8, 3, -9, 1, 0, -9, 7]
function unique(arr) {
let map = new Map();
console.log(map)
//let arr1 = new Array(); // 数组用于返回结果
let arr1 = []
for (let i = 0, len = arr.length; i < len; i++) {
if (map.has(arr[i])) { // 判断是否存在该key值
map.set(arr[i], true);
}
else {
map.set(arr[i], false);
arr1.push(arr[i]);
}
}
return arr1;
}
console.log(unique(arr)); // 1, 0, 8, 3, -9, 7
（9）利用对象的属性不能相同的特点去重（有缺陷）
var arr = [1,3,8,9,3,5,4,4,6,6,2];
function unique(arr){
var arr1 = [];
var obj = {};
for(var i =0,len=arr.length;i<len;i++){
if(!obj[arr[i]]){
arr1.push(arr[i]);
obj[arr[i]] = 1;
}
else{
obj[arr[i]]++;
}
}
return arr1;
}
console.log(unique(arr)); // 1, 3, 8, 9, 5, 4, 6, 2
24.ajax请求时，如何解析json数据？
JSON.parse
25.如何阻止默认事件
（1）return false (2)event.preventDefalut()
26.当一个DOM节点被点击的时候，我们希望能够执行一个函数，应该怎么做？
(1)box.onclick = function(){} //dom0
(2)box.addEventListener("click",function(){},false);
(3)<button onclick="xxx()"></button>
(4) box.click(function(){}); //dom2
27.js的事件流模型都有什么？
事件冒泡：事件开始由最具体的元素，然后逐级向上传播。
事件捕捉： 事件由最不具体的节点先接收，然后逐级向下，一直到最具体的。
dom事件流（三个阶段）：事件捕捉，目标阶段，事件冒泡。
28.写一个function，清除字符串前后的空格。（兼容所有的浏览器）
String.prototype.trim= function(){
return this.replace(/^\s+/,"").replace(/\s+$/,"");
}
29.获取js三个数的最大和最小值？
Math.max(a,b,c);
Math.min(a,b,c);
30.列举js三种主要的数据类型，2种复合数据类型，2种特殊数据类型。
主要数据类型: string,boolean,number
复合数据类型:function ,object
特殊类型:null,undefined
31.程序中捕获异常的方法？
try{
}catch(e){
}finally{
}
32.ajax原理：
(1)创建对象
var xhr = new XMLHttpRequest();
(2)打开请求
xhr.open('GET', 'example.txt', true);
(3)发送请求
xhr.send(); 发送请求到服务器
(4)接收响应
xhr.onreadystatechange =function(){}
(1)当readystate值从一个值变为另一个值时，都会触发readystatechange事件。
(2)当readystate==4时，表示已经接收到全部响应数据。
(3)当status ==200时，表示服务器成功返回页面和数据。
(4)如果(2)和(3)内容同时满足，则可以通过xhr.responseText，获得服务器返回的内容。
33.js三种弹出式消息提醒：
alert 警告窗口
confirm 确认窗口
prompt 信息输入窗口
34.浏览器的滚动距离：
可视区域距离页面顶部的距离：
scrollTop = document.documentElement.scrollTop || document.body.scrolTop;
35.offsetWidth offsetHeight和clientWidth clientHeight的区别：
（1）offsetWidth (content宽度 + padding宽度 + border宽度)
（2）offsetHeight (content高度 + padding高度 + border高度)
（3）clientWidth (content宽度 + padding宽度)
（4）clientHeight (content高度 + padding高度)
36.Vue router跳转和location.href区别：
router是hash改变
location.href是页面跳转，刷新页面。
37.setTimeout和setInterval区别：
settimeout是在一定时间后将函数添加至执行队列。
setInterval是不管前一次是否执行完毕，每隔一定时间重复执行。
38.CSS选择器的优先级：
ID>类>标签>相邻>子选择器>后代选择器>*>属性>伪类
39.a:active移动端实现
有时候一些按钮的简单点击交互可以通过css伪类来实现；必须点击了更改颜色；松开恢复；
40.forEach和map
相同点：（1）都是循环遍历数组中的每一项。
（2）只能遍历数组
（3）都有兼容问题
（4）forEach和map方法里每次执行匿名函数都支持3个参数，item，index，arr(原数组)
（5）匿名函数this指向window
不同：
(1)map速度比forEach快
（2）map会返回一个新数组，不对原数组产生影响，forEach不会产生新数组
（3）map可以进行链式操作，forEach不可以。
41.['1','2','3'].map(parseInt) 的结果？
parseInt(100,3) // (1*3^2)+(0*3^1)+(0*3^0) = 9
parseInt(15,3) // 会忽略比3大的数5，直接解析数字1，即（1*3^0） = 1
parseInt(6,3) // 忽略比3大的数字6，解析空字符串，即 NaN
parseInt(250,3) // 忽略比3大的数字5，且数字5后面的也会被忽略，2*3^0 = 2
在 [ '1', '2', '3' ].map( parseInt )例子中，对于每个迭代 map，parseInt 会传递两个参数：字 符串和基数。所以实际上执行的代码为：
['1', '2', '3'].map( (item,index)=>{
console.log( item,index )
return parseInt( item,index )
})
/*
打印的结果为：
'1' 0
'2' 1
'3' 2
*/
/*
返回值
parseInt( '1', 0 )
parseInt( '2', 1 )
parseInt( '3', 2 )
*/
[ '1', '2', '3' ].map( parseInt )的结果为 1 NaN NaN。
42.CSS 预处理器，常见的有哪些？主要应用到什么场景？
（1）Sass 它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS
(2)LESS LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码
(3)Stylus 主要用来给Node项目进行CSS预处理支持
43.Js中如何实现对象的深复制？
44.移动端适配解决方案有哪些？
（1）通过媒体查询的方式即CSS3的meida queries
（2）以天猫首页为代表的 flex 弹性布局
（3）以淘宝首页为代表的 rem+viewport缩放
（4）rem 方式
45.
浙公网安备 33010602011771号