当我们遇到一个已经定义好的数组，我们只能以常规的方式直接读取其中的元素，无法对其进行监听、增删改查的控制。ES7 中引入了一个非常强大的应用 —— Proxy，它可以让我们对于已有的对象或数组做到许多自定义的拦截操作。今天，我们就来学习如何使用 ES7 中的 Proxy 对于一个数组进行拦截操作，以此达到我们自定义的效果。
Proxy 是什么
在开始之前，先简单介绍下 Proxy 是什么。MDN 上对于 Proxy 的定义是这样的：
Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。
简单来说， Proxy 就相当于是我们可以在现有对象或者数组上新增一个“外壳”，我们可以通过这个外壳自定义一些拦截操作，从而对这个对象或者数组进行更加精细的控制操作。
Proxy 的示例
为了便于大家了解，这里也简单贴一下一个 Proxy 的示例，方便大家快速了解其基本用法：
let p = new Proxy(target, handler);
- target：需要拦截操作的对象（可以是任何普通的 JavaScript 对象，包括数组）。
- handler：拦截对象操作的各个方法。
拦截数组读取
通过上面的示例，我们知道了 Proxy 的大致使用方法。现在，我们就来看看如何使用 Proxy 来对一个数组进行监听操作。
示例代码
假设我们有一个数组如下：
const arr = [1, 2, 3, 4, 5];
现在，假设我们需要在读取数组的时候，每次都在控制台中打印一下当前正在读取的元素值。该怎么做呢？下面就是一个我们对该需求的实现代码：
const arrProxy = new Proxy(arr, {
get: function(target, key, receiver) {
console.log(`getting ${(typeof key !== 'symbol') ? key : ''}`);
return Reflect.get(target, key, receiver);
}
});
arrProxy[1];我们来一步一步看看上面的代码：
- 我们首先通过 new Proxy 来创建了一个 arrProxy 对象。
- 在 new Proxy 的第二个参数里，定义了我们的监听逻辑。在这里，我们只监听了其中一个方法——get 方法。get 的业务逻辑是每次在 console 中输出“getting”，同时返回正在读取的元素的值。
最后，通过 arrProxy[1] 即可打印出当前读取的元素值。不过因为每次都是通过函数来处理的，所以代码灵活性更高，我们也可以像下面这样来用：
arrProxy.forEach(function(item) {
console.log(item)
})进阶应用
当然，对于 Proxy 的使用，上面的示例也仅仅是一个最基础的应用场景。如果我们想要实现一些更加精细化的操作，那么 Proxy 还能做到更多。
比如，我们现在有这样的需求：每当对于数组进行修改操作时，需要在 console 中输出修改后的数组，并且同时每一个数组元素都需要与一个指定的数值进行比较，当某个元素小于该数值时，输出该元素的下标。
下面就是一个我们实现该需求的代码：
-- -------------------- ---- -------
----- -------- - --- ---------- -
---- ---------------- ---- ------ --------- -
----------------
-------------------- ------ -- -
------- - -- -
---------------- -------- ------- -- ---- ---- ---
-
--
------ ------------------- ---- ------ ----------
-
---
----------------上面的代码中，我们首先实现了监听数组修改操作的 set 方法。在 set 中，我们对于操作前后的数组都进行了 console 的输出，并且同时遍历了每一个元素，进行了比较和数据的输出。最后，我们还是通过 arrProxy.push 来进行了代码的触发。
总结
使用 Proxy 对于已有的数组和对象进行控制和监听，是 ES7 中的一个非常强大的功能。通过使用 Proxy，我们可以实现许多自定义的拦截操作，这对于我们在正式开发中的使用也带来了非常大的便利。希望本篇文章对大家能有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647f585448841e9894f00d01