javascript如何复制一个数组

在javascript中复制数组不能直接用等号赋值,因为数组是引用类型,直接赋值只会复制内存地址,导致新旧数组相互影响。1. 使用展开运算符 […originalarray] 是最简洁现代的浅拷贝方法;2. array.from(originalarray) 和 slice() 也能实现浅拷贝,效果类似;3. concat() 通过空数组连接原数组实现复制;这些方法均为浅拷贝,即新数组中的引用类型元素仍共享原数组的引用,修改嵌套对象会影响原数组。4. 深拷贝需用 json.parse(json.stringify()) 或递归函数(如lodash的 _.clonedeep()),以彻底分离所有嵌套结构。选择方法应根据是否需要深拷贝及数据复杂度决定,性能差异在常规场景下可忽略,推荐优先考虑代码可读性与适用性。

javascript如何复制一个数组

在JavaScript里,如果你想复制一个数组,可不是简单地用等号赋值就能搞定的。你需要明确地告诉JavaScript,你要一个新的数组,并且把原数组里的所有元素都搬过来。这样做才能确保你修改新数组时,不会意外地影响到原来的那个。

javascript如何复制一个数组

复制数组的方法有很多,每种都有它适用的场景和一些需要注意的小细节。我个人最常用的,也是现在前端开发里非常流行且简洁的方式,就是使用展开运算符(spread syntax)。比如,你有一个

originalArray

,想复制一份,直接

const newArray = [...originalArray];

就可以了。这行代码的背后,是JavaScript创建了一个全新的数组,然后把

originalArray

里的每一个元素“展开”并填充到这个新数组里。

当然,还有其他一些经典方法:

立即学习“Java免费学习笔记(深入)”;

javascript如何复制一个数组

Array.from()

:这个方法非常灵活,它能从一个类数组对象或可迭代对象创建一个新的、浅拷贝的数组实例。对于数组来说,

const newArray = Array.from(originalArray);

效果和展开运算符类似,同样是创建了一个新数组。

slice()

:这是数组原型上的一个方法,当不带任何参数调用时,

originalArray.slice()

会返回原数组的一个浅拷贝。

const newArray = originalArray.slice();

简单直接,也是很多老项目里常见的写法。

concat()

:虽然

concat

主要用于连接数组,但当它与一个空数组结合时,也能实现复制的效果。

const newArray = [].concat(originalArray);

同样会返回一个新数组,包含原数组的所有元素。

这些方法都属于“浅拷贝”,这意味着如果你的数组里嵌套了对象或其他数组,那么这些嵌套的引用类型数据在复制后,新旧数组仍然会共享同一个引用。这一点,在实际开发中非常重要,也是很多初学者容易踩坑的地方。

为什么直接赋值不行?理解引用与值类型

你可能会好奇,为啥不能直接

let newArr = oldArr;

呢?这其实是JavaScript数据类型的一个核心概念在作祟。在JavaScript中,数据类型大致分为两类:基本类型(如字符串、数字、布尔值、null、undefined、Symbol、BigInt)和引用类型(主要是对象、数组和函数)。

javascript如何复制一个数组

当你对一个基本类型变量进行赋值时,比如

let a = 10; let b = a;

b

会得到

a

的一个副本,它们是完全独立的。你修改

b

不会影响

a

但数组是引用类型。当你写

let newArr = oldArr;

时,

newArr

并没有得到

oldArr

的一个副本,它只是得到了

oldArr

所指向的那个内存地址。简单来说,

newArr

oldArr

现在都指向了内存中的同一个数组。这就好比你给同一个文件夹起了两个不同的名字,无论你通过哪个名字去修改文件夹里的内容,实际修改的都是同一个地方。

举个例子:

