为21届学弟学妹秋招护驾（前端复习总结）

双学位两个专业答辩全都通过了，也拿到了心仪的offer。把自己在春招期间整理的1万字资料供21届学弟学妹作为大纲性内容自查哈，希望你们在特殊时期也能和20届一起奋斗。以下几个是我感觉非常不错的复习资料，这些题目看完后找工作都挺稳的了。希望你们在秋招能获得心仪的offer
2019前端面试系列——JS高频手写代码题
2019前端面试系列——CSS面试题
2019前端面试系列——JS面试题
2019前端面试系列——Vue面试题
2019前端面试系列——HTTP、浏览器面试题

仅作大纲性参考，有错误请自行翻阅文献哈

实现居中

水平居中：

• text-align:center;

• margin: 0 auto;

• display:flex; justify-content: center;

• position:absolute；left: 50%; transform: translateX(-50%);

垂直居中：

• line-height等于高度
• position:absolute; top: 50%; transform: translateY(-50%);
• display:flex; align-items:center;
• 父元素display:table; 子元素display:table-cell；vertical-align:middle;

https://juejin.im/post/58f818bbb123db006233ab2a

闭包的概念

概念：闭包就是能读取其他函数内部变量的函数

优点：1、避免全局变量的污染；2、希望一个变量长期存储在内存（缓存变量）；

缺点：1、容易造成内存泄露

内存泄露例子：

let getMoney = function() {
    let money = 10
    return function() {
        return money
    }
}
let f = getMoney()
// f函数存在的话，money会一直得不到释放

深拷贝和浅拷贝

浅拷贝：

Object.assign()
Array.prototype.slice()

深拷贝：

JSON.parse(JSON.stringify()) // 无法序列化函数

递归函数：

function cloneObject(obj) {
  var newObj = {} //如果不是引用类型，直接返回
  if (typeof obj !== 'object') {
    return obj
  }
  //如果是引用类型，遍历属性
  else {
    for (var attr in obj) {
      //如果某个属性还是引用类型，递归调用
      newObj[attr] = cloneObject(obj[attr])
    }
  }
  return newObj
}
// 无法解决循环引用问题

数组去重

ES6中的set：

let arr = [1,2,3,1,2,3]
let arr2 = [...new Set(arr)]

新数组去重：

let newArr = []
let arr = [1,2,3,1,2,3]
arr.forEach(item => {
    if (newArr.indexOf(item) === -1) {
        newArr.push(item)
    }
})

JS执行机制、事件循环

事件循环：同步任务进入主线程，异步任务进入EventTable中并注册回调函数中。当所有同步任务执行完毕时，主线程从事件队列中读取回调函数并执行。上述过程不断重复，称为事件循环

宏任务和微任务

异步任务会分成宏任务与微任务

微任务是在宏任务执行完后立即执行的任务

宏任务：主代码块，setTimeout，setInterval等

微任务：Promise，process.nextTick等

当宏任务执行完时，如果有可执行的微任务，则执行所有微任务后再执行新的宏任务。如果没有可执行的微任务，那么直接开始执行新的宏任务

https://www.jianshu.com/p/184988903562

函数提升与变量提升

在作用域中，函数声明与变量声明都会提升到顶部。首先声明变量整体，然后再声明函数整体。

function v() {
  console.log(a)
  var a = 1;
  function a() {}
}
v()
// 输出函数a
// 上面函数相当于：
function v() {
  var a;
  function a() {}
  console.log(a)
  a = 1;
}
v()

function v() {
  var a = 1;
  function a() {}
  console.log(a)
}
v()
// 输出1
// 相当于：
function v() {
  var a;
  function a() {}
  a = 1;
  console.log(a)
}
v()

注意：函数表达式不会被提升

常见内存泄露

1、全局变量滥用

当不用var声明变量的时候，比如b=1，相当于挂载到全局变量。

解决方法：使用严格模式

2、没有清理DOM元素的引用

3、闭包

4、定时器被遗忘

性能优化

1、减少请求数量

2、事件委托：减少DOM操作，每个新增的元素都能拥有该事件

3、压缩资源大小

4、减少重绘回流

5、innerHTML代替dom操作

6、图片预加载

Vue性能优化

1、路由懒加载

2、v-if与v-show正确使用

