本文是2022年来前端开发人员自求职过程中最新面试题系列的第三篇，主要包括函数组件和类组件、for in和for of、react与vue、react更新机制、BFC及其优缺点、SPA单页面、盒模型、前端登录流程、Http与Https协议区别、vue中购物车实现原理、常见的git状态。

下面开始挨个过一遍。

51、说一下for…in 和 for…of的区别?

for...of遍历获取的是对象的键值, for...in获取的是对象的键名;
for...in会遍历对象的整个原型链, 性能非常差不推荐使用,而for...of只遍历当前对象不会遍历原型链;
对于数组的遍历,for...in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性),for...of只返回数组的下标对应的属性值;
总结：for...in循环主要是为了遍历对象而生,不适用遍历数组; for....of循环可以用来遍历数组、类数组对象、字符串、Set、Map以及Generator对象
复制代码

52、说一下类组件和函数组件的区别?

1. 语法上的区别：

函数式组件是一个纯函数，它是需要接受props参数并且返回一个React元素就可以了。类组件是需要继承React.Component的，而且class组件需要创建render并且返回React元素，语法上来讲更复杂。

2. 调用方式

函数式组件可以直接调用，返回一个新的React元素；类组件在调用时是需要创建一个实例的，然后通过调用实例里的render方法来返回一个React元素。

3. 状态管理

函数式组件没有状态管理，类组件有状态管理。

4. 使用场景

类组件没有具体的要求。函数式组件一般是用在大型项目中来分割大组件（函数式组件不用创建实例，所有更高效），一般情况下能用函数式组件就不用类组件，提升效率。
复制代码

53、说一下react的更新机制

54、说一下redux 里面有什么

55、说一下react和vue框架的区别

56、说一下proxy  它有什么优点

57、说一下vue3.0你了解多少?

 <!-- 响应式原理的改变 Vue3.x 使用Proxy取代 Vue2.x 版本的Object.defineProperty -->
 <!-- 组件选项声明方式Vue3.x 使用Composition API setup 是Vue3.x新增的一个选项，他
    是组件内使用Composition API 的入口 -->
 <!-- 模板语法变化slot具名插槽语法 自定义指令 v-model 升级 -->
 <!-- 其它方面的更改Suspense支持Fragment(多个根节点) 和Protal (在dom其他部分渲染组建内容)组件
     针对一些特殊的场景做了处理。基于treeshaking优化，提供了更多的内置功能。 -->
复制代码

58、说一下bfc bfc有什么优缺点

59、说一下你对盒模型的理解?

CSS3中的盒模型有以下两种:标准盒模型、IE盒模型
盒模型都是由四个部分组成的,分别是margin、border、padding和content
标准盒模型和IE盒模型的区别在于设置width和height时, 所对应的范围不同
1、标准盒模型的width和height属性的范围只包含了content
2、IE盒模型的width和height属性的范围包含了border、padding和content
可以通过修改元素的box-sizing属性来改变元素的盒模型；
1、box-sizing：content-box表示标准盒模型（默认值）
2、box-sizing：border-box表示IE盒模型（怪异盒模型）
复制代码

60、说一下SPA单页面有什么优缺点？

优点：

1.体验好，不刷新，减少 请求  数据ajax异步获取 页面流程；

2.前后端分离

3.减轻服务端压力

4.共用一套后端程序代码，适配多端

缺点：

1.首屏加载过慢；

2.SEO 不利于搜索引擎抓取
复制代码

61、说一下前端登录的流程?

初次登录的时候，前端调后调的登录接口，发送用户名和密码，后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token，和一个用户信息的值，前端拿到token，将token储存到Vuex中，然后从Vuex中把token的值存入浏览器Cookies中。把用户信息存到Vuex然后再存储到LocalStroage中,然后跳转到下一个页面，根据后端接口的要求，只要不登录就不能访问的页面需要在前端每次跳转页面师判断Cookies中是否有token，没有就跳转到登录页，有就跳转到相应的页面，我们应该再每次发送post/get请求的时候应该加入token，常用方法再项目utils/service.js中添加全局拦截器，将token的值放入请求头中 后端判断请求头中有无token，有token，就拿到token并验证token是否过期，在这里过期会返回无效的token然后有个跳回登录页面重新登录并且清除本地用户的信息

62、说一下前端权限管理怎么实现

