前端面试总结----公司篇（三）

是的，由于疫情原因我又一次面临失业找工作…虽然有点不知所措，但起码有了点经验，话不多说，先来点总结补补吧~~

华为公司(电话面试，大约40分钟左右)

真的很紧张，所以我只能想起部分问题了，大家尽量看吧[/手动捂脸]。。。

1.js的数据类型

5种基本数据类型：String类型、Number类型、Boolean类型、Null、Undefined。
2种引用数据类型：Object、Array、Function

2.说说基本数据类型和引用数据类型

基本数据类型：保存在栈内存中的简单数据段，可以直接操作保存在变量中的实际值；
引用数据类型：保存在堆内存中的对象，意思是，变量中保存的实际上只是一个指针，这个指针指向内存堆中实际的值

简单分析一下什么是栈和堆（与其让面试官问你还不如你自己主动说）

栈内存和堆内存是js引擎变量的存储主要的两种位置，如下图：

栈：主要存储基本类型的变量；先进后出，会自动分配内存空间，会自动释放；存在栈中的数据可以共享；
堆：存储对象Object引用类型的变量；队列优先,先进先出，动态分配的内存，不会自动释放，存放的变量实际保存的是一个指针，这个指针指向另一个位置，每个空间大小不一样。

▲ 判断数据类型的方法

1) typeof 
2) instanceof
3) Object.prototype.toString.call([])      //[Object Array]

3.什么是浅拷贝和深拷贝？

浅拷贝：当B复制A时，改变A，B发生改变就是浅拷贝
深拷贝：当B复制A是，改变A，B不发生改变就是深拷贝（本身是针对引用数据类型）

基本数据类型–名字和值都存在栈内存中，B复制A时，会在栈内存中重新开辟一个内存B，此时改变A后B并不会发生改变；

引用数据类型，名字存在栈内存中，值存在于堆内存中，B复制A时，只是增加了一个引用的地址指向堆内存中的值，此时改变A后B也会发生改变

实现深拷贝的方法

function deepClone(obj){
   let objClone = Array.isArray(obj)?[]:{};
   if(obj && typeof obj==="object"){
       for(key in obj){
           if(obj.hasOwnProperty(key)){
               //判断ojb子元素是否为对象，如果是，递归复制
               if(obj[key]&&typeof obj[key] ==="object"){
                   objClone[key] = deepClone(obj[key]);
               }else{
                   //如果不是，简单复制
                   objClone[key] = obj[key];
               }
           }
       }
   }
   return objClone;
}    
let a=[1,2,3,4],
   b=deepClone(a);
a[0]=2;
console.log(a,b);

4.js的数据结构

点击查看大佬详细的文章解析

数据结构是计算机存储、组织数据的方式。数据结构意味着接口或封装：一个数据结构可被视为两个函数之间的接口，或者是由数据类型联合组成的存储内容的访问方法封装。
常用8种数据结构：数组（Array）、栈（Stack）、队列（Queue）、链表（Linked List）、树（Tree）、图（Graph）、堆（Heap）、散列表（Hash）

5.vue 如何创建和使用组件？

组件：可以说vue的所有页面就是组件。

创建一个组件就相当于写一个单个页面，将所有共有的模块抽取出来放入此页面中。

使用组件分三步：
（1）导入组件：import xxx from ‘./xx/xxx.vue’
（2）挂载组件：components: { xxx }
（3）使用组件：<xxx></xxx>

6.vue 计算属性和watch监听器有什么区别？

1.计算属性变量在computed中定义，属性监听在data中定义。
2.计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。

应用场景：

computed ：一般是计算一个属性，这个属性受多个数据影响，适用于计算或者格式化数据的场景
（栗子：购物车中根据数量计算总金额）

watch：一般是监听一个数据，从而影响多个数据，适用于与事件和交互有关的场景，数据变化为条件，适用于一个数据同时触发多个事物
（栗子：购物车中商品数量限制）

一般使用computed,但是如果需要异步，或者数据开销太大的情况下，使用watch

7.vue 如何创建自定义指令？

（1）在directives.js文件中使用Vue创建全局指令

  // 创建一个自定义指令v-mycolor设置字体颜色
  Vue.directive('mycolor', {
  // 钩子函数
    inserted(el, binding) {
      // binding.value获取到的是传递到自定义指令中属性的值
      el.style.color = binding.value
    }
  })

（2）main.js中引入指令文件

import '@/directive.js'

