一、array,object,map,set基本数据操作比较
set和map都能有快捷的增删清空查的方法,set不能直接修改元素,map有个设置元素的方法set。
map和set有自身的基本操作,也可以转化为数组使用各种类型的数组方法。
let obj = {name:'obj'},
arr = ['name'],
map = new Map([['name': 'map']]),
set = new Set(['name']);
//新增数据
obj['height'] = 180;
arr.push['height'];
map.set('height', 180),
set.add('height');
//删除
delete obj['height'];
arr.split(arr.indexOf('height'),1)
map.delete('height');
set.delete('height');
//改
map = map.set('height', 185)
set = map.set('height', 185)
obj['height'] = 185
arr[arr.indexOf('height')] = 185
//查找,map和set只能查找是否包含元素得到boolean
map.has('height')
set.has('height')
obj['height']
arr.includes('height')
二、proxy
proxy是对js中某些操作的默认行为的修改,属于对编程语言的修改,是’元编程’(meta programming)。比如’object.name’中点运算符,本来是直接访问对象身上的属性,代理对象后,会触发get处理函数。
proxy是对对象的一种拦截,对外界操作和访问的一种改写与过滤。
访问proxy实例,会有处理函数进行拦截。访问源对象,是正常访问。
proxy参数:
1、代理对象
2、代理配置(各种操作的对应拦截处理)
let obj = {
name:'obj',
age: 25,
preference:'rock'
};
let objProxy = new Proxy(obj, {
get(target, propKey, proxyInstance){
console.log(target, proxyInstance, )
return target[propKey]
},
set(target, propKey, val, proxyInstance){
console.log(target, propKey, val, proxyInstance)
obj[propKey] = 'modifiedProp'
return true
},
has(target, propKey){
console.log(target, propKey)
return NaN
}
})
obj.name = 'newObj'
objProxy.preference = 'pop'
console.log('lalal' in objProxy)
set代理应该返回一个boolean值true,如果返回false或者undefined,在严格模式下会报错。
has代理,拦截in操作,但是不会拦截 for in 操作(通过ownKeys代理来拦截)。
ownKeys可以拦截获取属性名的方法,Object.keys,getOwnpropertyNames,getOwnPropertySymbols,for in。
vue中,Object.defineProperty和Proxy的区别,使用Object.defineProperty需要遍历添加属性,而Proxy直接代理,而且处理函数中操作代理对象很方便。
三、Reflect
和proxy一样,也是es6为操作对象提供的新api。目的有以下几个.
(1)将Object上明显属于语言层面上的方法(如Object.defineProperty),放在Reflect上,现阶段有些方法同时放在Object和Reflect上,未来新方法只部署在Reflect上。
(2)让某些操作,如in、delete操作符变成编程函数方法。in = Reflect.has, delete = Reflect.deleteProperty
(3)让Reflect的方法和proxy每个拦截方法一一对应。让proxy更好的修改相关操作的默认行为。
(4)修改某些Object静态方法的返回值,变得更合理。如Object.defineProperty无法定义属性时,会抛出错误,Reflect.defineProperty会返回false。