前端常見基礎面試題

時間 2020-06-14

原文原文鏈接

HTTP

HTTP狀態碼知道哪些？
200 請求已成功，請求所但願的響應頭或數據體將隨此響應返回。javascript

400 請求參數有誤或者語義有誤，當前請求沒法被服務器理解。css

401 當前請求須要用戶驗證html

404 請求失敗，請求所但願獲得的資源未被在服務器上發現。前端

500 服務器遇到了一個不曾預料的情況，致使了它沒法完成對請求的處理。vue
TCP

JavaScript

JS有哪些內置對象？java

Array:

 \- concat: 合併

 \- join: 鏈接成字符串

 \- pop: 移除最後元素

 \- push: 添加元素

 \- shift: 移除第一個元素

 \- slice: 返回數組的一段

 \- sort: 排序

 \- reverse: 反轉

Date:

 \- get/setDate, get/setTime

 \- get/setFullYear, get/setYear, get/setMonth, get/setDay

 \- get/setHours, get/setMinutes, get/setSeconds

RegExp:

 \- g: 全文查找

 \- i: 忽略大小寫

 \- m: 多行查找

String:

 \- charAt: 返回指定索引位置的字符

 \- match: 使用正則進行查找，並返回查找結果

Math:

 \- ceil: 向上取整，floor: 向下取整

 \- round: 四捨五入

 \- random: 隨機數

判斷數據類型的方式

1.typeof 能夠判斷的的類型有 undefined Boolean Number String  Object
    注意 使用typeof 判斷 Array 和 null結果均爲 object
    
    type = typeof a  // 結果爲undefined Boolean Number String  Object
    
    2.instanceof  
    c instanceof Array
    
    3.根據對象的 constructor
    c.constructor === Array  // 繼承的時候會出錯
    
    4.prototype 原型鏈方式
    alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
    alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
    alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
    alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
    alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
    alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;

描述下Array中的split()和join()的區別
1.split()
將一個字符串分割爲子字符串，將結果做爲字符串數組返回，若字符串中存在多個分割符號，亦可分割。
形式：
stringObj.split([separator,[,limit]])
stringObj 必選項 string對象或者文字該對象不會被split方法修改
separator 可選項字符串或者正則表達式對象
limit 可選項返回數組中的元素個數node

把數組中的全部元素放入一個字符串中
形式：
arrayObj.join(separator);
separator 可選項省略該參數，則使用逗號做爲分割符react

方法名	用途	改變原數組
pop	刪除最後一個並返回，改變原數組	是
push	向數組末尾添加元素，並返回新的長度	是
unshift	向數組開頭添加元素，並返回新的長度	是
reverse	顛倒數組順序	是
shift	將第一個元素刪除而且返回，空即爲undefined	是
splice	splice(start,length,item)新增刪除替換數組元素，返回被刪除數組，無刪除不返回	是
sort	對數組排序，改變原數組	是
concat	鏈接多個數組，返回新的數組	否
join	將數組中全部元素以參數做爲分隔符放入一個字符串	否
slice	slice(start,end)，返回選定元素	否
split	分割（字符串操做）	否

什麼是Ajax和JSON，它們的優缺點
使用JS寫個原生的Ajax過程

var xhr = new XMLHttpRequest();
    
    xhr.open(url);
    
    xhr.send();

Ajax中的get和post請求方式的區別
GET - 從指定的資源請求數據。
POST - 向指定的資源提交要被處理的數據webpack

請求方式	緩存	請求是否保留在瀏覽器歷史記錄	是否可收藏爲書籤	長度限制
GET	可被緩存	保留	可收藏	有長度限制
POST	不可被緩存	不保留	不可收藏	無長度限制

如何實現鼠標點擊頁面中的任意標籤，alert該標籤的名稱。注意兼容性
請寫出如下這段JS代碼的輸出結果，並解釋緣由。es6

var num = 100;

var obj = {
```
num: 200,

 inner: {

   num: 300,

   print: function () {

     console.log(this.num);

   }

 }
```
};

obj.inner.print(); // 300 隱式綁定調用棧：obj -> inner -> print

var func = obj.inner.print;

func(); // 100 默認綁定調用棧：window -> func

