美文网首页
Symbol、set、proxy

Symbol、set、proxy

作者: 追逐_e6cf | 来源:发表于2018-10-14 12:13 被阅读0次

    一、Symbol
    symbol是es6一种新的数据类型:用于设置对象的值,使得这个值独一无二
    作用:确保每个属性名都是独一无二的,这样就可以防止属性名的冲突
    即使参数相同,他们的===对比,还是不同

    let s = Symbol();
    console.log(s)
    console.log(typeof s)
    
    let s1 = Symbol("s1");
    let s2 = Symbol("s2");
    console.log(s1 === s2)
    
    //报错:Symbol is not a constructor
    let s1 = new Symbol();
    
    let s2 = Symbol(123);
    let s3 = Symbol("123");
    console.log(s2, s3)
    s2+s3  //报错:不能进行数值的运算
    //不能强制类型转换为数字类型
    Number(s3)
    Boolean(s3)
    
    //用点操作不一定能够拿到对象的值
    //第一种拿Symbol做法:
    let a = {};
    let s4 = Symbol();
    a[s4] = '123';
    console.log(a)
    console.log(a.Symbol())  //a.Symbol is not a function
    console.log(a.s4)  //undefined  使用对象的Symbol值作为属性名时,获取相应的属性值不能用点运算符
    console.log(a[s4])  //String:123
    
    //第二种Symbol方法
    let obj = {
      s4:3,  //普通写法
      [s4]:5,  //Symbol
      ['a'+'b']:4
    }
    console.log(obj.s4)  //3
    console.log(obj[s4])  //5
    console.log(obj["s4"])  //3
    console.log(obj['a'+'b'])  //4
    console.log(obj.ab)  //特殊情况
    
    第三种Symbol方法
    let a = {};
    let s4 = Symbol()
    Object.defineProperty(a, s4, {value:'mySymbol'});
    a.s4;  //undefined
    a.s4 = "mySymbol";
    a[s4]  //undefined
    a['s4']  //mySymbol
    

    二、Symbol遍历问题

    let s1 = Symbol('s1');
    let s2 = Symbol('s2');
    let obj = {
      [s1]:'s1',
      [s2]:'s2'
    }
    for(let k in obj){
      console.log(k)
    }
    //遍历Symbol值使用getOwnPropertySymbols
    Object.getOwnPropertySymbols(obj);
    let s1 = Symbol.for("s33");
    let s2 = Symbol.for("s33");
    let s3 = Symbol("s33")
    console.log(s1 === s2)
    console.log(s1 === s3)
    

    三、set
    通过add方法向Set结构加入成员,结果表明Set结构不会添加重复的值

    const s = new Set();
    [2, 3, 4, 5, 2, 2].forEach(x => s.add(x));
    [2, 3, 4, 5, 2, 2].forEach(function(x){
      return s.add(x)
    });
    console.log(s)  //Set(4)  {2, 3, 4, 5}
    for(let i of s){
      console.log(i)
    }
    
    const set = new Set([1, 2, 3, 4, 4]);  //对数组去重
    //add(value):添加某个值,返回Set结构本身
    //delete(value):删除某个值,返回一个布尔值,表示删除是否成功
    //has(value):返回一个布尔值,表示该值是否为Set的成员
    //clear():清除所有成员,没有返回值
    [...set]  //[1, 2, 3, 4]
    set.delete(1)  //set底层的函数 true
    set  //Set(3){2, 3, 4}
    set.delete(1)  //false
    
    //Array.from()  可以将Set结构转为数组
    const items = new Set([1, 2, 3, 4, 5]);
    const array = Array.from(items);
    

    四、WeakSet
    WeakSet的成员只能是对象,而不能是其他类型的值

    const b = [3, 4];
    const ws = new WeakSet(b);
    const a = [[1, 2], [3, 4]];
    const ws = new WeakSet(a);
    

    五、Map

    const m = new Map();
    const o = {p: 'Hello World'};
    //设置
    m.set(o, 'content')
    //获取
    m.get(o)  //"content"
    //进行判断是否有值
    m.has(o)  //true
    //删除
    m.delete(o)  //true
    m.has(o)  //false
    

    六、proxy
    Proxy 可以理解成,在目标对象之前架设一层“拦截”

    let obj = {
      a:1,
      b:2
    }
    //target参数表示所要拦截的目标对象
    //handler用来定制拦截行为
    let obj1 = new Proxy(obj, {
      get(){
        return 123
      },
      set(){
        console.log("我是set")
      }
    });
    
    var obj = new Proxy({
      a:1,
      b:2
    },{
      get:function(target, key, receiver){
        console.log(`getting ${key}!`);
        console.log(receiver)
        return Reflect.get(target, key, receiver);
      },
      set:function(target, key, value, receiver){
        console.log(`setting ${key}!`);
        return Reflect.set(target, key, value, receiver);
      }
    })
    

    相关文章

      网友评论

          本文标题:Symbol、set、proxy

          本文链接:https://www.haomeiwen.com/subject/jaszaftx.html