前端面試題目總結

一：css

1.75道css面試題，附必過答案

詳情參考連接(比較詳細)：www.bslxx.com/a/mianshiti…

二：react

1.react中經過proxy解決跨域問題

在webpack裏面寫上相似於：

"proxy": {

"/api": {
  "target": "http://localhost:8080",
  "pathRewrite": {
    "^/api" : ""
  },
  "changeOrigin": true
}
複製代碼

}

2.react常見面試題目網址：blog.csdn.net/qq_25073545…

3.服務端渲染好處

SEO，讓搜索引擎更容易讀取頁面內容

首屏渲染速度更快（重點），無需等待js文件下載執行的過程

更易於維護，服務端和客戶端能夠共享某些代碼

三：js

1.js中幾種實用的跨域方法原理詳解

這裏說的js跨域是指經過js在不一樣的域之間進行數據傳輸或通訊，好比用ajax向一個不一樣的域請求數據，或者經過js獲取頁面中不一樣域的框架中(iframe)的數據。只要協議、域名、端口有任何一個不一樣，都被看成是不一樣的域。

詳細看法請見網址：www.cnblogs.com/2050/p/3191…

2.經典的20道AJAX面試題

AJAX是「Asynchronous JavaScript and XML」的縮寫。他是指一種建立交互式網頁應用的網頁開發技術。

詳細信息請見網址：blog.csdn.net/chow__zh/ar…

3.AJAX常見面試問題你會多少？ajax的12個常見面試題及其答案

本篇文章主要的講述了關於ajax的面試題問題和答案，你們能夠多看看，看看那些面試的那些人是如何出題的，還有看看正確答案究竟是什麼。如今就讓咱們來看這篇文章吧

詳細信息請見網址：www.php.cn/js-tutorial…

4.js閉包 、 做用域 、 原型鏈等面試題目

**1）完全搞懂JS閉包各類坑**

閉包指的是：可以訪問另外一個函數做用域的變量的函數。清晰的講：閉包就是一個函數，這個函數可以訪問其餘函數的做用域中的變量
複製代碼

一：閉包的缺點：

1） 引用的變量可能發生變化
  
  function outer() {
  var result = [];
  for （var i = 0； i<10; i++）{
    result.[i] = function () {
        console.info(i)
    }
 }
 return result
複製代碼

}

打印10個10

解決方法：

function outer() { var result = []; for （var i = 0； i<10; i++）{ result.[i] = function (num) { return function() { console.info(num); // 此時訪問的num，是上層函數執行環境的num，數組有10個函數對象，每一個對象的執行環境下的number都不同 } }(i) } return result } 打印1,2,3,4，5,6,7,8,9,10

2） this指向問題

var object = { name: ''object"， getName： function() { return function() { console.info(this.name) } } } object.getName()() // underfined // 由於裏面的閉包函數是在window做用域下執行的，也就是說，this指向windows

3）內存泄露問題

function  showId() {
    var el = document.getElementById("app")
    el.onclick = function(){
      aler(el.id)   // 這樣會致使閉包引用外層的el，當執行完showId後，el沒法釋放
    }
}
複製代碼

// 改爲下面

function  showId() {
    var el = document.getElementById("app")
    var id  = el.id
    el.onclick = function(){
      aler(id)   // 這樣會致使閉包引用外層的el，當執行完showId後，el沒法釋放
    }
    el = null    // 主動釋放el
}
複製代碼

二：閉包的優勢

爲何閉包有那麼多缺點，那麼多很差的地方，爲啥還要用閉包呢？具體緣由參考下面：

技巧1： 用閉包解決遞歸調用問題

function  factorial(num) {
   if(num<= 1) {
       return 1;
   } else {
      return num * factorial(num-1)
   }
}
var anotherFactorial = factorial
factorial = null
anotherFactorial(4)   // 報錯 ，由於最好是return num* arguments.callee（num-1），arguments.callee指向當前執行函數，可是在嚴格模式下不能使用該屬性也會報錯，因此藉助閉包來實現
複製代碼

使用閉包實現遞歸

function newFactorial = （function f(num){
    if(num<1) {return 1}
    else {
       return num* f(num-1)
    }
}）  //這樣就沒有問題了，實際上起做用的是閉包函數f，而不是外面的函數newFactorial
複製代碼

技巧2：用閉包模仿塊級做用域**

es6沒出來以前，用var定義變量存在變量提高問題，eg:

for(var i=0; i<10; i++){
    console.info(i)
}
alert(i)  // 變量提高，彈出10

//爲了不i的提高能夠這樣作
(function () {
    for(var i=0; i<10; i++){
         console.info(i)
    }
})()
alert(i)   // underfined   由於i隨着閉包函數的退出，執行環境銷燬，變量回收

複製代碼

做用域

一：js做用域（全局變量，局部變量）內部能夠訪問外部，但外部的不能訪問內部的

var a=10;
function aaa(){ 
    alert(a);
};
aaa(); //a 爲外部變量即全局變量，因此能夠直接訪問到 結果爲10
複製代碼

function aaa(){
var a=10;  
};
aaa();
alert(a); //a 爲函數aaa()內部變量量即局部變量，因此沒法訪問到
複製代碼

var a=10; 
function aaa(){ 
 alert(a);
};            
function bbb(){
var a=20;
aaa();
}
bbb(); //結果爲10，由於aaa()函數不能訪問到bbb()裏面的局部變量，因此訪問到的是a=10,這個全局變量。
複製代碼

二.不用var 定義變量時，會默認爲是全局變量（不規範，不推薦）

function aaa(){
   a=10; 
}
aaa();
alert(a); //結果爲10; 
//等價於：
var a;
function aaa(){
  a=10;
};
aaa();
alert(a);
複製代碼

JS中的塊級做用域，var、let、const三者的區別

首先，ECMAScript和JavaScript關係：

ECMAScript是一個國際經過的標準化腳本語言。JavaScript由ECMAScript和DOM、BOM三者組成。能夠簡單理解爲：ECMAScript是JavaScript的語言規範，JavaScript是ECMAScript的實現和擴展。

1. 塊做用域{ }

JS中做用域有：全局做用域、函數做用域。沒有塊做用域的概念。ECMAScript 6(簡稱ES6)中新增了塊級做用域。 塊做用域由 { } 包括，if語句和for語句裏面的{ }也屬於塊做用域。

<script type="text/javascript">
	{
		var a = 1;
		console.log(a); // 1
	}
	console.log(a); // 1
	// 可見，經過var定義的變量能夠跨塊做用域訪問到。

	(function A() {
		var b = 2;
		console.log(b); // 2
	})();
	// console.log(b); // 報錯，
	// 可見，經過var定義的變量不能跨函數做用域訪問到

	if(true) {
		var c = 3;
	}
	console.log(c); // 3
	for(var i = 0; i < 4; i++) {
		var d = 5;
	};
	console.log(i);	// 4   (循環結束i已是4，因此此處i爲4)
	console.log(d); // 5
	// if語句和for語句中用var定義的變量能夠在外面訪問到，
	// 可見，if語句和for語句屬於塊做用域，不屬於函數做用域。
</script>
複製代碼

2. var、let、const的區別

var定義的變量，沒有塊的概念，能夠跨塊訪問, 不能跨函數訪問。

let定義的變量，只能在塊做用域裏訪問，不能跨塊訪問，也不能跨函數訪問。

const用來定義常量，使用時必須初始化(即必須賦值)，只能在塊做用域裏訪問，並且不能修改。