es6兼容常用方法

『壹』 webstorm怎樣使用es6中的import

ECMAScript 6是JavaScript語言的下一代標准，已經在2015年6月正式發布了。Mozilla公司將在這個標準的基礎上，推出javascript 2.0。
ES6的目標，是使得JavaScript語言可以用來編寫大型的復雜的應用程序，成為企業級開發語言。

可是如果我們在webstorm寫下了一段ES6的代碼時候，會報出很多錯誤，那麼為了更好的體驗ES6，應該如何設置這個所謂的神器呢？
下面給大家講解一下具體流程：
1） 我們一定要下載最新版本的11.0.3 webstorm，只有這個版本才能更好的兼容ES6特性。
2）設置JavaScript語言版本：
Preferences > Languages & Frameworks > JavaScript
3）設置自動轉碼工具。
你可能希望你寫的代碼有更好的兼容性，但目前的ES6肯定不是所有瀏覽器都支持的，所以我們要用到ES6轉碼器。
Babel是一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5代碼，從而在瀏覽器或其他環境執行。這意味著，你可以用ES6的方式編寫程序，又不用擔心現有環境是否支持。

『貳』 reactnative es5和es6兼容嗎

1，引入與導出方式不同
//ES5
var React = require("react");
//ES6
import React, { Component, PropTypes } from 'react

�0�2 �0�2導入： ES5使用require導入，而ES6使用了import
//ES5
mole.exports = Test;

�0�2
//ES6
export default Test;

�0�2
2，創建組件的方式不同
//ES5
var Test = React.createClass( {
..........
} );
//ES6
class Test extends Component {
..........
}

�0�2ES5使用React.createClass() �0�2小括弧裡面需要大括弧。
�0�2ES6定義組件時繼承自React框架的Component(需要導入)，只需要一個大括弧。
�0�2
3，初始化組件屬性的方式以及限制組件屬性類型的方式不同
//ES5
var Test = React.createClass({
getDefaultProps: function() {
return {
myPro: 10
};
},
propTypes: {
myPro: React.PropTypes.number. isRequired
}
});

//ES6
class Test extends Component {
static defaultProps = {
myPro: 10
};

static propTypes = {
myPro: React.PropTypes.number. isRequired
};
}

�0�2 ES5通常使用propTypes成員和getDefaultProps方法來實現。
�0�2 ES6可以統一使用static成員。（也可以用ES5方法）。
�0�2
4，初始化方法不同
//ES5
getInitialState: function() {
...........
return {
myState: 10
}
}

//ES6
state = {
myState: 10
}

�0�2 �0�2因為ES6直接使用state初始化不能進行一些其它的運算，所以也經常這樣：
constructor(props){
super(props);
this.state = {
myState: 10
};
}

�0�2
5，ES5中每個方法之後都需要加上一個逗號，而且需要用 render: function()這樣的寫法。而ES6不需要加逗號，方法也可以直接用render()，直接在名字後加括弧和形參。

『叄』 有哪些ES6兼容ES5的工具

一、怎樣可以很好地保證網頁的瀏覽器兼容性：
盡量使用標準的網頁布局方式，也就是符合W3C的布局，再加上css的使用也符合W3C的使用，推薦firefox,chrome，這樣基本上，firefox,chrome,safari,opera,IE9都能表現一致，然後再針對IE8、7、6進行修改，這樣完成一個頁面下來，其實很少有地方需要你針對特定的瀏覽器進行兼容性修正。

二、怎麼去解決瀏覽器的兼容西問題：
在開發Web APP的時候，開發機上面最好把主流瀏覽器都裝上，比如說：Chrome、FF、safari、IE、IE Tester... 在大多數情況下，FF和Chrome差別不是很大。

2.開發過程中要注意，每做好一個樣式，都要跑一遍所有要兼容的瀏覽器，這樣雖然開發過程時間會比較長，可是會比你開發完成後再來改效率高得多，我曾經就碰到過一個產品，開發完成後由於兼容性問題導致其發展面很窄，最後不得不重新開發。
3.如果真的碰到樣式不兼容的情況，那麼只能針對不同的瀏覽器做相應的調整。
4.一些新的特效可能在一些版本落後的瀏覽器里不兼容，這個時候我們的原則就是：不求效果絢麗，只求工整規范 。
5.多積累，多看看符合W3C標准規范的CSS手冊和JS手冊，注意積累，或者用一些開源框架，那樣兼容性可以省下不少時間。

三、跨瀏覽器開發應該使用的一些經驗：
1)一些關於跨瀏覽器/設備的工具
1. modernizr.js 特性檢測器，有就使用原生，沒有就載入polyfill
2. polyfill/shim 向後兼容的瀏覽器的js補丁，一般和modernizr一起用
3. jshint.js js語法檢測器
4. Boilerplate 開發的最佳實踐的初始模板
5. 閱讀第三方庫關於最低版本支持
6. 使用js單元測試，測試目標瀏覽器
7. Responsive Design （針對屏幕大小）
8. normalize.css 統一瀏覽器基本元素的風格

