面经3

腾讯云一面

作用域、作用域链、原型链

[]的原型链

array->Object

作用域考点

b执行的作用域链

function a() {
  return function b() {}
}

function c() {
  const b = a()
  b()
}
c()

执行顺序

async function test() {
  const p = new Promise(r => setTimeout(r, 1000))
  setTimeout(a, 0)
  await p
  b()
}
test()

async/await原理

async/await就是对generator的语法糖，将generator中的*换成async，将yeild换成await

xss怎么防御

转义、预防

csrf怎么防御

1. 使用httpOnly禁止document.cookie去获取cookie
2. 验证referer头部：Referer请求头包含了当前请求页面的来源页面的地址，所以可以在服务端验证referer字段是否是指定的url
3. 使用token
4. 使用同源限制，禁止第三方网站请求

阻止点击

1. css禁止鼠标点击事件：pointer-events：none；
2. event.preventDefault() 阻止事件默认事件
3. event.stopPropagation() 阻止事件的传播

腾讯云二面

http2的一些特性

轮训和websocket的优缺点

websocket和ajax相比有什么优缺点

websocket没有类似ajax的回调，不知道成功与否

怎么解决

ack回复，失败后用ajax补发

讲一下https

怎么验证证书的有效性呢？

https的握手过程

证书交换是每次请求都交换吗

让你做一个下拉刷新，怎么做？

假如下拉的时候，手指没动，并且没松开的时候，需要加载动画停止，怎么做

url到页面渲染的过程

dom树和render树的区别

async和await的区别

异步加载css会阻塞页面的渲染吗？为什么？

会
原因：

说一下cookie

怎么让后端无法访问cookie

怎么让前端无法访问cookie

算法

二级制相加返回二进制，不能转10进制相加后再转2进制

//101 + 101 = 1010

用友一面

react和vue的区别

最主要的是数据监听的不同，vue是getter/setter和数据劫持，react是比较引用的diff方式

vue使用了什么设计理念

Vue使用的是可变数据，而React更强调数据的不可变。Vue更加简单，而React构建大型应用的时候更加鲁棒。

vue数据绑定原理

Object.definePrototype实现数据绑定

vue路由实现原理

hash和history

事件循环原理

首先分清楚，事件执行时的两个概率，一个是执行栈，一个是事件队列。执行栈，就是现在正在执行的，事件队列，就是还没有执行的。当执行栈中的事件都执行完后，就会去查找事件队列中是否还有事件，有就将第一个事件放入执行栈中执行，然后循环。在执行栈遇到异步事件后不会等待它返回结果，而是把它放入事件队列中，继续执行执行栈中的事件

怎么去除浮动

• clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式：

• 给浮动元素父级设置高度

• 父级同时浮动（需要给父级同级元素添加浮动）

• 父级设置成inline-block，其margin: 0 auto居中方式失效

• 给父级添加overflow:hidden 清除浮动方法

• 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）

.float_div:after{
	content:".";	
	clear:both;	
	display:block;	
	height:0;	
	overflow:hidden;	
	visibility:hidden;	
	}

变成BFC有那些方法

• float除了none以外的值
• overflow除了visible之外的值
• display(table-cell table-caption,inline-block)
• position(absolute,fixed)

为什么转换成BFC后可以去除浮动

我错了，好像不是转换为BFC后就可以清除BFC

点击事件的过程

事件捕获=>事件获取=>事件冒泡

事件代理/事件委托

是同一件事，A元素把某件事件处理给它的父元素B去操作，就叫事件委托，A是委托方，B是代理方

Map和Set的区别

Map是类似Object的一种键值对集合，区别在于Map的键不仅限于是字符串，其他各种类型的值包括对象都可以成为Map的键
Set是类似数组的一种数据结构，不同点在于Set中没有重复的值

节流和防抖怎么做优化

防抖：对多次响应的事件只执行最后一次
节流：在一定时间内，对多次响应的事件只执行一次

项目中有没有用到节流和防抖

监听屏幕的滑动，当滑动到一定区域触发返回顶部的功能
监听屏幕滑动，当滑动到一定区域触发锚点链接功能（或者可以点击使它滑动到某个区域）

锚点链接怎么做

1. 设置锚点
   <a name = 'anchor'>锚点</a>
2. 设置启动定位器开关
   <a href='#anchor'>锚点定到我</a>

算法题

有两个有序数组，合并成一个有序数组
例：[1,2,3],[4,5,6,7] => [1,2,3,4,5,6,7]

function merge(a, b) {
  let arr = []
  while(a !== [] && b !== []) {
    if(a[0] >= b[0]) {
       arr.push(b.shift())
    } else {
       arr.push(a.shift())
    }
  }
  if(a === []) {
    return [...arr, ...b]
  }
  return [...arr, ...a]
}

子亥科技一面

null和undefined的区别

1. typeOf 的时候null返回object，undefined返回undefined
2. null == undefined返回true，null === undefined 返回 false

项目当中遇到的难点，我暂时只说了我目前遇到的

1. props传值子组件获取不到参数
2. 路由冗余问题

阿里外包一面

浅拷贝和深拷贝

浅拷贝：对于只是按值传递的基本类型来说，是直接将属性值赋值给新对象；对于按引用地址传递的引用类型，是将引用地址赋值给新对象
深拷贝：对于按值传递的基本类型和浅拷贝一样；对于按引用地址传递的引用类型，是新创建一个地址去拷贝一份里面的内容，然后将新地址赋值给新对象

防抖和节流

防抖：ois
节流：throttle

存储有那几种，有什么不同

localstorage（长期存储）：一直存在，除非主动删除，在同一个浏览器可以使用
sessionstorage（临时存储）：浏览器打开期间存在，包括页面重新加载，只能在同一个网页使用
cookiestorage：是客户端用来存储数据的一种选项，即可以在客户端设置也可以在服务器端设置。cookie回跟随任意HTTP请求一起发送

迭代器

iterator，next，可以让我们无需关心容器对象的内存分配的实现细节

异步promise

判断数据类型的方法

Object.prototype.toString.call()
typeOf
constructor
instanceOf

数组去重

Array.from(new Set(arr))

let arr = [1,1,2,2,3,3]
let brr = Array.from(new Set(arr))
console.log(brr) //[1,2,3]

for嵌套for，然后使用splice去重

for(let i = 0; i < arr.length; i++) {
  for(let j = i + 1; j < arr.length; j++) {
    if(arr[i] == arr[j]) {
      arr.splice(j, 1)
      j--
    }
  }
}
console.log(arr)

利用indexOf去重

let brr = []
for(let i = 0; i < arr.length; i++) {
  if(arrar.indexOf(arr[i] === -1)) {
    brr.push(arr[i])
  }
}
console.log(brr)

利用includes去重

let brr = []
for(let i = 0; i < arr.length; i++) {
  if( !brr.includes(arr[i])) {
    brr.push(arr[i])
  }
}
console.log(brr)

利用filter()去重

let brr = arr.filter((item, index, arr) => {
  return arr.indexOf(item, 0) === index
})
console.log(brr)