【我的面试-01】Web前端开发实习岗-面试题总结

简单开头

首先技术面试官会根据简历里所写的项目和个人掌握技术栈提问（我不知道已经改过多少次简历了，因为前期投简历是真的是沉在茫茫大海，捞漂流瓶都捞不到的那种）

我的技术栈：（Vue还在苦苦的自学当中，随便推荐一下coderwhy老师B站的教学视频，真的不错，讲得深入浅出，越听越想听）地址：https://www.bilibili.com/video/BV15741177Eh

熟悉HTML5、CSS3、JavaScript、AJAX

了解Vue、ES6语法、jQuery、Bootstrap

一、CSS

https://www.jianshu.com/p/72156bc03ac1

3、获取DOM元素的方法？?（当时我脑子里只浮现了querySelector，都快忘了最简单的id选择）

  //常用
  document.getElementById(); //ID选择器
  document.querySelector(); //返回匹配指定 CSS 选择器元素的第一个子元素 。
  document.getElementsByClassName(); //类选择器
  document.getElementsByTagName(); //标签选择器

4、基本数据类型？?（我以为他要问null和undefined的区别，预判失败，，，）

null空(注意：typeof null 等于Object)

undefined未定义（和undefined和null的区别经常考）

string字符类型

symbol(数据类型，唯一)

ES10新增bigInt

Number数字类型

boolean布尔类型（差点说漏掉了）

补充引用数据类型：Object对象、Array数组、 function函数、Date日期、RegExp（ Regular expression正则表达式）

5、什么是深拷贝、浅拷贝？怎样实现深拷贝？ ?（这个我还好自己手动敲过几遍代码，还是记得一些基础的方法）

浅拷贝也就是引用数据类型，例如Object对象，赋值对象会随着原对象的改变而改变，因为是两者同时通过一个地址引用同一个存放在堆里的数据。

深拷贝也就是赋值对象不会随着原对象的改变而改变，而是把原对象存在于堆中的引用数据完全复制拷贝一份，并且开辟一个新的空间存放。（怎么突然联想到游戏王贝卡斯的拷贝猫和十代的新空间加班，，，可能是前段时间玩得比较多）

深拷贝的实现方法很多，最简单的就是用JSON.stringfy()和JSON.parse()转换（除开乞丐法还有其他的方法，之后去练习练习）

数组深拷贝的实现方法：注意，一旦数组中存在嵌套，例如数组嵌套数组，数组嵌套对象，这些方法都没用，因为出现了引用数据类型。

//3-1、slice方法-不是真正意义上的深拷贝，因为如果含有二级属性，也就是数组套数组，二级属性的引用还是不会改变
  function test1(){
    let num1 = [1,2,3,4];
    console.log(num1) //打印原数组值
    let num2 = num1.slice();
    num1.push(11);
    console.log(num1); //打印结果
    console.log(num2);
  }
  //3-2、concat方法-因为如果含有二级属性，也就是数组套数组，二级属性的引用还是不会改变
  function test2(){
    let num1 = [1,2,3];
    console.log(num1);
    let num2 = [].concat(num1); //利用空数组连接num1数组
    num1.push(11);
    console.log(num1); //打印结果
    console.log(num2);
  }
  //3-3、ES6中的 ...
  function test3(){
    let arr1 = [1,2,3,4];
    console.log(arr1);
    let arr2 = [...arr1];
    arr1.push(5)
    console.log(arr1);
    console.log(arr2);
  }
  test4();
  //3-4、Array.from方法
  function test4(){
    let arr1 = [1,2,3,4];
    console.log(arr1);
    let arr2 = Array.from(arr1);
    arr1.push(5)
    console.log(arr1);
    console.log(arr2);
  }

五、ES6

https://blog.csdn.net/qq_42492055/article/details/80841331

六、Vue

1、根据标签class属性动态修改样式怎么实现？× （这个被我答错了，但面试官给我指出来，而且详细说明了一下实现方法，面试官人挺好的）
主要是v-bind的结合class属性，可以写成v-bind:class="{active:isActive}"，或者:class="{active:isActive}}"，其中active就是class属性，通过isActive布尔变量来控制active，在CSS中使用类选择器 .active 设置动态样式。

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
    button{
      background: black;
      color: white;
      font-weight: bold;
    }
    .active{
      background: red;
      color: white;
      font-weight: bold;
    }
  style>
head>
<body>
<div id="app">
  <button @click="isClick()" :class="getClasses()">按钮button>
  <h2 class="title" :class="{active:isActive}">233h2>
div>
<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: '您好！',
      status: 'active',
      isActive: false,
    },
    methods: {
      isClick: function (){
        this.isActive=!this.isActive
      },
      getClasses:function (){
        return {active:this.isActive} //返回对象属性
      }
    }
  })
script>
body>
html>

2、Vue的生命周期？?（我一开始有背过这张图，其实也没用，理解才是真理）

创建-挂载-更新-销毁

3、如果操作DOM元素，是在create（创建）阶段还是mount（挂载）阶段？?

挂载阶段

4、父子组件的通信是通过什么传递的？?
父传子：自定义属性props

