2017年前端面試題整理

Javasript

1.請定義一個方法，傳入一個string類型的參數，而後將string的每一個字符間加個空格返回

spacify('hello world') // => 'h e l l o  w o r l d'

function spacify(str) {
  return str.split('').join(' ');
}

先使用split把字符串分割成數組，而後使用join給每一個數組後面添加一個空格而且拼接成字符串

2.如何把這個方法放入 String 對象上面

'hello world'.spacify();

String.prototype.spacify = function(){
  return this.split('').join(' ');
};

3.函數聲明和函數表達式的區別

1.函數聲明建立的函數能夠在定義以前就進行調用,而用函數表達式建立的函數不能在被賦值以前進行調用
 2.出現這個區別的緣由，如今這兩種類型在Javascript function hoisting(函數提高）和運行時機（解析時/運行時）上的差別

4.e.target與e.currentTarget的區別

e.curretnTarge是指註冊了事件監聽器的對象，e.target是指對象裏的子對象，實際觸發這個事件的對象

5.在另外一個函數中保持this上下文有幾種方法？

1.能夠將this賦值給另一個變量上（self、_this、that），改變上下文以後繼續引用它
2.使用Function.prototype.bind，bind()方法建立一個新的函數, 當被調用時，將其this關鍵字設置爲提供的值，在調用新函數時，在任何提供以前提供一個給定的參數序列。
3.使用箭頭函數

6.箭頭函數與傳統的JavaScript函數主要區別

1.對 this 的關聯。函數內置 this 的值，取決於箭頭函數在哪兒定義，而非箭頭函數執行的上下文環境。
2.new 不可用。箭頭函數不能使用 new 關鍵字來實例化對象，否則會報錯。
3.this 不可變。函數內置 this 不可變，在函數體內整個執行環境中爲常量。
4.沒有arguments對象。更不能經過arguments對象訪問傳入參數。

7.截取和清空數組

var arr = [1, 2, 3, 4];
arr.length = 2;   //截取，arr = [1, 2];  
arr.length = 0;   //清空，arr will be equal to []

8.獲取數組的最大最小值

var numbers = [1, 3, 5, -10];
var maxInNumbers = Math.max.apply(Math, numbers);   //5
var minInNumbers = Math.min.apply(Math, numbers);   //-10

9.Js中的new（）到底作了些什麼？

1.建立一個空對象。
2.屬性和方法被加入到 this 引用的對象中。
3.新建立的對象由 this 所引用，而且最後隱式的返回 this 。

var obj={};
obj.__proto__=fn.prototype;
fn.call(obj);

10.eval是作什麼的？

它的功能是把對應的字符串解析成JS代碼並運行；
應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。

11.哪些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。
setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

12.call() 和 apply() 的區別和做用？

區別：apply()與call()做用沒有區別，用法與call()方法稍有區別，就是call()的第二個參數(調用函數使用的參數)，是一個一個傳入的；而apply()的第二個參數的值是使用數組的形式傳入的
做用：在Javascript中，每一個函數都包含兩個非繼承而來的方法，call和apply。這兩個方法的用途都是在特定的做用域中調用函數，實際上等於設置函數體內的this對象的值。

apply方法接收兩個參數，第一個參數是在其中運行函數的做用域，第二個是一個參數數組或者arguments對象。
call方法與apply方法做用相同，第一個參數也相同，區別在於，其他的參數須要逐個列出。

apply(thisArg, argArray);
call(thisArg[,arg1,arg2…]);

是使用call仍是apply要看具體的狀況。若是你知道全部參數或者參數的數量很少，可使用call；
若是參數的數量不肯定，或者數量很大，或者你收到的是一個數組或者是個arguments對象，則須要使用apply。

13.什麼是閉包，閉包的特性，閉包的優勢與缺點？

閉包 是指有權訪問另外一個函數做用域中的變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量

1.函數嵌套函數
2.函數內部能夠引用外部的參數和變量
3.參數和變量不會被垃圾回收機制回收

優勢是能夠避免全局變量的污染，變量和方法私有化，不讓外部修改這些屬性
缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露

Css

1.清除浮動有幾種方式，浮動引發的問題

1.在全部浮動標籤後面添加一個空標籤，css clear:both 弊端添加了無心義的標籤
2.使用overflow給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6
3.使用css僞類before，該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；
after{
  content:".";
  height:0;
  visibility:hidden;
  display:block;
  clear:both;
}

浮動元素引發的問題：
1.父元素的高度沒法被撐開，影響與父元素同級的元素
2.與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
3.若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

2.IE 8如下版本的瀏覽器中的盒模型有什麼不一樣

IE8如下瀏覽器的盒模型中定義的元素的寬高不包括padding和border

3.CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？

1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.後代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.僞類選擇器（a: hover, li:nth-child）

可繼承的樣式： font-size font-family color, text-indent;
不可繼承的樣式：border padding margin width height ;

!important >  id > class > tag

4.CSS3新增僞類有那些？

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled  :disabled 控制表單控件的禁用狀態。
:checked        單選框或複選框被選中。

5.position的值， relative和absolute分別是相對於誰進行定位的？

absolute 
    生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。

fixed （老IE不支持）
    生成絕對定位的元素，相對於瀏覽器窗口進行定位。 

relative 
    生成相對定位的元素，相對於其在普通流中的位置進行定位。 

static  默認值。沒有定位，元素出如今正常的流中

6.CSS中 link 和@import 的區別是？

1.link屬於HTML標籤，而@import是CSS提供的; 
2.頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
3.import只在IE5以上才能識別，而link是HTML標籤，無兼容問題; 
4.link方式的樣式的權重 高於@import的權重.

7.href與src的區別

1.src 是指向物件的來源地址，是引入。在 img、script、iframe 等元素上使用。
2.href 是超文本引用，指向須要連結的地方，是與該頁面有關聯的，是引用。在 link和a 等元素上使用。
3.使用區別：src一般用做「拿取」（引入），href 用做 "連結前往"（引用）。

8.什麼是盒子模型

一個是由content、padding、border、margin組成的元素就是盒子模型，用來設置元素在網頁中的大小和位置。

9.transform屬性裏面有幾種動畫效果？（3種便可）

rotate（旋轉）  scale（縮放）   translate（位移）

最近面試蛋疼不少都忘的差很少了，先溫習到這，但願對你們有幫助。