废话不多，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>es6 监听数组</title>
</head>
<body>
<script>
let oldobj = [];
//使用代理监听数组，弊端（当向array中push值的时候，console会执行两次）
let array = new Proxy(oldobj, {
get: function (target, key, receiver) {
return target[key];
},
set: function (target, key, value, receiver) {
target[key] = value;
console.log(`${target}, ${receiver},修改了key:${key},新值：${value}`)
return true;
}
})
/*
* 華麗的分割綫
* */
//重写Array,监听数组(当向list中push值的时候，console只执行一次)
class NewArray extends Array {
constructor(...args) {
console.log(...args)
super(...args)
}
push(...args) {
super.push(...args);
let _this = this;
//console.log(`监听数组, ${_this}`)
arrayCallback();
return this.length;
}
}
//监控数组如果有值进来，则执行递归方法。
let list = new NewArray(), beWorking = false;
list.push(1);
list.push(2);
list.push(3);
list.push(4);
list.push(5);
function arrayCallback() {
console.log(`數組產生了變化. ${list.length}`);
if(!beWorking){//如果递归没有在执行，则执行递归方法；如果递归方法已经开始执行，则该方法不执行。
recursionRemove(list);
}
}
function recursionRemove(array) {
setTimeout(function () {
//do something
console.log(`删除了元素${array[0]}`);
array.shift();//删除第一个元素
if(array.length == 0){
beWorking = false;
}else{
recursionRemove(array);
}
}, 2000);
}
</script>
</body>
</html>
楼主亲测，使用代理模式，set可以监听到两次。第一次是值的变化，第二次是数组长度的变化。
而使用重写Array的方式，当想数组中push值时，则只会执行一次。
废话多一句，可能人老了，最近接触了javascript es6 感觉真心好用，赞一个!
网友评论