3、v-for中设置唯一key

4、图片懒加载

实现EventBus

function EventEmitter() {
  this.events = new Map()
  this.addListener = function (name, fn) {
    this.events.set(name, fn)
  }
  this.emit = function (name) {
    let fn = this.events.get(name)
    fn(...[...arguments].slice(1))
  }
}
var bus = new EventEmitter()
bus.addListener('age', (age, time) => {
  console.log(age, time)
})
bus.emit('age', 18, '2019')

引用类型有哪几种

• Object
• Array
• Date
• RegExp
• Function

圣杯布局、双飞翼布局的实现

这个请自查哈

CSS盒模型

Margin、Border、Padding、Content

IE定义的盒模型中元素的宽高包括了padding和border

W3C盒模型元素宽高为Content

box-sizing: content-box; // W3C盒模型

box-sizing: border-box; // IE盒模型

伪类和伪元素的区别

它们之间的根本区别在于是否创造了新的元素

伪类不会创造新的元素，比如:hover :active

伪元素会创造新的元素，比如:after :before

伪类：表示已存在的某个元素处于某种状态

伪元素：用于将特殊的效果添加到某元素

实现快速排序

function quickSort(arr) {
  if (arr.length < 1) {
    return arr
  }
  var left = []
  var right = []
  var pivot = arr[0]
  for (var i = 1; i < arr.length; i++) {
    if (arr[i] > pivot) {
      right.push(arr[i])
    } else {
      left.push(arr[i])
    }
  }
  return [...quickSort(left), pivot, ...quickSort(right)]
}
var arr = [0, 3, 4, 2, 6, 1, -1, 123]
console.log(quickSort(arr))
// ----------------------
console.log('------------')
// ----------------------
// 单指针循环法
function quickSort2(arr) {
  if (arr.length < 1) {
    return arr
  }
  var pivot = arr[0]
  var mark = 0
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] < pivot) {
      mark++
      let temp = arr[i]
      arr[i] = arr[mark]
      arr[mark] = temp
    }
  }
  let temp = arr[0]
  arr[0] = arr[mark]
  arr[mark] = temp
  return [...quickSort2(arr.slice(0, mark)), arr[mark], ...quickSort2(arr.slice(mark+1, arr.length))]
}
var arr = [0, 3, 4, 2, 6, 1, -1, 3]
console.log(quickSort2(arr))

堆排序

// 最小堆，父节点小于两个子节点

function downAjust(arr, parentIndex, length) {
  let childIndex = 2 * parentIndex + 1
  while (childIndex < length) {
    if (childIndex + 1 < length && arr[childIndex + 1] < arr[childIndex]) {
      childIndex ++
    }
    if (arr[parentIndex] < arr[childIndex]) {
      return
    }
    let temp = arr[parentIndex]
    arr[parentIndex] = arr[childIndex]
    arr[childIndex] = temp
    parentIndex = childIndex
    childIndex = 2 * parentIndex + 1
  }
}
function buildHeap(arr) {
  for (let i = parseInt((arr.length -1) / 2); i >= 0; i--) {
    downAjust(arr, i, arr.length)
  }
  console.log(arr)
}
var arr = [7, 1, 3, 10, 5, 2, 8, 9, 6]
buildHeap(arr)
heapSort(arr)
function heapSort(arr) {
  for (let i = arr.length - 1; i >= 0; i--) {
    let temp = arr[i]
    arr[i] = arr[0]
    arr[0] = temp
    downAjust(arr, 0, i)
  }
  console.log(arr)
}

归并排序

function merge(left, right) {
  let arr = []
  while (left.length && right.length) {
    if (left[0] < right[0]) {
      arr.push(left.shift())
    } else {
      arr.push(right.shift())
    }
  }
  arr.push(...left, ...right)
  return arr
}
function mergeSort(arr) {
  if (arr.length > 1) {
    let mid = parseInt(arr.length / 2)
    let left = arr.slice(0, mid)
    let right = arr.slice(mid)
    return merge(mergeSort(left), mergeSort(right))
  }
  return arr
}
var arr = [8, 2, 4, 1, 3, 9, 0, -1, -2]
console.log(mergeSort(arr))

实现二分查找

