2019前端面试题总结之一

小灰灰 2023-10-11 12:26 29阅读 0赞

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

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

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>
    
    <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>

1.  通过flex布局来实现；

#### 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))

1.  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)

1.  递归 扁平化

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))

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

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))

1.  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))

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

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

1.  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。

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