0

0

如何在 ES6 中克隆数组?

王林

王林

发布时间:2023-09-12 08:09:03

|

1494人浏览过

|

来源于tutorialspoint

转载

如何在 es6 中克隆数组?

在 ES5 中,我们使用 concat 方法来复制数组。此外,一些开发人员使用 slice() 方法,通过传递 0 作为参数来对引用数组的所有元素进行切片并创建一个新数组。

示例

用户可以按照下面的示例使用 slice() 方法克隆数组。我们创建了 array1,其中包含不同数据类型的值。之后,我们使用 slice() 方法复制 array1 并将其存储在“clone”变量中。

<html>
<body>
   <h2>Using the <i>slice()</i> method to clone the array in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array1 = [10, "hello", 30, true];
      output.innerHTML += "The original array: " + array1 + " <br>";
      let clone = array1.slice(0);
      output.innerHTML += "The cloned array: " + clone + " <br>";
   </script>
</body>
</html>

用户已经了解了我们如何在 ES5 中克隆数组。

此外,用户可以考虑复制数组,就像使用赋值运算符复制字符串、数字和布尔值等普通变量一样。

用户在使用赋值运算符复制数组时可能会遇到问题。让我们通过下面的例子来理解它。

使用赋值运算符复制数组

在下面的示例中,字符串数组包含各种字符串。我们已将 strings 数组分配给 strings2 数组。之后,我们将新的字符串值推送到 strings2 数组中。

示例

<html>
<body>
   <h2>Using the <i>assignment</i> operator to clone the array in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array1 = ["Hi", " users", "Welcome"];
      let array2 = array1;
      array2.push("New value");
      output.innerHTML += "The value of array2: " + array2 + " <br>";
      output.innerHTML += "The value of array1: " + array1 + " <br>";
   </script>
</body>
</html>

在上面的输出中,用户可以观察到,当我们将字符串值推送到 strings2 数组时,它也推送到 strings 数组。为什么会发生这种情况?

在这里,可变和不可变对象的概念发挥了作用。

可变对象与不可变对象

在 JavaScript 中,数组和对象是可变的,这意味着我们可以在创建它们后初始化它们后更改它们的值。因此,上例中不存在 strings2 数组。当我们将 strings 数组分配给 strings2 数组时,它会生成对 strings 数组的引用。因此,每当我们更改 strings2 数组时,它也会更改 strings 数组。

因此,我们需要创建数组的实际副本,而不引用其他数组

j2me3D游戏开发简单教程 中文WORD版
j2me3D游戏开发简单教程 中文WORD版

本文档主要讲述的是j2me3D游戏开发简单教程; 如今,3D图形几乎是任何一部游戏的关键部分,甚至一些应用程序也通过用3D形式来描述信息而获得了成功。如前文中所述,以立即模式和手工编码建立所有的3D对象的方式进行开发速度很慢且很复杂。应用程序中多边形的所有角点必须在数组中独立编码。在JSR 184中,这称为立即模式。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看

下载

现在,让我们学习如何在 ES6 中克隆数组。

在 ES6 中使用扩展运算符 (...) 克隆数组

展开运算符的语法是三个点 (...)。我们可以用它来像数组一样传播可迭代对象。扩展运算符创建数组或对象的新副本。

语法

用户可以按照以下语法使用扩展运算符复制数组。

let booleansCopy = [...booleans];

示例

在下面的示例中,我们创建了布尔数组,其中包含不同的布尔值。之后,我们使用扩展运算符创建了布尔数组的副本,并将该副本分配给 booleanCopy 变量。

在输出中,用户可以观察到 booleanCopy 数组包含与 boolean 数组包含的值相同的值。

<html>
<body>
   <h2>Using the <i> spread operator </i> to clone the array in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let booleans = [true, false, false, true, true];
      let booleansCopy = [...booleans];
      output.innerHTML += "The values of the booleansCopy array: " + booleansCopy + "<br>";
   </script>
</body>
</html>

示例

在下面的示例中,尺寸数组包含不同的数值。我们使用展开运算符创建了 size 数组的副本,并使用赋值运算符将该数组存储在sizedClone 变量中。

之后,我们将 60 推入 sizeClone 数组。

<html>
<body>
   <h2>Using the <i>spread</i> operator to clone the array in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let sizes = [34, 43, 45, 47, 49, 50];
      output.innerHTML += "-------Before Push-------" + "<br>";
      output.innerHTML += "The values of the sizes array: " + sizes + "<br>";
      let sizesClone = [...sizes];
      output.innerHTML += "The values of the sizesClone array: " + sizesClone + "<br>";
      sizesClone.push(60);
      output.innerHTML += "------After Push------" + "<br>";
      output.innerHTML += "The values of the sizes array: " + sizes + "<br>";
      output.innerHTML += "The values of the sizesClone array:" + sizesClone + "<br>";
   </script>
</body>
</html>

在上面的输出中,用户可以观察到 60 反映在 sizesClone 数组中,但没有反映在 Sizes 数组中,因为我们创建了数组的实际副本,而不是像示例 2 中那样引用数组.

现在,用户清楚地明白为什么在 ES6 中不使用赋值运算符以及为什么使用扩展运算符来克隆数组。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

197

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

231

2025.12.24

数据类型有哪几种
数据类型有哪几种

数据类型有整型、浮点型、字符型、字符串型、布尔型、数组、结构体和枚举等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

337

2023.10.31

php数据类型
php数据类型

本专题整合了php数据类型相关内容,阅读专题下面的文章了解更多详细内容。

224

2025.10.31

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

138

2026.02.12

java中boolean的用法
java中boolean的用法

在Java中,boolean是一种基本数据类型,它只有两个可能的值:true和false。boolean类型经常用于条件测试,比如进行比较或者检查某个条件是否满足。想了解更多java中boolean的相关内容,可以阅读本专题下面的文章。

367

2023.11.13

java boolean类型
java boolean类型

本专题整合了java中boolean类型相关教程,阅读专题下面的文章了解更多详细内容。

42

2025.11.30

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号