[LOJ2347] [JOI 2018 Final] 寒冬暖爐 - 貪心,dp,費用流

阿新 • • 發佈：2020-09-15

css

calc, support, media各自的含義及用法？

@support主要是用於檢測瀏覽器是否支援CSS的某個屬性，其實就是條件判斷，如果支援某個屬性，你可以寫一套樣式，如果不支援某個屬性，你也可以提供另外一套樣式作為替補。

calc() 函式用於動態計算長度值。 calc()函式支援 "+", "-", "*", "/" 運算；

@media 查詢，你可以針對不同的媒體型別定義不同的樣式。

css水平、垂直居中的寫法，請至少寫出4種？

這題考查的是css的基礎知識是否全面，所以平時一定要注意多積累

水平居中

行內元素:text-align: center
塊級元素:margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center

垂直居中

設定line-height 等於height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

1rem、1em、1vh、1px各自代表的含義？

rem

rem是全部的長度都相對於根元素<html>元素。通常做法是給html元素設定一個字型大小，然後其他元素的長度單位就為rem。

em

子元素字型大小的em是相對於父元素字型大小
元素的width/height/padding/margin用em的話是相對於該元素的font-size

vw/vh

全稱是 Viewport Width 和 Viewport Height，視窗的寬度和高度，相當於螢幕寬度和高度的 1%，不過，處理寬度的時候%單位更合適，處理高度的話 vh 單位更好。

px

px畫素（Pixel）。相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。

一般電腦的解析度有{1920*1024}等不同的解析度

1920*1024 前者是螢幕寬度總共有1920個畫素,後者則是高度為1024個畫素

畫一條0.5px的直線？

考查的是css3的transform

height: 1px;
transform: scale(0.5);

說一下盒模型？

盒模型是css中重要的基礎知識，也是必考的基礎知識

盒模型的組成，由裡向外content,padding,border,margin.

在IE盒子模型中，width表示content+padding+border這三個部分的寬度

在標準的盒子模型中，width指content部分的寬度

box-sizing的使用

  box-sizing: content-box 是W3C盒子模型
  box-sizing: border-box 是IE盒子模型

box-sizing的預設屬性是content-box

畫一個三角形？

這屬於簡單的css考查，平時在用元件庫的同時，也別忘了原生的css

 .a{
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent #0099CC transparent transparent;
            transform: rotate(90deg); /*順時針旋轉90°*/
 }

<div class="a"></div>

清除浮動的幾種方式，及原理？

清除浮動簡單，但這題要引出的是BFC，BFC也是必考的基礎知識點

::after / <br> / clear: both
建立父級BFC(overflow:hidden)
父級設定高度

BFC （塊級格式化上下文），是一個獨立的渲染區域，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

觸發條件:

根元素
position: absolute/fixed
display: inline-block / table
float元素
ovevflow !== visible

規則:

屬於同一個BFC的兩個相鄰Box垂直排列
屬於同一個BFC的兩個相鄰Box的margin會發生重疊
BFC的區域不會與float的元素區域重疊
計算BFC的高度時，浮動子元素也參與計算
文字層不會被浮動層覆蓋，環繞於周圍

html

說一下<label>標籤的用法

label標籤主要是方便滑鼠點選使用，擴大可點選的範圍，增強使用者操作體驗

遍歷A節點的父節點下的所有子節點

這題考查原生的js操作dom,屬於非常簡單的基礎題，但長時間使用mvvm框架，可能會忘記

<script>
    var b=document.getElementById("a").parentNode.children;
    console.log(b)
</script>

js

用js遞迴的方式寫1到100求和？

遞迴我們經常用到，vue在實現雙向繫結進行資料檢驗的時候用的也是遞迴，但要我們面試的時候手寫一個遞迴，如果對遞迴的概念理解不透徹，可能還是會有一些問題。

function add(num1,num2){
	var num = num1+num2;
        if(num2+1>100){
	 return num;
	}else{
	  return add(num,num2+1)
        }
 }
var sum =add(1,2);

頁面渲染html的過程？

不需要死記硬背，理解整個過程即可

瀏覽器渲染頁面的一般過程：

1.瀏覽器解析html原始碼，然後建立一個 DOM樹。並行請求 css/image/js在DOM樹中，每一個HTML標籤都有一個對應的節點，並且每一個文字也都會有一個對應的文字節點。DOM樹的根節點就是 documentElement，對應的是html標籤。

2.瀏覽器解析CSS程式碼，計算出最終的樣式資料。構建CSSOM樹。對CSS程式碼中非法的語法它會直接忽略掉。解析CSS的時候會按照如下順序來定義優先順序：瀏覽器預設設定 < 使用者設定 < 外鏈樣式 < 內聯樣式 < html中的style。

3.DOM Tree + CSSOM --> 渲染樹（rendering tree）。渲染樹和DOM樹有點像，但是是有區別的。

DOM樹完全和html標籤一一對應，但是渲染樹會忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文字中的每一個行在渲染樹中都是獨立的一個節點。渲染樹中的每一個節點都儲存有對應的css屬性。

4.一旦渲染樹建立好了，瀏覽器就可以根據渲染樹直接把頁面繪製到螢幕上。

以上四個步驟並不是一次性順序完成的。如果DOM或者CSSOM被修改，以上過程會被重複執行。實際上，CSS和JavaScript往往會多次修改DOM或者CSSOM。

說一下CORS？

CORS是一種新標準，支援同源通訊，也支援跨域通訊。fetch是實現CORS通訊的

如何中斷ajax請求？

一種是設定超時時間讓ajax自動斷開，另一種是手動停止ajax請求，其核心是呼叫XML物件的abort方法，ajax.abort()

說一下事件代理？

事件委託是指將事件繫結到目標元素的父元素上，利用冒泡機制觸發該事件

