面试记录

成都谷罗英科技有限公司

✨ 1、实现以下 js 函数：删除 data 中的 3 的整数倍的数，返回删除个数

function removewArr(data) {
  let num = 0;
  for (var i = 0; i < data.length; i++) {
    if (data[i] % 3 === 0) {
      data.splice(i, 1);
      num++;
      i--;
    }
  }
  return num;
}

✨ 2、实现以下 js 函数：将数组 arr 反转，不产生新的数组

function reverseArr(arr) {
  for (let i = 0; i < arr.length / 2; i++) {
    let temp = arr[i];
    arr[i] = arr[arr.length - 1 - i];
    arr[arr.length - 1 - i] = temp;
  }
  console.log("反转后的数组arr：", arr);
}

✨ 3、给定一个字符串 s，请你找出其中不含有重复字符的最长子串的长度

示例 1:

输入: s = "abcabcbb"

输出: 3

解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3

示例 2:

输入: s = "bbbbb"

输出: 1

解释: 因为无重复字符的最长子串是 "b"，所以其长度为 1

示例 3:

输入: s = "pwwkew"

输出: 3

解释: 因为无重复字符的最长子串是 "wke"，所以其长度为 3

请注意，你的答案必须是子串的长度，"pwke" 是一个子序列，不是子串。

function lengthOfLongestSubstring(s) {
  let arr = [],
    max = 0;
  for (let i = 0; i < s.length; i++) {
    let index = arr.indexOf(s[i]);
    if (index !== -1) {
      arr.splice(0, index + 1);
    }
    arr.push(s.charAt(i));
    max = Math.max(arr.length, max);
  }
  console.log("数组arr：" + arr + "，最长子串的长度：" + max);
  return max;
}

let s = "pwwkew";
lengthOfLongestSubstring(s);

上海布眼人工智能科技有限公司

算法题

✨ 2、改造 map 函数：请实现一个 mapConsole 函数，改造 map 函数，不仅返回 map 的，还打印 map 前后数组项的变化，效果如下：

示例

$ a=[1,2,3].mapConsble(i => i**2)

1 => 1

2 => 4

3 => 9

返回值 a==[1,4,9]

Array.prototype.mapConsole = function (n) {
  console.log("原数组：", this);
  const newArr = this.map(n);
  console.log("新数组：", newArr);
  return newArr;
};

$a = [1, 2, 3, 5].mapConsole((i) => i ** 2);

✨ 3、等待：请实现一个 sleep(second)函数，实现等待 second 秒的功能

示例

$ new Date().toLocaleTimeString()

$ await sleep(3)

$ new Date().toLocaleTimeString()

下午 2:13:42

下午 2:13:45

const sleep = (delay) => new Promise((_) => setTimeout(_, delay * 1000));
const test = async () => {
  console.log(new Date().toLocaleTimeString());
  await sleep(3);
  console.log(new Date().toLocaleTimeString());
};
test();

✨ 4、括号生成：数字 n 代表生成括号的对数，请你设计一个函数，用于能够生成所有可能的并且有效的括号组合。有效括号组合需满足：左括号必须以正确的顺序闭合。

示例

例如 n=3

输出：["((()))","(()())","(())()","()(())","()()()"]

框架相关问题

✨ 1、一般使用 vue 还是 react？能聊一下它们的区别和联系吗？

见详细

共同点：

• 数据驱动视图

  在 jquery 时代，我们需要频繁的操作 DOM 来实现页面效果与交互；而 Vue 和 React 解决了这一痛点，采用数据驱动视图方式，隐藏操作 DOM 的频繁操作。所以我们在开发时，只需要关注数据变化即可，但是二者实现方式不尽相同。

• 组件化

  React 与 Vue 都遵循组件化思想，它们把注意力放在 UI 层，将页面分成一些细块，这些块就是组件，组件之间的组合嵌套就形成最后的网页界面。

  所以在开发时都有相同的套路，比如都有父子组件传递， 都有数据状态管理、前端路由、插槽等。

• 都使用 Virtual DOM

  Vue 与 React 都使用了 Virtual DOM + Diff 算法， 不管是 Vue 的 Template 模板+options api 写法， 还是 React 的 Class 或者 Function 写法,最后都是生成 render 函数，而 render 函数执行返回 VNode(虚拟 DOM 的数据结构，本质上是棵树)。

  当每一次 UI 更新时，总会根据 render 重新生成最新的 VNode，然后跟以前缓存起来老的 VNode 进行比对，再使用 Diff 算法（框架核心）去真正更新真实 DOM（虚拟 DOM 是 JS 对象结构，同样在 JS 引擎中，而真实 DOM 在浏览器渲染引擎中，所以操作虚拟 DOM 比操作真实 DOM 开销要小的多）

不同点：

