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

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

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;

参考资料:阮一峰ES6入门:扩展运算符的应用

关于 JavaScript 中的复制数组的更多相关文章

  1. javascript中数组Array的方法

    一.常用方法(push,pop,unshift,shift,join)push pop栈方法,后进先出var a =[1,2,3];console.log(a.push(40)); //4 返回数组的 ...

  2. Javascript中的一种深复制实现

    在javascript中,所有的object变量之间的赋值都是传地址的,可能有同学会问哪些是object对象.举例子来说明可能会比较好: typeof(true) //"boolean&qu ...

  3. javascript 中Array.prototype.sort 函数的用法

    来源:http://www.jb51.net/article/5769.htm JavaScript中对变量的操作都是通过引用方式,而对数组也一样. 前两天想要对一个数组进行复制,一直苦于找不到办法( ...

  4. JavaScript中的常用的数组操作方法

    JavaScript中的常用的数组操作方法 一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2 ...

  5. 浅谈 JavaScript 中 Array 类型的方法使用

    前言:Array 类型是 JavaScript 中除了 Object 类型以外最常用的类型. 一.创建数组 JavaScript 中的数组与其他语言中的数组有着很大的区别.例如Java.PHP等语言中 ...

  6. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  7. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  8. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  9. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

随机推荐

  1. Leetcode_171_Excel Sheet Column Number

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42290079 Given a column title a ...

  2. 【翻译】在Ext JS 5应用程序中如何使用路由

    原文:How to Use Routing in Your Ext JS 5 Apps 简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双 ...

  3. 基于ROS_Arduino室内移动机器人SLAM实验测试

    纯手工搭建的机器人,因此外观并不美. 基于ROS(indigo)以及Arduino等搭建软硬件平台,包括语音.视觉.激光.码盘等传感器设备. 整体如下图所示: 底盘特写: 语音输入: Arduino模 ...

  4. ERP-非财务人员的财务培训教(一.二)------财务基础知识

    二.基本财务管理知识 第一节 财务管理基础知识(一) 财务与会计的关系 会计的基础知识 (一) 财务与会计的关系 财务与会计的内涵 1.会计 会计工作主要是解决三个环节的问题: 会计凭证 会计账簿 会 ...

  5. ListView 与ContextMenu的关联管理

    <span style="font-family: Arial, Helvetica, sans-serif;">package com.example.listvie ...

  6. Android Xlistview的源码浅度分析 监听ListView上下滑动 以及是否到顶和底部

    如转载 请注明出处 http://blog.csdn.net/sk719887916 比如我们很多项目中会用到listview 并且要对listview滑动方向进行判断 也有需要的到listview是 ...

  7. 软件开发顶尖高手的杀手锏SQL语句

                  软件开发顶尖高手的杀手锏SQL语句                                                                     ...

  8. time元素与微格式/pubdate属性

    首先来说下微格式,它是一种利用HTML的class属性来对网页添加诸如新闻事件发生的日期和时间.个人电话号码.企业邮箱之类的附加信息方法. time元素代表24小时中的某个时刻或某个日期,表示时刻时允 ...

  9. miniUI中弹出框问题

    ---恢复内容开始--- 设置页面弹出框并提交弹出框内容 弹出按钮 <a class="btn_color_1" onclick="onEdit(0)"& ...

  10. 使用jdk8 stream 统计单词数

    在我的SpringBoot2.0不容错过的新特性 WebFlux响应式编程里面,有同学问如何使用stream统计单词数.这是个好例子,也很典型,在这里补上. 下面的例子实现了从一个文本文件读取(英文) ...