ES6基础总结(下)

ES6基础总结(下)

1.生成器

生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同
生成器其实就是一个特殊的函数
可用来进行异步编程
常见的异步编程:文件操作、网络操作(ajax，request)、数据库操作

function * gen(){
    console.log('222');
}
//调用生成器函数
let interator=gen();
interator.next();//222

生成器函数可以出现 yield 语句
yield 可以当作为函数代码的分隔符，可以将函数代码切分成几块

function * gen(){
    //yield 后面可以跟一个表达式 或者一个字面量
    console.log('zz');
    yield '111';
    console.log('xx');
    yield '222';
    console.log('cc');
}
//调用生成器函数
//调用结果类似迭代器
let interator=gen();
interator.next();//zz
interator.next();//xx
interator.next();//cc

可以利用for of 遍历

function * gen(){
    console.log('zz');
    yield '111';
    console.log('xx');
    yield '222';
    console.log('cc');
}
for(let v of gen()){
    console.log(v);
}

1.1生成器的函数参数

function * fn(arg){
    console.log(arg);
    let one=yield 111;
    console.log(one);
    yield 222;
    yield 333;
}
let interator=fn('AAA');
console.log(interator.next());
//输出
//AA
//{value:111,done:false}
//next 方法可以传入实参 该实参就是 yield 整个语句的返回结果
console.log(interator.next('BBB'));
//输出
//BBB
//{value:222,done:false}

1.2生成器函数实例

实例一：1s 后控制台输出 111 2s 后出书 222 3s 后输出 333

        function one(){
            setTimeout(() => {
                console.log(111);
                interator.next();
            }, 1000);
        }
        function two(){
            setTimeout(() => {
                console.log(222);
                interator.next();
            }, 2000);
        }
        function three(){
            setTimeout(() => {
                console.log(333);
                interator.next();
            }, 3000);
        }
        function * fn(){
            yield one();
            yield two();
            yield three();
        }
        let interator=fn();
        interator.next();

案例二:模拟获取 用户数据 ===> 订单数据 ===> 商品数据

        function getUsers(){
            setTimeout(() => {
                let data='用户数据'; 
                interator.next(data);
            }, 1000);
        }
        function getOrders(){
            setTimeout(() => {
                let data='订单数据';
                interator.next(data);
            }, 1000);
        }
        function getGoods(){
            setTimeout(() => {
                let data='商品数据';
                interator.next(data);
            }, 1000);
        }
        function * fn(){
            let users=yield getUsers();
            console.log(users);
            let orders=yield getOrders();
            console.log(orders);
            let goosds=yield getGoods();
            console.log(goods);
        }
        let interator=fn();
        interator.next();

2.Promise

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

        //实例化Promise对象
        //对象内部的函数形参潜规则为 resolve reject 
        //实际上都可以
        //实例化的对象 p 有三种状态:初始化 成功 失败
        const p=new Promise(function (resolve,reject) {
            //封装异步操作
            setTimeout(()=>{
                // let data='数据库用户数据'
                // //resolve
                // resolve(data);
                //如果说数据读取失败
                let err='数据读取失败';
                reject(err);
            },1000)
        });
        //成功后 调用 Promise 的 then() 方法
        //then() 方法 接收两个参数 都是函数类型的值
        // 成功：value 失败：resaon
        //如果上述异步任务成功则调用第一个回调 否则调用第二个
        p.then(value=>{
            console.log(value);
        },reason=>{
            console.log(reason);
        })

(2)Promise.prototype.then方法
(3)Promise.prototype.catch方法

3.Set集合

集合:表示无重复值的有序列表
ES6 提供了新的数据解构 Set(集合)，他类似于数组，但成员的值都是唯一的，对于重复的值能够直接过滤掉，集合实现了iterator 接口，所以可以使用扩展运算符和 for…of 进行遍历
集合的属性和方法:
size:返回集合的元素个数
add:增加一个新元素，返回当前集合
delete:删除元素，返回boolean值
has:检测集合中是否包含某个元素，返回boolean值
语法:let 集合名=new Set();

let set=new Set();
console.log(set,typeof set);//Set(0){object}

size返回集合元素个数

let set=new Set(['11','22','33']);
console.log(set.size);//3

add添加元素

let set=new Set();
set.add(2);
set.add('4');
set.add('4');
console.log(set);//Set(2) 重复的数据将会直接忽略

delete删除元素

let set=new Set();
set.add(2);
set.add('4');
set.add([1,2,3]);
set.delete(2);
console.log(set);//Set(2){'4',Array(3)}

校验数值是否在集合中 has() 方法

let set=new Set();
set.add(2);
set.add('4');
set.add([1,2,3]);
console.log(set.has(2)); //true

访问集合的长度 size

let set=new Set();
set.add(2);
set.add('4');
set.add([1,2,3]);
console.log(set.size); //3

将set转换成数组

let set1=new Set([1,2,3,4,5,5,5,6]);
//利用扩展运算符
let arr=[...set1];
console.log(arr);

3.1 Set实践

案例一:数组去重

let arr=[1,2,3,4,5,5,6,6,7,8];
let result=[...new Set(arr)];
console.log(result);

案例二:交集

let arr=[1,2,3,4,5,5,6,6,7,8];
let arr1=[7,8,9,10];
// let result=[...new Set(arr)].filter(item=>{
//     let arr2=new Set(arr1);
//     if(arr2.has(item)){
//         return true;
//     }else{
//         return false;
//     }
// });
let result=[...new Set(arr)].filter(item=>new Set(arr1).has(item));

案例三:并集

let arr=[1,2,3,4,5,5,6,6,7,8];
let arr1=[7,8,9,10];
let union=[...new Set([...arr,...arr1])];
console.log(unoin);

4.Map数据类型

ES6提供了Map数据结构。他类似与对象，也是键值对的集合。但是"键"的范围不限于字符串，各种类型的值(包括对象)都可以当左键。Map也实现了iterator接口，所以可以使用扩展运算符和for…of进行遍历。
Map的属性和方法:
(1)size 返回Map的元素个数
(2)set 增加一个新元素，返回当前Map
(3)get 返回键名对象的键值
(4)has 检测Map中是否包含某个元素，返回boolean值
(5)clear 清空集合，返回undefined
声明 Map

let map=new Map();

添加元素
键名与键值可以是任意数据元素

let map=new Map();
map.set('name','zz');
map.set('change',()=>{
    console.log('111');
});
console.log(map);//Map(1){"name"=>"zz","change"=>f}

size获取元素个数

let map=new Map();
map.set('name','zz');
console.log(map.size);//1

delete删除元素

let map=new Map();
map.set('name','zz');
map.set('age','22');
map.delete('name');
console.log(map);//"age"=>"22"

get获取元素

let map=new Map();
let key={
    school:'ZZGS'
};
map.set(key,['11','22','33']);
console.log(map.get(key));//(3) ['11', '22', '33']

5.Class 类

ES6提供了更接近传统语言的写法，引入了Class(类)这个概念，作为对象的模板，通过class类关键字可以定义类，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。

class Phone{
    //构造方法 内容不能修改
    constructor(brand,price){
        this.brand=brand;
        this.price=price;
    }
    //创建call()方法 必须遵守该格式，不能按照ES5的写法来进行
    call(){
        console.log('111');
    }
}
//实例化
const phone=new Phone('Iphone','49999');
console.log(phone)