前端笔试题面试题记录（下）

前言

接上篇前端笔试题面试题记录（上）。趁清明小长假，把上篇剩下的部分也写一下，因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了，应该还是有些小伙伴在找工作，时间还不算太晚，希望本篇可以帮到这些小伙伴。

个人博客了解一下：obkoro1.com

---

本文主要目录如下：

• 面试题QA
• 面试遇到的一些小问题
• Vue系列问题

---

面试题QA

Q：了解ES6的let和const变量声明吗？跟ES5的var有哪些区别？

let

• 在同一个作用域里面：var可以重复声明变量，let不能重复声明同一个变量。

  es5是函数作用域，即一个函数里面才是一个作用域，es6是块级作用域（花括号'{这里面是一个作用域}'），如：if、for花括号里面都是一个作用域。

• var有变量提升，可以在变量声明之前使用，let不存在变量提升，在变量之前使用会报错。
• let 有暂时性死区，阮一峰大佬es6入门文档解释如下：

const

• const的很多特性跟let的特性一样，都有：不可重复声明，不存在变量提升，有暂时性死区，都是块级作用域。
• 还有一些跟let命令不一样的地方：const必须在声明的时候赋值，不然就会报错。const声明的常量不能更改。

  这里的常量指的是：数值、字符串、布尔值，对于引用类型（数组和对象），const只能保证指针是固定的，至于数组和对象内部有没有改变就是const不能控制的地方

---

Q：Css的优先级。

这类也通常出现在笔试题中，具体的题目记不太清了。

权重优先级：
!important>style(1000)>id(100)>class(10)
!important是优先级最高的不管权重多少，始终采取important。
如果两个选择器作用在同一元素上，计算权重值，相加。权重高者属性生效。
（笔试题就出现过层叠的class id选择器，作用在同一个标签上，然后问最后哪个css属性生效）

找到一篇很好的写css权重的文章，有兴趣的可以看一下。你应该知道的一些事情——CSS权重

---

Q：继承函数对象的实例方法、原型的继承。

函数对象的继承，在面试的时候，一般出现在笔试题那边，也碰到过几次，下面给出一个答案。

function father(name){//父函数
  this.name=name|'koro1';
  this.code=function(){ //父类的实例方法
    console.log(this.name+'coding');
  }
};
father.prototype.add=function(food){ //父类的原型方法
  console.log(this.name+'eat'+food);
}
function son(name){ //子函数
  father.call(this); //将this绑定到子类，绑定父类的实例方法code（原型方法add还未绑定）
  this.name=name|| 'OBKoro1';
}
son.prototype = new father();//把父类的原型方法绑定到子类，实现继承
var sonVar= new son('faker');//这里也可以传参name
son.prototype.constructor = son;//修复构造函数的指向
console.log(sonVar.code());
console.log(sonVar.add());//可以调用父类的方法了

---

Q:通过reduce函数来实现简单的数组求和，示例数组[3,4,8,0,9];

这是一个简单的笔试题，下面写了两种方法，一种是常见遍历的方法，还有一种是使用eval()方法。

    let reduce=(arr)=>{ //第一种常规遍历。
        let num=0; 
        for(let [index,value] of arr.entries()){
            num+=value;
        }
        return num;
    }
    let reduce=(arr)=>eval(arr.join("+")); //第二种 
    //join() 方法把数组元素放入字符串 上面的栗子： arr.join("+")得到字符串:'3+4+8+0+9';
    // eval() 函数计算字符串 ,并执行其中的的 JavaScript 代码
    //经提醒：原来有一个reduce()数组求和的方法，把这个方法加上去
    let result=[3,4,8,0,9].reduce((total,value)=>{ //这两个参数是默认参数不用设置的
        return total+value
    });

---

Q：call()和apply()有什么区别？

call()和apply()第一个参数将用作函数内 this 的值,用于改变函数的this指向。call和apply的区别在于call()方法接受逗号分隔的参数作为后面的参数，apply()接受一个参数数组作为后面的参数。

从别的博客那边看到一个简单的记忆方法：从call中的 C 联想到逗号分隔（comma-separated），从apply中的 A 联想到数组（array）。

Q：position有哪些值？有什么作用？

• static。默认值，不脱离文档流，top，right，bottom，left等属性不生效。
• relative。不脱离文档流，依据自身位置进行偏离，当子元素设置absolute，将依据它进行偏离。
• absolute。脱离文档流，依据top，right，bottom，left等属性在正常文档流中偏移位置。
• fixed。通过浏览器窗口进行定位，出现滚动条的时候，不会随之滚动。

---

Q:如何实现一个闭包？闭包的作用有哪些？

在一个函数里面嵌套另一个函数，被嵌套的那个函数的作用域是一个闭包。

作用：创建私有变量，减少全局变量，防止变量名污染。可以操作外部作用域的变量，变量不会被浏览器回收，保存变量的值。

---

Q:请从2017-05-15T09:10:23 Europe/Paris提取出结果["2017","05","15","09","10","23"]

这是一道笔试题，正则相关的，看他们要的内容就可以知道，要把所有的数字都提取出来，可以写一个只获取数字的正则表达式。

