ES6中map数据结构与使用Proxy进行预处理

这节课主要学习map的这种ES6新加的数据结构。在一些构建工具中是非常喜欢使用map这种数据结构来进行配置的,因为map是一种灵活,简单的适合一对一查找的数据结构。我们知道的数据结构,已经有了json和set。那map有什么特点。

Json和map格式的对比

map的效率和灵活性更好

先来写一个JSON,这里我们用对象进行模拟操作。

let json = {
name:'Hello',
skill:'web'
}
console.log(json.name);

但是这种反应的速度要低于数组和map结构。而且Map的灵活性要更好,你可以把它看成一种特殊的键值对,但你的key可以设置成数组,值也可以设置成字符串,让它不规律对应起来。

let json = {
name:'Hello',
skill:'Web'
}
console.log(json.name);

var map=new Map();
map.set(json,'iam');
console.log(map);

当然也可key字符串,value是对象。我们调换一下位置,依然是符合map的数据结构规范的。

map.set('World',json);
console.log(map);

Map(1){{…} => "iam"}
Map(2){{…} => "iam", "World" => {…}}

map的增删查

上边我们已经会为map增加值了,就是用我们的set方法,这里我就不重复讲解了。直接看如何取出我们的值。

取值get

现在取json对应的值。

console.log(map.get(json));
删除delete

删除delete的特定值:

map.delete(json);
console.log(map)
size属性
console.log(map.size);
查找是否存在has
console.log(map.has('json'))
清楚所有元素clear
map.clear()

总结:map在现在开发中已经经常使用,它的灵活性和高效性是我们喜欢的。开发中试着去使用map吧,你一定会喜欢上它的。

用Proxy进行预处理

当我们在操作一个对象或者方法时会有几种动作,比如:在运行函数前初始化一些数据,在改变对象值后做一些善后处理。这些都算钩子函数,Proxy的存在就可以让我们给函数加上这样的钩子函数,你也可以理解为在执行方法前预处理一些代码。你可以简单的理解为他是函数或者对象的生命周期。

Proxy的应用可以使函数更加强大,业务逻辑更加清楚,而且在编写自己的框架或者通用组件时非常好用。Proxy涉及的内容非常多,那这里我就带你入门并且介绍给你后续的学习方法。

在学习新知识之前,先来回顾一下定义对象的方法。

var obj={
add:function(val){
return val+10;
},
name:'I am Jspang'

};
console.log(obj.add(100));
console.log(obj.name);

声明了一个obj对象,增加了一个对象方法add和一个对象属性name,然后在控制台进行了打印。

声明Proxy

我们用new的方法对Proxy进行声明。可以看一下声明Proxy的基本形式。

new Proxy({},{});

需要注意的是这里是两个花括号,第一个花括号就相当于我们方法的主体,后边的花括号就是Proxy代理处理区域,相当于我们写钩子函数的地方。

现在把上边的obj对象改成我们的Proxy形式。

var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'I am Jspang'
}, {
get:function(target,key,property){
console.log('come in Get');
return target[key];
}
});

console.log(pro.name);

可以在控制台看到结果,先输出了come in Get。相当于在方法调用前的钩子函数。

get属性

get属性是在你得到某对象属性值时预处理的方法,他接受三个参数

target:得到的目标值
key:目标的key值,相当于对象的属性
property:这个不太常用,用法还在研究中,还请大神指教。

set属性

set属性是值你要改变Proxy属性值时,进行的预先处理。它接收四个参数。

  • target:目标值。
  • key:目标的Key值。
  • value:要改变的值。
  • receiver:改变前的原始值。
var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'I am GanPing'
}, {
get:function(target,key){
console.log('come in Get');
return target[key];
},
set:function(target,key,value,receiver){
console.log(`setting ${key} = ${value}`);
return target[key] = value;
}

});

console.log(pro.name);
pro.name='Gan';
console.log(pro.name);

apply的使用

apply的作用是调用内部的方法,它使用在方法体是一个匿名函数时。看下边的代码。

let target = function () {
return 'I am GanPing';
};
var handler = {
apply(target, ctx, args) {
console.log('do apply');
return Reflect.apply(...arguments);
}
}

var pro = new Proxy(target, handler);

console.log(pro());

其实proxy的知识是非常多的,我这里只能算是入门课程

(完)

分享到