一、前言：

本着试一试的想法，在众多大牛学长们灌输的前端实习越早越好的观念，大二下期的我，开始了投递自己的简历，boss直聘上投了60多家，沟通的有10个，邀请我去面试的只有两家，本章就是我去面试的经历与讲解，如果你最近也在面试，那我认为这篇文章可能会对你有所帮助

本次面试的流程，与我的面试情况

首先，面试题如下：

1.说一说防抖和节流，有什么应用场景

2.ajax的实现原理，有什么特性，优缺点，怎么解决跨域问题

3.for each函数的实现原理，跟for有什么区别

4.实现一条0.5px的线

5.写一个函数，实现将字符串前后的空格除去

6.为什么.vue2响应式使用Object.defineProperty() 而vue3使用proxy代理

7.vue中的双向数据绑定与微信小程序的双向数据绑定的区别

感觉题目还是比较基础的，但是我对于第三个for each的实现上没有去了解过，然后最后一个微信小程序的双向绑定也没有了解过，其他都答的还不错。

我的面试过程还是比较曲折的，吐槽一下成都孵化园，我找e座找了半天，原来在某家火锅旁边，怎么那么多超市火锅什么的在那里啊

二、分析本次面试

我的评价是大二有实力的兄弟最好投大厂，普通小厂基本上只要时间充足，马上就能来上班的那种

上述面试题的解决方案如下：

1.防抖和节流：

防抖：应用场景主要在我们搜索框的输入上面，当我们多次打字输入的时候，每一次他都促发了对应的函数，而防抖要做的就是每一次触发只执行最后一次（定时器规定时间内）

 // 防抖是在多次点击中，只执行最后一次，前面的点击都会被取消
 function debounce(fn, del) {
     let timer = null;
 
     return function () {
         clearTimeout(timer); //清楚定时器
         let context = this;
         let args = arguments;
 
         timer = setTimeout(function () {
             fn.apply(context, args);
         }, del);
     }
 }

节流： 应用场景主要是浏览器的滚动，函数完成前的重复多次点击当中，只执行第一次点击，在第一次点击完成前，后面的点击都会无效

 function throttle(fn, del){
     let last=0;
     return function(){
         let now=Date.now();
         if(now-last>del){
             fn.apply(this, arguments);
             last=now;
         }
     }
 }

2.1 Ajax实现原理与特性还有缺点：

我在面试中是这样子回答的：ajax主要用来发送请求，他的特性是异步刷新，也就意味着你某个地方获取后端数据呈现后，不会让整个页面跟着刷新，他的核心机制是XMLHttpReques。

缺点就是会受同源策略的影响，不能跨域请求。

回答的还是比较简陋，很多地方没有说清楚，下面是正紧回答：

原理 Ajax的原理简单来说通过 XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是JavaScript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果

特性: 在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来

应用场景： 常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。

2.2 如何解决跨域问题

跨域问题是啥？

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。 同源策略,是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。 跨域原理，即是通过各种方式，避开浏览器的安全限制。

方案1，JSONP:

ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。

步骤：

去创建一个script标签
script的src属性设置接口地址
接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
通过定义函数名去接受返回的数据

缺点：JSON 只支持 get，因为 script 标签只能使用 get 请求； JSONP 需要后端配合返回指定格式的数据

方案2，配置代理：

像vue或react这种脚手架，跨域通过配置代理来解决

方案3，让后端在请求头上加信息什么的

3.for each的实现原理，与for有什么区别：

 Array.prototype.newForEach = function(fn) {
     let i
     for(i=0; i<this.length; i++){
        if(i in this){ 
           fn(this[i], i)
        }
     }      
 }

其实还是用了for，前者其实算是后者的语法糖

foreach与for循环的明显差别在于foreach循环时循环对象（数组、集合）被锁定，不能对循环对象中的内容进行增删改操作。

后来我又问了chatgpt这个问题，它是这么回答的：

在 JavaScript 中，forEach 是数组对象提供的一个方法，可以对数组中的每个元素执行指定的回调函数。

forEach 的实现原理是通过循环遍历数组中的每个元素，然后依次执行传入的回调函数。与 for 循环相比，forEach 方法更加简洁明了，并且不需要手动管理循环计数器和索引变量等细节。

另外，与普通的 for 循环不同，forEach 方法无法中途跳出循环，也无法使用 break 或 return 关键字来实现跳过某些元素的操作。如果需要在遍历过程中实现特殊的控制流程，建议使用普通的 for 循环或者其他的循环语句

4.实现一条0.5px的线：

 <body>
     <div class="line">
     </div>
 </body>
 <style>
     *{
         margin: 0;
         padding: 0;
     }
 .line{
     margin-top: 30px;
     width: 100%;
     height: 0.5px;
     background-color: #9c118c;
 }
 </style>

效果如下图： 图片.png

5.写一个函数，字符串前后的空格除去：

 // 方法1 正则校验
 let str =' xiao ming '
 const newStr = (str)=>{
     let reg=/^\s+|\s+$/g;
     return str.replace(reg, '');
 }
   let ans1=newStr(str);
   console.log(ans1); //'xiao ming'

 // 方法2 直接用trim函数
 const trim = (str) =>{
     return str.trim();
   }
 let ans2=trim(str);
 console.log(ans2); //'xiao ming'

菜鸟教程：$.trim() 函数用于去除字符串两端的空白字符。

6.VUE2与VUE3响应式的区别：

详情可以看我的这一篇文章

7.vue中的双向数据绑定与微信小程序中的区别

在面试之前我只对vue中的有过了解，而微信小程序中的双向数据绑定，我回来后就问了下chatgpt

下面是chatgpt的答案

1.Vue 中的双向数据绑定是通过 v-model 实现的，它可以实现数据的双向绑定，即当用户在输入框中输入内容时，数据模型中的值也会随之改变；反之，当数据模型中的值发生变化时，输入框中展示的值也会自动更新。

2.微信小程序中的双向数据绑定与 Vue 中略有不同。在小程序中，需要使用 bindinput 事件和 value 属性来实现双向数据绑定。当用户在输入框中输入内容时，bindinput 事件会触发并将输入框中的值传递给相应的数据模型属性；当数据模型属性发生变化时，对应的 value 属性也会自动更新。

3.因此，在 Vue 中实现双向数据绑定更加简单明了，而在微信小程序中则需要手动处理 bindinput 事件和 value 属性的关系。

Chatgpt神中神，用来辅助开发是真的爽

End：

感谢你的观看，本人也只是个大二的学生，如果有问题请指正，如果你觉得这篇文章对你有帮助，请点赞收藏。

有大佬路过的话，希望可以分享一下面试经验这些，谢谢啦！

大二软件工程学生的第一次web面试