1. 程式人生 > >為什麼要用PolyFill(JS中的修補匠)

為什麼要用PolyFill(JS中的修補匠)

 

var users = [{name:”zhangsan”,age:18},{name:”jack”,age:20}]; 
這是一個物件陣列。如果我們要查詢名字為”jack”使用者的年齡、常用的辦法是什麼? 
很多同學會想到遍歷這個陣列。

我們來看看新的語法:

var getUser = users.find(function(finder){
    return finder.name = "jack"
});

注意 
1.這種新的語法目前被納入了ES2015; 
2.但是我之前使用的babel轉換器只會轉化新的句法,對一些API不轉化。請檢視http://babeljs.io/#polyfill (我們之前的Promise也是); 
3.同時你如果要直接在網頁中赤裸裸的寫這種程式碼,那麼有些瀏覽器是不相容的。這時babel-polyfill庫就產生了。它起到了一個”修補”作用; 
比如你執行了find方法,如果瀏覽器不支援,它就會自動幫你處理為”迴圈遍歷”; 
4.這就好比jquery修補了ajax(針對不同的瀏覽器啟用不同的xmlhttp物件)。

那麼如何使用babel-polyfill這個工具呢? 
安裝:$ npm install --save-dev babel-polyfill 
然後我們引入

<script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
var users = [{name:"zhangsan",age:18},{name:"jack",age:20}];
var getUser = users.find(function(finder){
    return finder.name = "jack"
});
console.log(getUser.age);
這樣就相容瀏覽器了