function binarySearch(arr, target) {
  let low = 0
  let high = arr.length - 1
  while (low <= high) {
    let mid = parseInt((low + high) / 2)
    if (arr[mid] > target) {
      high = mid - 1
    } else if (arr[mid] < target) {
      low = mid + 1
    } else {
      return mid
    }
  }
  return -1
}
var arr = [0, 1, 2, 3, 3, 4, 5]
console.log(binarySearch(arr, 5))

数组和链表的区别

数组：

在内存中连续存储

优点是具有高效的随机访问能力，常量时间内可以找到对应元素

缺点是在插入和删除元素时，可能会导致大量元素被迫移动，影响效率

数组适合在读操作多，写操作少的场景

链表：

在内存中是随机存储

优点是能够灵活地进行插入删除操作

缺点是查找元素的性能较差

URI和URL

URI就是统一资源标识符，URL就是统一资源定位符

URI有两种形式，URL和URN

URL由协议、主机、端口、路径四个部分组成，唯一标识资源位置

URN是统一资源名，它使得资源与位置无关，只使用资源名就能够获取资源，这种形式处于试验阶段，尚未被大范围使用

TCP与UDP

TCP是一种可靠的传输方式，能够将数据按序无差错传输。HTTP使用TCP来传输其报文数据。

TCP的建立需要经过三次握手

UDP是一种不可靠的传输方式，它不保证数据能准确传输。在允许丢包的情况下使用UDP传输效率会更高，比如视频、音频，个别丢包不影响整体画面

访问一个网址时浏览器经历的步骤

1、浏览器从URL中解析主机名和端口

2、DNS解析出IP地址

3、建立TCP连接

4、浏览器发送HTTP请求报文

5、服务器返回HTTP响应报文

6、关闭连接，浏览器开始解析文档

7、浏览器首先解析出DOM树

8、再次解析出CSSOM树

9、根据DOM树和CSSOM树来构造render tree渲染树

10、浏览器重排、重绘，绘制每个节点

重排、重绘

浏览器默认采用流式布局模型

重排也叫回流

重排：根据渲染树中每个对象的信息，计算渲染对象各自的几何信息（位置、尺寸大小），并将其安置在界面正确位置。

因此呢，如果发生改变了位置、尺寸大小，会引发回流，重新计算全局布局（从根节点重新布局）或者局部布局。例如，改变窗口大小会引发全局布局的重新计算；

引起重排的操作：

• 页面首次渲染
• 窗口大小改变
• 元素尺寸或位置改变
• 字体大小改变
• 添加或删除DOM元素
• 获取offsetTop、offsetLeft等属性触发重排，应缓存起来

重绘：当页面某元素样式的改变并不影响其在文档流中的位置。

例如改变背景颜色、字体颜色等操作

强缓存与协商缓存

强缓存：服务器通过设置response header中的cache-control字段来控制浏览器对资源缓存，max-age用于设置缓存的过期时间。如果是cache-control: no-cache，代表跳过设置强缓存，会走协商缓存。

协商缓存：当强缓存过期后，客户端每次访问资源时会先看下缓存有无过期，如果过期了，则询问服务器资源是否已更改，如果已更改，服务器会返回资源以及对应的etag和last-modified；如果没有更改，则服务器返回一样的etag和last-modified，状态码为304（资源无变更），这时客户端之后访问缓存都要走一次协商缓存。

etag：每个文件的hash

last-modified：资源最后更改时间

https://www.jianshu.com/p/9c95db596df5

• 强制缓存是我们在第一次请求资源时在 http 响应头设置一个过期时间，在时效内都将直接从浏览器进行获取，常见的 http 响应头字段如 Cache-Control 和 Expires
• 协商缓存是我们通过 http 响应头字段 etag 或者 Last-Modified 等判断服务器上资源是否修改，如果修改则从服务器重新获取，如果未修改则 304 指向浏览器缓存中进行获取

call、apply、bind

这三个函数都是改变this的指向

call、apply第一个参数都是this所指向的对象，它们之间的区别是传参的方式不同。

apply的传参方式是以数组的方式传参，而call是以逐个传参的方式

bind函数的第一个参数也是this所指向的对象，它和上面call、apply不一样，它返回一个新的函数。

完全二叉树与满二叉树

满二叉树：深度为k，并且有2^k-1个节点的二叉树