2) 一個策略：
把瀏覽器分兩類：一類是歷史遺留瀏覽器，一類是現代瀏覽器，然後根據這個分類開發兩個版本的網站，然後自己定義那些瀏覽器是歷史遺留版本，凡是歷史遺留版本瀏覽器，統統使用歷史遺留版界面，然後通過通告欄（信息通知系統）明確告知本版本有些功能不能使用，盡快轉移到現代瀏覽器上。然後現代瀏覽器的網站版本，功能全開，提供最好的用戶體驗。

3)最後手段：
直接使用jReject.js這類插件，彈出有全黑蒙板的對話框，告訴用戶這個網站什麼版本的IE/瀏覽器不能用，請使用至少什麼版本的IE，firefox和chrome.(這個是最後手段，以上方案都失效的情況下使用。)

4)一個提醒：
跨瀏覽器兼容問題，過去有，現在有，以後會更麻煩，所以這個問題在你的項目開始前，就必須確定下來最低支持的版本是什麼，然後設計一個對應兼容方案。
不要等開發完畢了，才告知要必須兼容個ie6啥的，那你的項目就有得好改了。

5)面向未來：
2015年es6就要正式完成了，等es6出來後，如何把es6的javascript向後兼容呢？這里我有個概念，還沒實驗過：

1.使用es6編譯器把代碼導出成es5代碼
2.使用modernzr檢查瀏覽器是否支持es6，支持用es6代碼；不支持，用編譯好的es5代碼並且載入es6shim。
3.使用grunt把es6編譯過程完全自動化

『肆』 如何讓nodes支持es6 語法

讓chrome 支持es6的方法首先要指出的就是FireFox在對ES6的支持上一直都比Chrome瀏覽器要領先，主要是因為，ES6的很大推動力來自於FF那幫JS元老（包括JS之父Brendan Eich等）當年ES4難產，主要就是因為FF幫那邊的人對語法改動太過激進，導致在ES4標准制定的時候沖突不斷，所以最後才給下一代ES定了個harmony（和諧）的代號。
Firefox在ES規范之前就已經做了很多私有的語法制定，比如說迭代器，現在可以給對象指定個Symbol.iterator的key來實現一個迭代器，而FF很早就已經實現了形如obj["@@iterator"]=function(){}的迭代器。所以ES6的標准，firefox的SpiderMonkey是實現最迅速的，而chrome的V8，卻一直比較反復，特別是像Proxy這種特性，V8在大約一年半以前臨時實現過一種，用了兩個版本以後，突然徹底下架，然後一年多以來，這個Proxy的特性就一直沒加回來，包括計劃列表裡都沒有這玩意。
需要指出的是，題圖里關於ES6的支持對比，firefox丟分在於沒有支持class關鍵字，而Edge13卻完整支持了ES6 class的語法糖，包括super。
其實class關鍵字一直存在於firefox的夜間版上面，可惜的是不知道什麼原因，已經過了這么長的時間了，FF也沒有把class移植到正式版上面。
其他FF相比於edge13丟分的在於內置對象的子類支持，就是形如class A extends Function這種，這個沒的說，Edge13確實是領先其他瀏覽器。但FF也有Edge13沒有支持的一些特性，典型的比如：函數定義時的參數默認值，<!--var a =1;-->這種HTML注釋JS的手段等等。
更何況FF還有一個很省事的語法糖：解構，這個解構語法就是FF那幫人造出來的，所以他們實現的最早，而其他瀏覽器也跟進的最慢，Edge13貌似現在也還未實現。
所以總體來說，這兩個瀏覽器在特性支持上基本上在持平狀態，FF如果把class從夜間版弄到正式版的話，就可以覆蓋到90%了。

『伍』 es6的語法有哪些兼容性問題，怎麼檢測和處理

ExHtmlEditor ExHtmlEditor用於習編寫HMTL工具邊寫代碼實視化查看結支持HTML5, Javascript CSS3 元素 UltraEdit ltraEdit 套功能超級強文本編輯器能夠滿足切編輯需要

『陸』 es6語法是什麼

ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標准。因為當前版本的ES6是在2015年發布的，所以又稱ECMAScript 2015。也就是說，ES6就是ES2015。雖然目前並不是所有瀏覽器都能兼容ES6全部特性，但越來越多的程序員在實際項目當中已經開始使用ES6了。

最常用的ES6特性

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments。

這些是ES6最常用的幾個語法，基本上學會它們，我們就可以走遍天下都不怕啦！我會用最通俗易懂的語言和例子來講解它們，保證一看就懂，一學就會。

