每天一个技术知识:js各种数组克隆方法

每天一个技术知识:js各种数组克隆方法

编码文章call10242025-02-09 12:02:1211A+A-

大家好,我是大澈!

不知道兄弟们有没有发现,技术工作时间越长,一些技术的基础知识就会忘记的越来越多。为了帮助兄弟们解决这个问题,大澈灵机一动,开启"每天一个技术知识"系列文章,在帮助大家学习新知识的同时,也帮助大家复盘旧知识,一起拒绝遗忘!

今天分享一个我觉得特别实用的知识点:js各种数组克隆方法,看看有没有你没见过的

一、方法细分

1、arr.slice(0)

使用数组的 slice 方法,从索引 0 开始截取到末尾,生成一个新数组。

大澈:这个没咋用过~

2、[...arr]

使用扩展运算符(...)展开数组,生成一个新数组。

大澈:这个浅拷贝时经常用~

3、Array.from(arr)

使用 Array.from 方法将类数组或可迭代对象转换为数组。

大澈:这个浅拷贝时偶尔用~

4、arr.map((x) => x)

使用 map 方法遍历数组,返回一个新数组。

大澈:这个浅拷贝时用的也挺多的~

5、JSON.parse(JSON.stringify(arr))

通过 JSON.stringify 将数组转换为字符串,再通过 JSON.parse 解析为新的数组。

大澈:这个深拷贝时经常用~

6、arr.concat([])

使用 concat方法将原数组与空数组合并,生成一个新数组。

大澈:这个没咋用过~

7、structuredClone(arr)

使用现代浏览器提供的 structuredClone 方法,支持深拷贝。

大澈:这个深拷贝非常牛,但我用的不多~

二、总结对比

下面做一个系列的总结对比。

兄弟们重点关注一下性能、适用场景的差异。

对于浅拷贝:

我推荐优先使用 [...arr],代码简洁且性能高,兼容性不足时再考虑 arr.slice(0)

对于深拷贝:

我推荐优先使用 structuredClone,同样的,代码简洁且性能高,兼容性不足时再考虑JSON.parse(JSON.stringify(arr))。

- end -

承接产品推广/软件开发/bug修复,联系和更多内容在绿色App搜@程序员大澈:专注于前后端技术知识分享,最后感谢兄弟们给个点赞、分享、推荐!

点击这里复制本文地址 以上内容由文彬编程网整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!
qrcode

文彬编程网 © All Rights Reserved.  蜀ICP备2024111239号-4