es6笔记 - 黑

3月8日在小组分享es6的笔记

let、const

let声明的变量只在它所在的代码块有效。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}

console.log(a[6]()); // 输出多少？

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}

函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

const APPLE = {
    color: 'red'
}
APPLE.color = 'orange'

解构

数组的解构赋值

var [a, b, c] = [1, 2, 3];

var [d, [e, f, g = 2], h] = [1, [4, 5], 3];

对象的解构赋值

var {b, a} = {
    a: 1,
    b: 2
}

var {a: hahah, b} = {
    a: 1,
    b: 2
}

用途

let x = 1;
let y = 2;

[x, y] = [y, x];

function foo({a, b, c}) {
    doSomething(a, b, c);
}

模板字符串

console.log('快去播放节目' + this.program.programId + '第' + val + '集');

console.log(`快去播放节目${this.program.programId}第${val + 1 + Math.random()}集`)


let html  = `
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`

箭头函数

语法

 () => {…}   // no parameter
 x => {…}    // one parameter, an identifier
 (x,y) => {…}// several parameters
 () => ({…}) // return a single object

作用域的变化

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

Promise对象

pending -> resolve pending -> reject

var a = new Promise(function (resolve, reject) {
    //....
    if (Math.random() * 10 > 5)
        resolve('success');
    else 
        reject('err');
});

a.then(v => console.log(v)).catch(err => console.log(err));

var api = function (url) {
    return new Promise(function (resolve, reject) {
        console.log(`send request to ${url}`);
        setTimeout(() => {
            let r = Math.random() * 10;
            if (r > 4) // success
                resolve(url);
            else  // err
                reject(url);
        }, 2000);
    });
}

链式

api('123').then(value =>  api(value + '456')).then(v => console.log('success2' + v)).catch(err => console.log('err ' + err)).finally(()=> console.log('end'))

finally

api('123').then(v => console.log('success')).finally(() => console.log('end'));

all

var pl = [1,2,3,4,5].map(v => api(v));
Promise.all(pl).then(s => console.log('success' + s)).catch(err => console.log('err ' + err));

race

Promise.race([api('1'), new Promise((resolve, reject) => {
    setTimeout(() => reject('time out!'), 500);
})]).then(v => console.log('success')).catch(err => console.log(err));

resolve

有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用

var t = Promise.resolve('foo');

var t = new Promise(resolve => resolve('foo'))  //等价

async await 异步编程终级解决方案

语法规定:await 只能出现在 async 函数中

async 起什么作用？

async function testAsync() {
    return "hello async";
}

var result = testAsync();
console.log(result);

async 函数返回的是一个 Promise 对象

await 到底在等啥?

function getSomething() {
    return "something";
}

async function testAsync() {
    return Promise.resolve("hello async");
}

async function test() {
    var v1 = await getSomething();
    var v2 = await testAsync();
    
    console.log(v1, v2);
}

test();

如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。

如果它等到的是一个 Promise 对象，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

var api = function (url) {
    return new Promise(function (resolve, reject) {
        console.log(`send request to ${url}`);
        setTimeout(() => {
            let result = url + String.fromCharCode(parseInt(Math.random() * 20) + 65);
            console.log('请求成功, 返回值为' + result);
            resolve(result);
        }, 2000);
    });
}

var test =  async function () {
    var t1 = await api('123');
    var t2 = await api(t1);
    var t3 = await api(t2);
    var t4 = await api(t3);
    console.log(t4);
}