ES6基础

dome 类

typeof class

  结果是 Function
 类的本质是函数
class Block{
｜ 
｜ }

构造函数

｜ constructor( ) { }
｜ 实例化的时候 new 关键字调用就是构造函数
super()
｜ 调用父类得构造函数
extends  继承父类得方法
static 类的静态属性和方法
类的tihs指向得使它的实例( 也就是new出来的对象)

       var s1 = new Student('小红', 22, 'JavaScript')
       var s2 = new Student('小张', 21, '前端')
       console.log(s1, s1);
       // 使用继承方法
       s2.say();
       // 使用自身方法
       s2.study()

block 类

  // 小方块 点1下 绿 变黄黄  点  黄变红色  再点 消失
 class Block {
            constructor(x = 0, y = 0) {
                this.life = 3; // 生命
                this.colors = ['red', 'yellow', 'green']; // 颜色
                this.el = document.createElement("div"); // 节点
                this.el.className = 'block'; // 类名
                this.x = x; // x值与y值
                this.y = y;
                // 初始化
                this.init();
                // 页面显示
                document.body.appendChild(this.el);
                // 添加事件（是用箭头函数改变this）
                this.el.addEventListener('click', () => this.clickHD())
            }
             init() {
                this.el.innerText = this.life;
                this.el.style.left = this.x + 'px';
                this.el.style.top = this.y + 'px';
                this.el.style.backgroundColor = this.colors[this.life - 1];

            }
            clickHD() {
                // 生命减一
                this.life--;
                if (this.life <= 0) {
                    // 移除节点
                    document.body.removeChild(this.el);
                }
                // 重新初始化
                this.init()
            }
        }
        var b1 = new Block()

set

不重复数组
add 添加
delete 删除
clear 清空
size 大小
has 检测

  var s1 = new Set([1, 2, 1, 2, 5, 9, 9, 8]);
        console.log(s1);

        // Set 常用来去重

        var arr = [1, 2, 1, 2, 1, 1, 2];
        var arr1 = [...new Set(arr)];
        console.log(arr1);

        var s1 = new Set([1, 2, 1, 2, 15, 9, 9, 8])
        // add添加  delete 删除 clear 清空  has 检测 size大小
        console.log(s1.size);
        s1.add(88);
        s1.delete(9);
        console.log(s1);

map

任意键得对象
set（key，value)设置
get(key) 获取
delete 删除
size 大小

map 图键名可以是任意类型

   var m = new Map([['name', 'xiaoyu'], ['age', 18], [{ eye: 2 }, '好眼睛']])
     console.log(m);


     // set 添加  get 获取  size 大小  delete  删除  clear 清空
     console.log(m.get('name'));
     m.set(null, '没有')
     console.log(m);
     m.delete('age')
     console.log(m);

迭代对象

  迭代对象，可以用for of 遍历对象是迭代对象
  String 字符串Array 数组  Set集合Map图
  keys键结果 values值得集合 entries 键与值得集合

 var s1 = new Set([1, 5, 8, 'name', 'xiaoyu']);
      for (var v of s1) {
          console.log(v);
      };
      for (var key of s1.keys()) {
          console.log(key);
      };
      for (var key of s1.values()) {
          console.log(key);
      };
      var arr = ['red', 'blue', 'yellow']
      for (var key of arr.keys()) {
          console.log(key);
      };
      for (var [k, v] of arr.entries()) {
          console.log(k, v);
      }

同步异步

异步: 同步是按顺序从上至下阻塞式执行代码上一行代码不执行完毕，下行是不会执行得

    console.log(1);
    setInterval(()=>console.log(2),1000);
    console.log(3);
    实现异步：1.回调函数 2. 事件响应 3. promise 承诺 4. sync 和 await 5. 订阅发布模式

   function say(str, delay, callback)
        setInterval(() => {
            console.log(str);
            if (callback) { callback }
        }, delay)
        say('你笑起来真好看')

primise

    // 承诺买个 大house 前面是游泳池  后面是花园  楼顶是停机坪
      var p = new Promise((resolve, reject) => {
          var n = Math.random();
          setTimeout(() => {
              if (n > 0.5) { resolve('买个大house 前面是游泳池，后面是花园，楼顶是停机坪') } else {
                  reject('游泳池去大众澡堂也可以，花园去公园就行了，house咱们租的房子也是一样得')
              }
          }, 2000)
      })
      console.log(p);
      // 承诺有3个状态 pending 准备  rejected 拒绝  resolved兑现
      // 状态发生改变就不能更改
      
      // then 回调函数拿到得是 resloved 兑现状态的结果
      // .catch 回调函数拿到的是 rejected 拒绝得理由
      p.then(res => {
          console.log(res);
      })
          .catch(res => console.error(err))

