兼容性
IE：可以看到IE6，IE7是完全不支持的。而IE8是只支持一些内容，参考引用4，IE9是大部分支持，支持度参考引用2。
Chrome：Chrome 23版本之后就是完全支持的了。19~22版本有不兼容的地方，参考引用1。
Firefox：Firefox 21版本之后就是完全支持的了。4~20版本有不兼容的地方，参考引用1。
我们利用npm来安装我们最想要的babel。
同样我们启动命令提示符窗口并且输入：npm install babel-core@5，然后回车，这里要稍等片刻：
看到上面的界面就是表示你安装babel成功，你会在电脑盘中找到这样的目录：C:\Users\Administrator\node_modules\babel-core，打开后你会看到：
在这个目录里面我们找到babel的浏览器版本browser.js(未压缩版)和browser.min.js(压缩版)。
然后我们将这个文件使用在我们的ES6.html中。
<script src="browser.min.js"></script> <script type="text/babel"> const Name = '张三';//使用新增的关键字：const声明常量 alert(Name); </script>
我们把browser.min.js引入（文件位置的路径要确保正确）。并且设置第二个script标签的type为”text/babel”。
新特性
ES6新特性在Babel下的兼容性列表
ES6特性兼容性
箭头函数支持
类的声明和继承部分支持，IE8不支持
增强的对象字面量支持
字符串模板支持
解构支持，但注意使用方式
参数默认值，不定参数，拓展参数支持
let与const支持
for ofIE不支持
iterator, generator不支持
模块module、Proxies、Symbol不支持
Map，Set 和 WeakMap，WeakSet不支持
Promises、Math，Number，String，Object 的新API不支持
export & import支持
生成器函数不支持
数组拷贝支持
Let和const
Let作用域在最近一个大括号内，为局部变量，不影响外部内容
let name = 'zach'
while (true) {
let name = 'obama'
console.log(name) //obama
break
}
console.log(name) //zach
Const声明常量，一旦声明，常量的值就不能改变。否则会报错
const Name = '张三';//使用新增的关键字：const声明常量
Name = "1"
alert(Name);
For of
For of用break;终止。解决了for 和 for...in 循环的不足之处，你可以随时停止或退出for...of 循环。
For in和 for of 的区别
let map = ['a','b','c','d']
for(i in map){
console.log(i)
}
for(i of map){
console.log(i)
}
For in循环的是index下标
For of循环的是值
Set和Map
Set结构最大的特点是去重，Map结构最大的特点是kv结构。
Map 对象就是保存 key-value(键值) 对。对象和原始值可以用作 key(键)或 value(值)。Map 对象根据其插入方式迭代元素。换句话说， for...of 循环将为每次迭代返回一个 key-value(键值) 数组。
Map结构和对象非常类似，不过最大的区别在于，Map结构可以用其他类型作为key，例如数组、对象等。
const iterable = new Map([['one', 1], ['two', 2]]);
for (const [key, value] of iterable) {
console.log(`Key: ${key} and Value: ${value}`);
}
// Output:
// Key: one and Value: 1
// Key: two and Value: 2
Set(集合) 对象允许你存储任何类型的唯一值，这些值可以是原始值或对象。 Set(集合) 对象只是值的集合。 Set(集合) 元素的迭代基于其插入顺序。 Set(集合) 中的值只能发生一次。如果您创建一个具有多个相同元素的 Set(集合) ，那么它仍然被认为是单个元素。
Set和数组类似，可以存储元素，但是Set不能存储相同的值。
const iterable = new Set([1, 1, 2, 2, 1]);
for (const value of iterable) {
console.log(value);
}
// Output:
// 1
// 2
WeakMap，WeakSet
WeakSet的成员只能是对象
WeakMap只接受对象作为键名
解构
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
//JS
对象
var obj = {a:100,b:200}
.var a = obj.a
var b = obj.b
数组
var arr = ['xxx','yyy','zzz']
var x = arr[0]
//ES6
对象
const {a,c} = {a:10,b:20,c:30}
console.log(a)//10
console.log(c)//30
数组
const arr = ['xxx','yyy','zzz']
const [x,y,z] = arr
console.log(x)//‘xxx’
console.log(y)//‘yyy’
console.log(z)//‘zzz’
多行字符串/模板变量
模板字面量用倒引号 ( `` )（而不是单引号( '' ) 或双引号( "" )）表示，可以包含用${expression} 表示的占位符
//JS
var name = 'zhangsan', age = 20,html = '';
html += '<div>';
html += ' <p>' + name + '</p>';
html += ' <p>' + age + '</p>';
html += '</div>';
//ES6
const name = 'zhangsan',age = 20;
const html = `<div>
<p>${name}</p>
<p>${age}</p>
</div>`;
console.log(html);
箭头函数
function funcName(params) {
console.log(params + 2)
}
funcName(2)//4
var funcName = (params) => {
console.log(params + 2)
}
funcName(2)//4
var funcName = (params) => console.log(params + 2);//只有一个表达式可以省略花括号
funcName(2)//4
var funcName = params => console.log(params + 2);//只有参数可以省略括号
funcName(2)//4
省略了function
箭头函数this为父作用域的this，不是调用时的this
function Counter() {
this.num = 0;
this.timer = setInterval(() => {
this.num++;
console.log(this.num);
}, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...
箭头函数不能作为构造函数，不能使用new
var B = () => {
value: 1;
}
var b = new B(); //TypeError: B is not a constructor
//ES5对象字面量
var type = 'rock';
var heat = '50%';
var music = {
type: type,
heat: heat
};
console.log(music); // Object {type: "rock", heat: "50%"}
//ES6对象字面量
var type = 'rock';
var heat = '50%';
var music = {
type,
heat
};
console.log(music); // Object {type: "rock", heat: "50%"}
类的声明和继承
class Parent {
constructor(name,age) {
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
}
typeof Parent; //function,类的数据类型就是函数，类本身就指向构造函数
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
class Child extends Parent {
constructor(sex) {
super();
this.sex = sex;
}
}
var child = new Child('xiaoyu',12,'man');
在子类的构造函数中，如果显示声明了constructor，则必须要显示的调用super函数
只有调用super之后，才可以使用this关键字，否则会报错。
参数默认值，不定参数，拓展参数
参数默认值
function f(x, y = 12) {
return x + y;
}
console.log(f(3)); //15
console.log(f(3,2)); //5
不定参数可以让我们更方便地获取不定参数（或者说剩余参数）
function demo(part1, ...part2) {
console.log(part1);
console.log(part2);
}
demo(1,2,3,4,5,6);
// 1
// [2,3,4,5,6]
扩展运算符可以将数组转换为连续的函数参数。
[if !supportLists]（1）[endif]在函数中使用
function f(x, y, z) {
return x + y + z;
}
// 传递数组的每个元素作为参数
f(...[1,2,3]); // 6
[if !supportLists]（2）[endif]在数组中使用
var parts = ["1", "2"];
var lyrics = ["a", ...parts, "b"]; //["a", "1", "2", "b"]
我觉得拓展运算符合，不定参数刚好是反向转换
不定参数是将多个值转成数组
扩展运算符是将数组拆成多个值
数组拷贝
es5中通过变通的方式来实现深克隆
const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]
Es6则是使用了拓展运算符
const a1 = [1, 2];
//写法一 const a2 = [...a1];
//写法二 const [...a2] = a1;
扩展运算符提供了数组合并的新写法
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5的合并数组
arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合并数组
[...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
Generator的声明方式类似一般的函数声明，只是多了个*号，并且一般可以在函数内看到yield关键字
function* showWords() {
yield 'one';
yield 'two';
return 'three';
}
var show = showWords();
show.next() // {done: false, value: "one"}
show.next() // {done: false, value: "two"}
show.next() // {done: true, value: "three"}
show.next() // {done: true, value: undefined}
调用next方法后，函数内执行第一条yield语句，输出当前的状态done（迭代器是否遍历完成）以及相应值（一般为yield关键字后面的运算结果）
每调用一次next，则执行一次yield语句，并在该处暂停，return完成之后，就退出了生成器函数，后续如果还有yield操作就不再执行了
yield和yield*
function* showWords() {
yield 'one';
yield showNumbers();
return 'three';
}
function* showNumbers() {
yield 10 + 1;
yield 12;
}
var show = showWords();
show.next() // {done: false, value: "one"}
show.next() // {done: false, value: showNumbers}
show.next() // {done: true, value: "three"}
show.next() // {done: true, value: undefined}
因为yield只能原封不动地返回右边运算后值，但现在的showNumbers()不是一般的函数调用，返回的是迭代器对象
所以换个yield* 让它自动遍历进该对象
function* showWords() {
yield 'one';
yield* showNumbers();
return 'three';
}
function* showNumbers() {
yield 10 + 1;
yield 12;
}
var show = showWords();
show.next() // {done: false, value: "one"}
show.next() // {done: false, value: 11}
show.next() // {done: false, value: 12}
show.next() // {done: true, value: "three"}
要注意的是，这yield和yield* 只能在generator函数内部使用，一般的函数内使用会报错
import 和 export
export将变量或方法暴露给外部
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
1使用export{接口} 导出接口
export {firstName, lastName, year};
2我们可以使用XX as YY
export {firstName as first, lastName as last, year};
3使用export default导出；如果一个js模块文件就只有一个功能， 那么就可以使用export default导出；
export default "string";
4除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
使用import 引入，script 注意type要改为module
后方的引用路径不可以是裸路径
<script type="module">
import * as app from './app.js';
app.streamV1();
</script>
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
网友评论