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

時間 2019-11-12

原文原文鏈接

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

9.4 面試題目

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

使用 toString()方法 / String() 轉換 / JSON 格式化

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

從新賦值

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

2. 字符串轉換成數字呢?前端

a = "1"
b1 = Number(a)
b2 = parseInt(a) 
b3 = JSON.parse(a)

3. 數組排序，從大到小，如何實現？vue

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]

改進版webpack

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

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

不四捨五入

① 使用 Math.floorweb

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 表單，如何快速的全選他們，或者反全選他們？ajax

使用 jQuery 進行 DOM屬性的操做，使用prop方法vue-router

//全選
$("#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 題目

1. css的做用域是？執行順序？優先級？
!important > id > class > tag
important 比內聯優先級高

2. 定位 position 的種類及區別？
靜態定位：默認佈局方式，position: static;
相對定位：相對默認的佈局位置進行定位，position: relative;
絕對定位：絕對定位元素脫離正常文檔流，position: absolute;
固定定位：相對瀏覽器窗口進行定位，position: fixed;
粘性定位：默認狀況下表現爲相對定位，當瀏覽器窗口頂端的元素距離等於 top 屬性的時候，轉變爲固定定位，positon: sticky;

3. 如何讓塊級元素像行內元素同樣排列？

.box {
  display: inline-block;
}

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

5. 去重數組

// ES6 實現數組去重
let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3]
let set = Array.from(new Set(array))

console.log(set)

// 數組中包含對象的去重
let arr = [{a:'1'},{a:'1'},{b:'2'},{b:'2'},3,4,5,5,6]
let oldArrStringf=[]
arr.forEach((item)=>{oldArrStringf.push(JSON.stringify(item))})
let newArrs = Array.from(new Set(oldArrStringf))

console.log(newArrs)

9.25 面試題目

1. es五、es6 數組的方法

.indexOf / .lastIndexof 該方法用於查找數組內指定元素的位置，查到第一個以後返回其索引，沒有找到則返回-1。

forEach 遍歷數組，參數爲一個回調函數，回調函數有三個參數。當前元素 value、當前元素索引值 i、整個數組 array。

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的用法和區別

這三者都是用來改變函數的this對象的指向的。call 和 apply 直接調用函數，而 bind 返回一個新函數，這個新函數會 call 原來的函數，參數由你指定。

call 跟 apply 的用法幾乎同樣，惟一的不一樣就是傳遞的參數不一樣，call 只能一個參數一個參數的傳入。
fun.call(thisArg, arg1, arg2, ...)
apply 則只支持傳入一個數組，哪怕是一個參數也要是數組形式。最終調用函數時候這個數組會拆成一個個參數分別傳入。
fun.apply(thisArg, [argsArray])
bind 方法，他是直接改變這個函數的 this 指向而且返回一個新的函數，以後再次調用這個函數的時候 this 都是指向 bind綁定的第一個參數。bind 傳餐方式跟 call 方法一致。

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 之中。