Web前端面试常见问题

落日映苍穹つ 2023-07-24 11:35 34阅读 0赞

# **Web前端面试常见问题** #

### 箭头函数 ###

**箭头函数的this指向的是父级作用域的this，是通过查找作用域链来确定 this 的值也就是说，看的是上下文的this，指向的是定义它的对象，而不是使用时所在的对象；普通函数指向的是它的直接调用者。**

# **vuex 中dispatch 和 commit 的用法和区别** #

ispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)

commit：同步操作，写法：this.$store.commit('mutations方法名',值)

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

优点：

1.  避免全局变量的污染
2.  希望一个变量长期存储在内存中（缓存变量）

缺点：

1.  内存泄露（消耗）
2.  常驻内存，增加内存使用量

### **对前端性能优化有什么了解？一般都通过那几个方面去优化的？** ###

### **[前端性能优化的七大手段][Link 1]** ###

1.  减少请求数量
2.  减小资源大小
3.  优化网络连接
4.  优化资源加载
5.  减少重绘回流
6.  性能更好的API
7.  webpack优化

Vue 生命周期

![vue生命周期][vue]

## **Vue实现数据双向绑定的原理：Object.defineProperty（）** ##

vue实现数据双向绑定主要是：采**用数据劫持结合发布者-订阅者模式**的方式，通过**Object.defineProperty（）**来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 \{ \{\}\}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

## **Vue组件间的参数传递** ##

**1.父组件与子组件传值**  
父组件传给子组件：子组件通过props方法接受数据;  
子组件传给父组件：$emit方法传递参数  
**2.非父子组件间的数据传递，兄弟组件传值**  
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

路由  local

## **Vue的路由实现：hash模式 和 history模式** ##

**hash模式：**在浏览器中符号“\#”，\#以及\#后面的字符称之为hash，用window.location.hash读取；  
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。  
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 [http://www.xxx.com][http_www.xxx.com]，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

**history模式：**history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。  
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 [http://www.xxx.com/items/id][http_www.xxx.com_items_id]。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。**Vue-Router 官网里如此描述：**“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

## **Vue与Angular以及React的区别？** ##

（版本在不断更新，以下的区别有可能不是很正确。我工作中只用到vue，对angular和react不怎么熟）  
**1.与AngularJS的区别**  
相同点：  
都支持指令：内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。

不同点：  
AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。

**2.与React的区别**  
相同点：  
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。  
不同点：  
React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

## **vue路由的钩子函数** ##

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

**beforeEach**主要有3个参数to，from，next：

**to**：route即将进入的目标路由对象，

**from**：route当前导航正要离开的路由

**next**：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

## **vuex是什么？怎么使用？哪种功能场景使用它？** ##

只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。  
在main.js引入store，注入。新建了一个目录store，….. export 。  
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

![vuex][]

Vuex是通过全局注入store对象，来实现组件间的状态共享。在大型复杂的项目中（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可。

# **如何判断某一个变量是数组** #

# **[js中Math.max()求取数组中最大值][js_Math.max]** #

<table style="margin-left:-5.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:26.25pt;"> 1 2 3 </td> 
 <td style="vertical-align:top;width:.3pt;"> let&nbsp;arr = [3,2,4,1,8,6] let&nbsp;maxValue = Math.max.apply(null,arr); console.log(maxValue); </td> 
 </tr> 
 </tbody> 
</table>

PS: Math.max()中的参数不可以传数组

# **ES6模块化与CommonJS模块化** #

**S6模块化**

*  代表：Vue
 *  语法：
    
     *  导入：import xxx from、import \{xxx\} from
     *  导出：export、export default
 *  特点：
    
     *  1.  this指向undefined
     *  1.  编译时输出接口
     *  1.  可以单独加载其中的某个接口（方法）
     *  1.  静态分析，动态引用。输出的是值的引用

**CommonJS模块化**

*  代表：node.js
 *  语法：
    
     *  导入：require()
     *  导出：module.exports、exports
 *  特点：
    
     *  1.  this 指向当前模块
     *  1.  运行时加载。CommonJS脚本代码在require的时候，就会全部执行。一旦出现某个模板被“循环加载”，就只能输出已经执行的部分，还未执行的部分不会输出。
     *  1.  加载的是整个模块，即将所有的接口全部加载进来。
     *  1.  输出的是一个值的拷贝

## require和import 的差别 ##

### **ES6之前出现了JS模块加载的法案，最主要是CommonJS和AMD规范。CommonJS前者主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs,为异步加载。   node编程中最重要的思想是模块化，import和require都是被模块化使用   require是运行时调用，所以可以随处引入   import是编译时调用，必须放在文件开头引入，目前部分浏览器不支持，需要用babel把es6转成es5再** ###

## 什么是闭包，你对闭包的理解 ##

### 闭包就是函数执行产生一个私有的作用域，在这个作用域中的私有变量和外界互不干扰，而且作用域不销毁，这些私有变量存储的值也都保存下来了，所有整体来说闭包就是为了保护和保存变量。   应用场景：   1.循环事件绑定，   2.单例模式管理代码：     ###

let  xxxRender = (function () {
    		return {
    			init: function() {
    			}
    		}
    	})

###    3.函数柯里化     ###

Function.prototype.bind = function bind(context, ...arg) {
        return () => {
            fn.call(context, ...arg);
        }
    }

###      ###

[Link 1]: https://blog.csdn.net/caijunfen/article/details/106712012
[vue]: /images/20230528/877d295d675046248c255339713f79d4.png
[http_www.xxx.com]: http://www.xxx.com/
[http_www.xxx.com_items_id]: http://www.xxx.com/items/id
[vuex]: /images/20230528/9e8a138ea5894e989167a619dfe920a4.png
[js_Math.max]: https://www.cnblogs.com/manru75/p/10409882.html