整理一下boss上大家遇到的前端面试题（持续更新）

1、webpack配置过吗？用到了哪些loader？

webpack是前端的打包工具，打包的主要工作就是扫描整个项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件；将浏览器无法直接识别的文件如less、sass、ts等文件转换成浏览器可以实现的内容；将浏览器暂时不支持的新语法转换为可以支持的语法 ;webpack依赖于node.js

loader:打包不同类型的文件，就要使用不同的loader，loder是用来读取文件的内容并对文件内容进行特定的处理，常见的一些loader：

• style-loader
• css-loader
• less-loader
• sass-loader
• ts-loader
• babel-loader
• file-loader
• eslint-loader 

webpack配置_shkmzzh的博客-CSDN博客

webpack配置详解_Kotoba209_的博客-CSDN博客

 2、箭头函数和普通函数有什么区别？

简写：

箭头函数可以简写，箭头函数如果没有参数，同时函数体的返回值只有一句，则{}和return都可以省略。

this指向：

• 普通函数中this指向的是调用它的对象，如果作为构造函数，它指向创建的对象实例
• 箭头函数不会创建自己的this， 所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

改变this指向：

• 普通函数通过调用call()、apply()、bind()可以改变this指向。
• 箭头函数无法通过调用call()、apply()、bind()改变this指向。

构造函数：

• 普通函数可以作为构造函数来创建对象实例
• 箭头函数不能作为构造函数来使用，因为箭头函数没有自己的this

arguments对象：

• 每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。
• 箭头函数没有自己的arguments对象，取而代之用rest（剩余）参数...args解决；箭头函数中访问arguments如果存在，则是来自于他的外层普通函数的arguments

prototype原型：

• 普通函数具有prototype原型属性
• 箭头函数没有prototype原型属性

3、webpack是怎么打包的？babel又是什么？

Webpack：把所有依赖打包成一个 bundle.js文件，通过代码分割成单元片段并按需加载。Webpack是以公共JS的形式来书写脚本的，但对AMD/CMD的支持也很全面，方便旧项目进行代码迁移。
把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

babel将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。

4、谈谈你对深拷贝和浅拷贝的理解

浅拷贝我的理解是，当定义一个a变量的时候，会在对应的内存中开辟一个储存位置来存储a的值，如果将a的值复制给新变量b，为了节省内存，避免过多的垃圾存在，不会在新开辟一个内存来存放b变量，而是将b变量的指针指向a变量的存储地址，如果a变量发生改变，b变量也会相应的去改变；深拷贝呢则是重新给b变量也开辟了一个新的内存空间，a、b变量则互不影响

5、为什么要用ajsx？

说到这个就要和传统方式来做对比，优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少带宽占用，大大减少数据量，可以实现异步通信，无感操作，提升用户体验（目前都是通过这种方式）

• 优点：
  • 局部刷新，优化了用户体验
  • 异步通信，不需要打断用户操作，具有良好的响应能力
  • 将一些工作从服务器转移到客户端中，节省了服务器和带宽资源
  • 按需取数据 ，减轻了服务器负担，也大大减少了冗余请求
• 缺点：
  • AJAX 主要依赖于JavaScript ，浏览器对 JavaScript 的兼容性将直接影响 AJAX的使用
  • 浏览器的后退机制被破坏，这也正是局部刷新所带来的问题，不过现在有一些方式可以尽可能弥补这些问题
  • 移动端对 AJAX 的支持没有那么好

AJAX-前后端交互的艺术 - 知乎

6、为什么history模式需要服务器支持？

history模式下，如果在浏览器直接输入URL地址，会对服务器发送http请求，服务器收到请求解析的时候在前端目录下并没有对应的资源（当前资源只有前端打包好的入口文件以及一些js和静态资源），这时候就会返回404，想要避免这种情况就需要在nginx等静态服务器中进行配置，重定向到对应的静态文件从而返回需要的html文件

7、vue中的computed有哪些特点？

computed计算属性是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新，支持同步，支持缓存，不支持异步，只有当所依赖的数据发生改变，就会立即重新计算，并将结果缓存下来，方便下次继续使用；如果计算属性数据不改变，则不会重新计算

8、vue中常用的修饰符有哪些？

事件修饰符: .prevent 阻止默认行为 .stop阻止事件冒泡 .capture 以捕获模式触发当前的事件处理函数 .once绑定的事件只触发一次 .self 只有在event.target是当前元素自身时触发事件处理函数 按键修饰符: .enter  键盘按下enter时触发 .esc    键盘按下esc时触发

9、页面导入样式时，使用 link 和 @import 有什么区别？

1.link是由html提供的，@import是由css提供的。 2.link会与页面加载时同步加载，@import在页面加载完成才会加载。 3.link没有兼容性问题，@import存在兼容性问题，只有i5以上才能识别。 4.link的权重会更高一些

10、JS中创建对象的方式有哪些？哪种最好

有三种方式。
1、利用“字面量”创建对象:
var obj={age:18,name:'vv'}
2、利用new Object创建对象
var obj=new Object();
obj.age=18;
3、利用构造函数
function S（age,sex）{
this.age=age;this.sex=sex;
this.sing=function（song）{
                  console.log（song）
}
var s1=new S（18,'男'）;
s1.sing（'两只老虎'）；

相对前两种，构造函数可以减少创建多个对象时的重复代码，它将对象中相同的属性和方法抽取出来封装到函数里。