数组扁平化, 数据劫持

数组扁平化:
            // 将多维数组转换成一维数组
        let arr = [1,2,[3,4,[5,6,[7,8]]]];   // => [1,2,3,4,5,6,7,8]
        /* 
            1. 先遍历这个数组
            2. 如果有数组(Array.isArray() => 返回值是一个 boolean类型)
            3. 使用递归,再次遍历
            4. 外部使用一个数组,专门用户push数据的(非数组)
        */
        let newArr = []
        // 数组扁平化
        function fn(arr){
            arr.forEach(item=>{
                // console.log(Array.isArray(item));
                if(Array.isArray(item)){
                    //使用递归=>继续调用
                    fn(item)
                }else{
                    //不是一个数组
                    newArr.push(item)
                }
            })
        }
        //调用fn函数
        fn(arr)

        console.log(newArr);

 
  数据劫持:
                双向绑定 
                    数据劫持+发布订阅
                数据劫持 vue2 和 vue3 
                    vue2 => Object.defineProperty 
                    vue3 => Proxy+Reflect
        
        let number = 10;
        let obj = {
            name: "张三",
            age: 18,
            gender: "男"
        }
        /* 
            参数一  劫持对象
            参数二  对象的属性
            参数三  劫持
        */
        Object.defineProperty(obj, "name", {
            get() {
                console.log("您要获取了!");
                return "世上只有妈妈好!"
            },
            set(val) {
                console.log("你要设置了");
                // console.log(val);
                // obj.name = val;
                number = val;
            }
        })

        obj.name = "世上有爸爸好!"
        // console.log(obj.name);

        console.log(obj,number);

 let obj = {
            name: "张三",
            age: 18,
            gender: "男"
        }

        Object.defineProperty(obj,"name",{
            // value:"文渊",       //给obj.name 添加 默认值 文渊
            // configurable:false  //能否删除,true=> 可以删除,false => 不可以删除
            // enumerable:false    //能否遍历,true=> 可以遍历,false => 不可以遍历
            writable:false         //能否修改,true=> 可以修改,false => 不可以修改
        })
        //删除obj里面属性 name
        // delete obj.name;

        // for(let key in obj){
        //     console.log(key,obj[key]);
        // }

        obj.name = "娲女"
        console.log(obj);

let obj = {
            name:"张三",
            age:18,
            gender:"男",
            address:["城市1","城市2"]
        }

        const proxyObj = new Proxy(obj,{
            get(target,prop){
                console.log("获取数据!");
                //利用反射将数据返回出去
                return Reflect.get(target,prop)
            },
            set(target,prop,val){
                console.log("设置数据");
                return Reflect.set(target,prop,val)
            },
            deleteProperty(target,prop){
                console.log("删除数据");
                return Reflect.deleteProperty(target,prop)
            }
        })

        // console.log(proxyObj.name);
        // console.log(proxyObj.gender);

        // proxyObj.name = "王八"
        // console.log(obj);

        delete proxyObj.name 
        console.log(obj);

  总结 :
                vue2 与 vue3  数据劫持的区别
                    1. vue2采用的Object.defineProperty,vue3采用的Proxy+Reflect
                    2. defineProperty只能劫持单一属性,Proxy+Reflect可以代理这个对象
                    3. defineProperty不可以监视数组,监视数据需要使用到那7个方法
                       proxy可以代理数组
                    4. defineProperty添加属性的时候, 需要使用到$set + $nextTick
                    5. defineProperty 使用ES5的语法,对IE浏览器的兼容性好
                       proxy使用ES6的语法,对IE浏览器的兼容性差