63、说一下购物车的逻辑?

//vue中购物车逻辑的实现
1. 购物车信息用一个数组来存储，数组中保存对象，对象中有id和count属性

2. 在vuex中state中添加一个数据 cartList 用来保存这个数组

3. 由于商品详情页需要用到加入购物车功能，所以我们需要提供一个mutation, 用来将购物车信息加入 cartList中

4. 加入购物车信息的时候，遵照如下规则： 如果购物车中已经有了该商品信息，则数量累加，如果没有该商品信息，则新增一个对象

5. 在商品详情页，点击加入购物车按钮的时候，调用vuex提供的addToCart这个mutation将当前的商品信息 （id count）传给addTocart  this.$store.commit("addToCart", {id:  , count：})

// js中购物车逻辑的实现
1.商品页点击“加入购物车”按钮，触发事件

2.事件调用购物车“增加商品”的Js程序（函数、对象方法）

3.向Js程序传递传递“商品id”、“商品数量”等数据

4.存储“商品id”、“商品数量”到浏览器的localStorage中

**展示购物车中的商品******

1.打开购物车页面

2.从localStorage中取出“商品Id”、“商品数量”等信息。

3.调用服务器端“获得商品详情”的接口得到购物车中的商品信息（参数为商品Id）

4.将获得的商品信息显示在购物车页面。

**完成购物车中商品的购买******

1.用户对购物车中的商品完成购买流程，产生购物订单

2.清除localStorage中存储的已经购买的商品信息

备注1：购物车中商品存储的数据除了“商品id”、“商品数量”之外，根据产品要求还可以有其他的信息，例如完整的商品详情（这样就不用掉服务器接口获得详情了）、购物车商品的过期时间，超过时间的购物车商品在下次打开网站或者购物车页面时被清除。

备注2：购物车商品除了存储在localStorage中，根据产品的需求不同，也可以存储在sessionStorage、cookie、session中，或者直接向服务器接口发起请求存储在服务器上。何种情况使用哪种方式存储、有啥区别请自己分析。
复制代码

64、说一下HTTP和HTTPS协议的区别?

1、HTTPS协议需要CA证书,费用较高;而HTTP协议不需要
2、HTTP协议是超文本传输协议,信息是明文传输的,HTTPS则是具有安全性的SSL加密传输协议;
3、使用不同的连接方式,端口也不同,HTTP协议端口是80,HTTPS协议端口是443;
4、HTTP协议连接很简单,是无状态的;HTTPS协议是具有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTP更加安全
复制代码

65、说一下常见的HTTP状态码?说一下状态码是302和304是什么意思？你在项目中出现过么？你是怎么解决的？

    <!-- 状态码：由3位数字组成，第一个数字定义了响应的类别 -->
    <!-- 1xx：指示消息,表示请求已接收，继续处理 -->
    <!-- 2xx：成功,表示请求已被成功接收，处理 -->
    <!-- 200 OK：客户端请求成功
         204 No Content：无内容。服务器成功处理，但未返回内容。一般用在只是客户端向服务器发送信息，而服务器不用向客户端返回什么信息的情况。不会刷新页面。
         206 Partial Content：服务器已经完成了部分GET请求（客户端进行了范围请求）。响应报文中包含Content-Range指定范围的实体内容
 -->
    <!-- 3xx 重定向 -->
    <!-- 301 Moved Permanently：永久重定向，表示请求的资源已经永久的搬到了其他位置。
         302 Found：临时重定向，表示请求的资源临时搬到了其他位置
         303 See Other：临时重定向，应使用GET定向获取请求资源。303功能与302一样，区别只是303明确客户端应该使用GET访问
         307 Temporary Redirect：临时重定向，和302有着相同含义。POST不会变成GET
         304 Not Modified：表示客户端发送附带条件的请求（GET方法请求报文中的IF…）时，条件不满足。返回304时，不包含任何响应主体。虽然304被划分在3XX，但和重定向一毛钱关系都没有
 -->
    <!-- 4xx：客户端错误 -->
    <!-- 400 Bad Request：客户端请求有语法错误，服务器无法理解。
         401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
         403 Forbidden：服务器收到请求，但是拒绝提供服务
         404 Not Found：请求资源不存在。比如，输入了错误的url
         415 Unsupported media type：不支持的媒体类型
 -->
    <!-- 5xx：服务器端错误，服务器未能实现合法的请求。 -->
    <!-- 500 Internal Server Error：服务器发生不可预期的错误。
         503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常，
 -->
