为什么要有 let

以前都是用的 var ，let 出现就是解决 var 带来的问题。

var 的缺点：

1. 重复声明
2. 变量提升，官方可能开发这个是为了容错，但是真的非常糟糕。

alert(a)
// 报错，a is not defined

alert(a)
if (1) {
    var a = 1
}

// 弹出 undefined

3. var 的作用域是函数级别的

<button>1</button>
<button>2</button>
<script>
    var aInput = document.getElementsByTagName('button')
    for (var i = 0; i < aInput.length; i++) {
        aInput[i].onclick = function () {
            alert(i)
        }
    }
</script>

// 弹出 2、2

alert(a)
function show(){
    var a = 1
}
show();
// 报错，因为作用域是函数级别，限制了变量提升到上一层。

let site = ['runoob', 'google', 'taobao'];
{

    if(1){
        var i=1;
        let j=2;
        alert(site)
    }
}
alert(i);
alert(j);   // 报错

---

箭头函数？语法糖

1. 只有一个参数，小括号可省略
2. 只有一个 return，return 和花括号可省略

let twice = function (i) {
    return i * 2;
}

let twice = i => i * 2;

---

剩余参数

function show(a, b, ...args) {
    // ...
}

show(1, 2, 3, 4, 5, 'aa')

let arr = [1, 2, 3];
show(...arr);    // === show(1, 2, 3)

---

默认参数

function show(a, b=199) {
    // ...
}

---

解构赋值

let [a, b] = [1, 2];

let {a, b} = {a: 1, b: 2};

let {a: A, b} = {a: 1, b: 2};

按粒度随意划分

let a = {a: 1, b: 2};

let [b, c] = ['leon', {a: 12}];

---

数组

1. map 映射

let arr = [1, 2];
let result = arr.map( item => item * 2 );

2. reduce 汇总

let sum = arr.reduce(
    (tmp, item, index) => tmp + item
);

let average = arr.reduce(
    (tmp, item, index) => {
        if (index !== arr.length - 1) {
            return tmp + item;
        } else {
            return (tmp + item) / arr.length;
        }
    }
);

3. filter

let result = arr.filter(
    item =>  item > 3;
);

let json = json.filter(
    json => json.price > 10000;
);

4. forEach

let result = arr.forEach(
    item => alert(item)
);

let res = arr.forEach(
    (item, index) => alert(index + ':' + item)
);

字符串

let a = 'aaa'
alert(a.startsWith('aa'))
alert(a.endsWith('aa'))
alert(a.includes('aa'))
console.log('Yo ', repeat(100));

面向对象

class User {
    constructor(name, phone) {
        this.name = name;
        this.phone = phone;
    }

    showName() {
        alert(this.name)
    }

    showPhone() {
        alert(this.phone)
    }

}

class VipUser extends User {
    constructor(name, phone, level) {
        super(name, phone);
        this.level = level;
    }

    showLevel() {
        alert(this.level);
    }

}

Json

let str = '{"a": 1,"b": 12}';     // 注意 json 格式不能错，尤其是引号
let json = Json.parse(str);

str = Json.stringfy(json);   // json 转 string

json 简写

{a: a} === {a}
{a: function(){ ... }} === {a(){ ... }}

---

Promise

let p1 = new Promise(function (resolve, reject) {
    $.ajax({
        url: 'http://baidu.com',
        success(res) {
            resolve(res);
        },
        error(error) {
            reject(error);
        }
    });
});

let p2 = new Promise(function (resolve, reject) {
    $.ajax({
        url: 'http://qq.com',
        success(res) {
            resolve(res);
        },
        error(error) {
            reject(error);
        }
    });
});

// single
p1.then(function (arr) {
    // ...
}, function (err) {
    // ...
});

// combine
Promise.all([p1, p2]).then(function (arr) {
    let [res1, res2] = arr;
    // arr 是两次 ajax 获取的东西。
    // ...
}, function (err) {
    // ...
});

// 其实 jQuery 的 ajax 在内部是用 Promise 封装的
Promise.all([
    $.ajax({url: 'http://qq.com', dataType: 'json'}),
    $.ajax({url: 'http://baidu.com', dataType: 'json'})
]).then(function (arr) {
    // ...
}, function (err) {
    // ...
});

Generator

function* show() {
    alert(a);
    yield;
    alert(b);
}

let gen = show();
gen.next();
gen.next(); 

function* show() {
    alert(a);
    yield 10;
    alert(b);
    return 20;
}

let gen = show();
let first = gen.next();
let second = gen.next(); 

好处：写法简单多了

// 曾经
ajax('http://url-1', data1, function (err, result) {
    if (err) {
        return handle(err);
    }
    ajax('http://url-2', data2, function (err, result) {
        if (err) {
            return handle(err);
        }
        ajax('http://url-3', data3, function (err, result) {
            if (err) {
                return handle(err);
            }
            return success(result);
        });
    });
});

// 现在
try {
    r1 = yield ajax('http://url-1', data1);
    r2 = yield ajax('http://url-2', data2);
    r3 = yield ajax('http://url-3', data3);
    success(r3);
}
catch (err) {
    handle(err);
}

---

---

---

---

---

---

---

---

---

---

---

---