Web端常見問題總結

1.ES6箭頭函數和普通函數的區別（至少3點）

（1）箭頭函數的this永遠指向其上下文的 this，任何方法都改變不了其指向，如call(), bind(), apply()，普通函數的this指向調用它的那個對象
（2）變量提高，因爲js的內存機制，function的級別最高，而用箭頭函數定義函數的時候，須要var(let const)關鍵詞，而var所定義的變量不能獲得變量提高，故箭頭函數必定要定義於調用以前
（3）箭頭函數不能做爲構造函數，不能被new，沒有property

2.彈性佈局

3.git經常使用指令

1.查看版本庫狀態：git status
2.添加文件到stage中：
    $ git add README.md    #僅添加README.md文件
    $ git add *.py         #添加全部python文件
    $ git add .            #添加當前目錄下的全部文件       
3.將stage中的內容提交到當前分支：
    $ git commit -m "msg of commit" -a     #提交stage中全部內容
    $ git commit -m "msg of commit"            #同上
    $ git commit -m "msg of commit" filename   #僅提交filename文件
    $ git commit --amend   #增補提交，尚未用過 
4.撤銷在工做區作的修改：
    $ git checkout -- README.md        #撤銷對文件README.md的修改
    $ git checkout -- .                #撤銷對全部文件的修改
    $ git checkout -- *.py         #撤銷對全部python文件的修改 
//1）文件在修改後沒有add到stage區，撤銷以後文件狀態與版本庫保持一致； 
//2）文件已經add到stage區，然後在工做區有對其進行了修改，此時撤銷工做區中文件的修改，文件和stage區中的狀態保持一致。  
5.撤銷add到stage中的內容:
    $ git reset HEAD README.md #將stage區中的README.md文件撤銷回工做區
    $ git reset HEAD           #將stage區中的全部文件撤銷回工做區
6.查看版本日誌:git log
7.版本回退:
//當咱們發現最近提交到版本庫中的內容有誤，須要將版本庫回退到以前某個版本時，就須要使用以下指令進行版本回退：
    $ git reset --hard HEAD^   #回退到上一個版本
    $ git reset --hard HEAD^^  #回退到上上個版本
    $ git reset --hard HEAD~10    #回退到以前10個版本
    $ git reset --hard 5185793 #回退到版本號開頭是5185793的版本
8.版本恢復：
    $ git reflog
    5185793 HEAD@{0}: reset: moving to HEAD^
    a65eebe HEAD@{1}: commit: add push_email.py
    5185793 HEAD@{2}: commit: add test
    0e24ff7 HEAD@{3}: commit (initial): add README.md

    $ git reset --hard a65eebe
9.刪除文件：
    $ git rm test  #刪除文件
    rm 'test'
    $ git status   #查看狀態
    On branch master
    Changes to be committed:
      (use "git reset HEAD <file>..." to unstage)

        deleted:    test
    $ git commit -m"remove test"   #提交刪除

    //誤刪，使用checkout恢復該文件
    $ git checkout -- test

4.npm維護的文件中有哪幾種依賴：

dependencies：應用依賴
devDependencies：開發環境依賴
peerDependencies：同等依賴，或者叫同伴依賴
optionalDependencies：可選依賴
bundledDependencies / bundleDependencies：打包依賴

5.iframe優缺點：

//優勢
1.iframe可以原封不動的把嵌入的網頁展示出來。
2.若是有多個網頁引用iframe，那麼你只須要修改iframe的內容，就能夠實現調用的每個頁面內容的更改，方便快捷。
3.網頁若是爲了統一風格，頭部和版本都是同樣的，就能夠寫成一個頁面，用iframe來嵌套，能夠增長代碼的可重用。
4.若是遇到加載緩慢的第三方內容如圖標和廣告，這些問題能夠由iframe來解決。
5.重載頁面時不須要重載整個頁面，只須要重載頁面中的一個框架頁(減小了數據的傳輸，增長了網頁下載速度)
//缺點
1、頁面樣式調試麻煩，出現多個滾動條；
2、瀏覽器的後退按鈕失效；
3、過多會增長服務器的HTTP請求；
4、小型的移動設備沒法徹底顯示框架；
5、產生多個頁面，不易管理；
6、不容易打印；
七、代碼複雜，沒法被一些搜索引擎解讀。

6.src和href的區別：

//src
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。
當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。
//href
href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，如link  a

7.JS中避免回調地獄的方法：

//1.什麼是回調地獄（callback  hell）
    在使用JavaScript時，爲了實現某些邏輯常常會寫出層層嵌套回調函數，若是嵌套過多，會極大影響代碼可讀性和邏輯，這種狀況也被成爲回調地獄(callback hell)

//2.如何避免
//2.1 解決回調嵌套問題（ES6 promise）
    Promise 對象就是爲了解決這個問題而提出的。它不是新的語法功能，而是一種新的寫法，容許將回調函數的嵌套，改爲鏈式調用。
.then(function(){
    console.log('frist');
}).then(function(){
    return sayhello("huawei");
    console.log('second');
}).then(function(){
    console.log('second');
}).then(function(){
    return sayhello("apple");
}).then(function(){
    console.log('end');
}).catch(function(err){
    console.log(err);
})
//但看着那一堆then，其實並無將嵌套回調的問題根本上的解決，只是換了一種寫法而已。
//2.2 ES6 co/yield方案
yield: Generator 函數是協程在 ES6 的實現，而yield是 Generator關鍵字， 異步操做須要暫停的地方，都用yield語句註明。 
co: co 模塊是著名程序員 TJ Holowaychuk 於 2013 年 6 月發佈的一個小工具，用於 Generator 函數的自動執行。
//2.2.1 什麼是Generator 函數？
    Generator 函數是協程在 ES6 的實現，最大特色就是能夠交出函數的執行權（即主動交出執行權，暫停執行）。 
    整個 Generator 函數就是一個封裝的異步任務，或者說是異步任務的容器。異步操做須要暫停的地方，都用yield語句註明。Generator 函數的執行方法以下。