复制代码

66、说一下常见的git操作

git branch 查看本地所有分支
git status 查看当前状态 
git commit 提交 
git branch -a 查看所有的分支
git branch -r 查看远程所有分支
git commit -am "init" 提交并且加注释 
git remote add origin git@192.168.1.119:ndshow
git push origin master 将文件给推到服务器上 
git remote show origin 显示远程库origin里的资源 
git push origin master:develop
git push origin master:hb-dev 将本地库与服务器上的库进行关联 
git checkout --track origin/dev 切换到远程dev分支
git branch -D master develop 删除本地库develop
git checkout -b dev 建立一个新的本地分支dev
git merge origin/dev 将分支dev与当前分支进行合并
git checkout dev 切换到本地dev分支
git remote show 查看远程库
git add .
git rm 文件名(包括路径) 从git中删除指定文件
git clone git://github.com/schacon/grit.git 从服务器上将代码给拉下来
git config --list 看所有用户
git ls-files 看已经被提交的
git rm [file name] 删除一个文件
git commit -a 提交当前repos的所有的改变
git add [file name] 添加一个文件到git index
git commit -v 当你用－v参数的时候可以看commit的差异
git commit -m "This is the message describing the commit" 添加commit信息
git commit -a -a是代表add，把所有的change加到git index里然后再commit
git commit -a -v 一般提交命令
git log 看你commit的日志
git diff 查看尚未暂存的更新
git rm a.a 移除文件(从暂存区和工作区中删除)
git rm --cached a.a 移除文件(只从暂存区中删除)
git commit -m "remove" 移除文件(从Git中删除)
git rm -f a.a 强行移除修改后文件(从暂存区和工作区中删除)
git diff --cached 或 $ git diff --staged 查看尚未提交的更新
git stash push 将文件给push到一个临时空间中
git stash pop 将文件从临时空间pop下来

//  我是cv的自取吧

限于篇幅，有些前端面试题没有提供答案，如果有答案的可以评论区贴出来共勉。

本篇标志本系列完结，这些都是2022年开年以来前端工程师在实际找工作面试或者笔试遇到的技术问题，也是用人单位最看重的你必须过硬的吃饭的家伙，大家务必牢牢掌握，争取早日拿到offer。

如有新的题目也欢迎留言分享，让更多的人看见。

第一篇：2022年最新前端面试题，来自这几个月找工作面试和笔试前线，附问题和答案代码，初级前端工程师求职必备（一）

第二篇：2022年最新前端面试题，来自这几个月找工作面试和笔试前线，附问题和答案代码，初级前端工程师求职必备（二）

致敬作者：villay
链接：juejin.cn/post/7073869980411887652
来源：稀土掘金

求职找工作的金三银四已经过去了快一半，收疫情和整个大房间的影响，目前工作的竞争压力非常大。尤其对于人数众多的初级工程师来说，竞争尤为激烈，这里总结了2022年以来来自一线的各位求职者遇到的实际的前端面试和笔试题目，而且附带案例和代码，希望有助于大家查缺补漏，明确方向，提高自身竞争力，让自己脱颖而出，顺利拿到offer。

因为内容比较多，而且会不定期更新追加，所以暂时会分为三篇，本文是第一篇，主要包含，vue中的双向数据绑定原理、语法糖、哈希、浅拷贝和深拷贝、以及常问常新的原型和原型链、闭包、Promise、New、Set\Map、localStorage，sessionStorage，cookies区别、Vuex等，废话不多说，直接上题目和答案。

