前端面试题-基础篇(一)

最近在准备面试，搜集了一些偏基础的面试题，简单记录一下。

1、列举一些常用的ES6新特性

1、const、let （块级作用域 {}）

• 不存在变量提升，不能在变量声明之前使用，且只在当前作用域有效，避免了全局命名冲突
• let用来声明变量，const用来声明常量，const声明的值不能被修改（对于引用类型，指的是引用的地址不能修改）

2、箭头函数 ()=>{}

• 语法简洁，自动绑定上下文，解决了回调函数中this指向问题；函数体内的this 指向定义时所在的对象的this
• 不可以当做构造函数（不能new）
• 不可以使用arguments（es5）对象，可以用rest（es6）

3、结构赋值 const {a,b} = {a:1,b:2}

• 按照一定格式从数组或对象中提取值，然后对变量赋值
• 简化代码

4、函数默认参数 funtion fn(a=1){}

• 允许在函数定义时为参数提供默认值，在调用时未传递参数，将使用默认值

5、扩展运算符 ...

• 可将数组或对象展开成独立的元素，或配合{}/[]将多个元素合并成对象/数组

6、模板字符串 ``

• 使用``拼接字符串可在其通过${}插入变量和表达式，能极大提高代码的可读性和维护性

7、Promise对象 new Promise((resolve,reject)=>{})

• 异步编程的一种解决方案，存在三种状态：padding（进行中）, fulfilled（成功）,rejected（失败）
• Promise.all[p1,p2] 全部resolve才会返回resolve，只要其中一个reject则返回reject
• Promise.race[p1,p2] 取最快处理完成的p作为整个的返回结果

8、类和模块

• 引入了class语法糖，便于面向对象编程。类可通过extends关键字实现继承，使用super调用父类的方法
• 引入模块化的概念，通过import和export关键字可以方便的导入&导出模块
• es6module、CommondJS、AMD：前者是编译时加载，后两者是运行时加载

• 

   

2、JS事件循环机制

JS简介：JS是单线程语言，目的是为了在操作DOM的时候避免冲突；但是遇到耗时脚本，页面会产生堵塞，因此加入异步模式。

异步任务：不进入主线程，直接进入任务队列的任务，异步任务执行完成后会通知主线程去执行其回调函数。
　　　　　异步任务包括宏任务（script，setTimeout，setInterval，I/O，postMessage...）和微任务（Promise,MutaionObserver...）

事件循环机制：当JS代码执行时，所有任务(同步/异步)都在主线程上执行，形成一个执行栈；执行栈之外还有任务队列（宏队列和微队列），用于存放等待执行的异步回调；
　　　　　　  执行过程若遇到宏任务则会将其回调函数加到宏队列，遇到微任务则将其回调函数加到微队列，直到本次宏任务（通常是从script开始）执行结束后，就会执行微队列中的任务；
　　　　　　  当微队列中的任务全部执行结束，就会检查宏任务队列中有无可执行的任务，有则执行该宏任务，之后再检查微队列并执行，依次循环，直至无宏任务可执行，则结束
循环机制的核心是 让JS既做到单线程，又不会阻塞脚本执行

3、谈谈你对闭包的理解

概念：闭包是一个函数以及其绑定的周边环境状态的引用的组合，简单来讲就是内部函数可以访问到外部函数的作用域（私有变量）
eg:

注：以上两种方式在执行时都会产生闭包，并不一定需要返回函数，只要内部函数在执行时引用了外部函数的变量即可。

常使用的场景：1、防抖节流函数、函数柯里化、链式调用

小结：闭包可以保护变量，避免被垃圾回收机制清除。这是优点也是缺点，变量都存在内存中，过渡使用可能造成内存泄漏。

4、如何准确判断变量的数据类型

typeof：无法判断除Function外的引用类型
instanceof：无法判断基本类型
constructor：判断null和undefined会报错（无constructor）
Object.prototype.toString.call() 可以准确判断所有变量的数据类型

原理：先来看一下toString方法，在JavaScript中，所有类都继承于Object，因此toString()方法应该也被继承了，但由下图可见事实并不像我们想的那样，
其实各数据类型使用toString()后的结果表现不一的原因在于：所有类在继承Object的时候，改写了toString()方法。 
Object原型上的方法是可以输出数据类型的。因此我们想判断数据类型时，也只能使用原始方法。
继而有了此方法：Object.prototype.toString.call(obj)

 5、页面上有一万个button，你会如何绑定这些按钮的click事件

在其共同的父元素身上绑定click事件，通过事件对象判断点击的是哪个button

6、js深浅拷贝

浅拷贝：拷贝基本数据类型时，直接赋值即可，使用无影响；当拷贝引用类型时，拷贝的只是数据的指针，拷贝后的变量如有修改，会影响源数据
深拷贝：在内存的堆区域中重新分配内存，拥有不同的地址（引用），能避开浅拷贝的缺点
如何实现深拷贝（常用）：
1、lodash工具库 cloneDeep
2、JSON.parse(JSON.stringify())  缺点：无法拷贝内部函数
3、手写cloneDeep
function cloneDeep(source){
　　let obj = {}
　　if(source instanceof Array){
　　　　obj = []
　　}
　　for(let key in source){
　　　　let value = source[key]
　　　　obj[key] = (typeof value === "object" && value !==null) ? cloneDeep(value) : value
　　}
　　return obj
}

7、js捕获页面异常

1、try-catch-finally 适用于捕获局部代码块的异常

try {
    console.log(a); // 这里没有定义变量a，会抛出一个ReferenceError的异常
} catch (e) {
    console.error(e.message); // 输出异常信息
} finally {
    console.log("finally"); // 最终会输出“finally”
}

2、window.onerror 常用于捕获页面全局异常

window.onerror = function(message, source, lineno, colno, error) {
　　// message表示异常信息，source表示引起异常的文件名（可能为空），lineno和colno表示异常所在代码的行数和列数（可能为空），error表示异常的对象（可能为空）
}

8、cookie、localstorage、sessionStorage的作用和区别

cookie：服务器发给客户端的信息，常用于在客户端发起请求时服务器校验用户身份，最大4kb，默认有效期为浏览器窗口的会话期，同源窗口共享
localstorage：存储大小5MB，有效期永久，除非手动清除，不参与服务器通信；常用于数据缓存
sessionStorage：存储大小5MB，仅在浏览器窗口会话期有效，不同窗口不共享

9、什么是跨域，常用的跨越解决方式有哪些 

跨域：浏览器的同源策略造成的，对js的安全限制。协议、域名、端口有其中一个不同则视为跨域
常见的解决方式：
　　JSONP：利用script标签没有跨域限制，通过script.src发送http请求，http链接带上callback参数，服务端将返回数据拼接在callback中（缺点：只能发送GET请求，且需服务端配合）

　　　CORS（跨域资源共享）：客户端发起请求时带上请求头（Origin,Access-Control-Request-Method（复杂请求预检用）） 

　　　　　　　　　　　　　　服务器配置响应头 Access-Control-Allow-Origin（*或者具体的地址）

　　　　　　　　　　　　　　　　　　　　　　Access-Control-Allow-Methods
　　　　　　　　　　　　　　　　　　　　　　Access-Control-Allow-Headers

　　　nginx反向代理：利用nginx配置一个代理服务器，代理服务器域名和页面域名相同，使用代理服务器去访问其他域名接口

　　　postMessage：HTML5新增的api，可实现跨域通信

10、http常见状态码

2xx：请求成功
3xx：重定向
4xx：客户端请求错误
5xx：服务器响应错误

未完待续~