前端面試題2019.02.28

来源:https://www.cnblogs.com/yxdlm/archive/2019/02/28/10453520.html
-Advertisement-
Play Games

1、用 js 寫出幾種去除 string 空格的方法。 (1)、使用js迴圈 (2)使用正則 (3)使用JQ 2、如何獲取瀏覽器URL中查詢字元串中的參數? 3、比較 typeof 與 instanceof ? 相同點:都常用來判斷一個變數是否為空,或者是什麼類型的。 不同點:tyoeof返回字元串 ...


1、用 js 寫出幾種去除 string 空格的方法。

(1)、使用js迴圈     

//供使用者調用 
function trim(s){ 
return trimRight(trimLeft(s)); 
} 
//去掉左邊的空白 
function trimLeft(s){ 
if(s == null) { 
return ""; 
} 
var whitespace = new String(" \t\n\r"); 
var str = new String(s); 
if (whitespace.indexOf(str.charAt(0)) != -1) { 
var j=0, i = str.length; 
while (j < i && whitespace.indexOf(str.charAt(j)) != -1){ 
j++; 
} 
str = str.substring(j, i); 
} 
return str; 
}

//去掉右邊的空白 
function trimRight(s){ 
if(s == null) return ""; 
var whitespace = new String(" \t\n\r"); 
var str = new String(s); 
if (whitespace.indexOf(str.charAt(str.length-1)) != -1){ 
var i = str.length - 1; 
while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1){ 
i--; 
} 
str = str.substring(0, i+1); 
} 
return str; 
}

(2)使用正則

String.prototype.Trim = function() 
{ 
return this.replace(/(^\s*)|(\s*$)/g, ""); 
} 
String.prototype.LTrim = function() 
{ 
return this.replace(/(^\s*)/g, ""); 
} 
String.prototype.RTrim = function() 
{ 
return this.replace(/(\s*$)/g, ""); 
}

//去左空格;
function ltrim(s){
return s.replace(/(^\s*)/g, "");
}
//去右空格;
function rtrim(s){
return s.replace(/(\s*$)/g, "");
}
//去左右空格;
function trim(s){
return s.replace(/(^\s*)|(\s*$)/g, "");
}

(3)使用JQ

$trim(str)

2、如何獲取瀏覽器URL中查詢字元串中的參數?

function getQuery(name)

  {

  var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

  var r = window.location.search.substr(1).match(reg);

  if (r!=null) return unescape(r[2]); return null;
  }

3、比較 typeof 與 instanceof ?

相同點:都常用來判斷一個變數是否為空,或者是什麼類型的。

不同點:tyoeof返回字元串用來說明變數的數據類型,instanceof 返回布爾值,用來判斷變數是否屬於某個對象的實例。

4、如何理解閉包?

一般指可以訪問另一個函數作用域變數的的函數。當一個變數想要反覆調用,又想避免全局污染的情況下,會使用到閉包。缺點是所占用的空間不容易被釋放,需要手動清除。

5、JQuery的幾種選擇器分別是?

(1)、基本選擇器

*
#id
element
.class

(2)、層次選擇器

ancestor descendant
parent > child
prev + next
prev ~ siblings

(3)、基本過濾器選擇器

:first
:last
:not
:even
:odd
:eq
:gt
:lt
:header
:animated

(4)、內容過濾器選擇器

:contains
:empty
:has
:parent

(5)、可見性過濾器選擇器

(6)、屬性過濾器選擇器

(7)、子元素過濾器選擇器

(8)、表單選擇器

(9)、表單過濾器選擇器

具體可參考 http://api.jquery.com/category/selectors/

6、瀏覽器的內核分別是什麼?

IE內核:Trident

Firefox內核:Gecko

Safari內核:Webkit

Opera內核:Presto=>Blink

Chrome內核:Blink 

7、瀏覽器本地存儲?

Cookie、LocalStorag、SessinStorage。

LocalStorage讀取數據需要在 協議、主機名和埠相同的情況下,而SessionStorage在滿足上面的條件時還要求在同一視窗(標簽頁)。

Cookie預設關閉視窗清除數據,可通過SetCookie設置存儲時間。

LocalStorage永久存儲,可設置保存時間。

SessionStorage 會話級存儲,關閉頁面自動銷毀。相當於Cookie的預設。

Cookie是數據會在蔑稱發送HTTP請求的時候,同時發送給伺服器。 而LocalStorag、SessinStorage 則不會。

8、你瞭解的Web攻擊技術?

(1)、xss跨站攻擊技術:主要是攻擊者往網頁里嵌入惡意腳本,或者通過改變html元素屬性來實現攻擊,主要原因在於開發者對用戶的變數直接使用導致進入html中會被直接編譯成js,通常的get請求通過url來傳參,可以在url中傳入惡意腳本,從而獲取信息,解決方法:特殊字元過濾。

(2)、sql註入攻擊:主要是就是通過把SQL命令插入到Web表單提交或輸入功能變數名稱或頁面請求的查詢字元串,最終達到欺騙伺服器執行惡意的SQL命令,比如select * from test where username="wuxu" or 1=1,這樣會使用戶跳過密碼直接登錄,具體解決方案:1、特殊字元過濾,不要用拼接字元串的方法來湊sql語句。2、對sql語句進行預編譯,比如java的preparedstatement。3、關閉錯誤信息,攻擊者可能會通過不斷的嘗試來得到資料庫的一些信息,所以關閉錯誤信息變得重要起來。4、客戶端對數據進行加密,使原來傳進來的參數因為加密而被過濾掉。5、控制資料庫的許可權,比如只能select,不能insert,防止攻擊者通過select * from test ;drop tables這種操作。

