阅读 421

我这废柴怎么可能逆袭的一生、第一天

无所事事的样子开始了摸鱼的一天

ES2015 还有啥呢

    Object.assign()
    // 复制对象呢,一个对象去做饭,一个对象去收拾屋,再来个扇风的,啧啧
    Object.is()
    // 判断两个值是否相等
复制代码

ES2015 proxy代理来了

    // 代理能干啥呢,当然是代理你了,没错就是你的经纪人,出道吧年轻人
    Object.defineProeperty // 没有proxy的时候也有这个功能哦
    // 代理让你感觉没有安全感了吧,如果只是代码好像没有问题的亚子(ps:不太聪明的亚子)
    // 可以监听到各种东西哦,只是增删改查,不要总开车86还没下山呢年轻人
    const person = {
        name:'mdzz',
        age:18
    };
    const personProxy = new Proxy(person,{
        get(target,property){
            // property 被访问的数据名
            // target   代理的数据
            return property in target ? target[property] : '默认值';
        },
        set(target,property,value){
            // 校验一手可以 挣钱少的活咱不干
            if(value<9999){
                throw new TypeErrpr(`就给${value},太少了,咱受不了那委屈`);
            }
            target[property]=value;
        }
    });
    console.log(personProxy.name); // mdzz
    console.log(personProxy.xxx); // 默认值
    
复制代码

ES2015 为啥出现了proxy呢

    // 当然是因为这个经纪人厉害了,经纪人厉害了你才能挣的多点啊
    // Object.defineProeperty只能监视属性的读写,也就是个实习生水平还待靠自己
     const person = {
        name:'mdzz',
        age:18
    };
    const personProxy = new Proxy(person,{
        deleteProperty(target,property){
            // property 被访问的数据名
            // target   代理的数据
            delete target[property];
        }
    });
    delete personProxy.name;
    console.log(person);
复制代码

属性如下图:

    // proxy还能监视数组呢,就很全能
    // Object.defineProeperty是用从写数组的方式监视的,果然只是实习生水平
    const list = [];
    const listProxy = new Proxy(list,{
        set(target,property,value){
            consoel.log('set',property,value);
            target[property]=value;
            return true; // 设置成功
        }
    });
    listProxy.push(100);
    // proxy是以非侵入的方式进行监听的,就是这个没写在对象内
复制代码

ES2015 Reflect是个静态类

    // 不能new哦
    // 底层封装了有14个方法,有一个废弃了的样子
    // 统一的提供了一套基于操作对象的API,就别自己瞎造轮子了
    // 统一了就很优秀了,强迫症表示,我好了
    const obj = {
        name:'mdzz',
        age:18
    };
    const objProxy = new Proxy(obj,{
        get(target,property){
            // property 被访问的数据名
            // target   代理的数据
            return Reflect.get(target,property);
        }
    });
    console.log(obj.name);
    // 乱的不行啊,鲁迅曾经说过,统一才是优秀的。(我康师傅不服)
    console.log('name' in obj);
    console.log(delete obj['age']);
    console.log(Object.keys[obj]);
    // 统一一手,整齐划一,踢着正步朝主席台走来的是……
    console.log(Reflect.has(obj,'name'));
    console.log(Reflect deleteProperty(obj,'age'));
    console.log(Reflect.ownKeys(obj));
    // 方法挺多就不列了,摸鱼的人怎么可能勤勉呢,怠惰deisi
    // 就上面那图里差不多的样子
复制代码

ES2015 Promis

    //先知道知道吧,第三天在看吧,这玩意待写好多字呢
复制代码

ES2015 Class

    // 这玩意可不是css的class啊,你要说css的,我上去就一嘴巴子
    // 之前用的原型 prototype 属性附加属性实现
    // 现在用class 这玩意 java的 都会
    // 有了这个,哼哼,来,让我们new几个对象,一个去扫地,一个去做饭,再来个扇风的,啧啧 完美
    class girlFriend {
        constructor(name){
            this.name=name;
        }
        goCook(){
            console.log(`${this.name}给朕做饭去`);
        }
        static create(name){
            return new girlFriend(name);
        }
    }
    const mdzz = girlFriend.create('mdzz');
    // class都有了能没继承么,继承朕的蚂蚁花呗吧
    class computer exxtends girlFriend{
        constructor(name,people){
            super(name);
            this.people = people;
        }
        
        areYouPeople(){
            super.goCook();
            console.log(`你还是人么?${this.people}`);
        }
    }
    const test = new computer('电脑','不是人');
    // 嘴角流下了伤心的泪水
复制代码