const original = [1, 2, { name: 'Alice' }];const assigned = original; // 直接赋值assigned.push(4);assigned[0] = 99;assigned[2].name = 'Bob'; // 修改嵌套对象console.log(original); // 输出: [99, 2, { name: 'Bob' }, 4]console.log(assigned); // 输出: [99, 2, { name: 'Bob' }, 4]// 它们完全一样,因为指向的是同一个数组

这种行为在某些场景下可能正是你想要的,比如你希望两个变量始终同步更新。但更多时候,尤其是在处理数据时,我们希望拥有一个独立的数据副本,避免“牵一发而动全身”的副作用。这就是为什么我们需要明确地进行数组复制操作的原因。

浅拷贝与深拷贝:何时需要更彻底的复制?

前面提到的展开运算符、

slice()

Array.from()

concat()

都属于浅拷贝。它们能很好地处理数组中包含基本类型元素的情况,因为这些基本类型的值会被直接复制。然而,一旦数组中出现了对象或另一个数组(即引用类型),浅拷贝就显得力不从心了。

浅拷贝的本质是:它创建了一个新数组,但如果原数组的元素是引用类型(比如对象或数组),那么新数组中对应的元素仍然是原引用类型元素的引用。换句话说,它们指向的是内存中的同一个对象或数组。

const originalArray = [1, { a: 1 }, [2, 3]];const shallowCopy = [...originalArray];shallowCopy[0] = 100; // 修改基本类型,互不影响shallowCopy[1].a = 200; // 修改嵌套对象属性,原数组也会受影响shallowCopy[2].push(4); // 修改嵌套数组,原数组也会受影响console.log(originalArray); // 输出: [1, { a: 200 }, [2, 3, 4]]console.log(shallowCopy);   // 输出: [100, { a: 200 }, [2, 3, 4]]

可以看到,虽然

shallowCopy

是一个新数组,但它内部的

{ a: 1 }

[2, 3]

仍然是和

originalArray

共享的。

那么,何时需要深拷贝呢?当你需要一个完全独立的数据副本,包括所有嵌套的对象和数组都不能与原数据有任何关联时,你就需要深拷贝。这在处理复杂的配置对象、状态管理(如Redux中不可变状态的更新)、或者需要回溯数据历史的场景中非常常见。

实现深拷贝的方法通常有:

JSON.parse(JSON.stringify(object))

:这是最简单粗暴,也最常用的深拷贝方法。它先把对象序列化成JSON字符串,再反序列化回来,这样就切断了所有引用。

优点:简单,一行代码搞定。缺点:无法处理函数、

undefined

Symbol

BigInt

类型的数据(它们会在序列化时丢失)。无法处理循环引用(会报错)。无法处理

Date

对象(会变成字符串)。性能相对较低,尤其是在处理大型复杂对象时。

const originalDeep = [1, { a: 1, b: () => {} }, new Date()];const deepCopyJSON = JSON.parse(JSON.stringify(originalDeep));console.log(deepCopyJSON); // 输出: [1, { a: 1 }, "2023-10-27T...Z"] (函数丢失,日期变字符串)

递归拷贝:对于更复杂的情况,尤其是要处理函数、日期、循环引用等,你需要编写一个递归函数来遍历对象的每一个属性,并根据其类型进行深拷贝。这通常是手写或使用成熟库(如Lodash的

_.cloneDeep()

)的方式。

// 简化版递归深拷贝(不处理循环引用、特殊对象如Date、RegExp等)function deepClone(obj) {    if (obj === null || typeof obj !== 'object') {        return obj;    }    let clone = Array.isArray(obj) ? [] : {};    for (let key in obj) {        if (Object.prototype.hasOwnProperty.call(obj, key)) {            clone[key] = deepClone(obj[key]);        }    }    return clone;}const originalDeepComplex = [1, { a: 1, b: { c: 2 } }];const deepCopyManual = deepClone(originalDeepComplex);deepCopyManual[1].b.c = 99;console.log(originalDeepComplex[1].b.c); // 输出: 2 (原数组未受影响)