1、什么是原型什么是原型链?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function Person () {

    }
    var person  = new Person();
    person.name = 'Kevin';
    console.log(person.name) // Kevin

    // prototype
    function Person () {

    }
    Person.prototype.name = 'Kevin';
    var person1 = new Person();
    var person2 = new Person();
    console.log(person1.name)// Kevin
    console.log(person2.name)// Kevin

    // __proto__
    function Person () {

    }
    var person = new Person();
    console.log(person.__proto__ === Person.prototype) // true

    //constructor
    function Person() {

    }
    console.log(Person === Person.prototype.constructor) // true

    //综上所述
    function Person () {

    }
    var person = new Person()
    console.log(person.__proto__ == Person.prototype) // true
    console.log(Person.prototype.constructor == Person) // true
    //顺便学习一下ES5得方法,可以获得对象得原型
    console.log(Object.getPrototypeOf(person) === Person.prototype) // true

    //实例与原型
    function Person () {

    }
    Person.prototype.name = 'Kevin';
    var person = new Person();
    person.name = 'Daisy';
    console.log(person.name) // Daisy
    delete person.name;
    console.log(person.name) // Kevin

    //原型得原型
    var obj = new Object();
    obj.name = 'Kevin',
    console.log(obj.name) //Kevin

     //原型链
     console.log(Object.prototype.__proto__ === null) //true
     // null 表示"没用对象" 即该处不应该有值

     // 补充
     function Person() {

     }
     var person = new Person()
     console.log(person.constructor === Person) // true
     //当获取person.constructor时，其实person中并没有constructor属性,当不能读取到constructor属性时,会从person的原型
     //也就是Person.prototype中读取时,正好原型中有该属性,所以
     person.constructor === Person.prototype.constructor

     //__proto__
     //其次是__proto__，绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于Person.prototype中，实际上，它
     // 是来自与Object.prototype,与其说是一个属性，不如说是一个getter/setter,当使用obj.__proto__时，可以理解成返回了
     // Object.getPrototypeOf(obj)
     总结：
     
     1、当一个对象查找属性和方法时会从自身查找,如果查找不到则会通过__proto__指向被实例化的构造函数的prototype

     2、隐式原型也是一个对象,是指向我们构造函数的原型

     3、除了最顶层的Object对象没有__proto_，其他所有的对象都有__proto__,这是隐式原型

     4、隐式原型__proto__的作用是让对象通过它来一直往上查找属性或方法，直到找到最顶层的Object的__proto__属性，它的值是null,这个查找的过程就是原型链



</script>
</html>
复制代码

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

（1）箭头函数比普通函数更加简洁
    如果没有参数，就直接写一个空括号即可
    如果只有一个参数，可以省去参数括号
    如果有多个参数，用逗号分割
    如果函数体的返回值只有一句，可以省略大括号
    如果函数体不需要返回值，且只有一句话，可以给这个语句前面加一个void关键字。最常用的就是调用一个函数：
    let fn = () => void doesNotReturn()
    
 (2) 箭头函数没有自己的this
 箭头函数不会创建自己的this,所以它没有自己的this,它只会在自己作用域的上一层继承this。所以箭头函数中的this的指向在它在定义时一家确定了，之后不会改变。
 
（3）箭头函数继承来的this指向永远不会改变

 (4) call()、apply()、bind()等方法不能改变箭头函数中的this指向 
 
 (5) 箭头函数不能作为构造函数使用
 
 (6) 箭头函数没有自己的arguments
 
 (7) 箭头函数没有prototype
 
 (8) 箭头函数不能用作Generator函数,不能使用yeild关键字
复制代码

3、New操作符做了什么事情?

1、首先创建了一个新对象
2、设置原型，将对象的原型设置为函数的prototype对象
3、让函数的this指向这个对象，执行构造函数的代码（为这个新对象添加属性）
4、判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象

4、vue实现双向数据绑定原理是什么？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <!-- 引入vue文件 -->
    <div id="box">
      <new-input v-bind:name.sync="name"></new-input>
      {{name}}
      <!-- 小胡子语法 -->
      <input type="text" v-model="name" />
    </div>
    <script>
      Vue.component("new-input", {
        props: ["name"],
        data: function () {
          return {
            newName: this.name,
          };
        },
        template: `<label><input type="text" @keyup="changgeName"
        v-model="newName" /> 你的名字：</label>`,
        // 模板字符串
        methods: {
          changgeName: function () {
            this.$emit("update:name", this.newName);
          },
        },
        watch: {
          name: function (v) {
            this.newName = v;
          },
        },
        //    监听
      });

      new Vue({
        el: "#box",
        //挂载实例
        data: {
          name: "nick",
        },
        //赋初始值
      });
    </script>
  </body>
</html>

