前言

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

個人博客了解一下：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權重的文章，有興趣的可以看一下。你應該知道的一些事情——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');//-12console.log('A'+'B'+'2');//AB2console.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的工作流程：
  

• 在vue組件里面，通過dispatch來觸發actions提交修改數據的操作。
• 然后再通過actions的commit來觸發mutations來修改數據。
• mutations接收到commit的請求，就會自動通過Mutate來修改state（數據中心里面的數據狀態）里面的數據。
• 最后由store觸發每一個調用它的組件的更新

Vuex的作用：項目數據狀態的集中管理，復雜組件(如兄弟組件、遠房親戚組件)的數據通信問題。

• vue的服務端渲染
• vue的雙向綁定

  兩個問題都不會...

---

看完了？點贊支持一下唄，這兒還有一篇，有空可以看看哈：前端筆試題面試題記錄（上）。

小結

各位大佬們，找工作也是可以發現自己的薄弱點，然后加強它，白天的時候被某些問題給虐了，然后在晚上的時候，一定要把這些問題弄清楚，不要每次都被同樣的問題給虐，這樣就不好了。

最后：如需轉載，請放上原文鏈接并署名。碼字不易，感謝支持！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。然后就是希望看完的朋友點個喜歡，也可以關注一下我。
個人blog and 掘金個人主頁

以上2018.4.7

參考鏈接：

let 和 const 命令

總結

以上是生活随笔為你收集整理的前端笔试题面试题记录（下）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。