选择哪种拷贝方式,完全取决于你的具体需求。对于大多数只包含基本类型或不需要修改嵌套对象的数组,浅拷贝就足够了,而且性能更好。当你需要一个完全独立的数据副本,并且数据结构复杂时,才应该考虑深拷贝。

性能考量:哪种数组复制方法效率更高?

在JavaScript中,不同的数组复制方法在性能上确实存在差异,但对于大多数日常应用场景和中小型数组而言,这些差异通常微乎其微,不足以成为你选择方法的决定性因素。我们更多地会从代码的可读性、简洁性以及是否满足浅拷贝/深拷贝需求来考量。

不过,既然提到了性能,我们还是可以简单聊聊:

展开运算符 (

...

)、

slice()

Array.from()

concat()

:这些浅拷贝方法通常都非常高效。它们在底层实现上都涉及创建一个新数组并迭代原数组元素。现代JavaScript引擎(如V8)对这些操作进行了高度优化,尤其是在处理数组时,它们的性能表现往往不相上下。展开运算符因为其简洁和声明式风格,在很多情况下甚至可能被引擎进一步优化。

我个人在实践中发现,对于大部分场景,选择展开运算符 (

...

) 既能保证性能,又能提供极佳的可读性,是我的首选。它表达意图清晰:“我要一个和这个数组一样的新数组”。

JSON.parse(JSON.stringify(array))

:这种深拷贝方法在性能上通常会比浅拷贝方法慢很多,尤其是在处理大型或深度嵌套的数组/对象时。这是因为它涉及到两个阶段:先将整个对象序列化为字符串(CPU密集型操作),再将字符串解析回对象(同样是CPU密集型操作)。这种开销在数据量大时会变得非常明显。

