前端面經整理之JS和CSS

一 JS
二 CSS

一 JS

==和===的區別

===叫作嚴格運算符 ==叫作相等運算符
嚴格運算符比較時不只僅比較數值還要比較數據類型是否同樣
相等運算符在比較相同類型的數據時，與嚴格相等運算符徹底同樣。 在比較不一樣類型的數據時，相等運算符會先將數據進行類型轉換，而後再用嚴格相等運算符比較。

undefined == null //true
undefined === null //false

ps:判斷NaN能夠用Object.is()

Object.is(NaN, NaN); //true

---

undefined和null的區別

首先,undefined和null在if語句中，都會被自動轉爲false，即null==undefined結果爲true

一般 null表示"沒有對象"，即該處不該該有值，通常用法以下:
（1） 做爲函數的參數，表示該函數的參數不是對象。
（2） 做爲對象原型鏈的終點。Object.getPrototypeOf(Object.prototype) // null
而 undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義，通常用法：
（1）變量被聲明瞭，但沒有賦值時，就等於undefined。
（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。
（3）對象沒有賦值的屬性，該屬性的值爲undefined。
（4）函數沒有返回值時，默認返回undefined。

---

JS的基本數據類型

JS基本數據類型有5種
String Number Boolean Null Undefined
以及引用數據類型Object(包括Array Function)

---

JS中typeof和instanceof用法區別

首先typeof用以獲取一個變量類型
typeof通常只能返回以下幾個結果
number boolean string function object undefined

console.log(typeof i);    // undefined
console.log(typeof 1);   // number
console.log(typeof 'a'); // string
console.log(typeof true);  // boolean

console.log(typeof function () {});  //function

console.log(typeof [1, '2', true]);  //object
console.log(typeof { o: 'hello', c: 'world' });  //object
console.log(typeof null);  //object
console.log(typeof new Number(2));  //object

以上可知用typeof沒法判斷array類型 由於不論是數組仍是對象都會返回object
這時候就須要instanceof了
instanceof運算符用來測試一個對象在其原型鏈中是否存在一個構造函數的prototype屬性 即判斷一個變量是不是某個對象的實例

var arr = [1,2,3]; 
alert(arr instanceof Array);   // true

ps:其餘判斷方法以下
①Array.isArray

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

② constructor

var arr = [1,2,3]; 
console.log(arr.constructor === Array);   // true

③ Object.prototype.toString.call()

var arr = [1,2,3];
Object.prototype.toString.call(arr) === "[object Array]"; //true

JS用setTimeout遞歸實現setInterval

首先 setTimeout()和setInterval()常常被用來處理延時和定時任務 setTimeout()方法用於在指定的毫秒數後調用函數或計算表達式,而setInterval()則能夠在每隔指定的毫秒數循環調用函數或表達式，直到clearInterval把它清除

//setTimeout實現setInterval功能
setTimeout(function(){
  //do something
  setTimeout(arguments.callee,interval);
},interval)

ps:爲何要用setTimeout實現setInterval?

JS中的arguments和arguments.callee

arguments對象是全部（非箭頭）函數中均可用的局部變量。你可使用arguments對象在函數中引用函數的參數
callee是 arguments 對象的一個屬性。它能夠用於引用該函數的函數體內當前正在執行的函數。這在函數的名稱是未知時頗有用，例如在沒有名稱的函數表達式 (也稱爲「匿名函數」)內

代碼演示:

此外arguments是類數組對象 其沒有Array的一些方法 但有相似Array的一些特色
將函數的實際參數轉換成數組的方法以下

/**
_buffer.slice();
// is equivalent to
_buffer.slice(0);
// also equivalent to
_buffer.slice(0, _buffer.length);
**/
var args = Array.prototype.slice.call(arguments)//方法一
var args = [].slice.call(arguments, 0)//方法二
//方法三：
var args = [];
for (var i = 1; i < arguments.length; i++) {
  args.push(arguments[i]);
}

JS嚴格模式('use strict')

首先是嚴格模式的用法

// 爲整個script標籤開啓嚴格模式, 須要在全部語句以前放一個特定語句 "use strict";
"use strict";
var v = "Hi!  I'm a strict mode script!";


//要給某個函數開啓嚴格模式，得把 "use strict";聲明一字不漏地放在函數體全部語句以前
function strict(){
  // 函數級別嚴格模式語法
  'use strict';
  function nested() { return "And so am I!"; }
  return "Hi!  I'm a strict mode function!  " + nested();
}
function notStrict() { return "I'm not strict."; }

