JavaScript，数组Array和Proxy(Array)如何相互转化？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在react和vue的世界里面，大量存在Proxy(Array)对象。通常的时候，它的使用方式上和Array是一致的。并且，它能够拦截Array的各种操作，进而扩展出自己的功能。“扩展”部分，并不是本文的内容。本文的主要内容是转化，两者如何相互转化。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的编程经验文章。测试环境：chrome@131.0.6778.70，nodejs@20.18.0。

Array 变 Proxy(Array)

这个Proxy()是可以作用于各种变量类型上的，并不是仅仅单独是Array。本文的内容里面，仅仅想要获得一个普通的Proxy(Array)，并且并不对它做任何的修改，或者说不设置proxy最强大的部分handler。

参考文章：

• https://newsn.net/say/js-proxy.html
• https://newsn.net/say/js-proxy-2.html

new Proxy(a,{})

let a = new Proxy(["苏", "南", "大叔", 1, 2, 3], {});
let b = new Proxy([{ sunan: "苏南" }, { dashu: "大叔" }], {});

console.log(typeof a, a);
console.log(typeof b, b);

这个输出结果，还是有点小争议。typeof()类型被判定为object，nodejs下输出，并没有Proxy(Array)字样。而在浏览器里面输出的时候，是带Proxy(Array)字样的。

proxy(array) 转为 array

读者既然找到了这篇文章，就必然有把proxy(array)转化为array的理由。参考方案：

方案一 [...p] 【推荐】

let p1 = new Proxy(["苏", "南", "大叔", 1, 2, 3], {});
let p2 = new Proxy([{ sunan: "苏南" }, { dashu: "大叔" }], {});

let c1 = [...p1];
let c2 = [...p2];

console.log(typeof c1, c1);
console.log(typeof c2, c2);

方案二 Array.from(p)

let p1 = new Proxy(["苏", "南", "大叔", 1, 2, 3], {});
let p2 = new Proxy([{ sunan: "苏南" }, { dashu: "大叔" }], {});

let d1 = Array.from(p1);
let d2 = Array.from(p2);

console.log(typeof d1, d1);
console.log(typeof d2, d2);

相关文章

• https://newsn.net/say/js-use-strict.html
• https://newsn.net/say/js-object-set-get.html
• https://newsn.net/say/js-object-enumerable.html
• https://newsn.net/say/js-object-configurable.html

结语

没有结语，除了魔改系统函数外，其实也可以通过proxy的方式，魔改系统变量。就像react、vue们所做的那样。

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。