• 核心思想不同

  Vue 早期开发就尤雨溪大佬，所以定位就是尽可能的降低前端开发的门槛，让更多的人能够更快地上手开发。这就有了 vue 的主要特点：灵活易用的渐进式框架，进行数据拦截/代理，它对侦测数据的变化更敏感、更精确。

  React 从一开始的定位就是提出 UI 开发的新思路。背靠大公司 Facebook 的 React，从开始起就不缺关注和用户，而且 React 想要做的是用更好的方式去颠覆前端开发方式。所以 React 推崇函数式编程（纯组件），数据不可变以及单向数据流,当然需要双向的地方也可以手动实现， 比如借助 onChange 和 setState 来实现。

  由于两者核心思想的不同，所以导致 Vue 和 React 在后续设计产生了许多的差异。

• 组件写法差异

  React 推荐的做法是 JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js; Vue 推荐的做法是 template 的单文件组件格式(简单易懂，从传统前端转过来易于理解),即 html,css,JS 写在同一个文件(vue 也支持 JSX 写法)

  这个差异一定程度上也是由于二者核心思想不同而导致的。

• diff 算法不同

✨ 2、vue2 中能否监听到数组的改变？为什么？

this.arr[1]=this.arr[1]+1

vue3 中能否监听到？为什么？

✨ 3、了解过 vue3 的一些新特性吗？请简要地谈一下 ref 和 reactive 的区别，将一个响应式对象传递给子组件，需要注意什么？

vue3 的新特性

• 1、Composition API

  Composition API 是 Vue3 引入的最重要也是最有创新性的新特性，与 Vue2.x 的 Options API 不同，Composition API 允许开发者按照逻辑代码进行组合，而非随意的生命周期和选项组合。这大大提高了代码复用性和可维护性，它提供的函数式 API 使组件逻辑更加清晰，同时可重用性也得到了提高。

• 2、更快的渲染速度

  Vue 3 通过进行静态分析和 AOT（Ahead Of Time）编译，使渲染速度更快。它还减少了包的大小，可以更快地加载以及运行。这在使用 Vue3 开发大型应用程序时非常有用，可以提高用户的体验并增加网站流量。

• 3、多个根节点

  在 Vue 2 中，一个组件必须仅能有一个根节点。这在某些情况下可能是限制性的。Vue 3 中，允许组件有多个根节点，这为开发人员提供更多的布局选项和更大的用户界面控制能力。

• 4、Teleport（瞬移）

  Teleport 是 Vue 3 的另一个非常有用的新特性，允许开发人员将子组件瞬移到 DOM 的任何位置，而不需要建立层级关系。这使得编写更复杂的用户界面更加容易且灵活，同时也使代码更加简洁。

• 5、响应式 API 改进

  在 Vue 3 中，响应式 APl 发生了重大改进，可以更好地支持 JavaScript 本身的特性。开发者现在可以在 computed 和 watch 等功能中使用类似原生 JavaScript 立即执行函数的语法，可以快速的缓存或计算值，加快了响应式处理的速度。

• 6、更好的类型支持

  Typescript 一直是开发人员喜欢的类型安全语言之一，与 Vue.js 的使用也很流行。Vue 3 已经进行了多次改进，以更好地支持 typescript、JavaScript 和 Vue.js 之间的交互。这意味着开发人员可以在自己的项目中使用 Typescript，并获得非常出色的类型提示和编译支持。

ref 和 reactive 的区别

见详细

• 1、 从定义数据方面：

  ref 通常用来定义基本类型数据

  reactive 用来定义：对象（或者数组）类型数据

  ref 也可以用来定义对象或者数组类型的数据，内部会通过 reactive 转为代理对象

• 2、从原理方面：

  ref 通过 Object.defineProperty()的 get 和 set 实现数据代理。

  reactive 使用 Proxy 实现数据代理，并且通过 Reflect 操作源对象内部的数据。

• 3、从使用方面：

  ref 操作数据需要.value，template 模板中不需要。

  reactive 都不需要,value

将一个响应式对象传递给子组件，需要注意：

见详细

✨ 4、介绍一些 react 的 hook api；useReduce 相比 useState 有哪些优点？如何用 hook 做性能优化，避免无效渲染？

✨ 5、请用 vue 或 react 写一个 hook。useCounter(inistialNum,setPage):(counter,increment);入参 inistialNum 初始化计数器，出参 counter 计数器和 increment 函数，每次点击调用 increment 函数，将 counter+1，并产生一个向 page 请求/api?page=counter'内容的副作用，将请求到的内容用入参 setPage 填入 page。

四川澜泰天诚集团有限公司

八股文提问

✨ 1、vue 的生命周期有哪些？在项目中具体怎么应用？

✨ 2、vue 有哪些方式可以实现动态加载路由？

✨ 3、页面进行跳转，页面之间传参有哪些方式？

✨ 4、全局参数是怎样设置的？

✨ 5、js 中哪些情况下会出现内存泄漏？

✨ 6、描述函数的防抖和节流

