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代码去兼容所有的浏览器了。