子传父：自定义事件$emit(）

5、Vue中是怎样阻止事件冒泡的？为什么会产生事件冒泡？?×
vue中阻止点击事件冒泡，在需要阻止的标签中设置属性 @click.stop。

因为DOM结构中，父元素和子元素之间存在着层次关系，当底层事件被触发，就会向上冒泡，直到最上层，这几层的元素都会被触发，但实际开发当中，并不希望出现这种情况。就好比一个div盒子里面放了一个button按钮，一旦button被点击，button和div都会触发点击监听事件。

6、watch、computed函数有了解吗？具体怎么使用?×
watch监听函数：监听单个函数，或者单个对象的数据变化（这个当时我在刷vue的教学视频的时候只练了一次，印象很浅。）

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>
<div id="app">
  <input type="text" v-model="temp">
div>
<script src="./js/vue.js">script>
<script>
  new Vue({
    el: '#app',
    data: {
      temp: ''
    },
    watch: {
      // temp值发生变化,调用该方法
      temp(newValue, oldValue) {
        // newValue: 新值
        // oldValue: 旧值
        console.log('oldValue:',oldValue)
        console.log('newValue:',newValue)
      }
    }
  })
script>
body>
html>

computed计算属性：计算属性会采用缓存机制，在多个重复调用的过程中，减小资源占用。

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>
<div id="app">
  <h2>{{firstName}} {{lastName}}h2> 
  <h2>{{getFullName()}}h2>
  <h2>{{fullName}}h2>
  <h2>{{getFullName()}}h2>
  <h2>{{fullName}}h2>
  <h2>{{getFullName()}}h2>
  <h2>{{fullName}}h2>
div>
<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: '您好！',
      firstName: 'kobe',
      lastName: 'bryant'
    },
    methods: {
      getFullName: function (){
        console.log("---getFUllName---")
        return this.firstName + ' ' + this.lastName
      }
    },
    computed: { //计算属性会采用缓存机制，在多个重复调用的过程中，减小资源占用
      fullName(){
        console.log("---fullName---")
        return this.firstName + ' ' + this.lastName
      }
    }
  })
script>
body>
html>

七、Android（能问到Android就离谱，谁让我有提到大学专业课有这门课，，）

1、Android的屏幕适配有哪些方法？（蚌埠住了，虽然我参加外包比赛时搞过Android的UI设计图，这个平时课程中是真没去碰过，孤陋寡闻了）×

https://www.jianshu.com/p/746fa1ba313c

八、小结
其中?就是答得很顺畅但不知道对错，?×就是回答扭扭捏捏大概率是错的，×基本上是完全没想起来或者不知道。整个面试过程，两个技术面+一个人事，一对三，刚开始有点紧张，进去的时候看见公司的装修环境不错很整洁大方，不但没有缓解紧张反而倒是增加了我的紧张程度，然后在一间小房间里坐着面对面提问这样，不过后来一直回答一直回答就放松了许多。然后面完人事姐姐说两三天会通知结果，个人感觉整个面试过程回答得还是不是很好，有点磕磕巴巴的，某一个知识点面试官一旦深入我就招架不住了，在走回地铁站的路上心想基本无望了。金三银四，我这都快四月中旬了，还没找到实习工作。实在面不过开发岗，我都准备去面测试岗了，很怕找不到实习工作，身边很多同学都开始实习一个月了，很慌，加上论文毕设还在做，，，

在面试完的第二天下午，我当时还在校门口考核站岗，站岗期间我一直在想软件测试的知识和那几个基础算法题，因为感觉昨天面试没什么戏，准备打算去面后端或者测试岗了，站岗过程中，有人打了两个电话，我都没接到，因为站岗不让碰手机，我看到未接的电话记录，这不是我面试的那家公司吗？！然后以期待和忐忑的状态回拨了过去，你好，请问打电话有什么事吗？“您好，请问是XXX吗，通过昨天线下的面试了解到您的基础还是比较扎实什么什么还是比较优秀的”，然后说是要给我发offer，我顿了一会儿才反应过来，着实有点泪流满面了。想想这一个月拿着简历大热天到处跑，熬夜准备面试题，可以说是在徘徊中焦虑在焦虑中恐慌，不过这一切都是值得的，自己要学的东西还有很多很多。

搜索

复制

4、父子组件的通信是通过什么传递的？?
父传子：自定义属性props

子传父：自定义事件$emit(）

5、Vue中是怎样阻止事件冒泡的？为什么会产生事件冒泡？?×
vue中阻止点击事件冒泡，在需要阻止的标签中设置属性 @click.stop。

6、watch、computed函数有了解吗？具体怎么使用?×
watch监听函数：监听单个函数，或者单个对象的数据变化（这个当时我在刷vue的教学视频的时候只练了一次，印象很浅。）
————————————————
版权声明：本文为CSDN博主「RootkitaI」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43906233/article/details/124105240

前端面试

【我的面试-01】Web前端开发实习岗-面试题总结

一、CSS

https://www.jianshu.com/p/72156bc03ac1

3、获取DOM元素的方法？?（当时我脑子里只浮现了querySelector，都快忘了最简单的id选择）

4、基本数据类型？?（我以为他要问null和undefined的区别，预判失败，，，）

5、什么是深拷贝、浅拷贝？怎样实现深拷贝？ ?（这个我还好自己手动敲过几遍代码，还是记得一些基础的方法）

五、ES6

2、Vue的生命周期？?（我一开始有背过这张图，其实也没用，理解才是真理）

3、如果操作DOM元素，是在create（创建）阶段还是mount（挂载）阶段？?

七、Android（能问到Android就离谱，谁让我有提到大学专业课有这门课，，）

相关

web前端面试题

【面试】前端面试题

2016十家公司前端面试小记

h5 前端面试题

前端面试题

前端面试题--CSS篇

美团暑期实习前端面试

前端面试题整理——webpack相关考点

Web前端面试敲重点知识，14个TypeScript核心基础面试题和答案

前端面试准备

2022年前端面试题整理

前端面试题（13）—— 如何实现浏览器内多个标签页之间的通信

标签