ES6第三讲

目录

01.Symbol符号

02.迭代器（Iterators）

03.Generator生成器

04Proxy 代理

---

01.Symbol符号

定义：Symbol 是一种新的数据类型，它的值是唯一的，不可变的

案例：

     可以是sym作为唯一的key 或者标识符
{sym:"abc"}

02.迭代器（Iterators）

定义：1.迭代器允许每次访问数据集合的一个元素，当指针指向数据集合最后一个元素时，迭代器便会退出。它提供了 next() 函数来遍历一个序列，这个方法返回一个包含 done 和 value 属性的对象

2.可迭代对象都拥有迭代器（可以被for of 遍历对象都是可迭代对象） String Array Set Map

3.获取迭代对象

案例

var arr = [11,12,13];
var itr = arr[Symbol.iterator]();
 
itr.next(); // { value: 11, done: false }
itr.next(); // { value: 12, done: false }
itr.next(); // { value: 13, done: false }
 
itr.next(); // { value: undefined, done: true }

03.Generator生成器

定义：Generator 函数是 ES6 的新特性，它允许一个函数返回的可遍历对象生成多个值。 在使用中你会看到 * 语法和一个新的关键词 yield:

案例

 当函数执行到yield时会等待

04Proxy 代理

定义：Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）

案例：

  <script>
        //代理就是对原有对象target 二次加工
        var obj = {
            "name": "mumu",
            age: 18
        };
        //用o来代理obj
        var o = new Proxy(obj, {
            //当获取o对象的属性值执行get方法
            get: function(target, prop) {
                //如果属性名在原对象里面
                if (prop in target) {
                    //返回对象属性
                    return target[prop]
                } else {
                    //否则返回"我擦"
                    return "我擦"
                }
            },

            set: function(target, prop, value) {
                if (prop === "age") {
                    if (value > 200 || value < 0) {
                        throw RangeError("这恐怕不是人类")
                    } else {
                        target[prop] = value;
                    }
                } else {
                    target[prop] = value;
                }
            }
        })
    </script>

案例2

用代理实现双向绑定

 <input type="text" id="inp">
    <p id="myp"></p>
    <script>
        //获取两个节点
        var inp = document.getElementById("inp");
        var myp = document.getElementById("myp");
        //定义对象obj
        var obj = {
            msg: "我喜欢啦啦啦啦"
        };
        //使用代理劫持obj
        var o = new Proxy(obj, {
                //get劫持
                get(target, prop) {
                    return target[prop]
                },
                //设置值 o.msg="abc"会触发set
                //target obj对象    prop msg   value"abc";
                //set劫持
                set(target, prop, value) {
                    if (prop === "msg") {
                        myp.innerText = value;
                        inp.value = value;
                    }
                    target[prop] = value;
                }
            })
            //设置节点的值或者文本
        inp.value = o.msg;
        myp.innerText = o.msg;
        //目标:当input发生变化的时候,p的内容也要跟随变化
        //给inp表单添加input事件修改o.msg的值
        inp.oninput = function() {
            o.msg = inp.value
        }
    </script>