完全二叉树：完全二叉树的n个节点的编号都能对应相同深度满二叉树的1~n个节点一一对应

Promise对象

Promise有三个状态：

1、进行中pending；2、成功态fulfilled；3、拒绝rejected；

Promise构造函数接受一个参数为resolve和reject的函数

resolve、reject能改变promise的状态。

通过then方法为promise注册完成时的处理程序

Vue生命周期

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed

created周期在模板渲染成HTML前调用，能够获取到实例的data，通常初始化某些属性值

mounted周期在模板渲染成HTML后调用，通常是初始化页面完成后对DOM进行一些操作。

生命周期	是否获取dom节点	是否可以获取data	是否获取methods
beforeCreate	否	否	否
created	否	是	是
beforeMount	否	是	是
mounted	是	是	是

web worker

JavaScript是单线程语言，WebWorker是为了创造多线程环境，允许主线程创建Worker线程，这样worker线程完成任务后会自动返回结果给主线程。

需要注意以下几点：

1、主线程与worker线程必须同源

2、worker无法读取主线程的Dom对象

3、不能直接通信，需要通过消息postMessage来完成

封装ajax

function ajax(url, type, data, success) {
    let aj = new XMLHttpRequest()
    if (type === 'get') {
        if (data) {
            url += '?'
            let arr = []
            Object.keys(data).forEach(key => {
                arr.push(key + '=' + data[key])
            })
            url += arr.join('&')
        }
        aj.open(type, url)
        aj.send(data)
    } else if (type === 'post') {
        aj.open(type, url)
        aj.setRequestHeader('Content-type', 'x-www-form-urlencoded')
        if (data) {
            aj.send(data)
        } else {
            aj.send()
        }
    }
    aj.onreadystatechange = function() {
        if (aj.readyState === 4 && aj.status === 200) {
            success(aj.responseText)
            console.log(aj.responseText)
            return aj.responseText
        }
    }
    }

for..in与for..of

for..in循环用于获取键名

for..of循环用于获取键值

例如

var arr = ['a','b','c']
for (var i in arr) {
    console.log(i)
}
// 0, 1, 2 //遍历数组就是获取下标
for (var i of arr) {
    console.log(i)
}
// a b c //遍历数组就是获取值

var obj = {
    a: 1,
    b: 2,
    c: 3
}
for (var i in obj) {
    console.log(i)
}
// a b c  //遍历对象就是获取键名
for (var i of arr) {
    console.log(i)
}
// 用在对象会报错

防篡改对象

主要使用三个方法Object.preventExtensions、Object.seal、Object.freeze

分别对应为不可扩展、密封、冻结

增	删	改
不可扩展	✖️	✔️	✔️
密封	✖️	✖️	✔️
冻结	✖️	✖️	✖️

通过 Object.isExtensible([Object]) 可以确定对象是否可以扩展。 true 可以扩展， false 不可以扩展。

通过 Object.isSealed([Object]) 可以确定对象是否被密封了。

通过 Object.isFrozen([Object]) 来检测对象是否被冻结。

数组扁平化

var arr = [1, 2, [3,4], [1, [2, 3, [3, 4]]]]
function fn(arr) {
  let newArr = []
  for (var i of arr) {
    if (i instanceof Array) {
      newArr.push(...fn(i))
    } else {
      newArr.push(i)
    }
  }
  return newArr
}
console.log(fn(arr))

判断数据类型

判断数组：Array.isArray()

typeof：能判断的数据类型有String、number、objcet、function、boolean、undefined。不能判断null和array

typeof Symbol(); // symbol 有效
typeof ''; // string 有效
typeof 1; // number 有效
typeof true; //boolean 有效
typeof undefined; //undefined 有效
typeof new Function(); // function 有效
typeof null; //object 无效
typeof [] ; //object 无效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效

instanceof：判断是否某个原型的实例，不能检测null和undefined

[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
new RegExp() instanceof RegExp//true
null instanceof Null//报错
undefined instanceof undefined//报错

Object.prototype.toString.call()：这个较为准确，不能检测自定义类型

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]

BFC

块格式化上下文，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

如何创建BFC：

1、display为inline-block table-cell flex

2、浮动元素float不是none

3、定位元素：absolute、fixed

4、overflow除了visible以外的值