ulEl.addEventListener('click', function(e){
    var target = event.target || event.srcElement;
    if(!!target && target.nodeName.toUpperCase() === "LI"){
        console.log(target.innerHTML);
    }
}, false);

target、currentTarget的區別？

currentTarget當前所繫結事件的元素

target當前被點選的元素

說一下巨集任務和微任務？

巨集任務：當前呼叫棧中執行的任務稱為巨集任務。（主程式碼快，定時器等等）。
微任務：當前（此次事件迴圈中）巨集任務執行完，在下一個巨集任務開始之前需要執行的任務為微任務。（可以理解為回撥事件，promise.then，proness.nextTick等等）。
巨集任務中的事件放在callback queue中，由事件觸發執行緒維護；微任務的事件放在微任務佇列中，由js引擎執行緒維護。

說一下繼承的幾種方式及優缺點？

說比較經典的幾種繼承方式並比較優缺點就可以了

借用建構函式繼承，使用call或apply方法，將父物件的建構函式繫結在子物件上
原型繼承，將子物件的prototype指向父物件的一個例項
組合繼承

原型鏈繼承的缺點

字面量重寫原型會中斷關係，使用引用型別的原型，並且子型別還無法給超型別傳遞引數。

借用建構函式（類式繼承）

借用建構函式雖然解決了剛才兩種問題，但沒有原型，則複用無從談起。

組合式繼承

組合式繼承是比較常用的一種繼承方法，其背後的思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用建構函式來實現對例項屬性的繼承。這樣，既通過在原型上定義方法實現了函式複用，又保證每個例項都有它自己的屬性。

說一下閉包？

閉包的實質是因為函式巢狀而形成的作用域鏈

閉包的定義即：函式A內部有一個函式B，函式B可以訪問到函式A中的變數，那麼函式B就是閉包

export和export default的區別？

使用上的不同

export default  xxx
import xxx from './'

export xxx
import {xxx} from './'

說一下自己常用的es6的功能？

此題是一道開放題，可以自由回答。但要注意像let這種簡單的用法就別說了，說一些經常用到並有一定高度的新功能

像module、class、promise等，儘量講的詳細一點。

什麼是會話cookie,什麼是持久cookie?

cookie是伺服器返回的，指定了expire time（有效期）的是持久cookie,沒有指定的是會話cookie

陣列去重？

此題看著簡單，但要想面試官給你高分還是有難度的。至少也要寫出幾種方法

var arr=['12','32','89','12','12','78','12','32'];
    // 最簡單陣列去重法
    function unique1(array){
        var n = []; //一個新的臨時陣列
        for(var i = 0; i < array.length; i++){ //遍歷當前陣列
            if (n.indexOf(array[i]) == -1)
                n.push(array[i]);
        }
        return n;
    }
    arr=unique1(arr);
    // 速度最快， 佔空間最多（空間換時間）
    function unique2(array){
        var n = {}, r = [], type;
        for (var i = 0; i < array.length; i++) {
            type = typeof array[i];
            if (!n[array[i]]) {
                n[array[i]] = [type];
                r.push(array[i]);
            } else if (n[array[i]].indexOf(type) < 0) {
                n[array[i]].push(type);
                r.push(array[i]);
            }
        }
        return r;
    }
    //陣列下標判斷法
    function unique3(array){
        var n = [array[0]]; //結果陣列
        for(var i = 1; i < array.length; i++) { //從第二項開始遍歷
            if (array.indexOf(array[i]) == i) 
                n.push(array[i]);
        }
        return n;
    }

es6

es6方法陣列去重
arr=[...new Set(arr)];
es6方法陣列去重，第二種方法
function dedupe(array) {
  return Array.from(new Set(array));       //Array.from()能把set結構轉換為陣列
}

get、post的區別

此題比較簡單，但一定要回答的全面

1.get傳參方式是通過位址列URL傳遞，是可以直接看到get傳遞的引數，post傳參方式引數URL不可見，get把請求的資料在URL後通過？連線，通過&進行引數分割。psot將引數存放在HTTP的包體內

2.get傳遞資料是通過URL進行傳遞，對傳遞的資料長度是受到URL大小的限制，URL最大長度是2048個字元。post沒有長度限制

3.get後退不會有影響，post後退會重新進行提交

4.get請求可以被快取，post不可以被快取

5.get請求只URL編碼，post支援多種編碼方式

6.get請求的記錄會留在歷史記錄中，post請求不會留在歷史記錄

7.get只支援ASCII字元，post沒有字元型別限制

你所知道的http的響應碼及含義？

此題有過開發經驗的都知道幾個，但還是那句話，一定要回答的詳細且全面。

1xx(臨時響應)

100: 請求者應當繼續提出請求。

101(切換協議) 請求者已要求伺服器切換協議，伺服器已確認並準備進行切換。

2xx(成功)

200：正確的請求返回正確的結果

201：表示資源被正確的建立。比如說，我們 POST 使用者名稱、密碼正確建立了一個使用者就可以返回 201。

202：請求是正確的，但是結果正在處理中，這時候客戶端可以通過輪詢等機制繼續請求。

3xx(已重定向)

300：請求成功，但結果有多種選擇。

301：請求成功，但是資源被永久轉移。

303：使用 GET 來訪問新的地址來獲取資源。

304：請求的資源並沒有被修改過

4xx(請求錯誤)

400：請求出現錯誤，比如請求頭不對等。

401：沒有提供認證資訊。請求的時候沒有帶上 Token 等。

402：為以後需要所保留的狀態碼。

403：請求的資源不允許訪問。就是說沒有許可權。

404：請求的內容不存在。

5xx(伺服器錯誤)

500：伺服器錯誤。

501：請求還沒有被實現。