嚴格模式同時改變了語法及運行時行爲。變化一般分爲這幾類：將問題直接轉化爲錯誤（如語法錯誤或運行時錯誤）, 簡化了如何爲給定名稱的特定變量計算，簡化了 eval 以及 arguments, 將寫"安全"JavaScript的步驟變得更簡單

嚴格模式主要涉及以下幾個方面

1. 創設eval做用域

2. 禁止this關鍵字指向全局對象

3. 禁止在函數內部遍歷調用棧(即禁止使用arguments和callee)

4. 對象不能有重名的屬性

5. 函數不能有重名的參數

6. 函數必須聲明在頂層

7. ...

詳情 請移步阮一峯的 Javascript 嚴格模式詳解

JS閉包

閉包Closure詳見 白話JS閉包

JS數組去重的簡潔方法

主要是利用 ES6 set和filter方法 詳見 最近碰到的sort排序 以及 set和filter數組去重

JS中的apply、call、bind

簡單總結：

① apply 、 call 、bind 三者都是用來改變函數的this對象的指向的；
② apply 、 call 、bind 三者第一個參數都是this要指向的對象，也就是想指定的上下文；
③ apply 、 call 、bind 三者均可以利用後續參數傳參；
④ bind是返回對應函數，便於稍後調用；apply、call則是當即調用
⑤ call 須要把參數按順序一個個傳遞進來，而 apply 則是把參數放在數組裏

詳情移步深刻淺出妙用 Javascript 中 apply、call、bind

JS的 for in 和 for of

簡單說 for in是遍歷key 而 for of是遍歷value

let arr = ["a","b"];
for (a in arr) {
    console.log(a);//0,1
}

for (a of arr) {
    console.log(a);//a,b
}

ps:如何將對象的鍵名輸出數組

固然for in配合hasOwnProperty能夠過濾來着原型鏈上繼承獲得的屬性

異步解決方案Promise

Promise的構造函數接收一個參數，是函數，而且傳入兩個參數：resolve，reject，分別表示異步操做執行成功後的回調函數和異步操做執行失敗後的回調函數。其實這裏用「成功」和「失敗」來描述並不許確，按照標準來說，resolve是將Promise的狀態置爲fullfiled，reject是將Promise的狀態置爲rejected

舉個?

ps:promise詳情請移步大白話講解Promise

二 CSS

CSS3的box-sizing

1.content-box 默認值 border和padding不計算入width以內
2.border-box border和padding計算入width以內

rem和em的區別

em是相對於父元素的font-size屬性值來計算的
rem是相對於html標籤的font-size屬性值來計算的

居中的幾種方法

主要是水平居中或者垂直居中
詳見web開發經常使用的幾種居中形式

CSS的三種基本引入方式

//外部樣式表 
<link rel="stylesheet" type="text/css" href="mystyle.css">
//內部樣式表
<style>
    hr {color:'white'}
    p {margin-left:20px}
</style>
//內聯
<p style="color:sienna;margin-left:20px">這是一個段落。</p>

CSS權重計算

內聯樣式表的權值最高 1000
ID 選擇器的權值爲 100
Class 類選擇器的權值爲 10
HTML 標籤選擇器的權值爲 1

CSS display: none和visibility: hidden的區別

①都是隱藏元素，可是前者文檔佈局中不佔用空間，後者仍佔用空間
②display：none隱藏產生reflow和repaint（迴流與重繪）
③前者有株連性，即父元素設置display: none後子元素無論怎樣設置都不能顯示，然後者的子元素經過設置visibility: visible後仍是能顯示出來的

CSS的reflow和repaint

reflow:當render樹的一部分或者所有由於大小邊距等問題發生改變而須要重建的過程，叫作迴流
repaint:當諸如顏色背景等不會引發頁面佈局變化，而只須要從新渲染的過程叫作重繪

ps：頁面的顯示過程分爲如下幾個階段

一、生成DOM樹(包括display:none的節點)
二、在DOM樹的基礎上根據節點的集合屬性(margin,padding,width,height等)生成render樹(不包括display:none head節點，可是包括visibility:hidden的節點)
三、在render樹的基礎上繼續渲染顏色背景色等樣式

reflow和repaint詳情請移步

未完待續