复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" v-mode="msg" />
    <p v-mode="msg"></p>
    <script>
      const data = {
        msg: "你好",
      };
      const input = document.querySelector("input");
      const p = document.querySelector("p");
      input.value = data.msg;
      p.innerHTML = data.msg;
      //视图变数据跟着变
      input.addEventListener("input", function () {
        data.msg = input.value;
      });
      //数据变视图变
      let temp = data.msg;
      Object.defineProperty(data, "msg", {
        get() {
          return temp;
        },
        set(value) {
          temp = value;
          //视图修改
          input.value = temp;
          p.innerHTML = temp;
        },
      });
      data.msg = "小李";
    </script>
  </body>
</html>

5、v-model语法糖是怎么实现的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-model 只是语法糖而已 -->
    <!-- v-model 在内部为不同的输入元素使用不同的property并抛出不同的事件 -->
    <!-- text和textarea 元素使用value property 和 input事件 -->
    <!-- checkbox 和radio使用checked  property 和 change事件-->
    <!-- select 字段将value 作为prop 并将change 作为事件 -->
    <!-- 注意：对于需要使用输入法(如中文、日文、韩文等)的语言，你将会发现v-model不会再输入法
    组合文字过程中得到更新 -->
    <!-- 再普通标签上 -->
    <input v-model="sth" />  //这一行等于下一行
    <input v-bind:value="sth" v-on:input="sth = $event.target.value" />
    <!-- 再组件上 -->
    <currency-input v-model="price"></currentcy-input>
        <!--上行代码是下行的语法糖
         <currency-input :value="price" @input="price = arguments[0]"></currency-input>
        --> 
        <!-- 子组件定义 -->
        Vue.component('currency-input', {
         template: `
          <span>
           <input
            ref="input"
            :value="value"
            @input="$emit('input', $event.target.value)"
           >
          </span>
         `,
         props: ['value'],
        })   
</body>
</html>

6、什么是闭包，闭包的作用是什么

当一个内部函数被调用，就会形成闭包，闭包就是能够读取其他函数内部变量的函数。
闭包作用：
局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。
复制代码

7、Promise是什么?

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态) ；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";

function MyPromise(fn) {
  // 保存初始化状态
  var self = this;

  // 初始化状态
  this.state = PENDING;

  // 用于保存 resolve 或者 rejected 传入的值
  this.value = null;

  // 用于保存 resolve 的回调函数
  this.resolvedCallbacks = [];

  // 用于保存 reject 的回调函数
  this.rejectedCallbacks = [];

  // 状态转变为 resolved 方法
  function resolve(value) {
    // 判断传入元素是否为 Promise 值，如果是，则状态改变必须等待前一个状态改变后再进行改变
    if (value instanceof MyPromise) {
      return value.then(resolve, reject);
    }

    // 保证代码的执行顺序为本轮事件循环的末尾
    setTimeout(() => {
      // 只有状态为 pending 时才能转变，
      if (self.state === PENDING) {
        // 修改状态
        self.state = RESOLVED;

        // 设置传入的值
        self.value = value;

        // 执行回调函数
        self.resolvedCallbacks.forEach(callback => {
          callback(value);
        });
      }
    }, 0);
  }

  // 状态转变为 rejected 方法
  function reject(value) {
    // 保证代码的执行顺序为本轮事件循环的末尾
    setTimeout(() => {
      // 只有状态为 pending 时才能转变
      if (self.state === PENDING) {
        // 修改状态
        self.state = REJECTED;

        // 设置传入的值
        self.value = value;

        // 执行回调函数
        self.rejectedCallbacks.forEach(callback => {
          callback(value);
        });
      }
    }, 0);
  }

  // 将两个方法传入函数执行
  try {
    fn(resolve, reject);
  } catch (e) {
    // 遇到错误时，捕获错误，执行 reject 函数
    reject(e);
  }
}

MyPromise.prototype.then = function(onResolved, onRejected) {
  // 首先判断两个参数是否为函数类型，因为这两个参数是可选参数
  onResolved =
    typeof onResolved === "function"
      ? onResolved
      : function(value) {
          return value;
        };

  onRejected =
    typeof onRejected === "function"
      ? onRejected
      : function(error) {
          throw error;
        };

  // 如果是等待状态，则将函数加入对应列表中
  if (this.state === PENDING) {
    this.resolvedCallbacks.push(onResolved);
    this.rejectedCallbacks.push(onRejected);
  }

  // 如果状态已经凝固，则直接执行对应状态的函数

  if (this.state === RESOLVED) {
    onResolved(this.value);
  }

  if (this.state === REJECTED) {
    onRejected(this.value);
  }
};
复制代码

