美文网首页
实现 JavaScript 中数组的复制

实现 JavaScript 中数组的复制

作者: 前端新阳 | 来源:发表于2020-03-15 23:55 被阅读0次

实现 JavaScript 中的数组复制

之前在写扫雷的时候,因为需要用到二维数组,当时就在复制数组这里出现了问题,所以记录一下。

当我们在需要复制数组的时候一定需要注意,数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。我们来看例子:

var arr1 = [1, 2, 3]
var arr2 = arr1
arr1[0] = 5

console.log(arr2) // [5, 2, 3]

上面代码中,arr2 并不是 arr1 的克隆,而是指向同一份数据的另一个指针。修改 arr2,会直接导致 arr1 的变化。

那么如果正确的复制数组呢?可以使用 concat() 用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。看例子:

var arr1 = [1, 2, 3]
var arr2 = arr1.concat()
arr1[0] = 5

console.log(arr2) // [1, 2, 3]

因为 concat() 返回的是一个副本,所以这个时候改变 arr1 就不会导致 arr2 改变了。

还可以利用 ES6 中的扩展运算符来复制数组

var  arr1 = [1, 2];
// 写法一
var  arr2 = [...arr1];
// 写法二
var [...arr2] = arr1;

实际案例

我们知道当页面实现上拉加载时,肯定会在原有基础上新增接口返回的数据,实现这一功能的思路有很多,在我现阶段看来比较优雅的写法是这样的:

上拉加载--数组的复制

相关文章

  • 实现 JavaScript 中数组的复制

    实现 JavaScript 中的数组复制 之前在写扫雷的时候,因为需要用到二维数组,当时就在复制数组这里出现了问题...

  • 前端常见面试题十七

    目录: 怎样添加、移除、复制、创建、查找节点 在JavaScript中什么是伪数组?如何将伪数组转化为标准数组 j...

  • 原生js面试题(一)

    目录: 怎样添加、移除、复制、创建、查找节点 在JavaScript中什么是伪数组?如何将伪数组转化为标准数组 j...

  • javascript 数组以及对象的深拷贝

    数组的深拷贝在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝。如下图演示: for 循环实现数组的深...

  • 06-JavaScript数组和函数

    JavaScript数组 JavaScript中的数组可以存储不同类型的数据 JavaScript中的数组是引用类...

  • typescript中的二维数组和初始化

    在javascript中其实没有二维数组的类型, 我们实现二维数组的方法是向数组的元素插入数组, 而typescr...

  • 深拷贝和浅拷贝

    深拷贝:复制多层 浅拷贝:复制一层 在JavaScript使用过程中我们经常会遇到这样的场景; 我们发现,当数组b...

  • 数组拷贝的几种方式及和链表结构的对比

    上一篇 << >> 数组拷贝的方式 1、Arrays.copyOf 功能是实现数组的复制,返回复制后的数组。参数是...

  • JS基础心法-深浅拷贝(首层浅拷贝)

    我们知道在 JavaScript 中,数组有两个方法 concat 和 slice 是可以实现对原数组的拷贝的,这...

  • javascript代码积累

    一、javascript实现继承 1.基于原型链实现继承 2.基于属性和方法复制实现继承 二、javascript...

网友评论

      本文标题:实现 JavaScript 中数组的复制

      本文链接:https://www.haomeiwen.com/subject/dxniehtx.html