JS数组的拷贝方法小白帮助_数组使用指南

之前在写一个计算属性时,大概是这样:computed: {
updateList () {
let newList = this.List
/*do something*/
return newList
},
}本想的是设置个中间变量newList,将它和原来的List相比做一些操作,最后返回这个newList,后来发现原List也改变了。才意识到这个new

JS数组的拷贝方法小白帮助

之前在写一个计算属性时,大概是这样:

JS数组的拷贝方法小白帮助_数组使用指南

computed: {
updateList () {
let newList = this.List
/*do something*/
return newList
},
}

本想的是设置个中间变量newList,将它和原来的List相比做一些操作,最后返回这个newList,后来发现原List也改变了。才意识到这个newList只是个引用类型,改变了它原来的对象也会变。查资料的过程中,注意到了还有深拷贝浅拷贝的区别:

一.Array的拷贝

1.浅拷贝

如上,直接赋值的方式

2.深拷贝

(1)slice()方法

对于array对象的slice函数,返回一个数组的一段。(仍为数组)
arrayObj.slice(start, [end])

参数:
arrayObj 必选项。一个 Array 对象。
start 必选项。arrayObj 中所指定的部分的开始元素是从零开始计算的下标。
end可选项。arrayObj 中所指定的部分的结束元素是从零开始计算的下标。

说明:
slice 方法返回一个 Array 对象,其中包含了 arrayObj 的指定部分。
slice 方法一直复制到 end 所指定的元素,但是不包括该元素。
如果 start 为负,将它作为 length + start处理,此处 length 为数组的长度。
如果 end 为负,就将它作为 length + end 处理,此处 length 为数组的长度。
如果省略 end ,那么 slice 方法将一直复制到 arrayObj 的结尾。
如果 end 出现在 start 之前,不复制任何元素到新数组中。

对于本例,let newList = this.List.slice()即可

(2)concat()方法

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
语法:arrayObject.concat(arrayX,arrayX,......,arrayX)
说明:返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。

对于本例,let newList = this.List.concat()即可

但是,这两种方法都有局限性,如:

var arr1 = [{"name":"weifeng"},{"name":"boy"}];//原数组
var arr2 = [].concat(arr1);//拷贝数组
arr1[1].name="girl";
console.log(arr1);// [{"name":"weifeng"},{"name":"girl"}]
console.log(arr2);//[{"name":"weifeng"},{"name":"girl"}]

var a1=[["1","2","3"],"2","3"],a2;
a2=a1.slice(0);
a1[0][0]=0; //改变a1第一个元素中的第一个元素
console.log(a2[0][0]);  //影响到了a2

var b1=[["1","2","3"],"2","3"],b2;
b2=b1.slice(0);
b1[0][0]=0; //改变a1第一个元素中的第一个元素
console.log(b2[0][0]);  //影响到了a2

从上面两个例子可以看出,由于数组内部属性值为引用对象,因此使用slice和concat对对象数组的拷贝,整个拷贝还是浅拷贝,拷贝之后数组各个值的指针还是指向相同的存储地址。

因此,slice()和concat()这两个方法,仅适用于对不包含引用对象的一维数组的深拷贝

(3)使用JSON.stringify和JSON.parse实现深拷贝:

JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成新的对象

对于本例, let newList = JSON.parse(JSON.stringify(this.List))

JSON.stringify()有一些局限,比如不能拷贝function

(4)当然,如果是不那么复杂的数组,你可以声明一个新数组,自己写一个for循环拷贝过去。

海计划公众号
(0)
上一篇 2020/03/29 01:41
下一篇 2020/03/29 01:41

