面試題以及案例

狗尾巴草發表於2018-07-18
面試題

一維陣列數字從小到大和從大到小排序：

<script type="text/javascript">
var arr=[15,2,433,10000,8888]; 
document.write("<p>原陣列為：" + arr + "</p>");
document.write("<p>從小到大排序：" + arr.sort(function(a,b){return a-b}) + "</p>");
document.write("<p>從大到小排序：" + (arr.sort(function(a,b){return a-b})).reverse() + "</p>");
document.write("<p>從大到小排序：" + (arr.sort(function(a,b){return b-a})) + "</p>");
</script>
複製程式碼

多維陣列數字從小到大和從大到小排序：

<script type="text/javascript">
var arrs=[15,2,443,[56,678],[10,4,99]];
var arr=arrs.join(",").split(","); //轉化為一維陣列
document.write("<p>轉化後的一維陣列為：" + arr + "</p>");
document.write("<p>從小到大排序：" + arr.sort(function(a,b){return a-b}) + "</p>");
document.write("<p>從大到小排序：" + (arr.sort(function(a,b){return a-b})).reverse() + "</p>");
document.write("<p>從大到小排序：" + (arr.sort(function(a,b){return b-a})) + "</p>");
</script>
複製程式碼

刪除陣列最後一個元素

第一種：：

很簡單的解決方案，宣告一個新陣列，迴圈遍歷到原陣列的倒數第二項push進新陣列，返回新陣列

function truncate(arr) {
   var m = [];
   for(var i = 0; i < arr.length - 1; i++){
       m.push(arr[i]);
   }
   return m;
}
複製程式碼
第二種：：

利用splice()的刪除、增加、替換功能

function truncate(arr) {
  var m = arr.slice(0);
  m.splice(m.length-1,1);
  return m;
}
複製程式碼
第三種：

利用slice()淺克隆，進行復制到末端的元素


functiontruncate(arr) {
   returnarr.slice(0,-1);
}
複製程式碼

[]==false：true ![]==false: true

instanceof：檢測某一個例項是否隸屬於這個類

in:檢測當前物件是否存在某個屬性（不管當前這個屬性是物件的私有屬性還是公有屬性，只要有結果就是TRUE）

hasOwnProperty：檢測當前屬性是否為物件的私有屬性（不僅要有這個屬性，而且必須還是私有的才可以）

THIS

1.給當前元素的某個事件繫結方法, 當事件觸發方法執行的時候，方法中的THIS是當前操作的元素物件

2.普通函式執行，函式中的THIS取決於執行的主體，誰執行的，THIS就是誰（執行主體：方法執行，看方法名前面是否有“點”，有的話，點前面是誰this就是誰，沒有this是window）

迴流 重繪

reflow(迴流):當render樹的一部分或者全部因為大小邊距等問題發生改變而需要重建的過程，叫做迴流

repaint(重繪):當諸如顏色背景等不會引起頁面佈局變化，而只需要重新渲染的過程叫做重繪

什麼會引起迴流

頁面渲染初始化

DOM結構變化，比如刪除了某個節點；骨頭都被打斷了，肯定比抽脂更嚴重，所以會引發迴流

render樹變化，比如減少了padding；也就是進行抽脂手術

視窗resize事件觸發

最複雜的一種：獲取某些屬性，引發迴流 很多瀏覽器會對迴流做優化，他會等到足夠數量的變化發生，在做一次批處理迴流。 但是除了render樹的直接變化。 當獲取一些屬性時，瀏覽器為了獲得正確的值也會觸發迴流。這樣就使得瀏覽器的優化失效了 這些屬性包括

offsetTop, offsetLeft, offsetWidth, offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

width,height

呼叫了getComputedStyle(), 或者 IE的 currentStyle

var s = document.body.style;
s.padding = "2px"; // 迴流+重繪
s.border = "1px solid red"; // 再一次 迴流+重繪
s.color = "blue"; // 再一次重繪
s.backgroundColor = "#ccc"; // 再一次 重繪
s.fontSize = "14px"; // 再一次 迴流+重繪
// 新增node，再一次 迴流+重繪
document.body.appendChild(document.createTextNode('abc!'));
複製程式碼

可以看出，迴流一定伴隨著重繪，而重繪卻可以單獨出現

減少迴流

1.避免逐項更改樣式。最好一次性更改style屬性，或者將樣式列表定義為class並一次性更改class屬性

2.避免迴圈操作DOM。建立一個documentFragment或div，在它上面應用所有DOM操作，最後再把它新增到window.document。

3.避免多次讀取offsetLeft等屬性。無法避免則將它們快取到變數。

4.將複雜的元素絕對定位或固定定位，使它脫離文件流。否則迴流代價十分高

  • 補充：改變字型大小會引發迴流
  • display：none指的是元素完全不陳列出來，不佔據空間，涉及到了DOM結構，故產生reflow與repaint
  • visibility：hidden指的是元素不可見但存在，保留空間，不影響結構，故只產生repaint

FOR-IN迴圈

遍歷一個物件中的鍵值對的，有多少組鍵值對，我們就遍歷多少次

let obj = {name: 'xxx', age: 27, 0: 0, sex: 0, score: 100, 1: 1};
for (let key in obj) {
    // console.log(key);//=>KEY儲存的是每一次迴圈獲取的屬性名
    // console.log(obj[key]);//=>每一次迴圈基於KEY獲取屬性值

    // if(key==='age'){
    //     break;  也支援BREAK和CONTINUE等關鍵詞
    // }
    // console.log(key);
}

//=>FOR-IN遍歷的時候有自己的順序：先遍歷數字屬性名（按照小->大），再遍歷字串屬性名（按照書寫順序）
for (let attr in obj) {
    console.log(attr);//=>0 1 name age sex score
}

obj.__proto__===Object.prototype : obj是Object這個類的一個例項
大括號中的是OBJ的私有屬性，Object.prototype上的是OBJ公有屬性
Object.prototype.bbbb = 1000;
for (let key in obj) {
    //=>FOR-IN迴圈只遍歷當前物件可列舉（可遍歷）的屬性
    //1.物件的私有屬性(自己寫的)是可列舉的
    //2.瀏覽器內建的屬性一般都是不可列舉的
    //3.自己在類的原型上設定的屬性也是可列舉的,FOR-IN迴圈的時候也會被遍歷出來（一般情況下我們是不想遍歷到原型上的公有屬性的）
    if (obj.hasOwnProperty(key)) {//=>一般使用FOR-IN在遍歷物件的時候，我們加一個私有屬性的驗證，只有是私有的屬性，我們才做操作
        console.log(key);
    }
}

複製程式碼

相關文章