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

来源:https://www.cnblogs.com/evenyao/archive/2018/09/28/9721041.html
-Advertisement-
Play Games

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


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

 

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 題目

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

 

9.25 面試題目

1. es5、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 之中。

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

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

同步
同步 非同步
非同步

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



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

JSONP、CORS、postMessage都可以實現跨域。
但 JSONP 只能實現 get 請求。

vue 跨域解決方法
vue-cli 工具 proxyTable 設置 changeOrigin: true，僅限開發環境。
https://www.cnblogs.com/wangyongcun/p/7665687.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 對大數據的批量導入MySQL資料庫
    自己的庫里有索引在用insert導入數據時會變慢很多 使用事務+批量導入 可以配置使用spring+mybatis整合的方式關閉自動提交事務（地址），選擇批量導入每一百條導入使用list存儲值傳入到mybatis中 http://x125858805.iteye.com/blog/2369243 或 ...
  • 轉MySQL遇到的語法差異及解決方案
    最近公司項目需要從SQL Server轉到MySQL， 在轉的過程中遇到兩者語法之間的一些差異，在網上找瞭解決方案後，特記錄在此。由於解決方案可能有很多種，我只記錄了自己使用過的，僅作參考。 1. 拼接字元串 使用 方法 MSSQL MySQL 2. MySQL中和update set select ...
  • 《看書總結》
    ...
  • AIDL使用以及原理分析
    AIDL使用以及IPC原理分析（進程間通信） 概要 為了大家能夠更好的理解android的進程間通信原理，以下將會從以下幾個方面講解跨進程通訊信： 1. 必要瞭解的概念 2. 為什麼要使用aidl進程間通信 3. 可能遇到的問題以及解決辦法 4. aidl的使用，通過android提供的aidl實現 ...
  • 【OC底層】OC對象本質,如 isa, super-class
    Objective-C的本質 Objective-C的本質 1、我們編寫的Objective-C，底層現實都是C/C++，代碼生成步驟如下： 1、我們編寫的Objective-C，底層現實都是C/C++，代碼生成步驟如下： 2、在OC中的所有面向對象的實現，都是基於C/C++的數據結構實現的 3、將 ...
  • 解決瀏覽器自動填充input
    瀏覽器輸入框自動填充解決辦法 emmmmm；今天處理公司後臺系統遇到的；登錄頁面瀏覽器保存賬號密碼後；瀏覽器會自動在其他頁面進行填充；解決如下圖： 瀏覽器會預設填充input type值為password的文本框；（填充對象為input[type=password]及前一個input框） 先設置in ...
  • 移動端適配（3）---rem適配
    rem適配 <meta name="viewport" content="width=device-width,user-scalable=no"/> <script> (function(){ var html=document.documentElement; var hWidth=html.g ...
  • 前端XSS相關整理
    前端安全方面，主要需要關註 XSS（跨站腳本攻擊 Cross-site scripting） 和 CSRF（跨站請求偽造 Cross-site request forgery） 當然了，也不是說要忽略其他安全問題：後端範疇、DNS劫持、HTTP劫持、加密解密、釣魚等 CSRF主要是借用已登錄用戶之手 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類