let, const

這兩個的用途與var類似，都是用來聲明變數的，但在實際運用中他倆都有各自的特殊用途。

首先來看下面這個例子：

var name = 'zach'while (true) { var name = 'obama'

console.log(name) //obamabreak}console.log(name) //obama

使用var 兩次輸出都是obama，這是因為ES5隻有全局作用域和函數作用域，沒有塊級作用域，這帶來很多不合理的場景。第一種場景就是你現在看到的內層變數覆蓋外層變數。而let則實際上為JavaScript新增了塊級作用域。用它所聲明的變數，只在let命令所在的代碼塊內有效。

『柒』 如何讓瀏覽器支持ES6中的import和export語法

然而, Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。而且像import和export這兩個命令現在在任何瀏覽器中都是不支持的, 同時babel也無法將其轉換為瀏覽器支持的ES5, 原因在於:
babel只是個翻譯，假設a.js 里 import 了 b.js, 對a.js進行轉碼，只是翻譯了a.js，並不會把b.js的內容給讀取合並進來, 如果想在最終的某一個js里，包含 a.js，b.js 的代碼，那就需要用到打包工具
所以我在這里講解一下如何使用webpack工具將帶有import和export語法的JS文件, 通過打包工具生成所有瀏覽器都支持的單個JS文件.
1. 下載node.js和webpack
Node.js是一個基於Chrome JavaScript運行時建立的平台， 用於方便地搭建響應速度快、易於擴展的網路應用。可以說就是伺服器端的JS. webpack是一個打包工具, 而它是依賴於node.js運行的.
下載node.js可以通過官網: http://nodejs.cn/download/
具體的安裝步驟網上可以搜到很多, 這里不再贅述. 安裝完畢後打開node.js自帶的命令行工具
這里寫圖片描述
然後輸入如下命令全局安裝webpack工具
npm install -g webpack
接著通過命令行工具定位到你的工程文件的根目錄下, 再次安裝webpack到你的工程中
npm install webpack
2. 編寫webpack.config.js文件
在根目錄下創建webpack.config.js, 這個文件是用來描述一些要使用webpack工具進行打包的配置信息, 文件內容如下:
這里寫圖片描述
通過該文件可以使用webpack打包工具, webpack會從import.js進入, 對該文件中的內容進行編譯並打包, 最終會在dist目錄下生成打包好的文件bundle.js, 編譯打包過程中用到的工具在mole對象的loaders中聲明, 這里使用了babel-loader來對JS文件進行編譯(包括從ES6轉換為ES5以及打包)
3. 創建import.js
創建一個import.js, 內容如下:
這里寫圖片描述
在該文件中通過ES6語法import從export.js中引入firstName和lastName變數. 並且通過console.log將引入的兩個變數列印到控制台.
4. 創建export.js
這里寫圖片描述
在該文件中通過ES6語法export將文件中的幾個變數作為模塊輸出給別的文件引用.
5. 創建HTML文件
在HTML文件中直接將webpack最終打包生成的bundle.js文件引入即可, 因為通過webpack工具已經將export.js和import.js的所有內容都打包到一個文件bundle.js中了, 因此在HTML文件中引入該文件即可以將兩個JS文件中的代碼都執行.
這里寫圖片描述
6. 配置.babelrc文件
在工程文件的根目錄下創建一個.babelrc文件(注意前面有個點), 這個文件是用來描述我要根據什麼樣的規則、或者是將JS文件編譯成什麼版本的文件(比如說ES5). 該文件的內容如下:
這里寫圖片描述
7. 下載相關依賴模塊
方式1: 可以像下面這樣, 直接在項目根目錄下創建一個package.json文件, 並且在文件中指定devDependencies對象, 在該對象中寫上我編譯及打包中所要使用到的依賴模塊, 圖片中的webpack就是用於打包的工具, 而其他的以babel開頭的選項都是編譯JS文件並打包所需要用到的依賴模塊.
這里寫圖片描述
創建好package.json文件後, 在命令行中輸入
npm install
npm工具就會根據該文件中devDependencies選項下載對應的依賴模塊.
方式2(推薦): Ctrl+R打開運行, 然後輸入cmd打開命令行工具, 通過命令行工具一個個安裝, 這樣可以直接通過npm去下載依賴模塊最新的穩定的版本, 同時也不需要自己去記這些模塊的版本號
npm install babelnpm install babel-clinpm install babel-corenpm install babel-loadernpm install babel-preset-es2015
8. 使用 webpack打包
使用命令行工具定位到項目的根目錄下, 然後輸入如下指令
webpack
等待一會兒就會發現工程文件的目錄下多了一個dist文件夾, 裡面放著的就是打包好了的bundle.js文件, 在HTML文件中通過下面的代碼引入js文件
<script src="dist/bundle.js"></script>
然後在瀏覽器上運行html文件, 使用F12打開開發者工具, 就可以看到console選項中輸出兩行記錄」Micheal」, 「Jackson」

『捌』 如何讓chrome 支持es6

讓chrome 支持es6的方法

• 首先要指出的就是FireFox在對ES6的支持上一直都比Chrome瀏覽器要領先，主要是因為，ES6的很大推動力來自於FF那幫JS元老（包括JS之父Brendan Eich等）當年ES4難產，主要就是因為FF幫那邊的人對語法改動太過激進，導致在ES4標准制定的時候沖突不斷，所以最後才給下一代ES定了個harmony（和諧）的代號。

• Firefox在ES規范之前就已經做了很多私有的語法制定，比如說迭代器，現在可以給對象指定個Symbol.iterator的key來實現一個迭代器，而FF很早就已經實現了形如obj["@@iterator"]=function(){}的迭代器。所以ES6的標准，firefox的SpiderMonkey是實現最迅速的，而chrome的V8，卻一直比較反復，特別是像Proxy這種特性，V8在大約一年半以前臨時實現過一種，用了兩個版本以後，突然徹底下架，然後一年多以來，這個Proxy的特性就一直沒加回來，包括計劃列表裡都沒有這玩意。

• 需要指出的是，題圖里關於ES6的支持對比，firefox丟分在於沒有支持class關鍵字，而Edge13卻完整支持了ES6 class的語法糖，包括super。

• 其實class關鍵字一直存在於firefox的夜間版上面，可惜的是不知道什麼原因，已經過了這么長的時間了，FF也沒有把class移植到正式版上面。

• 其他FF相比於edge13丟分的在於內置對象的子類支持，就是形如class A extends Function這種，這個沒的說，Edge13確實是領先其他瀏覽器。但FF也有Edge13沒有支持的一些特性，典型的比如：函數定義時的參數默認值，<!--var a =1;-->這種HTML注釋JS的手段等等。

• 更何況FF還有一個很省事的語法糖：解構，這個解構語法就是FF那幫人造出來的，所以他們實現的最早，而其他瀏覽器也跟進的最慢，Edge13貌似現在也還未實現。

• 所以總體來說，這兩個瀏覽器在特性支持上基本上在持平狀態，FF如果把class從夜間版弄到正式版的話，就可以覆蓋到90%了。

『玖』 jquery支持es6嗎

是否支持es6主要看瀏覽器。
jquery是把常用的js方法進行了封裝，並兼容各瀏覽器，但對es6並沒有進行瀏覽器兼容。在支持es6的新版本瀏覽器下，jquery也可以直接使用es6語法。
如果需要對低版本瀏覽器兼容運行es6的話一般使用babel。

『拾』 怎樣可以很好地保證網頁的瀏覽器兼容性

跨瀏覽器開發使用的一些經驗
1)一些關於跨瀏覽器/設備的工具
1. modernizr.js 特性檢測器，有就使用原生，沒有就載入polyfill
2. polyfill/shim 向後兼容的瀏覽器的js補丁，一般和modernizr一起用，jshint.js js語法檢測器
3. Boilerplate 開發的最佳實踐的初始模板，使用js單元測試，測試目標瀏覽器
4 閱讀第三方庫關於最低版本支持、Responsive Design （針對屏幕大小）、normalize.css 統一瀏覽器基本元素的風格

