2022-04-13 11:10 深信服_UEDC_前端开发工程师

关注

深信服前端二面1.5h（已OC）

深信服二面1.5h（已OC）

一、介绍学校

二、算法、按要求实现下列函数

按要求实现下列函数

实现一个函数：
输入两个多维数组，要求返回一个二维数组，并且数组内的结果按照0-9为一组进行分组
例子：输入 arr 1 = [ 1, [2,4], [44], [22,21] ]
arr 2 = [ 2, [6], [55], [ 33, [32,31] ] ]
输出：[ [1,2,4,6], [21,22], [31,32,33], [44], [55] ]

/*
  实现一个函数：
  输入两个多维数组，要求返回一个二维数组，并且数组内的结果按照0-9为一组进行分组
  例子：输入 arr 1 = [ 1, [2,4], [44], [22,21] ]
            arr 2 = [ 2, [6], [55], [ 33, [32,31] ] ]
       输出：[ [1,2,4,6], [21,22], [31,32,33], [44], [55] ]
*/
let arr1 = [1,[2,4],[44],[22,21],]
let arr2 = [2,[6],[55],[33,[32,31]]]
function sortArr(arr1,arr2){
  const flat = (target)=>{
    while(target.some(item=>Array.isArray(item))){
      target = [].concat(...target)
    }
    return target
  }
  arr1 = flat(arr1)
  arr2 = flat(arr2)
  let set = new Set([...arr1,...arr2].sort((a,b)=>a-b))
  let count = -1
  let temp = -1
  let res = []
  for(let i of set){
    let temp2 = Math.floor(i/10)
    if(temp2 != temp){
      temp = temp2
      count++
      res[count] = []
      res[count].push(i)
    }else{
      res[count].push(i)
    }
  }
  return res
}
console.log(sortArr(arr1,arr2)); // [ [1,2,4,6], [21,22], [31,32,33], [44], [55] ]

讲下思路，优化

数组flat用法，不传参数会怎么样

三、讲下对Hook的理解

四、写一个获取屏幕窗口大小的Hook（写思路，不需要运行）

(图源菜鸟教程)

window.innerWidth //相对于文档宽度window.innerHeight //相对于文档高度
document.body.clientWidth //浏览器可视区域宽度document.body.clientHeight //浏览器可视区域高度
页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth   (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度： window.screen.availHeight;

import {reactive,onMounted,onUnmounted} from 'vue';
export default function useSize(){
    const point = reactive({x:0,y:0})
    function getSize(){
        point.x = document.documentElements.clientWidth
        point.y = document.documentElements.clientHeight
    }
    onMounted(()=>{
        window.addEventListener('resize',getSize)
    })
    onUnmounted(() => {
      window.removeEventListener('resize',getSize)
    })
    return point
}

五、for...in，与for...of，了解过吗，对象的for...in遍历，对象的其他遍历方法

对象的遍历方法

1、for...in...

遍历对象的key值
for...of...若想实现对象的遍历，需要手动实现迭代器Symbol.iterator属性

2、object.keys

(返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).).

通过返回的数组，再使用forEach遍历

3、object.values

返回的是value值数组

4、object.entries

返回的是key与value的二维数组

5、Object.getOwnPropertyNames(obj)

返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).

6、Reflect.ownKeys(obj)

返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.

六、讲一下数组的遍历方法，filter与map的使用场景，some，every的区别

七、有了解Vue3或一些其他的新东西吗，学习的途径，以及最近在学习的东西

Vue3.X 新特性快速学习，带你迅速上手Vue3

八、v-model的实现原理，Vue2，Vue3的数据响应式区别

50行代码，详解实现Vue3.x响应式核心代码，实现reactive，ref，computed

100行代码，10分钟，详解Vue2.x响应式原理——理解Observer，Dep，Watcher

九、typescript学习过吗，内置泛型工具函数知道哪些

typescript （TS）进阶篇 --- 内置高阶泛型工具类型（Utility Type）

十、根据题目定义TS类型

let obj = {
    name:'xxx'  // 该属性以后不会更改，并且是字符串
    job: // 该属性目前可以是 '加班' , '加薪' ,以后可能会增加
    age: // 该值为数值类型
}
type obj =  {
  readonly name:string,
  job:'加班' | '加薪',
  age:number
}

十一、讲一下你了解到的ES6的语法和新特性

大概讲讲了许多新的的东西，像变量var改let，常量const，箭头函数普通函数，解构赋值，可选链，fetch，Promise，generator生成器，迭代器，yield关键字，symbol关键字，数据结构Map，Set，weakMap，weakSet，ES6模块化，Proxy，Reflect，class类，拓展运算符等等相关内容

十二、Map，weakMap了解过吗，讲一下区别

weakMap（弱映射）ES6中新增的一种数据结构，它不同于Map（强映射） WeakMap 的键必须是对象，并且当它的键值引用消失后，它会被垃圾回收掉，具体详情了解：WeakMap，WeakSet

十三、讲一下有那些数据结构，讲一下它们的特性

十四，算法，树结构转对象结构

要求输入以下数据：

const data = [{
 id:1,
 name:'xx',
 children:[ {id:11,name:'1xx',children:[ {id:111,name:'xx'} ]},
 {id:12,name:'12x'} ]
}]

转化为下图结构
输出：

{
 1:{name:xx,children:[11,12]},
 11:{name:1xx,parent:1,children:[111]},
 12:{name:12x,parent:1},
 111:{name:'xx',parent:11}
}

const data = [{
  id:1,
  name:'xx',
  children:[ {id:11,name:'1xx',children:[ {id:111,name:'xx'} ]},
  {id:12,name:'12x'} ]
}]
function data2Tree(data){
let res = {}
const dfs = (target,id)=>{
  res[target.id] = {
    name:target.name
  }
  if(id){
    res[target.id].parent = id
  }
  if(target.children){
    res[target.id].children = []
    for(let i of target.children){
      res[target.id].children.push(i.id)
      dfs(i,target.id)
    }
  }
}
for(let i of data){
  dfs(i)
}
return res
}
console.log(data2Tree(data));

十五、前端安全知道哪些，解决方案

「网络安全」面试常见的 web 网络安全知识整理

十六、除了cookie还有什么本地存储的方法，它们的区别

cookie

http 请求是无状态的，即使第一次和服务器连接后并且登录成功后，第二次请求服务器依然不知道当前请求是哪个用户。
cookie 第一次登录后服务器返回一些数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求的时候，就会自动的把上次请求存储的 cookie 数据携带给服务器，服务器通过浏览器携带的数据就能判断当前用户是哪个。

1、cookie 需要在客户端和服务器端之间来回传送，浪费不必要的资源。
2、cookie 的存储大小有限制，对于每个域，一般只能设置20个 cookie，每个 cookie 大小不能超过4KB。
3、cookie 的安全性低，因为保存在客户端中，其中包含的任何数据都可以被他人访问。

sessionStorage

sessionStorage 对象是存储特定于某个会话的数据，数据只保存到浏览器关闭，但是数据可以跨越页面刷新而存在。

1、只在本地存储：数据不会跟随 HTTP 请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。
2、存储方式：key、value的方式
3、存储上限限制：一般为5MB，但不同的浏览器存储上限不一样。

localStorage

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

1、同源策略限制：若想在不同页面之间对同一个 localStorage 进行操作，这些页面必须是同源的。
2、只在本地存储：数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，且长期有效直到手动删除。
3、存储方式：key、value的方式
4、存储上限限制：一般为5MB。
5、本质：对字符串的读取，如果存储内容多的话会占用内存空间，会导致页面变卡。