es6

ES6语法转码器：

　　http://babeljs.cn/repl/#experimental=false&evaluate=true&loose=false&spec=false&code=let%20a%20%3D%201%20%3B%0Alet%20b%20%3D%202%3B%0A%5Ba%2C%20b%5D%20%3D%20%5Bb%2C%20a%5D%3B%0A%　　0Aconsole.log(a%2C%20b)%3B

Google公司的Traceur转码器，可以将ES6代码转为ES5代码：

 http://google.github.io/traceur-compiler/demo/repl.html#audio%3A%20state%20%3D%3E%20state.audio

let定义变量：

　　es6新增了let声明变量,和var不同的是,let所声明的变量，只在let命令所在的代码块内有效，在其外部引用报错

　　let声明的变量一定要在声明后使用，否则报错

　　块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响

　　let不允许在相同作用域内，重复声明同一个变量

const 命令

　　const声明一个只读的常量。一旦声明，常量的值就不能改变

　　const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

　　const的作用域与let命令相同：只在声明所在的块级作用域内有效。

　　

块级作用域：

　  ES5 只有全局作用域和函数作用域，没有块级作用域

　　ES6 允许块级作用域的任意嵌套  {{{{{let insane = 'Hello World'}}}}};使用了一个五层的块级作用域。外层作用域无法读取内层作用域的变量

　　内层作用域可以定义外层作用域的同名变量 {{{{ let insane = 'Hello World'; {let insane = 'Hello World'} }}}};

 

总结ES6常用的新特性http://www.tuicool.com/articles/MVfEZzi

 1.定义函数(省略function也能定义breathe函数)

　　es6写法：

　　var human = {

　　　　//不需要function也能定义breathe函数
　　　　breathe(name) {
　　　　　　console.log(name + ' is breathing...');
　　　　}
　　};

　　human.breathe('jarson');   //输出 ‘jarson is breathing...’

　　转成js代码：

　var human = {
    breathe: function(name) {
      console.log(name + 'is breathing...');
    }
　};

2.创建类 class Human

class Human {
    constructor(name) {
        this.name = name;
      }
     breathe() {
        console.log(this.name + " is breathing");
      }
}
var man = new Human("jarson");
man.breathe();    //jarson is breathing

上面代码转为js格式：

function Human(name) {
    this.name = name;
    this.breathe = function() {
        console.log(this.name + ' is breathing');
    }
}
var man = new Human('jarson');
man.breathe();    //jarson is breathing

3.模块(export) 各模块只需 导出(export) 公共接口部分，然后在需要使用的地方通过模块的 导入(import)

内联导出

ES6模块里的对象可在创建它们的声明中直接导出，一个模块中可无数次使用export。

先看模块文件 app.js ：

export class Human{
    constructor(name) {
        this.name = name;
    }
    breathe() {
        console.log(this.name + " is breathing");
    }
}  
export function run(){  
    console.log('i am runing');
}
function eat() {
    console.log('i am eating')

　}

例子中的模块导出了两个对象：Human类和run函数， eat函数没有导出，则仍为此模块私有，不能被其他文件使用。

导出一组对象

另外，其实如果需要导出的对象很多的时候，我们可以在最后统一导出一组对象。

更改 app.js 文件：

class Human{
    constructor(name) {
        this.name = name;
    }
    breathe() {
        console.log(this.name + " is breathing");
    }
}  
function run(){  
    console.log('i am runing');
}
function eat() {
    console.log('i am eating');
}
export {Human, run};

Default导出

导出时使用关键字default，可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。它既可以用于内联导出，也可以用于一组对象导出声明中。

查看导出default对象的语法：

...   //创建类、函数等等
export default {  //把Human类和run函数标注为default对象导出。
    Human,  
    run  
};

导入默认对象

使用Default导出方式导出对象，该对象在import声明中将直接被分配给某个引用，如下例中的”app”。

import app from './module1.js';

上面例子中，默认 ./module1.js 文件只导出了一个对象；若导出了一组对象，则应该在导入声明中一一列出这些对象，如：

import {Human, run} from './app.js'

4.let定义变量与const定义常量

在我看来，在es6新特性中，在定义变量的时候统统使用 let 来代替 var 就好了， const则很直观，用来定义常量，即无法被更改值的变量。

for (let i=0;i<2;i++) {
    console.log(i);  //输出: 0,1
}

5.箭头函数   条件参数>renturn

ES6中新增的箭头操作符 => 简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值，这样的写法可以为我们减少大量的代码，看下面的实例：

let arr = [6, 8, 10, 20, 15, 9];
arr.forEach((item, i) => console.log(item, i));
let newArr = arr.filter((item) => (item<10));
console.log(newArr); //[6, 8, 9];

上面的 (item, i) 就是参数，后面的 console.log(item, i) 就是回到函数要执行的操作逻辑。

上面代码转为js格式：

var arr = [6, 8, 10, 20, 15, 9];
arr.forEach(function(item, i) {
    return console.log(item, i);
});
var newArr = arr.filter(function(item) {
    return (item < 10);
});

6.字符串模版 `${num}`

ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。看一下实例就会明白了：

//产生一个随机数
let num = Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);

7.解构

详细参考 http://www.infoq.com/cn/articles/es6-in-depth-destructuring/

若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。我们来看例子：

function getVal() {
    return [1, 2];
}
var [x,y] = getVal(); //函数返回值的解构
console.log('x:'+x+', y:'+y);   //输出：x:1, y:2

7.默认参数 参数名||‘默认值’

现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了。

function sayHello(name){
    var name=name||'tom';    //传统的指定默认参数的方式
    console.log('Hello '+name);
}
//运用ES6的默认参数
function sayHello2(name='tom'){  //如果没有传这个参数，才会有默认值，
    console.log(`Hello ${name}`);
}
sayHello();//输出：Hello tom
sayHello('jarson');//输出：Hello jarson
sayHello2();//输出：Hello tom
sayHello2('jarson');//输出：Hello jarson

注意： sayHello2(name='tom') 这里的等号，意思是没有传这个参数，则设置默认值，而不是给参数赋值的意思。

8.Proxy   赋值=new Proxy(目标对象,处理程序)

Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处。

//定义被监听的目标对象
let engineer = { name: 'Joe Sixpack', salary: 50 };
//定义处理程序
let interceptor = {
      set(receiver, property, value) {
        console.log(property, 'is changed to', value);
        receiver[property] = value;
      }
};
//创建代理以进行侦听
engineer = new Proxy(engineer, interceptor);
//做一些改动来触发代理
engineer.salary = 70;//控制台输出：salary is changed to 70

对于处理程序，是在被监听的对象身上发生了相应事件之后，处理程序里面的方法就会被调用。

　

 

 

 

 

来自:http://es6.ruanyifeng.com/#docs/let