2) 策略：
策略：把瀏覽器分兩類，一類是歷史遺留瀏覽器，一類是現代瀏覽器，然後根據這個分類開發兩個版本的網站，然後自己定義那些瀏覽器是歷史遺留版本，凡是歷史遺留版本瀏覽器，統統使用歷史遺留版界面，然後通過通告欄（信息通知系統）明確告知本版本有些功能不能使用，盡快轉移到現代瀏覽器上。然後現代瀏覽器的網站版本，功能全開，提供最好的用戶體驗。就是直接使用jReject.js這類插件，彈出有全黑蒙板的對話框，告訴用戶這個網站什麼版本的IE/瀏覽器不能用，請使用至少什麼版本的IE，firefox和chrome.(這個是最後手段，以上方案都失效的情況下使用。)
跨瀏覽器兼容問題，過去有，現在有，以後會更麻煩，所以這個問題在你的項目開始前，就必須確定下來最低支持的版本是什麼，然後設計一個對應兼容方案。
1.使用es6編譯器把代碼導出成es5代碼
2.使用modernzr檢查瀏覽器是否支持es6，支持用es6代碼；不支持，用編譯好的es5代碼並且載入es6shim。
3.使用grunt把es6編譯過程完全自動化
以上這個方案，應該可以使用es6代碼去兼容所有的瀏覽器了。