0

0

JavaScript中数组克隆的方法介绍(附代码)

不言

不言

发布时间:2019-03-20 10:11:37

|

2894人浏览过

|

来源于segmentfault

转载

本篇文章给大家带来的内容是关于javascript中数组克隆的方法介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

js主要分基本数据类型引用数据类型两大类

基本数据类型包括:number,string,undefine,null,boolean,Symbol(es6新增)
引用数据类型:Object,Array,Function,Data等
注意:基本数据类型放在**栈空间内**,并且是按值存放,可以直接读取和操作。
引用数据类型存放在**堆空间内**(门),变量的值其实是指向堆空间的地址(钥匙),因此如果克隆这个变量,相当于复制钥匙。

let arr = [1,2,3,4,5]
let arr1 = arr  // 这一步相当于把arr栈空间的地址赋给了arr1,其实arr和arr1操作的是同一个堆空间的对象
arr1.push(6) // arr1 = [1,2,3,4,5,6]
console.log(arr) //[1,2,3,4,5,6]

因此对于引用类型的拷贝,需要拷贝堆空间的对象

数组浅拷贝
1.运用数组slice与concat方法返回一个新数组的特性

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

let arr = [1,2,3,4,5]
let arr1 = arr.slice() //[1,2,3,4,5]
let arr2 = arr.concat() //[1,2,3,4,5]

2.简单粗暴的方法-遍历

let arr = [1,2,3,4,5]
let arr2 = []
arr.forEach(item=>{
    arr2.push(item)
    }
)
console.log(arr2)

3.es6新增方法-拓展运算符

蝉镜
蝉镜

AI数字人视频创作平台,100+精品数字人形象库任您选择

下载
let arr = [1,2,3,4,5]
let arr1 = [...arr] //[1,2,3,4,5]

4.es6新增方法-Object.assign
let arr = [1,2,3,4,5]
let arr1 = []
Object.assign(arr1,arr)
console.log(arr1) //[1,2,3.4,5]

如果数组里嵌套数组和对象,浅拷贝只会拷贝该数组或者对象存放在栈空间的地,因此无论在新旧数组中改变此地址指向的对象,两个数组都会发生改变。 因此我们需要深拷贝来拷贝此类数组。

数组深拷贝
1.普通遍历,遍历到引用类型时候进行引用类型的拷贝

let arr = [1,2,3,4,5,{name:'bob'},['a','b']]
      function clone (arr) {
        let arr1 = []
        arr.forEach(item=>{
        //如果不是object,将该值插入到新数组
          if(typeof(item) !== 'object') {
            arr1.push(item)
          } else {
          //根据遍历的对象新建一个相同类型的空对象
            let obj = item instanceof Array ? [] : {}
            for(var key in item){
              if(item.hasOwnProperty(key)){
                obj[key] = item[key]
              }
            }
            arr1.push(obj)
          }
        })
        return arr1
      }
      let arr1 = clone(arr)
      arr1[5].name = 'js'
      console.log(arr,'arr',arr1,'arr1')

2.简单粗暴(能拷贝数组和对象,但不能拷贝函数)

let arr = [1,2,3,4,5,{name:'bob'},['a','b']]
let arr1 = JSON.parse(JSON.stringify(arr))

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目!

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

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

相关专题

更多
虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

29

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法,阅读专题下面的文章了解更多处理方案。

20

2025.12.25

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

37

2025.12.25

word转换成ppt教程大全
word转换成ppt教程大全

本专题整合了word转换成ppt教程,阅读专题下面的文章了解更多详细操作。

6

2025.12.25

msvcp140.dll丢失相关教程
msvcp140.dll丢失相关教程

本专题整合了msvcp140.dll丢失相关解决方法,阅读专题下面的文章了解更多详细操作。

2

2025.12.25

笔记本电脑卡反应很慢处理方法汇总
笔记本电脑卡反应很慢处理方法汇总

本专题整合了笔记本电脑卡反应慢解决方法,阅读专题下面的文章了解更多详细内容。

6

2025.12.25

微信调黑色模式教程
微信调黑色模式教程

本专题整合了微信调黑色模式教程,阅读下面的文章了解更多详细内容。

5

2025.12.25

ps入门教程
ps入门教程

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

4

2025.12.25

苹果官网入口直接访问
苹果官网入口直接访问

苹果官网直接访问入口是https://www.apple.com/cn/,该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

218

2025.12.24

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ECMAScript6 / ES6---十天技能课堂
ECMAScript6 / ES6---十天技能课堂

共25课时 | 1.9万人学习

HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 6.5万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.2万人学习

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

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