（3） 页面中使用自定义指令

<div v-mycolor></div>

8.vue 提高性能的方法（例如：如果有100个按钮，如何控制按钮的颜色）？

9中优化方法，点击查看详情

控制多个按钮颜色的方法：自定义指令

 Vue.directive('changecolor' ,  function(el , binding , vnoe){
    // el:指绑定的元素 , 可以用来直接操作DOMc
      console.log(el) ; // 绑定的元素
      // binding : 一个对象 ， 包含指令的很多信息(包含着vue构造器中 data 的数据 )
      console.log(binding)
      console.log(binding.name) ; //自定义指令的名字  v-changecolor
      console.log(binding.value) ; //指令注册在构造器中的值
      el.style = 'color:' + binding.value ; 
  }) 

9.vue 插槽slot怎么使用？

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签

举个栗子：
子组件：

<div>
	<div>我是一个</div>
	<slot></slot>
</div>

父组件：

<div>
	<h3>你是做什么的？</h3>	
	<child>
		<div>演员</div>	
	</child>
</div>

插槽还有几种分类，点击查看官网详情

10.vue v-for是什么？key有什么作用？

v-for指令可以绑定数组的数据来渲染一个项目列表。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

:key 唯一标识的目的就是为了保证该组件的唯一性 点击查看大佬详细解析

11.vue 组件之间的传值有哪些以及如何传值？（父子组件举例）

这个问题很容易被问到哦，我已经记录很多次了，这里就不详细说了，请大家移步下面链接看详情吧~~
父子组件传值和兄弟组件传值，点击查看详情

12.vue 路由的原理是什么？

13.vue 页面跳转的形式以及页面如何传值和接收值？

（1）router-link
传参时需注意：使用query传参，路由必须由path引入；使用params传参，路由必须由name引入

<router-link to='/login'></router-link>

query传参：

<router-link :to="{path: '/login', query: {id: 1, name: '张三'}}"

query接收：

this.$route.query.name

params传参：

<router-link :to="{name: 'login', params: {id: 1, name: '张三'}}"

params接收：

this.$route.params.name

（2）this.$router.push()

<div @click="handleEvent"></div>

handleEvent() {
	this.$router.push("/login")	
}

query传参：

this.$router.path({
	path: '/login',
	query: {
		username: "张三"	
	}	
})

query接收：

this.$route.query.username

params传参：

this.$router.path({
	name: 'login',
	params: {
		username: "张三"	
	}	
})

params接收：

this.$route.params.username

（3）this.$router.go(1)

<button @click="upPage">上一页</button>
<button @click="downPage">下一页</button>

// 后退一步
upPage() {
	this.$router.go(-1)
}
// 前进一步
downPage() {
	this.$router.go(1)
}

14.vue 全局守卫是什么？怎么使用？

router.beforeEach((to, from, next) => {})
回调函数中的参数：
to：进入到哪个路由去，
from：从哪个路由离开，
next：函数，决定是否展示你要看到的路由页面

在router.js设置所有页面的路由后添加全局守卫：

router.beforeEach((to, from, next) => {
  const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
  let isLogin = global.isLogin;  // 是否登录，一般从storage中读取
  // 未登录状态；当路由到nextRoute指定页时，跳转至login
  if (nextRoute.indexOf(to.name) >= 0) {  
    if (!isLogin) {
      console.log('what fuck');
      router.push({ name: 'login' })
    }
  }
  // 已登录状态；当路由到login时，如果已经登录过，则跳转至home
  if (to.name === 'login') {
    if (isLogin) {
      router.push({ name: 'home' });
    }
  }
  next();	
})

15.vue 创建对象的方法有哪些？

16.vue class创建类？

17.vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
五种属性是Getter，State，Mutations，Action，Module。

其数据流向：

18.面向对象有哪三个特性？

封装、继承、多态

19.面向对象和面向过程的区别？

20.会用jQuery吗？

点击查看jQuery相关面试题

---------------------------------------------------分割线------------------------------------------------------

中软国际（电话面试，10分钟左右）

过程很尴尬，哎，捡几个有意义的问题吧[/手动哭泣]…

1.浏览器输入一个网址到页面显示经历的过程

