2019前端面試題總結(jié)之一

以下題目都是本人經(jīng)過的一些真實的面試題目。

1. 有哪些方法可以實現(xiàn)垂直居中？

<div class="wrap">
  <div class="box"></div>
</div>
  1. 通過定位來實現(xiàn)
<!-- 容器的寬高未知 -->
<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>
  1. 通過flex布局來實現(xiàn)；
<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 各種選擇器的優(yōu)先級規(guī)則是什么？

  • !important

    當 !important 規(guī)則被應(yīng)用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他的聲明, 無論它處在聲明列表中的哪里. 盡管如此, !important規(guī)則還是與優(yōu)先級毫無關(guān)系.使用 !important 不是一個好習慣，因為它改變了你樣式表本來的級聯(lián)規(guī)則，從而使其難以調(diào)試

  • 內(nèi)聯(lián)樣式 > id選擇器 > class選擇器 > 元素選擇器

  • 利用選擇器的權(quán)值進行計算比較

    1. 內(nèi)聯(lián)樣式表的權(quán)值最高 1000；
    2. ID 選擇器的權(quán)值為 100
    3. Class 類選擇器的權(quán)值為 10
    4. HTML 標簽選擇器的權(quán)值為 1

3. 以下函數(shù)的執(zhí)行結(jié)果是什么？（變量）

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

// 打印結(jié)果為報錯
// Cannot access 'a' before initialization 初始化前無法訪問 ‘a(chǎn)'
// 涉及到的知識點是變量提升，let和const 是塊級作用域況且變量無法提升。var是函數(shù)級作用域，可以變臉提升。
// 單純的第二個結(jié)果可以輸出 ’b‘

4. 以下函數(shù)的執(zhí)行結(jié)果是什么？（this）

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

// 執(zhí)行結(jié)果為 空
// 因為是window調(diào)用的 h 函數(shù)，故所以this的指向綁定在window上面。而window.name，打印出來為空。
  • 變形
var obj = {
  name: 'obj',
  hi() {
    return () => {
      console.log(this.name)
    }
  }
}
var h2 = obj.hi()
h2()
obj.hi().call(obj,window)

// 打印結(jié)果都為 obj
// 箭頭函數(shù)吧this綁定在obj上，與執(zhí)行環(huán)境無關(guān)
// .call 改變this指向，第一個參數(shù)為指向的對象。

5. 請寫一個閉包。

// 引用的網(wǎng)上的例子，貌似是廖雪峰老師講的，忘記了
function f1(){
  var n=999;
  nAdd=function(){n+=1}
  function f2(){
    alert(n);
  }
  return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
/**
1）由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會造成網(wǎng)頁的性能問題，在IE中可能導致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。
2）閉包會在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內(nèi)部變量當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。
**/

6. 請把下面的數(shù)組扁平化。再去重。

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----(注意這種方式只能針對數(shù)字的扁平化，此例子不適合)
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))
扁平化的核心就是：遍歷數(shù)組arr，若arr[i]為數(shù)組則遞歸遍歷，直至arr[i]不為數(shù)組然后與之前的結(jié)果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 （網(wǎng)友測試耗時最短的一種方法）（主推）
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. 提取一下字符串中的所有數(shù)字 （正則）

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

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

8. 以下函數(shù)執(zhí)行的結(jié)果是啥？(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)
})

// 執(zhí)行結(jié)果為隨機打印

9. 有一個obj空對象，給該對象添加偵聽器，當用戶給obj設(shè)置name的時候，打印用戶給obj設(shè)置的name值。

比如 var obj = {}。給該對象添加偵聽器后，當我設(shè)置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狀態(tài)的唯一方法就是提交mutation，就很類似事件。每個mutation都有一個字符串類型的事件類型和一個回調(diào)函數(shù)，我們需要改變state的值就要在回調(diào)函數(shù)中改變。我們要執(zhí)行這個回調(diào)函數(shù)，那么我們需要執(zhí)行一個相應(yīng)的調(diào)用方法：store.commit。

以上是經(jīng)過參考很多同行分享與官方文檔，匯總的一份總結(jié)，如有不對，請指出，最后感謝大家觀看，求點贊，求分享，求評論，求打賞~~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容