当前位置：网站首页 > 技术文章 > 正文

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

itomcoil 2025-04-26 18:46 23 浏览

大家好，我是大澈！

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

今天分享一个我觉得特别实用的知识点：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搜@程序员大澈：专注于前后端技术知识分享，最后感谢兄弟们给个点赞、分享、推荐！

js截取字符串中的一部分

上一篇：用 Playwright MCP 让 AI 改它自己写的屎山代码
下一篇：Katalon 所有关键字及其含义

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

相关推荐

我用 1 个 2 手计算器换了 3 台 MacBook(上)

零基础也能搞定!DeepSeek大模型本地安装全攻略

Win7中同时安装python2和python3的方法

Python三目运算符(三元运算符)用法详解

PS零基础入门教程:Photoshop 2024工具详解—标尺工具

按颜色计数、求和、算平均值或最大值?学这个函数就够啦!

SpringBoot中使用LocalDateTime踩坑记录

中药古今研究:人参

最全的linux安装软件方法 linux安装软件流程

「mysql第二次安装不了」mysql安装失败怎么清理干净?