✨ 7、对象的深拷贝和浅拷贝

项目提问

✨ 8、表格是用哪个组件实现的，组件需要修改的是哪些参数？

✨ 9、购物车增减数量，实时与服务器沟通还是点确认才发给服务器？

✨ 10、购物车有很多栏目，用户实时修改，这部分数据是怎样缓存？

✨ 11、商品的总价计算（用户会不断修改）是怎么处理的？

✨ 12、收货地址中的省市区是怎样联动的？

北京易诚互动网络技术股份有限公司（济南）

✨ 1、js 样式使用的 UI 组件吗？样式可以自己调试吗？

✨ 2、vue 的生命周期

✨ 3、vue 双向绑定怎样理解？

✨ 4、css 样式调试自己做过吗？

✨ 5、简单介绍 uniapp 的框架使用，对于原生框架有什么区别（原理上）？

✨ 6、小程序的原生有做过吗？

✨ 7、小程序代码如何上传？命令还是工具上传？

✨ 8、最近做过的项目？简单介绍项目、负责哪一块，做了哪些工作？涉及到哪些逻辑，具体怎么开发的？

✨ 9、做项目的过程中是有人带你还是独立开发？

✨ 10、vue 的修改可以独立完成吗？（给一个需求，在原有基础上优化、页面修改）

✨ 11、js 和 jquery 写过吗？

✨ 12、promise 用过吗？

✨ 13、函数封装会用吗？封装过组件吗？

✨ 14、框架层级的改动做过吗？

✨ 15、简单介绍 nodejs

厦门市规划数字技术研究中心

✨ 1、vue 的性能优化

✨ 2、是否用过 ts，是否写过数据化大屏？

✨ 3、用什么写代码？使用过的第三方插件有哪些？

✨ 4、echars 中的柱状图（动态渲染还是啥忘记了）的属性

✨ 5、导出 Excel 怎么实现？使用的第三方包是什么？（针对项目）

✨ 6、是否有过多项目的开发？

✨ 7、使用git版本管理工具，公司有哪些规范？

四川省致链数字科技有限公司

✨ 1、描述下项目负责的主要内容、遇到的问题如何解决？

✨ 2、vue 的生命周期

✨ 3、created 和 mounted 指的是什么？平时使用有什么区别？

✨ 4、vuex 有什么特点？怎么获取数据和操作数据的？

✨ 5、怎么调用 mutations 和 actions 方法？（操作的两个关键代码）

mutations 用 commit、actions 用 dispatch，或是 ...mapMutations、...mapActions

✨ 6、vue 通信方式？（props、$emit、eventBus）

​ eventBus 是针对的什么？

​ 跨组件呢？（子孙组件或是页面级的传参）

✨ 7、如何实现打印功能？（针对项目内容）

✨ 8、computed 和 watch 的用法和区别

✨ 9、wacth 如何实现深度监听？

✨ 10、v-if 和 v-show 的用法和区别？

✨ 11、常用指令有哪些？（v-开头的）

福建卓融信息技术有限公司

✨ 1、label 的作用

✨ 2、表格中的 tr、td、th

✨ 3、垂直居中的方式有哪些？具体使用场景

✨ 4、盒模型，项目中使用哪种？

✨ 5、描述 map 方法

✨ 6、描述 filter 方法，函数条件中返回的是 true 和 false，过滤出的是哪个？

✨ 7、数据类型的判断方式，分别有什么区别？

✨ 8、是否用过 bootstrap

✨ 9、es6 中 import 有 {} 和没有的区别

✨ 10、如何实现响应式布局？

✨ 11、pc端如何兼容？兼容的浏览器有哪些？（简历上写的多端兼容，被问如何实现）

✨ 12、每次请求都要写一次防抖，有什么简便的方法？

厦门星纵物联科技有限公司

✨ 1、vue 的生命周期

✨ 2、父子组件的生命周期的执行顺序

✨ 3、如何让父组件知道子组件 mouted 结束

✨ 4、组件通信的方式（父子组件、跨组件）

✨ 5、vue 的响应式原理

✨ 6、v-if 和 v-for 不能一起使用的原因

✨ 7、虚拟 dom

✨ 8、判断数据类型的方式，分别在哪些场景使用？

✨ 9、作用域链？怎么样是局部和全局

✨ 10、promise？如何撤销一个 promise？

✨ 11、其他处理异步事件的方法

✨ 12、async await 和 promise 两者的关联

✨ 13、介绍 BFC，用来解决哪些问题？哪些属性可以触发 BFC？

✨ 14、防抖和节流，具体应用场景

✨ 15、前端使用 webpack 打包的流程

✨ 16、响应式布局实现方式，rem 和百分比（只回答出这两个）更倾向于哪种以及原因？

✨ 17、项目中印象深刻的技术点

✨ 18、十万条的数据列表要呈现，如何可以提高列表呈现的体验？

✨ 19、职业或者技术上的个人规划