BFC的作用：

1、避免margin重叠（放在不同的BFC）

2、避免高度塌陷

3、包裹浮动元素

BFC布局规则：

1、在BFC中，盒子（块级元素）会在垂直方向排列

2、box垂直方向的距离有margin决定，同一个BFC的margin会重叠（以最大值为准）

https://blog.csdn.net/sinat_36422236/article/details/88763187

https://www.cnblogs.com/chen-cong/p/7862832.html

清除浮动

1、clear:both（通过after伪元素清除浮动）

2、父级div设置overflow:hidden(触发BFC)

async和await

async函数返回一个Promise对象

await用于等待一个异步函数执行结果

这两个配合使用能使得代码看起来更像同步代码

await处理错误

把await的代码放在try..catch块中或者使用catch注册函数

async function MyAsync() {
    try{
        await doSomething()
    } catch(err) {
        console.log(err)
    }

    await doAnotherThing().catch((err) => {
        console.log(err)
    })
}
// 以上两种方法皆可以

在数组中找到两数之和等于n的下标

利用二分查找

// 
var arr = [0, 5, 4, 1, 3, 2, 3]
function findN(arr, n) {
  arr = arr.sort()
  for (let i = 0; i <=  parseInt(arr.length / 2); i++ ) {
    let result = binarySearch(arr, n - i)
    if (result !== -1) {
      console.log(`下标${i}值${arr[i]}, 下标${result}值${arr[result]}`)
    }
  }
}
findN(arr, 6)

实现Promise.all

function PromiseAll(arr) {
  let result = []
  return new Promise((res, rej) => {
    for (let i = 0; i < arr.length; i++) {
      let p = arr[i]
      p.then(r => {
        result.push(r)
        if (result.length === arr.length) {
          res(result)
        }
      }, rej) // 有一个失败就reject
    }
  })
}
let p1 = new Promise((res, rej) => {
  res(3)
})
let p2 = new Promise((res, rej) => {
  res(2)
})

PromiseAll([p1, p2]).then(res => {
  console.log(res)
})

主要是需要为每个promise注册then回调函数，在每个回调函数里判断下结果数组的长度是否和promise对象数组的长度相同，如果相同的时候就可以resolve了，注意Promise.all返回的是一个promise

JS事件循环

同步任务先进入主线程，异步任务进入EventTable并注册回调函数进入事件队列，当主线程中的任务执行完毕后，主线程会进入事件队列中取出回调函数执行

XSS和CSRF

CSRF：跨站请求伪造，攻击者诱导用户访问危险网站，在危险网站伪造用户请求，服务器以为是合理请求；

XSS：跨站脚本攻击。攻击者将恶意代码植入到页面中，用户访问页面时会自动执行恶意代码

大数求和

function addNum(a, b) {
  let n = a.split('').reverse()
  let m = b.split('').reverse()

  let maxLength = Math.max(n.length, m.length)

  let p = 0 // 进位
  let result = []
  for (let i = 0; i < maxLength; i++) {
    let curN = n[i] || 0
    let curM = m[i] || 0

    let temp = Number(curN) + Number(curM)

    if (p) {
      temp += p
    }
    p = temp >= 10 ? 1 : 0
    result.push(temp % 10)
    if (i === maxLength) {
      if (p) {
        result.push(1)
      }
    }
  }
  return result.reverse().join('')
}
console.log(addNum('122665522626555223', '9728728727827827'))
console.log(addNum('555223', '11111111111927827'))

Cookie的弊端

1、每个特定的域名下最多生成20个cookie

2、最大存储空间为4K

3、安全性问题。被恶意获取到时他人只需原样转发cookie便可以达到目的

CSS中 link 和@import 的区别是？

link是HTML标签，无兼容性问题

@import是CSS提供的，需要IE5以上才能识别

页面加载时link会同时被加载，而import会在页面被加载后再加载

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？

css选择器：

• id选择器#id
• 类选择器.class
• 属性选择器a[href="bb"]
• 后代选择器h2 p
• 子代选择器div > p
• 相邻选择器div + h1
• 伪类选择器a:hover
• 标签选择器div，p

可继承样式：

• font-size
• font-family
• color

不可继承样式：

• margin
• padding
• border
• width
• height

优先级：