let str = '2017-05-15T09:10:23 Europe/Paris';
let arr = str.match(  /\d{1,}/g); 
//match会返回一个数组，
// \d 查找数字  
// {1,} 表示至少重复几次 
// /g表示全局搜索

---

Q:请描述一下Promise的使用场景，'Promise'它所解决的问题以及现在对于异步操作的解决方案。

这是一道笔试题，这是我当时的回答。

Promise的使用场景：ajax请求，回调函数，复杂操作判断。

Promise是ES6为了解决异步编程所诞生的。

异步操作解决方案：Promise、Generator、定时器（不知道算不算）、还有ES7的async

---

面试遇到的一些小问题：

这里主要是面试中遇到的一些小的问题，一两句话就可以说清的东西，大家可以稍微看一看。

函数参数变量提升

    function aa(val){  //函数参数的变量也会提升
    console.log(val);//'函数传参'
     var val='变量声明';
     console.log(val);//'变量声明'
}
    aa('函数传参');  

js有哪些方法定义对象？

    var obj=new Object();//new 一个对象
    var obj={name:"OBKoro1"} //对象字面量写法

字符串数字转换运算的问题

      console.log(1+'2'+'2'); //122  
      console.log(+'1'+-'2'+'2');//-12
      console.log('A'+'B'+'2');//AB2
      console.log('A'-'B'+2);//NaN
      //两个都是数字才能相加，否则都是以字符串形式拼接。
      //相减只能两个都是数字，字符串也会转成数字，如果不能转换，值就为NaN

split()、join()的区别？

    split()是将字符分割成一个数组,join()将数组转为一个字符串

pop()push()unshift()shift()的作用？

    pop()删除并返回数组的最后一个元素。
    push()可向数组的末尾添加一个或多个元素，并返回新的长度。
    unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
    shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

判断一个数是否是整数

    function isIntefer(x){
        return x%1===0; //返回布尔
    }

如何将字符串转为数字，如：12.3b？

    var num=parseFloat('12.3b')

什么是外边距合并？

当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

Q:你常用的git/svn 命令行有哪些？行内元素有哪些，块状元素有哪些？css有哪些选择器？

    自行谷歌，类似的还有css3新增的属性，H5新增的属性之类的，有空的话，稍微背一背，都碰到过。

---

Vue系列问题：

我在面试过程中很少被问到框架，很多是在笔试题中碰到的，在介绍自己项目的时候，有时候自己会解释这里用到了Vue的什么技术，这个时候面试官可能就会顺着问一问Vue，总的来说问的也不会太深。

以下是笔试真题：

• vue-router怎么定义动态路由？怎么获取传过来的动态参数？

  定义：path:'a/:value' 获取：this.$route.params.value。

• 说出至少4中vue当中的指令和它的用法。vue文档显示13个指令
• vue如何绑定事件。@click="事件名"

• v-show和v-if指令的共同点和不同点？

  1.v-if是删除/添加Dom标签，不占据文档位置,v-show切换css的display属性，控制显示隐藏，还会占据文档位置。
  2.v-if会删除dom标签所以v-if性能消耗会高一些，需要频繁切换的话，使用v-show会好一点。

• <keep-alive></keep-alice>的作用的是什么？

  `<keep-alive>`是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
  

• 列举三个Vue常用的生命周期钩子函数？Vue文档

• 分别写出webpack打包给服务器和本地开发预览的命令代码:

  npm run build npm run dev  我都觉得很弱智。。

• vue 父子组件是怎么进行传参的？

  父组件传参给子组件通过props，子组件传参给父组件是用事件传递的。细节见文档。

• v-model是用来做什么的，怎么使用。

  用来为input输入框或者单选框、select选择框这类的东西做双向绑定的。
  使用栗子：<input v-model="inputData"/>
  

• Vuex的工作流程，以及它的作用，使用场景。

  vuex的工作流程：
  

  1. 在vue组件里面，通过dispatch来触发actions提交修改数据的操作。
  2. 然后再通过actions的commit来触发mutations来修改数据。
  3. mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。
  4. 最后由store触发每一个调用它的组件的更新

Vuex的作用：项目数据状态的集中管理，复杂组件(如兄弟组件、远房亲戚组件)的数据通信问题。

• vue的服务端渲染
• vue的双向绑定

  两个问题都不会...

---

看完了？点赞支持一下呗，这儿还有一篇，有空可以看看哈：前端笔试题面试题记录（上）。

小结

各位大佬们，找工作也是可以发现自己的薄弱点，然后加强它，白天的时候被某些问题给虐了，然后在晚上的时候，一定要把这些问题弄清楚，不要每次都被同样的问题给虐，这样就不好了。

最后：如需转载，请放上原文链接并署名。码字不易，感谢支持！本人写文章本着交流记录的心态，写的不好之处，不撕逼，但是欢迎指点。然后就是希望看完的朋友点个喜欢，也可以关注一下我。
个人blog and 掘金个人主页

以上2018.4.7

参考链接：

let 和 const 命令