(obj.inner.print)(); // 300 隱式綁定調用棧：window -> obj -> inner -> print

(obj.inner.print = obj.inner.print)(); // 100 隱式丟失
DOM事件流包括哪幾個階段？
1. 捕獲階段：事件從document節點自上而下向目標節點傳播的階段
2. 目標階段：真正的目標節點正在處理事件的階段
3. 冒泡階段：事件從目標節點自上而下向Document節點傳播的階段

事件委託的實現原理是什麼？有什麼優缺點？
什麼是原型鏈？什麼是做用域鏈？分別有什麼做用？
請使用原生JavaScript爲如下li實現事件委託，點擊後打印其對應的node-type屬性值。

<ul id="test">
```
<li node-type='1'>惠普金融</li>

<li node-type='2'>愛錢進</li>

<li node-type='3'>硅谷中心</li>
```
</ul>
已知構造函數A，請實現B函數，須要繼承A

var A = function(name) {
```
this.name = name;
```
};

A.prototype = {
```
fun1: function() {},

fun2: function() {}
```
};
請寫出如下這段JS代碼的輸出結果，並解釋緣由。

var num = 100;

function print() {
```
console.log(num);

var num;
```
}

print(); //undefined 閉包
請寫出如下這兩段JS代碼的輸出結果，並分別解釋緣由。

// a.js

(function(num){
```
console.log(num);

var num = 10;
```
}(100)); // 100

// b.js

(function(num){
```
console.log(num);

var num = 10;

function num(){}; // function num() { … } 代碼解析階段
```
}(100));
// JavaScript 中，函數及變量的聲明都將被提高到函數的最頂部。
// JavaScript 中，變量能夠在使用後聲明，也就是變量能夠先使用再聲明。
// JavaScript 初始化不會提高

其實主要理解 js 的解析機制就行。遇到 script 標籤的話 js 就進行預解析，將變量 var 和 function 聲明提高但不會執行 function，而後就進入上下文執行，上下文執行仍是執行預解析一樣操做直到沒有 var 和 function，就開始執行上下文。

什麼是函數節流？它有什麼做用？請寫一段函數節流的示範代碼？
JS基礎數據類型與引用數據類型有哪些？請根據提示完成如下getType的函數代碼。

Number、String 、Boolean、Null和Undefined。
基本數據類型是按值訪問的，由於能夠直接操做保存在變量中的實際值。

引用數據類型，也就是對象類型Object type，好比：Function、Object、Date、RegExp、Number、String、Boolean和自定義類等

/*

\* 返回變量的具體類型名稱

\* @param obj 待斷定的變量

*/

function getType(value) {
  var a = Object.prototype.toString.call(value).split(" ")[1];
  return a.substring(0,a.length-1)
}

編寫有返回的提交表單的AJAX方法？

$.ajax({
    type: "POST",//方法類型
    dataType: "json",//預期服務器返回的數據類型
    url: url ,//url
    data: data,
    success: function (result) {
       
    },
    error : function() {
       
    }
});

請編寫一個JS函數parseQueryString，它的用途是把URL參數解析爲一個對象，如：

var url = "http://example.cn/index.html?key0=0&key1=1&key2=2";
function parseQueryString(url) {
var params = {};
var urls = url.split("?");
var arr = urls[1].split("&");
for (var i = 0, l = arr.length; i < l; i++) {
```
var a = arr[i].split("="); 
params[a[0]] = a[1];
```
}
return params;
}
在一個方法中定義變量不寫var會致使什麼結果？
Ajax同步和異步的區別？

async值爲true （異步）

當ajax發送請求後，在等待server端返回的這個過程當中，前臺會繼續執行ajax塊後面的腳本，直到server端返回正確的結果纔會去執行success，也就是說這時候執行的是兩個線程，ajax塊發出請求後一個線程和ajax塊後面的腳本（另外一個線程）

async值爲false （同步）

當執行當前AJAX的時候會中止執行後面的JS代碼，直到AJAX執行完畢後時，才能繼續執行後面的JS代碼。

請寫出如下代碼運行結果：

var obj = {
  fullName: "javascript",
  prop: {
    getFullName: function () {
      return this.fullName;
    }
  }
};

console.log(obj.prop.getFullName()); // undefined