1) 输入网址
2) 缓存解析：浏览器检查是否有缓存（游览器缓存-系统缓存-路由器缓存），有就显示，否则跳到第三步
3) 域名解析：又叫DNS解析，由DNS服务器解析获取ip地址
4) tcp连接，三次握手：浏览器向服务器发起了http请求，tcp连接，三次握手建立tcp连接，请求数据包
5) 服务器收到请求：服务器收到浏览器发送的请求信息，返回一个响应头和一个响应体
6) 页面渲染：浏览器收到服务器发送的响应头和响应体，进行客户端渲染，生成Dom树、解析css样式、js交互

2.tcp连接的三次握手

第一次握手：建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认； 
SYN：同步序列编号(Synchronize Sequence Numbers)
第二次握手：服务器收到syn包,必须确认客户的SYN（ack=j+1）,同时自己也发送一个SYN包（syn=k）,即SYN+ACK包,此时服务器进入SYN_RECV状态； 
第三次握手：客户端收到服务器的SYN＋ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手.

完成三次握手,客户端与服务器开始传送数据

3.箭头函数和普通函数

箭头函数

let fun = () => {
	console.log('aaa')
}

普通函数

function fun() {
	console.log('aaa')
}

区别：

(1) 箭头函数是匿名函数，不能作为构造函数，不能使用new
(2) 箭头函数不绑定arguments，取而代之用rest参数...解决
(3) 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
(4) 箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
(5) 箭头函数没有原型属性
(6) 箭头函数不能当做Generator函数,不能使用yield关键字

4.对ajax有什么了解么？

点击查看ajax相关面试题

5.浏览器的一些兼容性问题

6.前端有哪些优化性能的方法？

7.ES6有哪些新特性？

经常使用到的：

（1）变量声明:由var变为let和const;
（2）在ES6中用...来表示展开运算符,它可以将数组或者对象进行展开；
（3）箭头函数:函数的快捷写法,不需要通过function关键字创建函数,并且可以省略return关键字。
但函数体内的this对象指的是定义时所在的对象,而不是使用时所在的对象。

8.了解anglar吗？

9.项目中有哪些困难的地方？

事实回答，但记得一定要说明自己是如何解决的！！！

---------------------------------------------------分割线------------------------------------------------------

科蓝软件公司（现场面试，大约30分钟）

1.怎么实现点击父组件的按钮执行子组件上的方法？

这是不能实现的，父子组件只能做到传值，无法实现执行方法。

2.一个盒模型垂直居中的方法

3.求下列输出结果：

fun(o) {
	o.name = "张三"
}
var obj = {"name":"李四"}
fun(obj)
console.log(obj.name)

输出结果为：张三
原因是在js中，每个function传入的参数都是实参，即实际值，而并非形参，此时传入的{"name":"李四"}在方法体中被改变了属性值，所以最后输出的也是改变后的值。

4.是否可以对const定义的对象进行曾删改查等操作？

const obj = {"name":"张三"}

obj.name = "李四"
obj.age = 20

对const定义的对象是可以做任何操作的，只是obj的指向永远是{"name":"张三"}而已，对此对象的任何操作都不能改变obj的指向。

5.js的基本数据类型，es6新增数据类型

es6新增 Symbol 类型 ，不常用

6.兄弟组件传值方法（第三种方法：vuex）

7.vue路由的模式，原理是什么？

模式有两种：hash和history

8.router和route的区别

（router是一个对象，route是该对象的一个方法，比如获取参数等）

9.生命周期函数有哪些？

（data在created中获取到，DOM在mounted中获取到）

10.i++和++i有什么区别？

i++：先使用后加
++i：先加后使用

var a = 1;
a++;
console.log(a); // 1

var b = 1;
++b;
console.log(b); // 2

11.深拷贝和浅拷贝

12.v-if和v-show的区别？分别在什么时候使用？

v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

13.vuex有什么特点？

14.js中有哪些数据可以转换为Boolean类型

15.字符串转为数值型的方法

显示转换：

parseInt()
number()

隐式转换：

"4"/1
+ "4"
"4" - 0

16.往数组中插入元素的方法

// 方法一
var arr = [1,2,4]
arr.splice(2,0,3)

// 方法二
var arr2 = [1,2,3,5]
Array.prototype.insert = function (index, item) {
  this.splice(index, 0, item);
}
arr2.insert(3,4)
// 方法三（复杂不推荐）
var arr = [1,2,4]
var arr1 = arr.slice(0，2)
var arr2 = arr.slice(2)
arr = arr1.push(3).concat(arr2)

本次总结到这里就结束了，以上有些问题没有写答案，就请各位同学自行百度查找答案吧，欢迎各位提意见，相互交流哦~~