前端面试总结：视频会议面试

2021.7.16 视频会议面试

首先问了一些js和es6的一些基础

1.如何去除字符串两边的空格：

答：就是String.trim();

2.如何去除数组中间的空值

答：我的回答是通过filter，把不满足的筛选出去。ArrayObject.filter(item => item); 返回一个新数组。filter 条件为true则返回，如果数组中有0，再加一个判断。

3.一个数组对象，每个对象中有一个number类型的字段，如何将数组中每一个对象中的这一个字段累乘并返回值，有什么好方法。

答：我开始回答是通过map取到属性值的集合，然后再处理这个集合。聊着聊着，想起了 reduce累加，回调函数的第一个参数是上一次的计算结果
累乘：

let sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) => accumulator * currentValue.x
    ,1
);

扩展1.累加

let sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    ,0
);

扩展2.二维数组变一维数组

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
 ( acc, cur ) => acc.concat(cur),
 []
);
// [0, 1, 2, 3, 4, 5]

扩展3.计算数组中每个元素出现的次数

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

4.删除最后一个数组元素：

答：Array.pop();
扩展：

push()   在数组的末尾添加一个或多个元素 返回数组新长度

pop()   移除数组的最后一项，返回移除的项

shift()  移除数组的第一项，返回移除项

unshift()  在数组的第一项前面添加一个或多个元素，返回数组的长度

5.问了 let const 和var的区别

我的回答比较简单，let 和const是块级作用域不存在变量提升，var 存在变量提升。
然后就掉坑里了，面试官说，let和const是存在变量提升的，只不过存在一个暂时行的死区，当时没怎么明白。之后查阅文档如下：
官方是这么说的
ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
什么是暂时性死区呢？
官方说法：
只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）
我的理解：
js在预编译的时候会变量声明（包括let和const?）和函数声明提升，但是let和const存在暂时性死区，所以在声明前调用依旧会报错。是不是这样的？请大家留言

6. 之前提到过for…of, 那么他可以遍历那些结构的数据呢？为什么？

for…of可以遍历 String,Object,Array,Map,Set，类数组结构（dom），等实现迭代器的数据结构。
这个地方好像回答的挺对啊，其实差很多。考察点有两个，for…of可以用于什么数据结构的遍历，再有就是遍历器（Iterator）的考察。
官方答案：有点多看这里

ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）

只要具备原生 Iterator 接口的数据结构都可以使用for…of遍历。

Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象

下面的例子是数组的Symbol.iterator属性。

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();
iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

接下来问了 vue一些问题

7. vue.use()使用过么？

这肯定用过啊，只要开发中用过别人的组件，都会使用Vue.use(xxx)。接下来不知道怎么说了
官方解释：
安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。什么意思呢？ Vue.use() 中的参数必须是一个function函数或者是一个Object对象，如果是对象的话，必须在对象中提供一个install方法。之后会将 Vue 作为参数传入
那么 Vue.use(xxx),干了什么呢， 其实就是调用里面的install方法，也就是执行xxx.install();
例如：

import HelloWorld from '@/components/HelloWorld.vue'
export default {
  install: function (Vue) {
    // 这里的Vue就是你调用install方法时传递过来的
    // 可以在Vue原型中加一些东西
    Vue.prototype.$num = 123
    // 注册全局组件
    Vue.component(HelloWorld.name, HelloWorld)
  }
}

这里边可以看我的前面的文章：npm 发布公共组件库项目结构以及index.js 配置问题

8.VueRouter 在使用么，如何传递参数呢？

直接回答通过params

this.$router.push({
        name: `TestVueRouterTo`,
        params: {
          page: '1', code: '8989'
        }
      })
// 取值
this.$route.params.page

接下来面试官直接追问，params传参有什么弊端呢？
回答：刷新页面参数会消失。
紧接着那么还可以通过什么方式传参呢？
我记得好像是有一个query。怎么写忘记了。很着急然后就没回答。

补课：
query传参会把参数暴露在url上，不安全。写法上与params一致

this.$router.push({
   name: `TestVueRouterTo`,
　　　　　// 只是把query改了，其他都没变
   query: {
     page: '1', code: '8989'
   }
 })
 this.$route.query.page

还可以这样传：to

<router-link v-bind:to="{name:'xxx',params:{key:value}}"></router-link>

在定义路由的时候通过props，这种传参和query一样参数会出现在 url上

const router = new VueRouter({
  routes: [
    {
      path: '/search',
      component: SearchUser,
      props: route => ({ query: route.query.q })
    }
  ]
})

9.组件间传值都有那些方法：

props，emit，eventbus，inject-provide，vuex等

紧接着问到了vuex，vuex的工作流程？
首先在组件中，通过this.$store.dispatch(“actionName”, value);然后再Action中 通过conmit通知mutation去修改state的值。直接过。。。
然后问我有什么项要问的。。。。就在这里写了。
然后基本就是这样，没有再往下问了。最后告知第二天进行当场面试。
但是很遗憾，和hr聊的过程中，hr说漏嘴了，他们招的长期外派，这我就不干了。本人最不接受的就是外派驻场。