描述:数组对象赋值,即arr1=[{},{},{}]这种数据结构的对象赋值,将arr1赋值给arr2;然后删除arr2里的元素

一、最常用的=

arr2 = arr1;

detect(val) {
let temp = [];
let self=this;
temp = self.tableBaseStorage; //这个tableBaseStorage是data(){return{}}全局变量
console.log("tableBaseStorage");
console.log(self.tableBaseStorage);
let userName = this.search;
let count = 0;
for (let i = 0; i < temp.length; i++) {
if (!(temp[i].userName === userName)) {
console.log(temp[i].userName);
temp.splice(i, 1); //这种删除方式会自动更新长度,慎用
i--;
//delete temp[i];
count++;
console.log("删除");
}
}
console.log(count);
self.tableBase = temp;
//console.log(this.tableBase);
},

你会发现当这个函数被第二次调用的时候,按理说this.tableBaseStorage是不会变的,每一次调用这个函数,都是从tableBaseStorage拿到数据那后对其筛选删除;

但奇怪的是这个tableBaseStorage却是变了,第二次调用好像莫名其妙的被掉包了一样;

现象:第一次调用detect()函数删了temp什么元素,tableBaseStorage同样被删除了同样的元素,故第二次再调用detect()函数此时的tableBaseStorage已经变了;

原因:JavaScript中=赋值是指针赋值,删除中间变量temp[ ]里的元素,会一直删到它爹tableBaseStorage

下面有几种解决措施供参考

二、解决措施,避免数组的指针赋值

1.循环赋值

    let temp = [];
let self=this;
for(let j=0;j<self.tableBaseStorage.length;j++){
temp[j] = self.tableBaseStorage[j];
}

2.数组的concat方法

说明

返回一个新数组,这个新数组是由两个或更多数组组合而成的。

array1.concat([item1[, item2[, . . . [, itemN]]]])

参数

array1

必选项。其他所有数组要进行连接的 Array 对象。

item1,. . ., itemN

可选项。要连接到 array1 末尾的其他项目。

示例

//temp=self.tableBaseStorage.concat();

3.JSON.parse & JSON.stringify

先stringify再parse成数组对象

temp = JSON.parse(JSON.stringify(self.tableBaseStorage))

4.es6提供的一种方法

//temp = [...self.tableBaseStorage];

javascript数组赋值操作的坑的更多相关文章

  1. javascript数组赋值操作

    最近在司徒正美的<javascript框架设计>,在里面发现了一个段代码 ...... var _len = arr1.length; while (_len) { arr2[--_len ...

  2. JavaScript数组常见操作

    JavaScript数组常见操作 Tip: 右键在新标签中打开查看清晰大图 下面介绍JavaScript中的数组对象遍历.读写.排序等操作以及与数组相关的字符串处理操作 创建数组 一般使用数组字面量[ ...

  3. Javascript对象赋值操作

    首先,我们还是举个例子来说明对象赋值操作的问题吧: ps: 本文默认约定log = console.log function A(){} A.prototype.x = 10; var a1 = ne ...

  4. JavaScript数组常用操作

    前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法.这里无非是对原生js的数组操作多了一些包装. 这里 ...

  5. JavaScript数组常用操作总结

    我们在日常开发过程中,使用到原生 JavaScript的时候,有时候会频繁的对数组进行操作,今天我把工作以来,经常用到的有关 JavaScript数组的方法总结一下,方便日后工作的时候查找使用! 一. ...

  6. Javascript 数组相关操作

    数组排序问题: sort() arr.sort() 可以直接进行排序,但是排序的方式是按unicode 顺序而来,比如1,1000,200,这个顺序不是我们想要的结果: 所以有了另一种方法,针对num ...

  7. JavaScript数组的操作

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  8. NumPy 学习(2): 数组的操作

    1. 简单一维数组的操作 一维数组的操作类似于python自身的list类型. In [14]: arr = np.arange(10) In [15]: arr Out[15]: array([0, ...

  9. Javascript数组操作

    使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...

随机推荐

  1. 一探究竟:善用 MaxCompute Studio 分析 SQL 作业

    头疼的问题 MaxCompute 用户一个常见的问题是:同一个周期任务,为什么最近几天比之前慢了很多?或者为什么之前都能按时产出的作业最近经常破线? 通常来说,引起作业执行变慢的原因有:quota 组 ...

  2. servlet中中文正常显示,mysql数据库手动插入中文正常显示,servlet向mysql中插入中文显示乱码

    作者:http://5563447.blog.51cto.com/5553447/1422627 问题是:就是POST请求提交表单数据给servlet,通过JDBC插入Mysql,出现中文乱码. 解决 ...

  3. php array_chunk()函数 语法

    php array_chunk()函数 语法 作用:把数组分割为新的数组块.dd马达参数 语法:array_chunk(array,size,preserve_key) 参数: 参数 描述 array ...

  4. Charles抓取https

    步骤一:将Charles的根证书(Charles Root Certificates)安装到Mac上. Help -> SSL Proxying -> Install Charles Ro ...

  5. 牛客提高D6t3 分班问题

    分析 就就就是推柿子 看官方题解吧/px 代码 #include<iostream> #include<cstdio> #include<cstring> #inc ...

  6. 16/7/14-MySQL-遇到的基本问题

    从一开始遇到的3534 ---------------------------------------------------------------------------------------- ...

  7. 【MM系列】SAP SAP的账期分析和操作

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP SAP的账期分析和操作   ...

  8. 跨平台自动构建工具v1.0.2 发布

    XMake是一个跨平台自动构建工具,支持在各种主流平台上构建项目,类似cmake.automake.premake,但是更加的方便易用,工程描述语法更简洁直观,支持平台更多,并且集创建.配置.编译.打 ...

  9. Excelvba从文件中逐行读取并写入excel中

    Sub 読み込む() Dim result As Long Dim dialog As FileDialog Set dialog = Application.FileDialog(msoFileDi ...

  10. mysql 主从复制 (2)

    今天说一下MySQL的主从复制如何做到! 准备工作: 1.两个虚拟机:我这里用的是CentOS5.5,IP地址分别是192.168.1.101 和192.168.1.105: 101做主服务器,105 ...