• !important > 内联 > id > class > tag
• !important比内联优先级高，内联优先级比id高

HTML语义化

1、当样式丢失时，页面能够呈现出清晰 的结构

2、有利于SEO搜索爬取有效信息

3、方便其他设备解析（屏幕阅读器、盲人阅读器）

new操作符的作用

1、创建空对象，并将this指向该对象

2、属性和方法被加入到this指向的对象中

3、最后隐式返回this

深拷贝与浅拷贝

区别：

浅拷贝只拷贝基本类型的值，如果对象中属性值为引用类型，也只是复制指针，而深拷贝能另外创造一个一模一样的对象。以下代码就是浅拷贝

var obj = {
    p: {
        name: 1
    },
    q: 2
}
var newObj = Object.assign({}, obj)
newObj.p.name = 2
console.log(obj.p.name) // 变为2

浅拷贝：

let copy = {...{x:1}}

let copy2 = Object.assign({}, {x:1})

深拷贝代码：

let copy = JSON.parse(JSON.stringify({x:1}))

// 递归拷贝
function cloneDeep(obj) {
  let newobj = obj instanceof Array ? [] : {}
  for (let key in obj) {
    newobj[key] = typeof obj[key] === 'object' ? cloneDeep(obj[key]) : obj[key]
  }
  return newobj
}
var a = {b: 1, c: [1,2], d: {dd: 1}, e: [{ee:1}]}
console.log(cloneDeep(a))

创建对象几种方式

• 工厂模式:不能解决对象类型识别问题

  function Person(name) {
      var o = new Object()
      o.name = name
      return o
  }

• 构造函数模式：缺点是每个方法都要在实例中创建一遍

• 原型模式：缺点是所有实例只能共享属性值

• 组合使用构造函数与原型模式

• 动态原型模式：在构造函数当中去初始化原型、

function Person(name) {
    this.name = name
    // 在构造函数中初始化原型的某些属性
    if (typeof this.showName !== 'function') {
        Person.prototype.showName = function() {
            return name
        }
    }
}

JS继承

原型链继承：通过改写prototype属性实现继承。该方法的缺点是无法向超类型构造函数传递参数

借用构造函数：在构造函数中，改变超类型的this指向，实现向超类型构造函数传递参数。缺点是超类型的原型中的方法不可复用

组合继承：结合了原型链继承和借用构造函数的优点，缺点是调用了两次构造函数

function superType(name) {
  this.name = name
}
superType.prototype.sayName = function() {
  console.log(this.name)
}
function subType() {
  superType.call(this, 'haha') // 继承属性
}
subType.prototype = new superType() // 继承方法
var a = new subType()
console.log(a)
a.sayName()
a.name = '123'
a.sayName()

原型式继承：借住已有对象创建新对象，它不需要为新对象额外创建自定义类型

实际上改写prototype时执行了一次浅复制。缺点是会共享引用类型值的属性

function create(obj){
    function F()
    F.prototype = obj
    return new F()
}

类型转换比较

undefined
null	true
[]	false
{}	false
''	false
0	false
false	false

null
undefined	true
''	false
[]	false
P	false
0	false

[]
{}	false
''	true
0	true
false	true

''
0	true
{}	false
false	true

false
0	true
{}	{} ==false报错,而false=={}为false

{}
0

相等操作符的比较

==操作符会将操作数进行数据类型的强制转换

1、如果有操作数为布尔值，则布尔值转为数字，false转0，true转1

2、如果有操作数为字符串，则字符串转为数字

3、如果有操作数为对象，则调用valueOf, 没有valueOf就有toString，都没有就返回NaN

反正就是都转为数字来进行比较

对象转字符串或数字

var a = {
    toString: () => '1',
    valueOf: () => 0
}
a == '1' // false
a == 0 // true
var b = {
    toString: () => '1'
}
b == '1' // true

对象转字符串：

1、判断对象是否有toString，有则调用

2、没有toString，判断有无valueOf，有则调用

3、都没有，报错

对象转数字：

1、判断有无valueOf，有则调用

2、没有valueOf，判断有无toString，有则调用

3、都没有。报错

HTTP各版本

HTTP/1.1：

1、持久连接：只要任意一端没有提出断开连接则保持TCP连接状态，这样不用每次发请求都建立并断开TCP连接

