前端筆試題面試題記錄

来源:https://www.cnblogs.com/kkdn/archive/2018/03/22/8626362.html
-Advertisement-
Play Games

Q:什麼情況下會碰到跨域問題?有哪些解決方法? 跨域問題是這是瀏覽器為了安全實施的同源策略導致的,同源策略限制了來自不同源的document、腳本,同源的意思就是兩個URL的功能變數名稱、協議、埠要完全相同。 script標簽jsonp跨域、nginx反向代理、node.js中間件代理跨域、後端在頭部信息 ...


Q:什麼情況下會碰到跨域問題?有哪些解決方法?

  • 跨域問題是這是瀏覽器為了安全實施的同源策略導致的,同源策略限制了來自不同源的document腳本,同源的意思就是兩個URL的功能變數名稱、協議、埠要完全相同。

  • script標簽jsonp跨域、nginx反向代理、node.js中間件代理跨域、後端在頭部信息設置安全功能變數名稱、後端在伺服器上設置cors。


Q:如何判斷一個變數是對象還是數組?

判斷數組和對象分別都有好幾種方法,其中用prototype.toString.call()相容性最好。

function isObjArr(variable){
     if (Object.prototype.toString.call(value) === "[object Array]") {
            console.log('value是數組');
       }else if(Object.prototype.toString.call(value)==='[object Object]'){//這個方法相容性好一點
            console.log('value是對象');
      }else{
          console.log('value不是數組也不是對象')
      }
}

ps:千萬不能使用typeof來判斷對象和數組,因為這兩種類型都會返回"object"。


Q:定時器的執行順序或機制。

這個問題還是挺經常被問到的,有一些會直接問定時器的機制,有一些是通過筆試題的方式問執行順序然後問我為什麼是這樣。

長話短說,我們需要記住的是:因為js是單線程的,瀏覽器遇到setTimeout或者setInterval會先執行完當前的代碼塊,在此之前會把定時器推入瀏覽器的待執行事件隊列裡面,等到瀏覽器執行完當前代碼之後會看一下事件隊列裡面有沒有任務,有的話才執行定時器的代碼。 所以即使把定時器的時間設置為0還是會先執行當前的一些代碼。

 

 

 

 

上面是我寫的一個慄子,如果還不清楚的話,大家可以找一篇關於定時器機制的詳解文章來看看。


Q:html中title屬性和alt屬性的區別?

這個問題被問了一次,當時我只記得,alt屬性是用於img標簽的,當圖片失效的時候會出現alt屬性裡面的內容,title用來標記頁面的title,當時面試官問我還有沒有其他的區別。我。。。

然後我就找了一篇文章來看,漲了點姿勢:

1.<img src="#" alt="alt信息" />
//1.當圖片不輸出信息的時候,會顯示alt信息 滑鼠放上去沒有信息,當圖片正常讀取,不會出現alt信息
2.<img src="#" alt="alt信息" title="title信息" />
// 2.當圖片不輸出信息的時候,會顯示alt信息 滑鼠放上去會出現title信息
//當圖片正常輸出的時候,不會出現alt信息,滑鼠放上去會出現title信息

另外還有一些關於title屬性的知識:

title屬性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有標簽
title屬性的功能是提示。額外的說明信息和非本質的信息請使用title屬性。title屬性值可以比alt屬性值設置的更長
title屬性有一個很好的用途,即為鏈接添加描述性文字,特別是當連接本身並不是十分清楚的表達了鏈接的目的。

Q:標準盒子模型與IE怪異盒子模型

這個問題主要會出現在筆試題上面,比如:

<div style="width:100px;height="100px;border:10px;padding:10px;"></div>

這個盒子在w3c標準盒子模型和IE的怪異盒子模型下麵它的寬度分別是多少?

標準盒子模型:總寬度=content100px+border 10px*2+padding 10px*2 //140px
怪異盒子模型: 總寬度=content60px+ border 10px*2+padding 10px*2 //100px

