2020年6月最新前端面试真题（js经典基础、vue、微信小程序、ES6附招聘）

2020年注定是不同寻常的一年，相信大部分程序员也和我一样，不能按时返回工作的城市，不能按时复工，都说金三银四，但是同样的竞争压力也很大，如果自身够强大，一年365天都是金色的 ！！
最近疫情危机有所缓解，很多公司也都正常运转，招聘工作也开始启动，大家肯定也都蠢蠢欲动了。
我整理的点都是前中级程序员必会的，如果你都掌握了，相信你肯定可以找到一份满意的工作，如果对你的面试过程有帮助，记得回来点赞哦 ！！！

ES6

1. let 和 const

相同点：作用域——只在声明所在的块级作用域内有效。且不存在变量提升
不同点：let 所声明的变量，可以改变，const 声明一个只读的常量，不可改变

2. 解构赋值

2.1 数组

一次性声明多个变量：

let [a, b, c] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

结合扩展运算符：

let [head, ...tail] = [1, 2, 3, 4];
console.log(head) // 1
console.log(tail) // [2, 3, 4]

2.2 对象

数组中，变量的取值由它 排列的位置 决定；而对象中，变量必须与 属性 同名，才能取到正确的值。

let { a, b } = { a: "aaa", b: "bbb" };
a // "aaa"
b // "bbb"

2.3 字符串

const [a, b, c, d, e] = 'apple';
a // "a"
b // "p"
c // "p"
d // "l"
e // "e"

3. 箭头函数

ES6 允许使用“箭头”（=>）定义函数。

const f = v => v;
console.log('输出值:', f(100)) // 输出值: 100
// 等同于
const f = function (v) {
  return v;
};

箭头函数最直观的三个特点：
不需要 function 关键字来创建函数
省略 return 关键字
继承当前上下文的 this 关键字

4. 数组的扩展

扩展运算符是三个点（…）

4.1 数组合并

const arrA = ['a','b','c'],
const arrB = ['d'],
const arrC = ['e','f'],
// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e','f ]

// ES6 的合并数组 !!!!!
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e','f ]

4.2 函数调用

function add(x, y) {
  return x + y;
}

const numbers = [1, 2];
add(...numbers) // 3

4.3 字符串转数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

5. 对象的扩展

5.1 合并对象

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

6. async 和 await

async 和 await 用了同步的方式去做异步，async 定义的函数的返回值都是 promise，await 后面的函数会先执行一遍，然后就会跳出整个 async 函数来执行后面js栈的代码
注：两者需同时使用

VUE

vue应该是现在大部分公司选用的框架了 学习成本较低 网上轮子也很多 掌握下面几个知识点，面试应该不成问题！！！

1. vue 的生命周期

创建：

beforeCreate： 是获取不到data中的数据的，因为数据的初始化在initState中
created：可以访问数据，但组件还没有被挂载，所以看不到

载入：

beforeMount: 创建虚拟Dom
mounted：将虚拟Dom渲染为真实Dom,并渲染数据

更新：

beforeUpdate：数据更新前
updated：更新后

销毁：

beforeDestory：适合移除事件，定时器等，否则可能引起内存泄漏
destoryed：当我们离开这个页面的时候，便会调用这个函数

2. 说出至少 4 种 vue 当中的指令和它的用法

 v-if(判断是否隐藏)
 v-for(把数据遍历出来)
 v-bind(绑定属性)
 v-model(实现双向绑定)

3. v-if 和 v-show 的区别

相同点：都可以动态控制着dom元素的显示隐藏
区别：
v-if 的显示隐藏是将DOM元素整个添加或删除
v-show 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的

4. vue组件的调用传值

4.1 父传子

可以使用props向子组件传递数据
在调用组件的时候，使用 v-bind进行绑定

4.2 子传父

子组件可以使用 $emit 触发父组件的自定义事件

4.3 子传子

Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件
为了便于开发，Vue 推出了一个状态管理工具 Vuex，可以很方便实现组件之间的参数传递

5. vue-router有哪几种导航钩子？

1、全局守卫： router.beforeEach
2、全局解析守卫： router.beforeResolve
3、全局后置钩子： router.afterEach
4、路由独享的守卫： beforeEnter
5、组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

6. Vue的双向数据绑定原理是什么？

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

微信小程序

1. bindtap和catchtap的区别是什么？

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

2. 微信小程序组件的生命周期？

onLoad( )：页面加载时触发，只会调用一次，可获取当前页面路径中的参数
onShow( )：页面显示/切换前台时触发，一般用来发送数据请求
onReady( )：页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互
onHide( )：页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等
onUnload( )：页面卸载时触发，如redirectTo或navigateBack到其他页面时。

3. 小程序页面间有哪些传递数据的方法

3.1使用全局变量实现数据传递

在 app.js 文件中定义全局变量 globalData， 将需要存储的信息存放在里面

// app.js

App({
     // 全局变量
  globalData: {
    userInfo: null
  }
})

使用的时候，直接使用 getApp().userInfo 拿到存储的信息

3.2 借用 wx.navigateTo 与 wx.redirectTo 传参

//pageA.js

// Navigate
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

// Redirect
wx.redirectTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})


// pageB.js
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender)
    this.setData({
      option: option
    })
  }
})

3.3本地缓存 Storage 相关

wx.getStorage({
  key: 'key',
  success (res) {
    console.log(res.data)
  }
})
wx.getStorageInfo({
  success (res) {
    console.log(res.keys)
    console.log(res.currentSize)
    console.log(res.limitSize)
  }
})

4. 组件中方法的调用

4.1 子组件调用父组件中的方法

子组件 js

var value = 123;
this.triggerEvent('callSomeFun', value)

父组件 wxml

<component bind:callSomeFun="functionA"></component>

父组件 js

functionA(e){
	console.log('我被子组件调用了')
}

triggerEvent 方法详解

4.2 父组件调用字组件中的方法

子组件 js

functionB{
	console.log('我被父组件调用了')
}

父组件 wxml

<component id='test'></component>

父组件 js

this test= this.selectComponent("#test")
//调用方法
this test.functionB()

JS基础面试题

1.闭包的概念？优缺点？

优点：
1.避免全局变量的污染
2.希望一个变量长期存储在内存中（缓存变量）

缺点：
1.内存泄露（消耗）
2.常驻内存，增加内存使用量）

2.例举3种强制类型转换和2种隐式类型转换?

强制：parseInt,parseFloat,number
隐式：==,===

3.split()和join() 的区别

split：是将字符串切割成数组的形式
join：是将数组转换成字符串

4.== 和 === 的不同

==：会自动转换类型，然后再去比较
===：不转换类型之间去比较

PS:招聘前端程序员，如果有意向在天津（西青区）工作的小伙伴请留言或者私信哦 ！！