ES6 —— 学习之四

1. Promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果

• 1）基本用法

const p = new Promise((resolve, reject) =>{
    setTimeout(()=>{
        let data = "用户数据";
        // resolve 是请求成功
        // reject 是请求失败
        resolve(data);
    },1000);
});

// 调用Promise 对象的 then 方法
// 第一个回调函数是Promise对象的状态变为resolved时调用
//第二个回调函数是Promise对象的状态变为rejected时调用。
//其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
p.then(success => {
    console.log(success);
},error => {
    console.log(error);
})

• 2）图片异步加载

  <font color="#1ba784">图片懒加载原理</font>

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;
  });
}

const url = "http://asaki-m.com/zhuye/indexBg/anime-people-1.jpg";
loadImageAsync(url).then(success=>{
    document.body.appendChild(success)
})

• 3）Promise 新建后就会立即执行
• <font color="red" size=2>注意，调用resolve或reject并不会终结 Promise 的参数函数的执行。</font>

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

• 4）catch 方法
  • Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。
  • 如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。另外，then()方法指定的回调函数，如果运行中抛出错误，也会被catch()方法捕获。

const p = new Promise((resolve, reject)=>{
    reject('Qinghuan');
});

p.then(success=>{
    console.log(success);
}).catch(error=>{
    console.error(error);
})

• 5）then 方法链式调用 ， 解决回调地狱
• 回调地狱

const fs = require('fs');  // node中的fs模块引入
// 回调地狱
fs.readFile('./book/book1.md',(err1, data1)=>{
    fs.readFile('./book/book2.md',(err2, data2)=>{
        fs.readFile('./book/book3.md',(err3, data3)=>{
            const result = [data1, data2, data3];
        })
    })
})

• then 链式调用，解决回调地狱

const fs = require('fs');   // node中的fs模块引入

const p = new Promise((resolve, reject)=>{
fs.readFile('./book/book1.md', (err, data)=>{
    if (err) {
        reject(err);
    }
        resolve(data);
    });
});

// then 链式调用
p.then(success=>{
    return new Promise((resolve, reject)=>{
        fs.readFile('./book/book2.md', (err, data)=>{
            if (err) {
                reject(err);
            }
            resolve([success, data]);
        });
    });
}).then(success=>{
    fs.readFile('./book/book3.md', (err, data)=>{
        const result = success.push(data);
    });
}).catch(error=>{
    console.error(error);
});

2. Set

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历.

• 1）基本使用

let s = new Set();
let s1 = new Set([1,2,3,4,3,2,1]);
let s2 = new Set('abccba');

console.log(s);     //Set(0) {}
console.log(s1);    //Set(4) {1, 2, 3, 4}
console.log(s2);    //Set(3) {"a", "b", "c"}
console.log(s2.size);   // 3

• 2）数据操作方法
• Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
• Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
• Set.prototype.clear()：清除所有成员，没有返回值。

let s = new Set([1,2,3,5,4,2,1]);   
console.log(s);     //Set(5) {1, 2, 3, 5, 4}

// 添加
s.add(6);
console.log(s);     //Set(5) {1, 2, 3, 5, 4, 6}

//删除
s.delete(1);
console.log(s);     //Set(5) {2, 3, 5, 4, 6}

//判断是否存在一个指定数
console.log(s.has(5));      //true

//清空
s.clear();
console.log(s);     //Set(0) {}

• 3）Set集合实践

let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [1,2,3,2,1];

// 数据去重
let result1 = [...new Set(arr)];
console.log(result1);       // [1, 2, 3, 4, 5]

// arr 与 arr2 交集
let result2 = [...new Set(arr)].filter(item =>{
    let temp = new Set(arr2);
    if (temp.has(item)) {
        return true;
    } else{
        return false;
    }
})

// 简化写法
// let result2 = [...new Set(arr)].filter(item => new Set(arr2).has(item));
console.log(result2);       // [1, 2, 3]

// arr 与 arr2 并集
let result3 = [...new Set([...arr, ...arr2])];
console.log(result3);   // [1, 2, 3, 4, 5]

// arr 与 arr2 差集
let result4 = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
console.log(result4);   // [4, 5]

3. Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。

• 1）实例的属性和操作方法
  • size 属性：返回 Map 结构的成员总数。
  • Map.prototype.set(key, value)：set 方法设置键名 key 对应的键值为 value ，如果key已经有值，则键值会被更新，否则就新生成该键。
  • Map.prototype.get(key)：get 方法读取 key 对应的键值，如果找不到 key，返回undefined。
  • Map.prototype.has(key)：has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
  • Map.prototype.delete(key)：delete方法删除某个键，返回true。如果删除失败，返回false。
  • Map.prototype.clear()：clear方法清除所有成员，没有返回值

let m = new Map();
            
// 添加, set 可以链式调用
m.set('key1', 1)
 .set(2, 'value2');

// 获取
console.log(m.get('key1'));     // 1
console.log(m.get(2));      // value2

// Map.size 
console.log(m.size);    // 2 

// has
console.log(m.has('key1'));     //true

// 删除
console.log(m.delete(2));   //true
console.log(m);     // Map(1) {"key1" => 1}

// 清空
m.clear();
console.log(m);     // Map(0) {}