使用promise 下载图片

01 定义一个函数 返回一个promise
02 在promise创建一个img标签
03 img onload加载 resolve img
04 img onerror 出错 reject

   function downImg(url) {
            // 返回 promise
            return new Promise((resolve, reject) => {
                // 创建图片
                var img = document.createElement('img');
                // 指定img
                img.src = url;
                // 加载图片成功返回图片
                img.onload = function () {
                    resolve(img);
                }
                // 加载失败返回错误原因
                img.onerror = function (err) {
                    reject(err)
                }
            })
        }
        downImg("https://img2.baidu.com/it/u=1087851651,2604478731&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729")
            .then(res => {
                document.body.appendChild(res)
            }).catch(err => {
                console.log(err);
            })

使用promise

有三个状态 状态变化就不可逆

pendding
resolved
rejected

解决

1. 异步操作
2. 回调地狱 （层级过深

all 全部

所有promise

race 赛跑

返回最先resolve 得结果

   function say(msg, delay) {
            return new Promise((resolve, reject) => {
                setTimeout(() => resolve(msg), delay)
            })
        }
        async function doit() {
            var m1 = await say('您好，我能加你个微信嘛？', 4000);
            console.log(m1);
            var m2 = await say('走吃个串串', 3000)
            console.log(m2);
            return '国庆快乐!';
        }
        doit().then(res => console.log(res))
        // var result = doit()
        // console.log(result);

dom 生成器

需要通过 next()进行遍历
生成器执行完毕 返回的是迭代器
迭代器 执行next方法 返回得就是yield生成内容
每次生成器执行带 yield时候就是停止
迭代器可以通过for of遍历

 function* get() {
           yield 'a';
           yield 'b';
           yield 'c';
       }
       var obj = get();
       var obj1 = iter.next();
       console.log(obj1);
       var obj2 = iter.next();
       console.log(obj2);
       var obj3 = iter.next();
       console.log(obj3);
       var obj4 = iter.next()
       console.log(obj4);
       for (var v of iter) {
           console.log(v);
       }

       // 生成一个1-100得迭代器
       // * @param {Number} min 最小值 例1 
       // * @param {Number} max 最小值 例100
       // * @param {Number} step 最小值 例1
       // * @return {Iterator} 返回的可迭代对象
       // * @description 生成一个从min 到 max 得可迭代对象
       // * @example 例子
       // * for(var v of range(1,50,2)){
       // *   console.log(v);
       // * }

       function* range(min, max, step = 1) {
           for (var i = min; i < max; i += step) {
               yield i;
           }
       }
       for (var v of range(1, 50, 1)) {
           console.log(v);
       }

vue2响应式核心原理

// vue2响应式原理 Object.defineProperty 结合订阅发布模式 通过观察者连接视图与数据
Object对象 default订阅 Property 属性 throw 抛出
Object.defineProperty 劫持对象的getter 与 setter

  var obj = { _age: 18 };
        Object.defineProperty(obj, 'age', {
            // 获取age的值时候执行get方法
            get() {
                return this._age
            },
            // 当设置设置age的值时候执行set方法
            set(v) {
                if (v > 200 || v < 1 || isNaN(V)) {
                    throw '年龄设置错误'
                } else {
                    this._age = v;
                }
            }
        })

  // new Vue(options)选项
       var options = {
           data: { age: 15 }
       }
       // vue 的实例
       var inp = document.querySelector('[v-model="age"]')
       var p = document.querySelector("[v-text='age']")
       // 劫持vm对象的age属性
       Object.defineProperty(vm, 'age', {
           // configurable :true是否能删除
           // enumerable :true 是否可以放举
           get() {
               // 返回options的data的age
               return options.data.age
           },
           set(v) {
               // 设置options data 的age
               // 更新options.data
               options.data.age = v;
               // 更新订阅的节点文本
               p.innerText = v;
               // 更新订阅的节点的值
               inp.value = v;
               // 初始化监听
               inp.addEventListener('input', inputHd)
           }
       })
       function inputHd(e) {
           // 更新age的值，触发set方法 也就会更新节点值
           vm.age = e.target.value
       }

proxy代理

 // 要被劫持的对象
        var obj = {
            price: 100
        }
        // 处理器
        var handle = {
            // 堆obj对象进行get 或者set的劫持
            get(target, Property) {
                console.log(new Date().toLocaleDateString(), '壮又在看他钱包里的那两块钱了！');
                return target[Property]
            },
            set(target, Property, value) {
                target[Property] = value;
                console.log('壮的钱包变成' + value);
            }
        }
        // 生成代理对象
        var proxy = new Proxy(obj, handle)
            // price 价格 handle 处理 get 获取 target目标 property 属性 Locale 本地  proxy 代理