(3)、遠程目錄包含攻擊,原理就是註入一段用戶能控制的腳本或代碼,並讓服務端執行。比如php中的include($filename),而此filename由用戶傳入,用戶即可傳入一段惡意腳本,從而對服務其造成傷害,解決方法:當採用文件包含函數的時候,不應動態傳入,而應該有具體的文件名,如果動態傳入,要保證動態變數不被用戶所控制。
(4)、會話劫持:這是一種通過獲取用戶Session ID後,使用該Session ID登錄目標賬號的攻擊方法,此時攻擊者實際上是使用了目標賬戶的有效Session。會話劫持的第一步是取得一個合法的會話標識來偽裝成合法用戶,因此需要保證會話標識不被泄漏,通俗一點就是用戶在登錄時,唯一標示用戶身份的session id被劫持,使得攻擊者可以用這個session id來進行登錄後操作,而攻擊者主要是通過 竊取:使用網路嗅探,XSS攻擊等方法獲得。而第一種方式網路嗅探,我們可以通過ssl加密,也就是https來對報文進行加密,從而防止報文被截獲,而第二種方式xss攻擊,方式在第一種已經給出,不再贅述。此外通過設置HttpOnly。通過設置Cookie的HttpOnly為true,可以防止客戶端腳本訪問這個Cookie,從而有效的防止XSS攻擊,還有就是設置token驗證。關閉透明化Session ID。透明化Session ID指當瀏覽器中的Http請求沒有使用Cookie來存放Session ID時,Session ID則使用URL來傳遞。

9、iframe的優缺點?

優點:(1)、能夠完整展示嵌入網頁。(2)、頁面和程式分類(3)、一個iframe可多次調用,代碼復用性高。(4)、載入第三方內容如:圖標、廣告等可使用 iframe 解決。

缺點:(1)、相容性差,在移動端無法完全顯示。(2)、結構混亂,多個框架會出現滾動條,用戶體驗差。(3)、會產生多個頁面,不利於管理。(4)、會增加伺服器的 http 請求。

10、編寫一個方法,去掉一個數組的重覆元素。

function unique(arr){
 //Set數據結構,它類似於數組,其成員的值都是唯一的
 return Array.from(new Set(arr)); // 利用Array.from將Set結構轉換成數組
}

 


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

-Advertisement-
Play Games
更多相關文章
  • 1、 通知傳值-一般常用於返回界面的時候,把返回前界面的值傳到返回後界面。 2、block 反向傳值 前一個界面獲取後一個界面傳過來的值 3、屬性傳值(一般適用於前一個界面傳值給後一個界面) 4、數據持久化傳值 NSUserDefaults是數據持久化的一種主要做存儲使用。 ...
  • 組件化開發的主要步驟: 一、新建Modules 1、新建Project,作為應用的主Module。 2、新建Module:"Common",類型選擇"Android Library",作為所有其它Module的基礎依賴庫。 3、新建Module:"Home",類型選擇"Android Library ...
  • ionic3 總共有8個鉤子函數,分別是:onPageLoaded,onPageWillEnter,onPageDidEnter,onPageWillLeave,onPageDidLeave,onPageWillUnload,onPageDidUnload 還有兩個鉤子不太一樣,上面的鉤子函數都沒有 ...
  • N久沒寫過博客了… 最近在玩 APEX 但是手殘黨表示打到15級了,至今殺敵 4 人… 當快遞員是越來越順手了… 今年巨硬的 Build 大會會在 5 月 6-8 號召開 新發佈的 Hololens 應該會有更多的介紹出來 打開 Build 網址:https://www.microsoft.com/ ...
  • 前言 如果統計一番前端最常用的方法,那麼 console.log 一定位列其中。無論你寫的是原生 JS 亦或者是 JQuery、Vue等等,調試之時,都離不開 console.log 方法。但是,console 對象中的方法不僅僅只有 log 方法。強大的 console 對象提供了大量控制台調試的 ...
  • 註:本文翻譯自 https://web.dev/fast/remove-unused-code,Written by Houssein Djirdeh。如有翻譯錯誤請指正。 像 npm 這樣的包管理器通過允許任何人輕鬆地下載和使用超過50萬公共包來讓JavaScript世界變得更好。但我們經常引入一 ...
  • 一、前言 浮動元素以脫離標準流的方式來實現元素的向左或向右浮動。float浮動屬性的四個參數:left:元素向左浮動;right:元素向右浮動;none:預設值,元素不浮動;inherit:繼承父元素的float屬性值。 舉個慄子 父元素是否註意到自己有個浮動的子div呢? 從中我們可以發現,處於標 ...
  • flex方向 flex方向由flex-direction特性決定,用於定義彈性佈局模式。flex-direction共有4種模式:從左向右、從右向左、從上往下、從下往上。 主軸 主軸的起點與終點定義了容器元素的開始和結束邊緣。 交叉軸 交叉軸的起點與終點定義了容器的頂部與底部。 從左向右:flex- ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...