ps:

box-sizing: content-box || border-box;//css3 box-sizing設置為border-box將使用怪異盒子模型
當怪異盒子的寬度小於border+padding的寬度的時候,content width將變為0,盒子的寬度會被border和padding的總寬度撐開

ES5的繼承和ES6的繼承有什麼區別?

ES5的繼承時通過prototype或構造函數機制來實現。ES5的繼承實質上是先創建子類的實例對象,然後再將父類的方法添加到this上(Parent.apply(this))。

ES6的繼承機制完全不同,實質上是先創建父類的實例對象this(所以必須先調用父類的super()方法),然後再用子類的構造函數修改this

具體的:ES6通過class關鍵字定義類,裡面有構造方法,類之間通過extends關鍵字實現繼承。子類必須在constructor方法中調用super方法,否則新建實例報錯。因為子類沒有自己的this對象,而是繼承了父類的this對象,然後對其進行加工。如果不調用super方法,子類得不到this對象。

ps:super關鍵字指代父類的實例,即父類的this對象。在子類構造函數中,調用super後,才可使用this關鍵字,否則報錯。


Q:CSS3有哪些新增的屬性?

這裡可以分為邊框、背景,漸變,陰影、2D轉換 3D轉換等之類的來說。
比如:邊框(border-radius、border-shadow、border-image)之類的 。

具體的可以參見菜鳥教程:鏈接。類似的鏡像問題還有HTML5的新增屬性,可以自己谷歌一下。


Q:你知道哪些http狀態碼?

1xx:1開頭的是信息狀態碼
2xx:2開頭的是請求成功
3xx:3開頭的是重定向
4xx:4開頭的是客戶端錯誤
5xx:5開頭的是伺服器錯誤

這個問題並不難,在筆試面試都有碰到過,巧的是之前我就總結過一篇類似的文章。


Q:如何對一個數組去重?

這個問題出現了好幾次,而且很多面試官不滿足你只給出一兩種方法。

1、Set結構去重

這是ES6 提供了新的數據結構 Set。它類似於數組,但是成員的值都是唯一的,沒有重覆的值。

let unique= [...new Set(array)];
//es6 Set數據結構類似於數組,成員值是唯一的,有重覆的值會自動去重。
//Set內部使用===來判斷是否相等,類似'1'和1會兩個都保存,NaN和NaN只會保存一個

2、遍歷,將值添加到新數組,用indexOf()判斷值是否存在,已存在就不添加,達到去重效果。

    let a = ['1','2','3',1,NaN,NaN,undefined,undefined,null,null, 'a','b','b'];
    let unique= arr =>{
         let newA=[];
        arr.forEach(key => {
           if( newA.indexOf(key)<0 ){ //遍歷newA是否存在key,如果存在key會大於0就跳過push的那一步
             newA.push(key);
           }
        });
        return newA;
    }
    console.log(unique(a)) ;//["1", "2", "3", 1, NaN, NaN, undefined, null, "a", "b"]
//ps:這個方法不能分辨NaN,會出現兩個NaN。是有問題的,下麵那個方法好一點。

3、遍歷,將數組的值添加到一個對象的屬性名里,並給屬性賦值,對象不能添加相同屬性名,以這個為依據可以實現數組去重,然後用Object.keys(對象)返回這個對象可枚舉屬性組成的數組,這個數組就是去重後的數組。

    let a = ['1', '2', '3', 1,NaN,NaN,undefined,undefined,null,null, 'a', 'b', 'b'];
    const unique = arr => {
        var obj = {}
        arr.forEach(value => {
            obj[value] = 0;//這步新添加一個屬性,並賦值,如果不賦值的話,屬性會添加不上去
        })
        return Object.keys(obj);//`Object.keys(對象)`返回這個對象可枚舉屬性組成的數組,這個數組就是去重後的數組
    }
    console.log(unique(a));//["1", "2", "3", "NaN", "undefined", "null", "a", "b"]