您可能感兴趣的内容

  • 几道面试题来看JavaScript执行机制基础知识入门_机制小白知识

    前面的话根据 JavaScript 的运行环境,锁定它为单线程,任务需要排队执行,如果网站资源比较大,这样会导致浏览器加载会很慢,但实际上并没有,大家肯定立刻想到了同步和异步。所谓的同步和异步也是在排队,只是排队的地方不同。同步和异步同步任务进入主线程排队,异步任务进入事件队列中排队同步任务和异步任务进入到不同的队列中,也就是上面讲的在不同地方排队。同步任务

    2020/03/20
  • Crx4chrome入门基础知识_谷歌浏览器扩展插件大全

    Crx4chrome入门基础知识 官方网址:https://www.crx4chrome.com/ 简介描述:谷歌浏览器扩展插件大全 是一个收录了海量浏览器插件的网站,主要收录的插…

    2020/03/06
  • 爬虫是什么吗?你知道爬虫的爬取流程吗?基础知识入门_爬虫小白指南

    你了解爬虫是什么吗?你知道爬虫的爬取流程吗?你知道怎么处理爬取中出现的问题吗?如果你回答不出来,或许你真的要好好看看这篇文章了!爬虫简介网络爬虫(Web crawler),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本,它们被广泛用于互联网搜索引擎或其他类似网站,可以自动采集所有其能够访问到的页面内容,以获取或更新这些网站的内容和检索方式。从功能上

    2020/03/23
  • cocos 资源工作流程基础入门_cocos使用帮助

    概述【同步性】  资源管理器中的资源和操作系统的文件管理器中看到的项目资源文件夹是同步的  在资源管理器中对资源的移动、重命名和删除,都会直接在用户的文件系统中对资源文件进行同步修改。同样的,在文件系统中(如 Windows 上的 Explorer 或 Mac 上的 Finder)对添加或删除资源,再次打开或激活 Cocos Creator 程序后,也会对资

    2020/04/03
  • chardin.js教程视频_能够帮助你快速的生成类似页面注释效果的jQuery插件

    chardin.js教程视频 官方网址:http://heelhook.github.io/chardin.js/ GitHub:https://github.com/heelho…

    2020/03/06
  • 麦客CRM菜鸟知识_一款在线表单制作工具

    麦客CRM菜鸟知识 官方网址:http://www.mikecrm.com/ 简介描述:一款在线表单制作工具 麦客CRM是一款在线表单制作工具,同时也是强大的客户信息处理和关系管理…

    2020/03/06
  • logline入门知识_轻量、实用和客户端级的前端日志记录工具

    logline入门知识 官方网址:https://stackblitz.com/edit/logline-playground?file=index.js GitHub:https…

    2020/03/11
  • jquery基础入门教程_一个快速、简洁的JavaScript代码库

    jquery基础入门 官方网址:http://jquery.com/ GitHub:https://github.com/jquery/jquery 简介描述:一个快速、简洁的Ja…

    2020/03/05
  • CSS:BFC规则的应用自适应两栏布局使用攻略_布局小白基础

    两栏布局是写页面时经常用到的,要想实现两栏布局,就需要明白BFC规则,Block formatting context,直译为“块级格式化上下文”,可以简单的理解它为一个独立的区域,把区域内部元素与外部元素区分开,两者互不干扰。它的规则:1.内部元素会在垂直方向一个接一个放置。2.属于同一个BFC的两个元素上下margin会重叠。3.独立的BFC的区域不会与

    2020/03/20
  • 一名好程序员到底需要什么样的标准?入门基础_程序员菜鸟指南

    无数的人问过类似的问题:怎么样才能做一个好的程序员?
    在回答这个问题之前,首先得明白什么是好的程序员,这样才有方向和目标,可是这事情太主观,可能各人的标准千差万别。
    不谈那些传奇性的独自一人做出伟大事情的特例,也不谈什么上天入地,上帝大牛的诡论,以下是我比较认可的,在通常的项目开发中,一个好程序员的标准。
    1、解决问题的能力
    在项目开发中,一个程序员的能力等

    2020/03/20
  • 推荐几款能提升代码效率的笔记应用使用攻略_效率小白攻略

    编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有序的关键,也是克服压力、绝望和倦怠的好方法。但是大多数笔记应用的设计并不是以程序员作为目标受众,这些程序可能会让使用者用起来很难受,甚至完全放弃这些工具。这就是为什么我们为你找来了这些最好的笔记工具。快来看看——你会爱上它们

    2020/03/23
  • 推荐在线编程学习网站使用帮助_网站菜鸟攻略

    学习的方式多种多样,不要仅仅局限于课本,互联网上的课程远比你想象的要丰富的多。 除了w3cschool或者菜鸟教程外,下面为大家推荐下国内国外在线编程学习网站。 一、TopCoderTopCoder是最开始的在线竞技编程平台之一。它提供了很多的算法挑战,用户可以使用平台上的编辑器直接完成挑战。每个月该平台会提供几次它们最受欢迎的Single Round Ma

    2020/04/03
  • noVNC基础知识教程_使用 HTML5实现的VNC客户端

    noVNC基础知识教程 官方网址:https://novnc.com GitHub:https://github.com/novnc/noVNC 简介描述:使用 HTML5实现的V…

    2020/03/07
  • JS设置CSS样式的几种方式攻略教程_样式小白攻略

    用JS来动态设置CSS样式,常见的有以下几种1. 直接设置style的属性 某些情况用这个设置 !important值无效如果属性有’-‘号,就写成驼峰的形式(如textAlign) 如果想保留 – 号,就中括号的形式 element.style[‘text-align’] = ‘100px’;element.style.height = ‘100px

    2020/03/20
  • 纯CSS瀑布流与JS瀑布流使用帮助_瀑布流基础入门

    瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式。即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。为什么使用瀑布流瀑布流布局在我们现在的前端页面中经常会用的到,它可以有效的降低页面的复杂度,节省很多的空间,对于整个页面不需要太多的操作,只需要下拉就可以浏览用户需要看到的数据

    2020/03/20
  • vue对象render函数的三种实现零基础入门_render基础入门

    import App from ‘./app.vue’ const root = document.createElement(‘div’);
    document.body.appendChild(root);第一种方式($createElement)://写法三:
    const rootVue = new Vue({ router: vueRouter,r

    2020/03/24