九月 前端面試筆試總結記錄

本文記錄並總結了一些九月本人蔘加面試當中遇到的題目，由於本人水平也有限，這些題目對應的解答一些是我自己的思路或者回來之後進行查閱總結得到的，可能並非最佳答案。分享出來給大家參考，如果出現錯誤，請大佬們多多見諒並勘誤，感謝。

9.4 面試題目

1. 數字如何轉換成字串？

• 使用  toString()

a = 1
typeof a //"number"
b1 = a.toString()
b2 = String(a)
typeof b1 //"string"
typeof b2 //"string"

• 重新賦值

a = 1
typeof a //"number"
b = a + ''
typeof b //"string"

2. 字串轉換成數字呢?

a = "1"
b1 = Number(a)
b2 = parseInt(a) 

3. 陣列排序，從大到小，如何實現？

var arr = [7,2,3,6,8,1]
arr//(6) [7, 2, 3, 6, 8, 1]
var arr2 = arr.sort().reverse()
arr2//(6) [8, 7, 6, 3, 2, 1]

改進版

var arr = [7,2,3,6,8,1,11,22]
var arr2 = arr.sort(function(v1,v2){
return v1-v2
}).reverse()

4. 要取一個小數的小數點後四位，有什麼方法？

• 不四捨五入

① 使用 Math.floor

var num = 3.141592653
var result = Math.floor (num * 10000) / 10000

② 當做字串，使用正則匹配

var num = 3.141592653
var regex = /^\d+(?:\.\d{0,4})?/
var result = num.toString().match(regex)

• 通過四捨五入

var num = 3.141592653
var result = num.toFixed(4)//"3.1416"

5. HTML 中如果我有很多 checkbox 表單，如何快速的全選他們，或者反全選他們？

使用 jQuery 進行 DOM屬性 的操作，使用 prop 方法

//全選
$("#all").click(function(){
//獲取所有的checkbox
var ches=$("input[type='checkbox']")
//遍歷所有的checkbox,重設選中狀態為選中
ches.each(function(){
$(this).prop("checked",true)
})
})

//反選
$("#unall").click(function(){
//獲取所有的checkbox
var ches=$("input[type='checkbox']")
//遍歷所有的checkbox,重設選中狀態為不選中
ches.each(function(){
$(this).prop("checked",false)
})
})

6. 原生 ajax 會寫麼？

var xhr = new XMLHttpRequest()
xhr.open('GET','/xxx')
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
console.log(xhr.responseText)
}else{
console.log('error')
}
}
}
xhr.onerror = function(){
console.log('error')
}

7. 什麼時候http請求結束？

具體參考：Ajax狀態值及狀態碼

在AJAX實際運行當中，對於訪問XMLHttpRequest（XHR）時並不是一次完成的，而是分別經歷了多種狀態後取得的結果，對於這種狀態在AJAX中共有5種，分別是。

0 - (未初始化)還沒有呼叫send()方法

1 - (載入)已呼叫send()方法，正在傳送請求

2 - (載入完成)send()方法執行完成，

3 - (互動)正在解析響應內容

4 - (完成)響應內容解析完成，可以在客戶端呼叫了

對於上面的狀態，其中“0”狀態是在定義後自動具有的狀態值，而對於成功訪問的狀態（得到資訊）我們大多數採用“4”進行判斷。

8.現在要做一個 類似 nav 或者 tab 的效果，點選一個元素的時候，讓他高亮，他的同級元素則沒有效果，用jQuery，程式碼應該是怎樣的？