var test = obj.prop.getFullName;// undefined

console.log(test());

請寫出如下代碼運行結果

var name = "window";
var Tom = {
  name: "Tom",
  show: function() {
    console.log(this.name);
  },
  wait: function() {
    var fun = this.show;
    fun();
  }
};

Tom.wait(); // undefined

在String對象上定義一個repeatify函數。這個函數接受一個整數參數，來明確字符串須要重複幾回。這個函數要求字符串重複指定的次數。好比：
'abc'.repeatify(3) // abcabcabc

var str = 'hello<img src="haha.png" alt="哈哈" />world';
   
   // 正則匹配輸出'hello\[哈哈\]world'

javaScript window.onload事件和jQuery ready函數有何不一樣
- | window.onload() | $(document).ready()

加載時機	必須等待網頁所有加載完畢（包括圖片等），而後再執行JS代碼	只須要等待網頁中的DOM結構加載完畢，就能執行JS代碼
執行次數	只能執行一次，若是第二次，那麼第一次的執行會被覆蓋	能夠執行屢次，第N次都不會被上一次覆蓋

解釋一下JavaScript的同源策略。你所能瞭解到的Ajax跨越解決方案以及各類方案的優缺點。
[1,2,3] == [1,2,3] 和 [1,2,3] === [1,2,3]的結果？
寫出如下代碼運行結果
var a = 8;

let r = 9;

// 分開考慮下面的結果

let a = r == 9 || 4;

console.log(a); // 標識符已經被聲明

let b = r == 9 || 4;

console.log(b) // true

29.寫出如下代碼運行結果

var data =[];
for (let k = 0; k < 3; k++) {
  data[k] = function () {
    console.log(k);
  };
}

data[0](); // 0
data[1](); // 1
data[2](); // 2 若上述for循環中換爲var 則輸出爲 3 3 3

var arr = ['a','b','c','d']，分別寫出delete arr[1]和arr[1] = null操做以後的arr的結果和arr[1]的結果
JS中不使用臨時變量將兩個變量的值進行交換。

// es 6 解構
    let a = 1,
    b = 2;
    [a, b] = [b, a];
    // 2 數組的特性
    b = [a,a=b][0];
    // 3 亦或
    a ^= b;
    b ^= a;
    a ^= b;

完成confirmEnding函數，來判斷一個字符串(str)是否以指定的字符串(target)結尾
function confirmEnding(str, target) {

}
找出「The quick brown fox jumped over the lazy dog"字符串中最長的單詞，返回該項的內容和長度。
寫出計算一個整數的階乘的方法（定義一個方法編寫）

// 遞歸調用
function factorial(n){
```
return n > 1 ? n * factorial(n-1) : 1;
```
}
factorial(5);//120
按要求進行數組的操做
let arr = ['html', 'css', 'js', 'vue', 'angular', 'bootstrap']

要求輸出結果爲：

['js', 'css', 'vue', 'html', 'angular', 'bootstrap']
談談你對模塊化的理解
寫出下面運行結果

var bar = 0;

var obj = {
```
bar: 1,

foo: function() {

console.log(this.bar);

}
```
};

var obj2 = {
```
bar: 2,

foo: obj.foo
```
};

var obj3 = {
```
bar: 3,

foo: function() {

return obj.foo;

}
```
};

var tempFoo = obj2.foo;

obj.foo(); // 1

obj2.foo(); // 2

obj3.foo(); // 0

tempFoo(); // 0
什麼是做用域，如何改變做用域？

js只有兩種形式的做用域：全局做用域和函數做用域
es6 新增塊級做用域
改變做用域方法：使用apply()方法：使用call()方法：使用new關鍵字：

寫出下面程序的運行結果
for (var i = 0; i < 10; i++) {

setTimeout(function() {

console.log(i);

});

}

// 輸出十個10 同時
什麼是內存泄漏？
再也不用到的內存，沒有及時釋放，就叫作內存泄漏
寫一個方法實現對數組進行隨機排序

var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
```
return Math.random() - 0.5;
```
})
console.log(arr);

