前端筆試題面試題記錄（下）

OBKoro1發表於2019-03-04
前端筆試面試題

前言

接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，因為最近比較忙這篇已經拖了很久了。現在剛剛開始銀四了，應該還是有些小夥伴在找工作，時間還不算太晚，希望本篇可以幫到這些小夥伴。

個人部落格瞭解一下：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權重真的足夠了解嗎

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的工作流程：

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

相關文章