写在前面
这是我7月份手动整理的，希望对大家有帮助，强烈安利大家把这两篇也看了，我通过这三篇文章已经拿到offer了，祝大家早日找到满意的工作。如果对你有帮助的话可以点一下小心心~ 嘻嘻 O(∩_∩)O~
HTML & css 面试题 https://www.jianshu.com/p/42ed32949c8f
DOM & HTTP 面试题 https://www.jianshu.com/p/91829dc951db
交个朋友吧~
image.png
1.必考：ES 6 语法知道哪些，分别怎么用？
let/const
var 有变量提升，因此才有立即执行函数等着很烦人所以有了let, Let只在{}中有效。 let不可以重复声明。const 声明变量时必须赋值，否则报错 const a =1 且只能赋值一次
image.png
多行字符串/模板变量
image.png
解构赋值
image.png
箭头函数
image.png
函数默认参数
image.png
模块化
模块化是一种处理复杂系统分解为更好的可管理模块的方式。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。
优点：
避免命名冲突(减少命名空间污染)
灵活架构，焦点分离，方便模块间组合、分解
多人协作互不干扰
高复用性和可维护性
环境： babel 编译 ES6 语法，模块化可用 webpack 和 rollup
第一种
默认输出这个模块：export default{ ... }
引用： import xxx from './index.js'
第二种：
同时输出两个模块：
export function fn1 {...}
export function fn2 {...}
引用：import { fn1, fn2 } from './index.js'
2.必考 Promise、Promise.all、Promise.race 分别怎么用？
image.png
1.then
$.ajax(...).then(成功函数, 失败函数)
image.png
2.链式 then
$.ajax(...).then(成功函数, 失败函数).then(成功函数2, 失败函数2)
3.如何自己生成 Promise 对象
image.png
All是所有的都执行完了 才执行，race是只有一个执行完了就就行
image.png
3.必考：手写函数防抖和函数节流
4.必考：手写AJAX
let request = new XMLHttpRequest()
request.open('get','http://jack.com:8002/xxx')
request.send()
request.onreadystatechange = ()=>{
if(request.readyState === 4){
if(request.status >=200 && request.status < 300){
let str = request.responseText
let obj = window.JSON.parse(str)
}
}
}
let xhr = new XMLHttpRequest()
xhr.open('POST', '/xxxx')
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText)
}
}
xhr.send('a=1&b=2')
image.png
image.png
image.png
5.必考：这段代码里的 this 是什么？
fn() 里面的 this 就是 window
fn() 是 strict mode，this 就是 undefined
a.b.c.fn() 里面的 this 就是 a.b.c
new F() 里面的 this 就是新生成的实例
() => console.log(this) 里面 this 跟外面的 this 的值一模一样
6.必考：闭包？
闭包： 作用：既能够重用变量，又可以防止变量不被污染的一种机制
function adder (){
var n = 0
return function(){
n += 1
}
}
adder() // n === 1
adder() // n === 2
console.log(n) // n is not defined
7.必考：什么是 JSONP，什么是 CORS，什么是跨域？
跨域：只有协议+端口+域名 一模一样才可以发ajax请求。其他请求是可以的比如Img，script等。为了防止这种现象就要跨域（突破同源策略）。
跨域有两种方式： JSONP CORS 同源资源共享
下面是JSONP
利用<script>标签的src属性的跨域请求，传递一个callback参数给跨域服务器，然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住json数据，为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP。
为什么不支持post请求：JOSNP是通过动态创建<script>实现的，而<script>不支持POST请求
JSONP
请求方：frank.com 的前端程序员（浏览器）
响应方：jack.com 的后端程序员（服务器）
请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
响应方根据查询参数callbackName，构造形如
yyy.call(undefined, '你要的数据')
yyy('你要的数据')
这样的响应
浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')
那么请求方就知道了他要的数据
这就是 JSONP
约定：
callbackName -> callback
yyy -> 随机数 frank12312312312321325()
jQuery 用法
$.ajax({
url: "http://jack.com:8002/pay",
dataType: "jsonp",
success: function( response ) {
if(response === 'success'){
amount.innerText = amount.innerText - 1
}
}
})
image.png
CORS
image.png
8.常考：async/await 怎么用，如何捕获异常？
image.png
async 和 awai与之前的then不同，then还是callback回调函数只不过是拆分了。而async和await完全是同步的写法再也没有回调函数，并且使用了promise，await后接一个promise对象
捕获异常：.catch(function(){...})
两种形式：1.逻辑之外（代码/语法报错），逻辑之内的捕获，确实没有访问成功
image.png
image.png
9.常考：如何实现深拷贝？
深拷贝这个东西只有在引用类型中才有，如b拷贝a对象，浅拷贝就是只复制a的地址值，如果a发生变化，那么b也跟着变。 深拷贝的话a变化了，那么b不会变。
JSON 来深拷贝
var a = {...}
var b = JSON.parse( JSON.stringify(a) )
缺点：JSON 不支持函数、引用、undefined、RegExp、Date……
image.png
10.常考：如何用正则实现 trim()？
function trim(string){
return string.replace(/^\s+|\s+$/g, '') (将前后的空格变成空字符串)
}
11.常考：不用 class 如何实现继承？用 class 又如何实现？
ES6的class可以看作是一个语法糖，它的绝大部分功能ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法
不用class 构造函数
image.png
function MathHanle(x,y) {
this.x = x;
this.y = y;
this.add = function(){
return this.x+this.y
}
}
var m = new MathHandle(1,2)
console.log(m.add())
用class 构造函数
image.png
class是语法糖
image.png
不用class 实现继承
image.png
用class实现继承
image.png
12.常考：如何实现数组去重？
计数排序的逻辑（只能正整数）
var a = [4,2,5,6,3,4,5]
var hashTab = {}
for(let i=0; i<a.length;i++){
if(a[i] in hashTab){
// 什么也不做
}else{
hashTab[ a[i] ] = true
}
}
//hashTab: {4: true, 2: true, 5: true, 6:true, 3: true}
console.log(Object.keys(hashTab)) // ['4','2','5','6','3']
Set 去重
Array.from(new Set(a))
13.放弃：== 相关题目（反着答）
14.送命题：手写一个 Promise
function xxx(){
return new Promise(function(resolve, reject){
setTimeout(()=>{
resolve() 或者 reject()
},3000)
})
}
xxx().then(...)
15.JS 有哪些数据类型？
string number bool undefined null object symbol
object 包括了数组、函数、正则、日期等对象
一旦出现（数组、函数、正则、日期、NaN）直接0分
16.（必考）什么是立即执行函数？使用立即执行函数的目的是什么？
;(function (){
var name
}())
;(function (){
var name
})()
!!!!!!!function (){
var name
}()
~function (){
var name
}()
造出一个函数作用域，防止污染全局变量
ES 6 新语法
{
let name
}
17.JS 原型是什么？
举例
var a = [1,2,3]
只有0、1、2、length 4 个key
为什么可以 a.push(4) ，push 是哪来的？
a.proto === Array.prototype
push 就是沿着 a.proto 找到的，也就是 Array.prototype.push
Array.prototype 还有很多方法，如 join、pop、slice、splice
网友评论