2019前端面试题总结之一

以下题目都是本人经过的一些真实的面试题目。

1. 有哪些方法可以实现垂直居中？

<div class="wrap">
  <div class="box"
</div>

1. 通过定位来实现

<!-- 容器的宽高未知 -->
<style>
  html,
  body,
  .wrap{
    width: 100%;
    height: 100%;
    position:relative
  }
  .box{
    width: 30%;
    height: 30%;
    background: cyan;
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
  }
</style>
<!-- 容器的宽高已知(还可以margin值来修改) -->
<style>
  html,body,
  .wrap{
    position:relative;
    width: 100%;
    height: 100%;
  }
  .box{
    width: 200px;
    height: 200px;
    background: cyan;
    position:absolute;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
  }
</style>

2. 通过flex布局来实现；

<style>
  .wrap{
    width: 100%;
    height: 500px;
    background:skyblue;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
  }
  .box{
    width: 200px;
    height: 200px;
    background:cyan;
  }
</style>

2. Css 各种选择器的优先级规则是什么？

• !important

  当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试

• 内联样式 > id选择器 > class选择器 > 元素选择器

• 利用选择器的权值进行计算比较

  1. 内联样式表的权值最高 1000；
  2. ID 选择器的权值为 100
  3. Class 类选择器的权值为 10
  4. HTML 标签选择器的权值为 1

3. 以下函数的执行结果是什么？（变量）

var a = 'a'
function A(){
  console.log(a)
  let a = "b"
  console.log(a)
}
A()

// 打印结果为报错
// Cannot access 'a' before initialization 初始化前无法访问 ‘a'
// 涉及到的知识点是变量提升，let和const 是块级作用域况且变量无法提升。var是函数级作用域，可以变脸提升。
// 单纯的第二个结果可以输出 ’b‘

4. 以下函数的执行结果是什么？（this）

var obj = {
  name: 'obj',
  hello(){
    console.log(this.name)
  }
}
var h = obj.hello;
h()

// 执行结果为 空
// 因为是window调用的 h 函数，故所以this的指向绑定在window上面。而window.name，打印出来为空。

• 变形

var obj = {
  name: 'obj',
  hi() {
    return () => {
      console.log(this.name)
    }
  }
}
var h2 = obj.hi()
h2()
obj.hi().call(obj,window)

// 打印结果都为 obj
// 箭头函数吧this绑定在obj上，与执行环境无关
// .call 改变this指向，第一个参数为指向的对象。

5. 请写一个闭包。

// 引用的网上的例子，貌似是廖雪峰老师讲的，忘记了
function f1(){
  var n=999;
  nAdd=function(){n+=1}
  function f2(){
    alert(n);
  }
  return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
/**
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
**/

6. 请把下面的数组扁平化。再去重。

var arr = [true, true, [{}, [2, [3, [4, 3], 2]]]]

1. 通过reduce 和递归 扁平化

function flatten1(arr) {
  return arr.reduce((result,cur) => {
    return result.concat(Array.isArray(cur) ? flatten(cur) : cur)
  }, [])
}
console.log(flatten1(arr))

2. toString || join & split----(注意这种方式只能针对数字的扁平化，此例子不适合) 去重

function flatten2(arr) {
  return arr.toString().split(',').map(item => Number(item))
}
console.log(flatten2(arr))
function flatten3(arr) {
  return arr.join(',').split(',').map(item => parseInt(item))
}
console.log(flatten3(arr)

3. 递归 扁平化

function flatten4(arr) {
  var res = []
  arr.map(item => {
    if(Array.isArray(item)){
      res = res.concat(flatten4(item))
    }else{
      res.push(item)
    }
  })
  return res
}
console.log(flatten4(arr))

4. 运用扩展运算符 扁平化

function flatten5(arr) {
  while(arr.some(item => Array.isArray(item))){
    arr = [].concat(...arr) 
  }
  return arr
}
console.log(flatten5(arr))

去重的核心就是：遍历数组arr，若arr[i]为数组则递归遍历，直至arr[i]不为数组然后与之前的结果concat。

const newArr = flatten5(arr)

1. 运用 filter 和 indexOf 操作 去重

function distinct1(arr) {
  return arr.filter((item,index) => {
    return arr.indexOf(item) === index
  })
}
console.log(distinct1(newArr))

2. For…of… & includes() 去重

function distinct2(arr) {
  let res = []
  for (let i of arr){
    !res.includes(i) && res.push(i)
  }
  return res
}
console.log(distinct2(newArr))

3. new Set() 去重 （次推）

function distinct3(arr) {
  return Array.from(new Set(arr))
}
console.log(distinct3(newArr))

4. for…of + Object （网友测试耗时最短的一种方法）（主推）

function distinct4(arr) {
  let res = []
  let obj = {}
  for (let i of arr){
    if(!obj[i]){
      res.push(i)
      obj[i] = 1
    }
  }
  return res
}
console.log(distinct4(newArr))

7. 提取一下字符串中的所有数字 （正则）

var str = 'today is 2019-07-18'

console.log(str.replace(/\D/ig,''))
console.log(str.replace(/[^0-9]/ig,''))

8. 以下函数执行的结果是啥？(promise)

function A() {
  let a = Math.floor(Math.random() * 10)
  if(a > 5){
    return Promise.resolve('a')
  }else{
    return Promise.reject('b')
  }
}
A().then(m => {
  console.log(m)
},n => {
  console.log(n)
})

// 执行结果为随机打印

9. 有一个obj空对象，给该对象添加侦听器，当用户给波及设置name的时候，打印用户给obj设置的name值。

比如 var obj = {}。给该对象添加侦听器后，当我设置obj.name = 'a'的时候，控制台打印 ‘a’。

const obj = {}
let val = ''
Object.defineProperty(obj,'name',{
  get:function(){
    return val
  },
  set:function(newVal){
    val = newVal
    if(newVal === 'a'){
      console.log(newVal)
    }
  }
})

10. 如何修改 state 的 name 值 （vuex）

var store = {
  state: {
    name: 'a'
  }
}

通过mutations来修改state的值。

更改store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。

以上是经过参考很多同行分享与官方文档，汇总的一份总结，如有不对，请指出，最后感谢大家观看，求点赞，求分享，求评论，求打赏~~