ES6的对象操作: Symbol Reflect Proxy ...

235 阅读2分钟

方法1: Symbol

  • 作用: ES6 提供的一个函数; 用来创建一个数据;作为键放在对象中使用;
  • 语法: Symbol(字符串)
  • 返回值: 返回一个Symbol 数据
  • 特点: 每一个Symbol 数据都是唯一的;
假设,我们使用一个别人提供的object,但是需要给这个object添加一个新的键值对,自己添加的键就有可能会跟object中原本的键冲突,symbol的主要作用就是创建对象中独一无二的键,可以从根本上防止对象中的键重复;
Object的键都是字符串,并且都是唯一的,不能重复.
也就是说,对象中的键除了是字符串外,还可以是symbol 数据;

Symbol中还原原本的字符串 - Symbol数据.desciption
console.log(nameSymbol.description);
每个Symbol数据都是唯一的:
   var a = Symbol('abc');
   var b = Symbol('abc');
   console.log(a, b);
   console.log(a == b); // false

方法2: Reflect ES6提供的一个对象

  • 作用: 用来操作对象的,访问对象的值,设置对象的键值对,删除对象的键值对;
  • 语法:
  • 返回值:
  • 特点: Reflect操作对象的话,操作结束后我们可以知道操作是否成功;但是以前的操作语法,操作完成后我们无法确定操作是否成功,这对我们后续操作对象有影响;
访问对象中的值: Reflect.get(对象, 属性) 返回访问到的值/undefined;
var obj = {
    name: '张三'
}
 var value = Reflect.get(obj, 'name')//张三
 var value = Reflect.get(obj, 'age')//understand
 console.log(value);
 
 设置对象中的键值对: Reflect.set(对象, 属性, 值) - 返回布尔值表示操作是否成功;
 var bool = Reflect.set(obj, 'age', 12);
 console.log(bool); //true
 
 删除对象中的键值对 - Reflect.deleteProperty(对象, 属性) - 返回布尔值;
 var bool = Reflect.deleteProperty(obj, 'name');
 console.log(bool);//删除成功 true
 

方法3: Proxy 是ES6提供的一个构造函数

  • 作用: 用来创建一个所有键值对都被监视起来的对象;
  • 重要特点: 一次性把所有键值对都监视起来了;
  • 语法: new Proxy(对象)
 var obj = {
    name: '张三',
    age: 12
}

//以前的监视:
Object.defineProperty(obj, 'name', {
});
//现在的监视: 就这样把所有的属性都监视起来了;
var pbj = new Proxy(obj,{
  get(){
     console.log(666);
     return 666
  },
  set(){
    console.log(888);
  }
});
Proxy 实现双向数据绑定:

双向绑定

var obj = {
    msg: 'hello'
}

var pbj = new Proxy(obj, {
    get(o, k) {
        // console.log(o, k);
        return ipt.value
    },
    // o代表被监听的对象(obj),k代表监听的属性,v代表将要修改的值
    set(o, k, v) {
        // console.log(o, k, v);
        o[k] = v
        ipt.value = v
    }
})
var ipt = document.querySelector('input')
ipt.oninput = function() {
    pbj.msg = this.value
}