2、管道化连接：不需要等待前一个事务（HTTP请求与响应）完成，就可以发送多个请求

Http1.1：利用Connection保持连接

Connection：Keep-Alive

Keep-Alive：max=5,timeout=120

以上两行，connection指明该Http1.0需要保持持久连接，keep-alive选项则 规定了最多max个事务保持连接，空闲timeout秒后断开

在HTTP1.1中改进了keep-alive，用了更好的设计，称之为持久连接，他是默认的。当客户端和服务器可以在报文中添加connection:close对连接进行关闭

Cookies机制

cookies分为会话cookies和持久cookies，当没有设置max-age或者expires来扩展过期时间的时候，那么它就是会话cookies。

会话cookies：当用户退出浏览器的时候，会自动删除

持久cookies：存储在硬盘里

工作机制

服务器在Http响应头中添加set-cookie选项，如set-cookie: id="123"; domain:"joes-hardware.com"，键值对之间用分号隔开。

浏览器收到set-cookies选项，会进行存储，并在每次请求中自动添加cookies选项

Domain属性

Set-cookie中添加domain属性，指定哪些域可以查看这些cookies。

例如：domain=".airtravel.com" 指明以.airtravel.com结尾的站点都可以查看

域名相同，端口不同的站点都可以共享cookies

缓存机制

因为某些资源变动较少，服务器可以允许客户端对资源缓存到硬盘中，以此减少网络资源流量的传输，提高响应速度

1、通过Cache-Control：max-age=100 来设置100秒后缓存过期，或者Expires设置绝对过期日期例如2020年3月5日18:00时资源过期。

2、当资源过期后，客户端要询问服务器资源是否已修改，如果服务器再验证发现资源已修改，则返回已修改的资源给客户端。服务器再验证发现没有修改的话，那么在Http响应中更新缓存过期时间即可

通过两个条件首部进行条件验证：

1、If-Modified-Since:\：这个首部通常配个Last-Modified一起使用，它指明了资源最后修改时间，如果时间对不上，说明资源已经修改了

2、If-None-Match::这个首部通常配合ETag进行使用，它指明了资源的序列号，如果序列号对不上，说明资源已经修改了

当服务器再验证发现资源没修改时，返回304状态码（Not Modified）资源未修改

no-store和no-cache

在Cache-Control选项里可以选这两个值

no-store：彻底禁用缓存，浏览器将不缓存资源

no-cache：不缓存过期资源。使用缓存前强制向服务器发送请求进行再验证对比ETag，只有服务器返回304未修改才使用缓存

虚拟DOM

虚拟DOM其实就是用JavaScript去模拟真实的DOM，当DOM变化的时候，先在虚拟DOM上进行新旧对比，然后将差异部分更新到真实的DOM上。

Vue中key值的作用

key值主要出现在使用v-for的时候，需要为每个渲染元素指定key值。当v-for更新列表时，默认采用就地复用的策略。如果顺序被打乱，vue不会移动DOM元素来匹配，而是用就地复用每个元素。key的作用是为了更高效的更新虚拟DOM

为每个元素指定key值，以便vue能跟踪节点的身份

https://www.jianshu.com/p/4bd5e745ce95

Vue组件通信

1、props和emit向父组件派发事件来进行传值。

2、vuex：这是vue配套的状态管理插件，通过抽离部分状态为全局状态，使整个数据流变得清晰可追踪。

Vue的prop单向数据流

父级prop的更新将向下流动到子组件中，反过来不行。但是如果传入的prop是引用类型比如数组或者对象，那么子组件对prop的改动会影响父组件的状态

vuex有哪几种属性

state、getter、mutation、action、module

vue中的v-model

v-model实际上是默认利用了名为value的prop属性和名为input的事件，通过model选项来指定prop和事件的名称

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

vue的插槽

使用插槽可以将组件内的slot替换为任何模板代码

<navigation-link url="/profile">
  Your Profile
</navigation-link>

然后你在 <navigation-link> 的模板中可能会写为：

<a
  v-bind:href="url"
  class="nav-link"
>

注意：如果组件内没有slot元素，那么组件起始标签和结束标签之间的任何内容都会被抛弃

当含有多个插槽时，为每个插槽指定一个name，这是就可以指定希望往哪个具名插槽内添加模板代码了