function* gen() {
     yield console.log("test 1");
     yield console.log("test 2");
     yield console.log("test 3");
    return y;
}

var g = gen();
g.next()//「test 1」
g.next()//「test 2」
    Generator 函數不一樣於普通函數的另外一個地方，即執行它不會返回結果，返回的是指針對象。調用指針g的next方法，會移動內部指針（即執行異步任務的第一段），指向第一個遇到的yield語句，打印」test 1」並暫停，再次調用next會打印」test 2」暫停住，但不會打印」test 3」
Generator 函數能夠暫停執行和恢復執行，這是它能封裝異步任務的根本緣由
//2.3 ES7 async/await 方案
    async/await是es7的新標準，而且在node7.0中已經獲得支持。 
它就是 Generator 函數的語法糖，async函數就是將 Generator 函數的星號（*）替換成async，將yield替換成await，僅此而已。能夠理解官方對co和Generator 封裝方案。

    async關鍵字用於修飾function，async函數的特徵在於調用return返回的並非一個普通的值，而是一個Promise對象，若是正常return了，則返回Promise.resolve(返回值)，若是throw一個異常了，則返回Promise.reject(異常)。

    await關鍵字只能在async函數中才能使用，也就是說你不能在任意地方使用await。await關鍵字後跟一個promise對象（你想要執行的異步操做），函數執行到await後會退出該函數，直到事件輪詢檢查到Promise有了狀態resolve或reject 才從新執行這個函數後面的內容。

 //使用
var sayhello = function(name, ms){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log("hello");
            console.log(name);
         if(name === "huawei")
                return reject(name);
             else
           return resolve("helloworld");

        }, ms);
    });
}

async function test() {
    try {
        console.log('frist');
        await sayhello("xiaomi", 2000);
        console.log('second');
        await sayhello("huawei", 1000);
        console.log('end');
        await sayhello("apple", 500);
    }
    catch (err) {
        console.log('err:'+err);
    }
};

test();

//對錯誤的處理
    await命令後面的 Promise 對象若是變爲reject狀態，則reject的參數會被catch方法的回調函數接收到，然後續的await函數就不會繼續執行了。咱們應該在將await語句放在try catch代碼塊中，若是有多個await命令，能夠統一放在try…catch結構中，咱們經過這種方式對發生的異步錯誤進行處理。

8.判斷變量爲數組類型：

Object.prototype.toString.call(數組)=='[object Array]';  //true爲數組

9.瀏覽器緩存問題：

https://blog.csdn.net/u011001084/article/details/53005615/

10.JS經常使用跨域方法：

1.CORS（Cross-Origin Resource Sharing）
2.jsonp
3.document.domain + iframe
4.html5  window.postMessage(message,targetOrigin) 

11.react高階組件：

先來回顧高階函數的定義：接收函數做爲輸入，或者輸出另外一個函數的一類函數，被稱做高階函數。對於高階組件，它描述的即是接受React組件做爲輸入，輸出一個新的React組件的組件。

更通俗地描述爲，高階組件經過包裹（wrapped）被傳入的React組件，通過一系列處理，最終返回一個相對加強（enhanced）的React組件，供其餘組件調用。以下：

export default function (title) {
  return function (WrappedComponent) {
    return class HOC extends Component {
      render() {
        return <div>
          <div className="demo-header">
            {title
              ? title
              : '我是標題'}
          </div>
          <WrappedComponent {...this.props}/>
        </div>
      }
    }
  }
}

使用ES6寫法能夠更加簡潔。

export default(title) => (WrappedComponent) => class HOC extends Component {
  render() {
    return <div>
      <div className="demo-header">
        {title
          ? title
          : '我是標題'}
      </div>
      <WrappedComponent {...this.props}/>
    </div>
  }
}

12.react  router傳參：

import { Router,Route,hashHistory} from 'react-router';

class App extends React.Component {
  render() {
    return (
        <Router history={hashHistory}>
            <Route path='/user/:name' component={UserPage}></Route>
        </Router>
    )
  }
}

 

1、props.params

定義路由：<Route path='/user/:data' component={UserPage}></Route>

使用：
var data = {id:3,name:sam,age:36};
data = JSON.stringify(data);
var path = `/user/${data}`;

1.<Link to={path}>用戶</Link>
2.hashHistory.push(path);

獲取數據：
var data = JSON.parse(this.props.params.data);
var {id,name,age} = data;

2、query

定義路由：<Route path='/user' component={UserPage}></Route>

使用：
var data = {id:3,name:sam,age:36};
var path = {
  pathname:'/user',
  query:data,
}

1.<Link to={path}>用戶</Link>
2.hashHistory.push(path);

獲取數據：
var data = this.props.location.query;
var {id,name,age} = data;

3、state

定義路由：<Route path='/user' component={UserPage}></Route>

使用：
var data = {id:3,name:sam,age:36};
var path = {
  pathname:'/user',
  state:data,
}

1.<Link to={path}>用戶</Link>
2.hashHistory.push(path);

獲取數據：
var data = this.props.location.state;
var {id,name,age} = data;