本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于JavaScript中数组克隆的方法介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。js主要分基本数据类型及引用数据类型两大类
基本数据类型包括:number,string,undefine,null,boolean,Symbol(es6新增)
引用数据类型:Object,Array,Function,Data等
注意:基本数据类型放在**栈空间内**,并且是按值存放,可以直接读取和操作。
引用数据类型存放在**堆空间内**(门),变量的值其实是指向堆空间的地址(钥匙),因此如果克隆这个变量,相当于复制钥匙。
1 2 3 4 |
|
因此对于引用类型的拷贝,需要拷贝堆空间的对象
数组浅拷贝
1.运用数组slice与concat方法返回一个新数组的特性
1 2 3 |
|
2.简单粗暴的方法-遍历
1 2 3 4 5 6 7 |
|
3.es6新增方法-拓展运算符
1 2 |
|
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.普通遍历,遍历到引用类型时候进行引用类型的拷贝
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
2.简单粗暴(能拷贝数组和对象,但不能拷贝函数)
1 2 |
|
本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目!
以上就是JavaScript中数组克隆的方法介绍(附代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript中如何使用spread运算符(...)?8种方法介绍
更多相关阅读请进入《ES6》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者