ECMAScript 6 一些有意思的特性

主要参考了下面两篇博文，对ES6的新特性做一些笔记，加深印象

• ES6新特性概览 - 刘哇勇 - 博客园
• es6快速入门 - _marven - 博客园

*号函数 迭代函数生成器

我能想到的生成器使用场景有两点，一个是类似类静态变量，一个是类似toggle的切换场景，还有就是异步阻塞程序。

function *myGenerator() {
    console.log('step1');
    yield 1;
    console.log('step2');
    yield 2;
    console.log('step3');
    return 3; 
}
let g  = myGenerator();
while(true) {
    let curr = g.next();
    if (g.done) {
        console.log(g.value);
        break;
    } else {
        console.log(g.value);
    }
}

箭头函数

箭头函数不绑定 this 和 arguments. 通常可以作为匿名函数的简写。这个特殊的特性可以在一些场景提供简洁的代码，同时也会在某些场景带来问题。this 一般是指向当前函数体，
// arrow function
let a = {
word: 'hello',
say: function(){
setTimeout(() => {
console.log(this.word);
}, 0);
}
}
let b = {
word: 'world',
say: function() {
setTimeout(function() {
console.log(this.word);
}, 0);
}
}
a.say(); // hello
b.say(); // undefined.

变量声明 let, const VS var

const 比较简单，不多表
let 的作用范围在 {} 结构体中，比如for,if,object。 而 var 作用范围在函数体中

for (var i = 0; i < 3; i++) {
    (function(i) {
        setTimeout(function () {
            console.log(`var: ${i}`);
        }, i * 1000);
    })(i);
}
console.log(`after for var: ${i}`);
for (let x=0; x<3; x++) {
    setTimeout(function () {
        console.log(`let: ${x}`)
    }, x * 1000);
}
// console.log(`after var var: ${x}`); // error

模板字符串

对于经常在前端拼接html与js变量的我来说，无疑是一个福音。而且语法跟php几乎没有区别

`反引号之间的变量${some_var}会被替换赋值`

函数默认值，解构，展开

支持像其他语言一样使用函数默认值，跟 || 说再见。
解构 是指 类似php的 list 语法，或者python的tuple语法。注意数组和对象的区别： [v1,v2] = ['value2', value2]; {name, value} = {name:'xx', value:'yy'}
展开运算符，用于数组和对象的拼接，还有就是箭头函数的默认传参（类似python中的 *args, **kwargs），数组参数调用（func.apply(null, arr)）:

//数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]
//对象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

Promises

异步程序的同步写法。本质是把 ok_callback(resolve) 和 err_callback (reject) 封装了一下。然后同过then 调用 resolve 方法，catch 调用 reject 方法。