各种跨域技术

JSONP：利用script没有跨域限制，来对服务器发起请求。

function jsonp(url, params, callback) {
    return new Promise((res, rej) => {
        let script = document.createElement('script')
        window[callback] = function(data) { // 注册callback函数
            res(data)
            document.body.removeChild(script)
        }
        let arrs = []
        for (let key in params) {
            arrs.push(`${key}=${params[key]}`)
        }
        arrs.push('callback='+callback)
        script.src = `${url}?${arrs.join('&')}`
        document.body.appendChild(script)
    })
}
jsonp('http://localhost:3000/api', {
    num: 123
}, 'show').then(data => {
    console.log(data)
})
// http://localhost:3000/api?num=123&callback=show
// callback名为show

CORS：跨域资源共享

后端需要设置Access-Control-Allow-Origin来设置允许跨域的源。

前端发起请求需要自动携带Origin字段

postMessage：跨文档消息传递。允许多窗口间的消息传递

例如父页面与iframe的通信

Websocket：这是一个全双工的通信，是持久化的协议。HTTP返回101状态码来更改为upgrade选项中指明的协议

Node代理服务器：同源策略只针对浏览器，而服务器与服务器之间没有同源限制。开启一个Node服务器作为代理，设置CORS跨域资源共享，接受到前端请求后转发给服务器，并将服务器返回的数据转发给前端。webpack中就提供了后台转发的功能

判断宿主对象

宿主对象：由宿主环境提供的对象，在浏览器中是window对象及其子对象（location、document、navigator、history、screen），在nodejs中是global对象及其子对象

try {
  if (window) {
    console.log('window') // 在浏览器
  }
} catch (e) {}

try {
  if (global) {
    console.log('global') // 在nodejs
  }
} catch(e) {}

移动端原生事件

orientationchange：设备纵横变换事件

触摸事件：

• touchstart：触摸屏幕时触发
• touchmove：滑动时连续触发
• touchend：触摸结束
• touchcancel：停止跟踪触摸

手势事件：

• gesturestart：手势开始
• gesturechange
• gestureend

箭头函数

箭头函数没有this、arguments、new.target等属性

他只能通过作用域查找来寻找this

如果被包含在非箭头函数时，自动绑定到最近一层非箭头函数。否则自动绑定到全局对象

class和构造函数的区别

1、class不能被提升

new Foo(); // 报错
class Foo{}

2、class中所有方法默认是不可枚举的

3、class必须使用new调用否则会报错

in和hasOwnProperty

in：能够检测对象是否含有某个属性。它能够检测到继承的属性

hasOwnProperty：检测对象自身是否含有某个属性。它不能检测到继承的属性

进程和线程

进程：是程序的一次执行过程。是系统分配资源的基本单位。

线程：是任务调度和执行的基本单位，线程之间可以共享内存。

线程是进程的一部分，一个线程只能属于一个进程，而一个进程可以有多个线程。

进程切换的开销比较大，线程之间切换开销比较小。

检测是否通过new调用

new.target元属性

该属性是来自ES6中，旨在检测一个构造函数是否通过new调用

如果不是通过new调用，new.target为undefined

如果是new调用，new.target为该构造函数

function Person(name) {
    if (new.target === Person) {
        console.log('new 调用')
    } else if (new.target === undefined) {
        console.log('请通过new调用')
    }
}

通过this instanceof [[constructor]]判断

当使用new的时候，new会创建新的对象，并将this指向该对象

function Person(name) {
    if (this instanceof Person) {
        console.log('new 调用')
    } else  {
        console.log('请通过new调用')
    }
}

this指向问题

情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。

情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

情况3：如果一个函数中有this，这个函数被多个对象包含，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

this永远指向的是最后调用它的对象

https://www.cnblogs.com/pssp/p/5216085.html

一句话：如果一个函数没有被一个对象所调用，那么它指向window。只有被对象所调用，才会指向对象

HTTP常见状态码

302：临时重定向。展示最新的网页，但网址仍然是旧网址

301：永久重定向。网页将永久转移到另一个网址上

https://www.cnblogs.com/unixcs/p/10668960.html

304：未修改

401：未验证登录

403：拒绝访问

500：服务器错误

五层网络模型

自查哈

#笔试题目#