递归深拷贝(手写或库函数如Lodash

cloneDeep

:这类方法性能介于浅拷贝和

JSON.parse(JSON.stringify())

之间,具体取决于实现复杂度和数据结构。它们通常比

JSON.parse(JSON.stringify())

更灵活,可以处理更多数据类型,但也会有递归调用的开销。对于需要处理复杂数据结构且注重性能的场景,专业的深拷贝库通常会做得更好,因为它们会考虑各种边缘情况和优化策略。

总结一下我的看法:

除非你正在处理数万甚至数十万级别的数组元素,并且对性能有极致要求(这种情况下你可能需要进行性能基准测试),否则,选择浅拷贝方法时,你大可不必纠结于它们之间那微小的性能差异。更重要的是选择一个让你和你的团队成员都能快速理解、易于维护的方法。

对于浅拷贝,我倾向于推荐展开运算符 (

...

),因为它现代、简洁、表达力强。

而对于深拷贝,如果你只是处理纯粹的JSON数据(没有函数、日期等特殊类型),

JSON.parse(JSON.stringify())

确实是最简单的方案。但如果数据结构复杂,或者对性能有较高要求,那么引入像Lodash这样的库,使用其提供的

_.cloneDeep()

会是更稳妥、更专业的选择。

总而言之,理解不同复制方法的原理和它们在浅拷贝/深拷贝上的差异,远比纠结于它们之间的微小性能差距来得重要。选择最适合你当前任务和数据结构的方法,才是王道。

以上就是javascript如何复制一个数组的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1513688.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 07:54:45
下一篇 2025年12月20日 07:55:04

相关推荐

  • CSS mask属性无法获取图片:为什么我的图片不见了?

    CSS mask属性无法获取图片 在使用CSS mask属性时,可能会遇到无法获取指定照片的情况。这个问题通常表现为: 网络面板中没有请求图片:尽管CSS代码中指定了图片地址,但网络面板中却找不到图片的请求记录。 问题原因: 此问题的可能原因是浏览器的兼容性问题。某些较旧版本的浏览器可能不支持CSS…

    2025年12月24日
    900
  • 为什么设置 `overflow: hidden` 会导致 `inline-block` 元素错位?

    overflow 导致 inline-block 元素错位解析 当多个 inline-block 元素并列排列时,可能会出现错位显示的问题。这通常是由于其中一个元素设置了 overflow 属性引起的。 问题现象 在不设置 overflow 属性时,元素按预期显示在同一水平线上: 不设置 overf…

    2025年12月24日 好文分享
    400
  • 网页使用本地字体:为什么 CSS 代码中明明指定了“荆南麦圆体”,页面却仍然显示“微软雅黑”?

    网页中使用本地字体 本文将解答如何将本地安装字体应用到网页中,避免使用 src 属性直接引入字体文件。 问题: 想要在网页上使用已安装的“荆南麦圆体”字体,但 css 代码中将其置于第一位的“font-family”属性,页面仍显示“微软雅黑”字体。 立即学习“前端免费学习笔记(深入)”; 答案: …

    2025年12月24日
    000
  • 为什么我的特定 DIV 在 Edge 浏览器中无法显示?

    特定 DIV 无法显示:用户代理样式表的困扰 当你在 Edge 浏览器中打开项目中的某个 div 时,却发现它无法正常显示,仔细检查样式后,发现是由用户代理样式表中的 display none 引起的。但你疑问的是,为什么会出现这样的样式表,而且只针对特定的 div? 背后的原因 用户代理样式表是由…

    2025年12月24日
    200
  • inline-block元素错位了,是为什么?

    inline-block元素错位背后的原因 inline-block元素是一种特殊类型的块级元素,它可以与其他元素行内排列。但是,在某些情况下,inline-block元素可能会出现错位显示的问题。 错位的原因 当inline-block元素设置了overflow:hidden属性时,它会影响元素的…

    2025年12月24日
    000
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 为什么使用 inline-block 元素时会错位?

    inline-block 元素错位成因剖析 在使用 inline-block 元素时,可能会遇到它们错位显示的问题。如代码 demo 所示,当设置了 overflow 属性时,a 标签就会错位下沉,而未设置时却不会。 问题根源: overflow:hidden 属性影响了 inline-block …

    2025年12月24日
    000
  • 为什么我的 CSS 元素放大效果无法正常生效?

    css 设置元素放大效果的疑问解答 原提问者在尝试给元素添加 10em 字体大小和过渡效果后,未能在进入页面时看到放大效果。探究发现,原提问者将 CSS 代码直接写在页面中,导致放大效果无法触发。 解决办法如下: 将 CSS 样式写在一个单独的文件中,并使用 标签引入该样式文件。这个操作与原提问者观…

    2025年12月24日
    000
  • 为什么我的 em 和 transition 设置后元素没有放大?

    元素设置 em 和 transition 后不放大 一个 youtube 视频中展示了设置 em 和 transition 的元素在页面加载后会放大,但同样的代码在提问者电脑上没有达到预期效果。 可能原因: 问题在于 css 代码的位置。在视频中,css 被放置在单独的文件中并通过 link 标签引…

    2025年12月24日
    100
  • 为什么在父元素为inline或inline-block时,子元素设置width: 100%会出现不同的显示效果?

    width:100%在父元素为inline或inline-block下的显示问题 问题提出 当父元素为inline或inline-block时,内部元素设置width:100%会出现不同的显示效果。以代码为例: 测试内容 这是inline-block span 效果1:父元素为inline-bloc…

    2025年12月24日
    400
  • 什么是功能类优先的 CSS 框架?

    理解功能类优先 tailwind css 是一款功能类优先的 css 框架,用户可以通过组合功能类轻松构建设计。为了理解功能类优先,我们首先要区分语义类和功能类这两种 css 类名命名方式。 语义类 以前比较常见的 css 命名方式是根据页面中模块的功能来命名。例如: 立即学习“前端免费学习笔记(深…

    2025年12月24日
    000
  • SCSS – 增强您的 CSS 工作流程

    在本文中,我们将探索 scss (sassy css),这是一个 css 预处理器,它通过允许变量、嵌套规则、mixins、函数等来扩展 css 的功能。 scss 使 css 的编写和维护变得更加容易,尤其是对于大型项目。 1.什么是scss? scss 是 sass(syntropically …

    2025年12月24日
    000
  • css3选择器优化技巧

    CSS3 选择器优化技巧可提升网页性能:减少选择器层级,提高浏览器解析效率。避免通配符选择器,减少性能损耗。优先使用 ID 选择器,快速定位目标元素。用类选择器代替标签选择器,精确匹配。使用属性选择器,增强匹配精度。巧用伪类和伪元素,提升性能。组合多个选择器,简化代码。利用 CSS 预处理器,增强代…

    2025年12月24日
    300
  • css代码规范有哪些

    CSS 代码规范对于保持一致性、可读性和可维护性至关重要,常见的规范包括:命名约定:使用小写字母和短划线,命名特定且描述性。缩进和对齐:按特定规则缩进、对齐选择器、声明和值。属性和值顺序:遵循特定顺序排列属性和值。注释:解释复杂代码,并使用正确的语法。分号:每个声明后添加分号。大括号:左大括号前换行…

    2025年12月24日
    200
  • html5怎么设置单选_html5用input type=”radio”加name设单选按钮组【设置】

    HTML5 使用 type=”radio” 实现单选功能,需统一 name 值构成互斥组;通过 checked 设默认项;可用 CSS 隐藏原生控件并自定义样式;推荐用 fieldset/legend 增强语义;required 可实现必填验证。 如果您希望在网页中创建一组互…

    2025年12月23日
    200
  • 如何操作html_操作HTML元素的常用方法【常用】

    必须掌握操作HTML元素的五种核心方法:一、通过ID精准获取并修改单个元素;二、通过类名批量操作多个元素;三、用querySelector系列灵活选择任意CSS匹配元素;四、动态创建并插入新元素;五、安全移除或替换现有元素。 如果您需要动态修改网页内容或响应用户交互,则必须掌握操作HTML元素的核心…

    2025年12月23日
    200
  • 怎么设置边框html5_html5用CSS border设元素边框粗细颜色样式【设置】

    可通过CSS的border属性为HTML5元素添加边框,包括简写设置、分项控制、单侧边框、圆角效果及图片边框五种方法,需注意兼容性、元素尺寸与属性完整性。 如果您希望为HTML5中的某个元素添加边框,可以通过CSS的border属性控制其粗细、颜色和样式。以下是实现该效果的具体方法: 一、使用单条b…

    2025年12月23日
    000
  • 带文字描边的HTML5按钮样式写法【方法】

    可通过text-shadow、-webkit-text-stroke、SVG文本或CSS自定义属性实现HTML5按钮文字描边:text-shadow兼容性好但需多向阴影;-webkit-text-stroke简洁可控但仅限WebKit浏览器;SVG提供高精度描边;CSS变量支持动态主题切换。 如果您…

    2025年12月23日
    000
  • html5怎么加元素_HT5用JS createElement或innerHTML添加新元素【添加】

    HTML5中动态添加元素有四种方法:一、createElement创建并配置元素后追加;二、innerHTML直接插入或替换HTML字符串;三、insertAdjacentHTML在指定位置插入HTML;四、DocumentFragment批量添加以提升性能。 如果您希望在HTML5页面中动态添加新…

    2025年12月23日
    000
  • html5怎么换颜色_HT5用JS改CSS color或background-color切换颜色【更换】

    可通过操作DOM元素的style属性动态修改文本或背景颜色,方法包括:一、直接修改内联样式;二、切换预定义CSS类;三、修改CSS自定义属性;四、用getComputedStyle读取并智能计算新颜色;五、通过setAttribute设置style字符串。 如果您希望在HTML5页面中通过JavaS…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信