// 數組去重
[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
談一談ES6中的let和箭頭函數有哪些特色？

let 做用於

談一談你對ES6的瞭解
寫一個倒計時程序，要求XXXX年XX月XX日XX時XX分XX秒（動態）
手寫判斷在數組中最大的值，而後讓數組的第一個數跟最大的數相乘，返回最後的結果
// 數組最大值
var arr = [ 1,5,1,7,5,9];
Math.max(...arr) // 9
寫出下面程序的運行結果，並解釋緣由

var a = 'aa';

function foo() {
```
alert(a);

var b = 'bb';

alert(b);
```
}

test();
寫出下面程序的運行結果，並解釋緣由

function Foo() {
```
getName = function() {

alert(1);

}

return this;
```
}

new Foo().getName();
不執行
['1', '2', '3'].map(parseInt)的結果爲多少? 並解釋緣由？若是修改爲指望的結果？
```
["1", "2", "3"].map(parseInt);
```
// 你可能覺的會是[1, 2, 3]

// 但實際的結果是 [1, NaN, NaN]

// 一般使用parseInt時,只須要傳遞一個參數.

// 但實際上,parseInt能夠有兩個參數.第二個參數是進制數.

// 能夠經過語句"alert(parseInt.length)===2"來驗證.

// map方法在調用callback函數時,會給它傳遞三個參數:當前正在遍歷的元素, 元素索引, 原數組自己.

// 第三個參數parseInt會忽視, 但第二個參數不會,也就是說,

// parseInt把傳過來的索引值當成進制數來使用.從而返回了NaN.

function returnInt(element) {
```
return parseInt(element, 10);
```
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]

// 意料之中的結果

// 也可使用簡單的箭頭函數，結果同上

['1', '2', '3'].map(str => parseInt(str));

// 一個更簡單的方式:

['1', '2', '3'].map(Number); // [1, 2, 3]

// 與`parseInt` 不一樣，下面的結果會返回浮點數或指數:

['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
談談你對promise的理解
閉包是什麼？使用閉包實現ul>li點擊，彈出對應的下標？
一個數組中，如何刪除第三個元素？
如何阻止事件的冒泡（考慮兼容性）?
統計字符串中每一個字符出現的次數，最多的是誰，出現了幾回？
var str = "helloworld";
let 和 const聲明變量區別是什麼，其應用場景有啥不一樣？
Object.assign()函數的做用和用法，請舉例說明？
深淺拷貝
如何合併兩個對象？
Object.assign()
但願獲取到頁面中全部的checkbox怎麼作？（不使用第三方庫或者框架）
call和apply的區別？

定義：

apply：調用一個對象的一個方法，用另外一個對象替換當前對象。例如：B.apply(A, arguments);即A對象應用B對象的方法。

call：調用一個對象的一個方法，用另外一個對象替換當前對象。例如：B.call(A, args1,args2);即A對象調用B對象的方法。

共同之處：

都「能夠用來代替另外一個對象調用一個方法，將一個函數的對象上下文從初始的上下文改變爲由thisObj指定的新對象」。

不一樣之處：

apply：最多隻能有兩個參數——新this對象和一個數組argArray。若是給該方法傳遞多個參數，則把參數都寫進這個數組裏面，固然，即便只有一個參數，也要寫進數組裏。若是argArray不是一個有效的數組或arguments對象，那麼將致使一個TypeError。若是沒有提供argArray和thisObj任何一個參數，那麼Global對象將被用做thisObj，而且沒法被傳遞任何參數。

call：它能夠接受多個參數，第一個參數與apply同樣，後面則是一串參數列表。這個方法主要用在js對象各方法相互調用的時候，使當前this實例指針保持一致，或者在特殊狀況下須要改變this指針。若是沒有提供thisObj參數，那麼 Global 對象被用做thisObj。

實際上，apply和call的功能是同樣的，只是傳入的參數列表形式不一樣。

請分別解釋 filter() , map() , every() , some() , join() 的做用以及區別。
如何將僞數組轉換爲數組？
var arr = Array.prototype.slice.call(aLi)
var aLi = document.querySelectorAll('li');

3 console.log(aLi.constructor === Array) //false
4
5 aLi.__proto__ = Array.prototype;
6
7 console.log(aLi.constructor === Array) //true

如何實現數組的去重？

CSS&Less&Sass

CSS引入的方式有哪些？link和@import的區別是？

區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。
區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。
區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。