$('.mod-tab .tab').on('click',function(){
$(this).addClass('active').siblings().removeClass('active')
}

9.17 筆試題目

HTML 題目

1.  meta  標籤的作用

提供有關頁面的元資訊，比如針對搜尋引擎和更新頻度的描述和關鍵詞。

2. 有哪些資源標籤？以及其放置方式？

style 、 script ？

如果在 head 裡有  JS 檔案，那麼必須是先要把這些檔案都下載，解析，然後執行之後，程式才會繼續往下走。這樣勢必會影響速度。

所以有一種方法是加  defer 這個屬性。這個屬性的用途是表明指令碼在執行時不會影響頁面的構造。也就是說，指令碼會被延遲到整個頁面都解析完畢後再執行。

但採用這種方法，會有一種缺陷。在有些瀏覽器中。並不會按照你自己檔案的順序執行下來。並且有的瀏覽器還會忽略這種屬性。

所以最好不要採用這樣的方法。所以個人推薦將引入的檔案放到後面。對於自己寫的  JS 程式碼，如果說這些程式碼要用到正文裡的東西，

那麼也建議寫在後面。因為當執行  JS 程式碼的時候，如果你用到的正文中的某個東西，但是正文沒有載入，所以有可能會出錯。

但在現實中，更多的時候我們是採用事件驅動這種形式。所以這樣的問題不會太大。主要還是速度。放在後面，速度可能更快。

CSS 題目

.box {
display: inline-block;
}

ofollow,noindex">http://jsbin.com/kokocikaco/2/edit?html,css,output

JavaScript 題目

1.  1==='1'  ,  1 === 1 ,  {} === {}  分別會返回什麼？為什麼？

1==='1' 輸出  false ，因為嚴格比較模式，即比較值，也比較型別。

所以  1 === 1 輸出  true 。

{} === {} 輸出為  false ，因為  {} 的型別是 Object，是一個引用型別。所以兩個  {} 指向的記憶體地址不同。

2. 為什麼要使用閉包？寫一個閉包。

• 閉包可以讀取函式內部的變數，可以讓變數的值始終保持在記憶體中。
• 避免使用全域性變數，實現資料隱藏、封裝。

// 封裝一個 Car ，使用了閉包
var Car = (function(){
var speed = 0
function set(s){
speed = s
}
function get(){
return speed
}
return {
set: set,
get: get
}
})()

Car.set(30)
Car.get()

3. 已知一個物件 a ，在不知道第一個屬性鍵名的情況下，如何獲取其第一個屬性的值？

var num = Object.keys(a)[0]//找 key
console.log(a[num])//再找 values

//
Object.values(a)[0]//直接找 values

// 但物件是無序的，所以這道題題幹值得討論

4. 將數列 [2，0，1，8，0，2，1，5] 去除重複項並按降序排序

var arr =[2,0,1,8,0,2,1,5]
var res = []

for(var i=0 ; i < arr.length ; i++) {
if(res.indexOf(arr[i]) == -1) {
res.push(arr[i])
}
res.sort().reverse()
}

console.log(res)

// 或者使用
var arr =[2,0,1,8,0,2,1,5]
Array.from(new Set(arr))

9.25 面試題目

1. es5、es6 陣列的方法

.indexOf / .lastIndexof
forEach
map
every、some
filter
reduce

2. 哪些方法是改變原陣列的？哪些不改變。

改變原陣列： forEach 、 sort 、 reverse 、 push 、 pop 、 shift 、 unshift 、 splice
不改變原陣列： map 、 filter 、 reduce 、 concat 、 slice 、 join

es6 改變原陣列： copyWithin() 、 fill
es6 不改變原陣列： Array.from() 、 find 、 flat

3.  call 、 apply  和  bind 的用法和區別

fun.call(thisArg, arg1, arg2, ...)

fun.apply(thisArg, [argsArray])

4. let 和 var 的區別

let 擁有自己的塊級作用域，不會提升變數。

var 定義的變數，作用域是整個封閉函式，是全域的 。

let 定義的變數，作用域是在塊級或是子塊中。

var : 變數可以多次宣告

let : 變數只能宣告一次

5. vue 中父子元件之間傳值是怎樣進行的

• 父元件通過屬性的形式向子元件進行傳值。
• 子元件通過事件觸發的形式向父元件傳值
• 父子元件傳值時，有單向資料流的規定。父元件可以向子元件傳遞任何的資料，但子元件不能修改父元件傳遞過來的資料。如果一定要進行修改，只能通過修改複製副本的方式進行。

6. 小程式有哪幾種跳轉頁面的方式

wx.switchTab ：跳轉  app.json 的頁面（路由方式）

wx.navigateTo ：跳轉到指定頁面，儲存當前頁面。

wx.redirectTo ：跳轉到指定頁面，關閉當前頁面。

wx.navigateBack ：返回之前頁面,跳轉之前的頁面

9.28 面試題目

1. 簡單的做下自我介紹吧。

簡單的做了自我介紹，除了會的技能之外，主要講述了為什麼轉業想做前端。並提到了阮一峰和借鑑他的博文等。

之後開始問技術相關的問題：

2.  HTML5 新增了哪些標籤 ?  CCS3 新增了哪些屬性 ?

HTML5 新增了  section 、 aside 、 nav 、 figure 、 canvas 、 aduio 、 email 等等。它們有的是結構標籤、有的是功能標籤、有的是媒體標籤。

CCS3 新增的屬性：邊框類的有  box-shadow 、 border-radius ；背景類的有  background-size ；文字效果類的有  text-shadow 、 word-wrap ；CSS3 2D轉換類的  transform 、 translate() 等、CSS3 3D轉換類的  rotateX() 、 rotateY() ；動畫類  @keyframes 關鍵幀動畫： animation 等；使用者介面類有盒模型  box-sizing 。除此之外  CSS3 還新增了一系列的偽類選擇器。

3. 什麼選擇器可以讓我選擇 50 個div標籤的第 10 個 ?

:nth-of-type(10)
JSbin 示例

4.  HTML5  之前頭部為什麼要寫 w3c 標準？

HTML5 不基於  SGML （標準通用置標語言）。因此不需要對 DTD （文件型別定義）進行引用，但是需要  doctype 來規範瀏覽器的行為（讓瀏覽器按照他們應該的方式來執行）而  HTML4.01 基於  SGML ，所以需要對  DTD 進行引用，才能告知瀏覽器文件所使用的文件型別。

5.  JS  的基本資料資料型別 ？

基本資料型別有 Undefined 、 Null 、 Boolean 、 Number 和 String ；引用資料型別有  Object 。 es6 中新增了一個 資料型別  Symbol 。

6. 那  es6  還新增了哪些東西？說你熟悉的舉例

• 新增了  let 、 const
• 新增瞭解構賦值；還有字串、陣列、物件的諸多特性和方法
• 新增了模組化功能寫法  export  和  import
• 新增了  Class  類繼承的語法糖
• 新增了  Promise  處理非同步
• 新增了箭頭函式  =>

7. 箭頭函式裡面的  this  是什麼？

箭頭函式本身是沒有 this 和  arguments 的，在箭頭函式中引用  this 實際上是呼叫的是定義時的上一層作用域的  this 。

8. 函式柯里化了解嗎？

在一個函式中首先填充幾個引數，然後再返回一個新函式。就被稱為柯里化。

9.  undefined === NaN  結果是什麼？ NaN === NaN  呢？

都是 false

10.  window.onload  和  $(document).ready  有什麼區別？

• 執行時間不同：
  window.onload  必須等到頁面內包括圖片的所有元素載入完畢後再去執行。
  $(document).ready()  時  DOM  結構回執完畢後就執行，不必等到載入完畢。
• 編寫個數不同：
  window.onload  不可同時編寫多個，如果有多個  window.onload 方法，只會執行一個。
  $(document).ready()  可以同時編寫多個，並且可以得到執行。

舉例：有一個大型的相簿網站，為網頁中所有圖片新增某些行為，例如單擊圖片後讓它隱藏或顯示。如果使用 window.onload 方法來處理，那麼使用者必須等到每一幅圖片都載入完畢後，才可以進行操作。如果使用 jQuery 中的  $(document).ready() 方法來進行設定，只要  DOM 就緒時就可以操作了，不需要等待所有圖片下載完畢。

11.  jQuery  如何停止一個正在進行的動畫？用什麼方法？

• .stop() ： 停止當前正在執行的動畫；可以傳遞兩個引數， clearQueue  和  jumpToEnd 。這兩個引數分別決定是否清除動畫佇列中未執行的動畫 和 決定是否展示當前一幀動畫是否執行到最後。預設值都為  false 。
• .finish() ： 停止當前動畫，並清除 動畫佇列 中所有未完成的動畫，最終展示 動畫佇列 最後一幀的最終狀態。

12. 說一說你對  vue 的理解

是一個輕量的 MVVM 框架。寫程式的時候更少的去關注  DOM 的改動，而是將重點放在資料之上。雙向繫結完成之後，資料的改變會驅動頁面顯示的變化。當一個站點或者網站擁有極大資料量，且點選一個區塊會發生很多頁面資料改變的時候。這個網站就可以使用  vue 框架。並且  vue 的元件化的寫法極為友好，也是分為  template 、 script 、 style 將  HTML 、 JS 、 CSS 放置到一個  vue 檔案之中。並且有  vuex 和  vue-router 等機制。

13.說一說你對  vuex  的理解

vuex 就是一個倉庫，倉庫裡面放了很多物件。其中  state 就是資料來源存放地，對應於與一般  Vue 物件裡面的  data 。使用  vuex 可以簡單、快速的完成兄弟元件之間的傳值。不用經過一箇中間元件再傳遞一次值或者事件。降低了耦合，也有很好的可維護性、可讀性。

14. mutation  是幹什麼用的

vuex 中的幾種屬性之一。

有時候，希望改變 State 裡面的資料。不能直接讓元件去改動資料。必須通過相應的流程完成。流程如下：

如果有非同步操作或者複雜的同步操作，那麼將它們放置在  Actions ，元件先去呼叫  Actions ， Actions 緊接著去呼叫  Mutations ， 而  Mutations 逐個的對  State 的修改。

也可以越過  Actions ，讓元件直接呼叫  Mutations ，修改  State 裡面的資料。

15.  mapAction  是什麼

是 vuex 的一種方式。頁面通過  mapAction 非同步提交事件到 Actions 。 Actions 通過  commit 把對應引數同步提交到 Mutations 。 Mutations 則去修改  State 中對應的值。

16. 如果我打包生成了一個專案，生成了一個JS檔案很大，每次都要載入這個大容量的JS麼？怎麼優化?

使用  vue-cli webpack 生成的專案 JS 資料夾裡面含有  app.js 、 manifest.js 和  vendor.js 。 manifest.js 是 webpack 打包生成的配置檔案， vendor.js 放置的是各個元件公用的程式碼。專案的各個業務邏輯程式碼都被放置到  app.js 之中。

如果生成了一個很大的 app.js 檔案。按照預設配置打包的情況下，進入首頁就會完整的載入這個  app.js 檔案。這個時候可以通過非同步元件實現按需載入來對這個問題進行優化。

在 router 的  index.js 中將  import from 的寫法變成一個  component 箭頭函式的返回值。就可以完成非同步元件的實現。

同步

非同步

但當生成的 JS 檔案很小的時候，就不建議用非同步拆分了。這樣會額外的發起 http 請求。所以需要權衡代價。

17.跨域如何實現？你一般什麼方式跨域

JSONP 、 CORS 、 postMessage 都可以實現跨域。

但  JSONP 只能實現  get 請求。