ES2015 Set数据结构

    //这玩意好,去重贼好用,数据不能重复哦~
    const numberList = new Set();
    numberList.add(1).add(2).add(2); // Set{1,2}
    for(let item of numberList){    // 遍历一手
        console.log(item);;
    }
    numberList.has(11);     // false
    numberList.size;        // 2
    numberList.delete(2);   // Set{1}
    numberList.clear();     // 没了
    // 数组去重demo
    const arr=[1,1,1,2,3,4,8,8,8,9,6,4,5];
    const result = [...new Set(arr)];  // 简单滴很
    console.log(result);
复制代码

ES2015 Map数据结构

    // 类似对象,但是对象存复杂结构就难了
    // key值如果是对象的话,对象的对象属性就有点问题了[object Object]这属性名,俩字优秀了
    // 用Map就可以了呢
    const m = new Map();
    const zz = {name:'zz'};
    m.set(zz,'mdzz');
    console.log(m); // Map{{name:'zz'}=>'mdzz'}
    // has() clear() delete() 这些都有
    console.log(m.get(zz)); // 'mdzz'
    m.forEach(value,key)=>{
        console.log('key:'+key);
        console.log('value:'+value);
    }
    // 就是可以使用任意类型的东西做key
复制代码

ES2015 Symbol

    // 好几个开发命名总会有机会重名的,加个前缀吧,总感觉别扭呢
    // Symbol来了,每个Symbol都是独一无二的属性,就和我一样是人类但是每个人都不是同一个人呢,不一样的烟火呢
    const s = Symbol();
    console.log(s);
    console.log(Symbol()===Symbol()); // false
    // 可以弄出私有属性呢 类似private的感觉~
    // Symbol('asd')===Symbol('asd')  true
    // 里面参数相同就可以相等哦,毕竟都指向你这个同一束烟火呢
    // 参数会转为字符串格式哦 ~
    // 内置了一些常量属性
    // iterator  hasInstance
    // Symbol作为属性名称,遍历数组是查不到的哦,序列化对象也会被隐藏,就保密性很强的亚子
复制代码

ES2015 for...of

    // '全能'遍历器来了
    // for...of 随时可以使用 break 跳出终止循环
    // forEach就不能
    // 数组的 some() every() 可以return true/false终止遍历
    // 它可以遍历Set数据、Map数据
    //Set和数组差不多的亚子,就不写demo了
    const m = new Map();
    m.set('name','mdzz');
    m.set('age','12');
    for(const [key,value] of m){
        console.log(key,value);
    }
    // 遍历对象的时候可待看看咯,需要对象实现iterable接口哦
    // 且看我下面道来~~
复制代码

ES2015 可迭代接口

    // iterable接口
    const obj = {
        [Symbol.iterator]:function(){
            let index= 0;
            const self = this;
            return {
                next: function(){
                    return {
                        value:self.store[index],
                        done:index++>=self.store.length,
                    }
                }
            }
        }
    }
复制代码

ES2015 迭代器模式

    const todos = {
      life: ['吃饭', '睡觉', '打豆豆'],
      learn: ['语文', '数学', '外语'],
      work: ['喝茶'],
      [Symbol.iterator]: function () {
        const all = [...this.life, ...this.learn, ...this.work];
        let index= 0;
        return {
            next: function(){
                return {
                    value:all[index],
                    done:index++>=self.store.length,
                }
            }
        }
      }
    }
    // 对外提供统一的遍历方式了,你不用管我对象内有多少东西,都可以遍历出来
    // 可以多人合作写代码的样子,或者是给别人的接口啥的
    for (const item of todos) {
      console.log(item);
    }
复制代码

ES2015 生成器

    // 减少回调嵌套过深的解决方案(ps:我觉得就是让代码好阅读了,我们只是bug的搬运工)
    function * foo(){
        console.log('test');
        return 101;
    }
    const result = foo();
    console.log(result.next()); // 返回了个对象实现了iterator接口的亚子
    // yield 相比 return 不算是终止函数的运行,而是运行完本行后返回值后暂停,下次调用从此处开始运行。
    // 使用 Generator 函数实现 iterator 方法
    const todos = {
      life: ['吃饭', '睡觉', '打豆豆'],
      learn: ['语文', '数学', '外语'],
      work: ['喝茶'],
      [Symbol.iterator]: function * () {
        const all = [...this.life, ...this.learn, ...this.work];
        for (const item of all) {
          yield item;
        }
      }
    }
    
    for (const item of todos) {
      console.log(item);
    }
    // 比上面的少了点啥吧,看起来好懂多了
复制代码

—————————————————————————————————————————————————————— 我这废柴

系列

文章分类
前端
文章标签