註意:

這個方法會將 number,NaN,undefined,null,變為字元串形式,因為對象的屬性名就是一個字元串,根據需求來吧,想想還是Set去重最簡單也最有效。


Q:垂直居中有哪些方法?

  • 單行文本的話可以使用height和line-height設置同一高度。

  • position+margin:設置父元素:position: relative;,子元素height: 100px; position:absolute;top: 50%; margin: -50px 0 0 0;(定高)

  • position+transform:設置父元素position:relative,子元素:position: absolute;top: 50%;transform: translate(0, -50%);(不定高)

  • 百搭flex佈局(ie10+),設置父元素display:flex;align-items: center;(不定高)

類似的還有很多,實際應用中,可能就會使用一兩種方法,有興趣的可以看下這篇文章


Q:翻轉一個字元串

這個問題主要在筆試題碰到的多,思路就是先將字元串轉成一個數組,然後用數組的reverse()+join()方法。

let a="hello word";
let b=[...str].reverse().join("");//drow olleh

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

-Advertisement-
Play Games
更多相關文章
  • 本篇文章介紹的是在Swift3語言下的GCD應用操作,針對的目標讀者可以是沒有GCD基礎的初學者,也可以是對GCD有一定的瞭解但想更加全面的瞭解開發者。 一、GCD 介紹 背景 在 iOS 當中,蘋果提供了兩種方式進行多任務編程:Grand Central Dispatch (GCD) 和 NSOp ...
  • 以msm8226為例,講解android源碼編譯生成boot.img的結構。boot.img包括boot.img header、kernel以及ramdisk文件系統。下麵是對boot.img的結構進行解讀。 boot.img 文件頭信息的具體結構可以在system/core/mkbootimg/b ...
  • 解決方法: 製作好的framework在打包上傳至AppStore如果出現以下錯誤,則說明自建的這個SDK裡面包含了x86_64, i386 架構,當然這個AppStore是不允許的,所有會在上傳的時候報錯,解決辦法就是要這個SDK剔除掉x86_64, i386這兩個架構 解決辦法:TARGETS- ...
  • 自定義支持上拉載入更多,下拉刷新,支持自由切換狀態【載入中,載入成功,載入失敗,沒網路等狀態】的控制項,拓展功能[支持長按拖拽,側滑刪除]可以選擇性添加 。具體使用方法,可以直接參考demo。 輕量級側滑刪除菜單,支持recyclerView,listView,直接嵌套item佈局即可使用,整個側滑菜 ...
  • 最近要研究字體識別tesseract,才瞭解到brew,慚愧慚愧。 1、brew是一個軟體包管理工具,類似於centos下的yum或者ubuntu下的apt-get,非常方便,免去了自己手動編譯安裝的不便 brew 安裝目錄 /usr/local/Cellar brew 配置目錄 /usr/loca ...
  • 這個是基於three.js的全景插件 photo-sphere-viewer.js ———————————————————————————————————————— 1、能添加熱點; 2、能調用陀螺儀; 3、功能比較完善,能滿足大多數人的需求了; 4、最主要的是操作簡單,提供一長全景圖片即可(大多數 ...
  • 今天遇上個大麻煩,整個人心情都不怎麼好了。。。 編譯app.js報了這麼一大片錯。。。 我沒像老師一樣用sequelize建表,而是自己用SQL建的。 它找不到用sequelize建的對應欄位。。。 哎,真想好好學學怎麼調資料庫的數據,但是現在又沒有太多的時間。 只能說是把老師的項目跟著敲一遍。 並 ...
  • 在ECMAscript中,變數可以存放兩種類型的值,即原始值和引用值 原始值指的是代表原始數據類型的值,也叫基本數據類型,包括:Number、Stirng、Boolean、Null、Underfined 引用值指的是複合數據類型的值,包括:Object、Function、Array、Date、Reg ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...