8、Set 和 Map有什么区别？

1、Map是键值对，Set是值得集合，当然键和值可以是任何得值
2、Map可以通过get方法获取值，而set不能因为它只有值
3、都能通过迭代器进行for...of 遍历
4、Set的值是唯一的可以做数组去重，而Map由于没有格式限制，可以做数据存储
复制代码

9、map和foreach有什么区别

foreach()方法会针对每一个元素执行提供得函数,该方法没有返回值,是否会改变原数组取决与数组元素的类型是基本类型还是引用类型
map()方法不会改变原数组的值,返回一个新数组,新数组中的值为原数组调用函数处理之后的值：
复制代码

10、localStorage  sessionStorage  cookies 有什么区别?

localStorage:以键值对的方式存储 储存时间没有限制 永不生效 除非自己删除记录
sessionStorage：当页面关闭后被清理与其他相比不能同源窗口共享 是会话级别的存储方式
cookies 数据不能超过4k 同时因为每次http请求都会携带cookie 所有cookie只适合保存很小的数据 如会话标识
复制代码

11、Vuex有哪些基本属性?为什么 Vuex 的 mutation 中不能做异步操作?

有五种，分别是 State、 Getter、Mutation 、Action、 Module
1、state => 基本数据(数据源存放地)
2、getters => 从基本数据派生出来的数据
3、mutations => 提交更改数据的方法，同步
4、actions => 像一个装饰器，包裹mutations，使之可以异步。
5、modules => 模块化Vuex

1、Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样可以方便地跟踪每一个状态的变化，从而能够实现一些工具帮助更好地了解我们的应用。
2、每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。
复制代码

12、Loader和Plugin 有什么区别

Loader：直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到`loader`。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。 Plugin：直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

其他的下篇更新，收藏网址鸭。

第二篇：2022年最新前端面试题，来自这几个月找工作面试和笔试前线，附问题和答案代码，初级前端工程师求职必备（二）

第三篇：2022年最新前端面试题，来自这几个月找工作面试和笔试前线，附问题和答案代码，初级前端工程师求职必备（三）

程序开发语言基本都是国外发明的，但是我们在互联网应用上比国外要热闹一点。作为一个新兴的领域，程序员在国内外都是一个很普遍的职业，那我们和国外，尤其是中美程序员对比，有什么区别呢？

下面来自一位横跨太平洋工作的资深程序员的亲身经历分享，作为大家茶余饭后的谈资乐呵乐呵一下。

1.发量和年龄 

我国公司：

• 我国就很明显了，程序员几乎成为了青春饭。员工平均年龄在30岁以下。35岁焦虑弥漫整个职场，虽然目前收到重视，但情况仍未好转。那么年纪大程序员的都去哪里了呢？有人转岗、有人转行、有人继续在开发岗位，极少数在管理层。希望社会对35的中年人宽容点吧

美国公司：

• 同事里20多到70多岁的都有，众数是三四十的中年人，大部分工作目标都是为了早日退休，攒够钱就随时办退休party。也有些纯粹因为热爱工作、热爱写代码选择不退休的。
• 我们组的核心成员之一，是位72岁的老头，他每天4点多起床到公司写一会儿代码，等天全亮就戴上头盔去骑山地车锻炼，9点多回公司继续工作。对这老头印象深刻，是因为他逻辑清晰、思路锐利，他是code review小组的成员，经常在邮件里破口大骂其他人写的代码写得有多烂，被投诉，只好在邮件里道歉，过几天继续骂，在我工作的两年里一直循环。
• 我的另一位资深同事，是位68岁的架构师，热爱工作，每天都乐呵呵的，对我这种新毕业生也很友好，有人问他什么时候退休，他回答说他死的那天。

还有一个被大家津津乐道的话题就是程序员的发量，据说技术行不行，就看头发多还是少？哈哈

 2. 加班

美国公司：

• 从没加过班，晚上发版除外（会默认第二天调休）。
• 经常正开着会，时间到了5点半，产品打断领导说到点了他要回去喂狗（他是一个50岁的不婚族，养了一院子狗），然后就散会下班了。
• 加班需要申请，有次我申请工作日晚上加班，没批准只好回家了。因为加班费会比较高，需要从项目预算走，领导控制预算不给批。
• 偶尔周末去办公室取东西，几层停车场只有两三辆车。

