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

前言

接上篇前端笔试题面试题记录（上）。趁清明小长假，把上篇剩下的部分也写一下，由于最近比较忙这篇已经拖了好久了。如今刚刚开始银四了，应该仍是有些小伙伴在找工做，时间还不算太晚，但愿本篇能够帮到这些小伙伴。css

我的博客了解一下：obkoro1.comhtml

本文主要目录以下：前端

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

面试题QA

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

let

在同一个做用域里面：var能够重复声明变量，let不能重复声明同一个变量。vue

es5是函数做用域，即一个函数里面才是一个做用域，es6是块级做用域（花括号'{这里面是一个做用域}'），如：if、for花括号里面都是一个做用域。webpack
var有变量提高，能够在变量声明以前使用，let不存在变量提高，在变量以前使用会报错。css3
let 有暂时性死区，阮一峰大佬es6入门文档解释以下： git

const

const的不少特性跟let的特性同样，都有：不可重复声明，不存在变量提高，有暂时性死区，都是块级做用域。es6
还有一些跟let命令不同的地方：const必须在声明的时候赋值，否则就会报错。const声明的常量不能更改。web

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

Q：Css的优先级。

这类也一般出如今笔试题中，具体的题目记不太清了。

权重优先级：
!important>style(1000)>id(100)>class(10)
!important是优先级最高的无论权重多少，始终采起important。
若是两个选择器做用在同一元素上，计算权重值，相加。权重高者属性生效。
（笔试题就出现过层叠的class id选择器，做用在同一个标签上，而后问最后哪一个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 命令