我国公司：

• 996是常事了，据说还是福宝。
• 印象比较深的是我司之前有个清华本科+美国硕士的小伙子，每天7点半准时下班，结果试用期被辞退了，原因是工作态度不积极，据说后来还和公司打了官司，不知输赢。

3. 代码质量谁的高 

我国公司：

• 国内互联网节奏会要快得多，讲究小步快跑，就几天的开发时间，不管三七二十一先上线再说，刚开始我都惊呆了。讲究先有再好，只要能上就先上。

美国公司：

• 项目在前期花的时间是最多的，比如说需求分析、架构讨论、技术讨论。
• 写代码会考虑得比较长远，比较有时间去考虑开发原则、维护成本，领导也会乐意去安排版本来解决技术债务。

 4.工作环境和公司文化

美国公司：

• 老美的公司确实比较尊重员工，在员工关怀上做得比较好。我可以感受到，和领导职位不同，但是我们人格是平等的，彼此尊重。
• 记得有一次发版前几天，组里程序员说他压力太大，领导给他假期让他放松调整，版本被延迟上线。
• 美国有family first的文化。有个老印同事，家里老人身体不好，公司同意他回印度工作照顾家人，远程跨国工作。经常有同事因为要看孩子比赛请假。领导自己也会偶尔周五请假，因为要去和女儿一起参加学校的公益活动。
• 对差异性接受度也比较高。同事有变性人、残疾人，大家相处得都很好。

我国公司：

• 领导高高在上，官威很大。请个假，和求他借钱似的，组长还提醒我让我请假原因不要写“旅游”不然可能会不给批假。
• 记得有个需求，大家都认为不合理没必要，我去找领导沟通，刚提了一句还没展开，领导直接甩脸色“你是领导还是我是领导”。
• 有个同事因为耿直，和领导不和，被各种排挤冷暴力，逼他自己辞职拒给赔偿金。
• 开个线上事故复盘会，做root cause分析，就像要把人钉在耻辱柱一样，我不理解这对解决问题有什么帮助。

其实硬件环境上中美已经差别不大，我们甚至还略胜，但是软件和文化等方面我们还有进步的空间。

 4.工资

美国：

如果汇率不换算的话，国外的软件工程师薪资在10万美元~30万美元不等，与国内的薪资在数字上相差不大（考虑消费水平）。

AI工程师，月薪60k~140k。

软件工程师，月薪69k~183k。

数据科学家，月薪43k~131k。

前端工程师，月薪82k~122k。

我国公司：

国内的薪资水平对应的大公司薪资又是如何的呢？根据拉勾网的岗位薪资数据（截至2020年9月11日），字节、滴滴、大疆以及商汤的薪酬（月薪）大致如下：

字节跳动：

基础架构工程师：30k~60k；

软件工程师（iOS、android）：30k~60k；

数据科学家：30k~60k；

前端工程师：15~50k；

滴滴：

AI工程师（自动驾驶）：30k~60k，15薪；

软件开发工程师：30k~60k；

数据科学家：20k~100k；

前端工程师：30k~70k；

大疆：

机器学习算法工程师（智能驾驶方向）：25k~50k；

前端工程师：12k~40k，部分岗位15薪；

后台开发工程师：15k~25k；

信息安全专家：40k~70k，15薪；

商汤：

前端架构师：35k~60k，15薪；

高级系统开发工程师：30k~70k；

前端开发工程师：15k~35k，15薪；

后端开发工程师：20k~40k，15薪；

事实上，如果汇率不换算的话，国外的软件工程师薪资在10万美元~30万美元不等，与国内的薪资在数字上相差不大（考虑消费水平）。

而国外机器学习工程师相关的年薪，则在11万~21万美元之间，数字上甚至会比国内的普遍更低。所以整体上工资体验相差不大，但分具体的工种。

以上的对比，仅仅是一个大牛个人经历的对比，基本上符合大家认知中的国内外区别，但我们也在不断改变，希望短板可以尽快补齐，终有一天我们会和外国程序员面对面坐着喝咖啡或者喝茶。

当前对每个人最重要的是开心工作、保持健康，保住头发、护住绿码。