最近碰到了一个bug

var persons = [{ number: 1, age: 11, name: "wanghaha", money: -1 }, { number: 2, age: 12, name: "王一一", money: -3 }, { number: 3, age: 13, name: "王三十", money: 4 }];
var per_con = []; for (var i = persons.length; i > 0; i--) {
if (persons[i-1].money > 0) {
per_con.push(persons[i-1]);
}
}
console.log("111"+persons);
console.log("222"+per_con);
var pp = { number: 0, age: 0, name: "", money: 0 };
persons.push(pp);
for (var i = persons.length; i > 0; i--) {
if (persons[i - 1].number > 2) {
persons[i].number += 1;
persons[i].age = persons[i - 1].age;
persons[i].name = persons[i - 1].name;
persons[i].money = persons[i - 1].money;
}
if (persons[i - 1].number == 2) {
persons[i].number = 2;
persons[i].age = 100;
persons[i].name = "王插队";
persons[i].money = -90;
}
}
console.log("333"+persons);
console.log("444"+per_con);

  结果:

console.log("111"+persons);
0: {number: 1, age: 11, name: "wanghaha", money: -1}
1: {number: 2, age: 12, name: "王一一", money: -3}
2: {number: 3, age: 13, name: "王三十", money: 4} console.log("222"+per_con);
0: {number: 3, age: 13, name: "王三十", money: 4} console.log("333"+persons);
0: {number: 1, age: 11, name: "wanghaha", money: -1}
1: {number: 2, age: 12, name: "王一一", money: -3}
2: {number: 2, age: 100, name: "王插队", money: -90}
3: {number: 1, age: 13, name: "王三十", money: 4} console.log("444"+per_con);
0: {number: 2, age: 100, name: "王插队", money: -90}
看得出来:per_con的值因为绑定数据发生了变化,相当于只保留了persons[2]
问题出在per_con.push(persons[i-1]);

解决方法1:解除绑定

 per_con.push(persons[i-1]);替换成

per_con.push(JSON.parse(JSON.stringify(persons[i-1])));

console.log("444"+per_con);
0: {number: 3, age: 13, name: "王三十", money: 4}
解决方法1:替换绑定
 function extend(o,p){
for(index in p){
o[index] = p[index];
}
return(o);
}
var persons = [{ number: 1, age: 11, name: "wanghaha", money: -1 }, { number: 2, age: 12, name: "王一一", money: -3 }, { number: 3, age: 13, name: "王三十", money: 4 }];
var per_con = []; for (var i = persons.length; i > 0; i--) {
if (persons[i-1].money > 0) {
var p = {};
extend(p , persons[i-1]);
per_con.push(p);
}
}
console.log("111"+persons);
console.log("222"+per_con);
var pp = { number: 0, age: 0, name: "", money: 0 };
persons.push(pp);
for (var i = persons.length; i > 0; i--) {
if (persons[i - 1].number > 2) {
persons[i].number += 1;
persons[i].age = persons[i - 1].age;
persons[i].name = persons[i - 1].name;
persons[i].money = persons[i - 1].money;
}
if (persons[i - 1].number == 2) {
persons[i].number = 2;
persons[i].age = 100;
persons[i].name = "王插队";
persons[i].money = -90;
}
}
console.log("333"+persons);
console.log("444"+per_con);
添加替换函数

function extend(o,p){
  for(index in p){
    o[index] = p[index];
  }
  return(o);
}

per_con.push(persons[i-1]);替换成 
var p = {};
extend(p , persons[i-1]);
per_con.push(p);
也成功解决
console.log("444"+per_con);
0: {number: 3, age: 13, name: "王三十", money: 4}

有关js的双向绑定解除方法的更多相关文章

  1. 用原生 JS 实现双向绑定及应用实例

    写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...

  2. 真正的原生JS数据双向绑定(实时同步)

    真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...

  3. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  4. js 超浓缩 双向绑定

    绑定确实是个有趣的话题. 现在我的绑定器有了不少的功能 1. 附着在Object对象上,一切以对象为中心 2. 与页面元素进行双向绑定 3. 与任意对象绑定,主要是应用在绑定到页面元素的一些属性上,比 ...

  5. angularjs bind与model配合双向绑定 表达式方法输出

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  6. [JS] 数据双向绑定原理

    通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title" ...

  7. Vue3.0 实现数据双向绑定的方法

    ue3.0 是通过Proxy实现的数据双向绑定,Proxy是ES6中新增的一个特性,实现的过程是在目标对象之前设置了一层"拦截",外界对该对象的访问,都必须先通过这层拦截,因此提供 ...

  8. Vue.js 关于双向绑定的一些实现细节

    Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的. 当把一个普通 Javascript 对象传给 Vue 实例来作 ...

  9. js event事件绑定的方法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. 通过原生js实现数据的双向绑定

    通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...

随机推荐

  1. rysnc使用手册

    rsync 是一个用于在本地和远程计算机之间同步文件和目录的命令行工具.它具有许多强大的功能,包括增量传输.压缩和保留权限等.以下是一些 rsync 的常用选项和用法示例: 基本用法 rsync [O ...

  2. ArchLinux安装后常见问题的解决

    Q:UEFI引导grub-install报错:variables are not support on this system A:进入安装u盘的时候是传统引导模式,传统模式下无法安装UEFI启动,解 ...

  3. Solution Set -「AGC 007~009」C~F

    目录 「AGC 007C」Pushing Balls 「AGC 007D」Shik and Game 「AGC 007E」Shik and Travel ^ 「AGC 007F」Shik and Co ...

  4. Solution Set -「NOI Simu.」2022.07.21

    \(\mathscr{Summary}\)   有意思的是, 难度诈骗居然在我身上打出了暴击.   (首先还是吐槽一下 \(5\text h\) 的模拟赛因为早读和早课变成 \(4\text h\) ...

  5. UML的9种常用图与建模工具详解

    UML即Unified Model Language,是一种建模语言,也是标准建模语言.在软件开发中,当系统规模比较复杂时,需要用图形抽象地来表达复杂的概念,让整个软件设计更具有可读性,可理解性,以便 ...

  6. Elasticsearch(5) --- 基本命令(集群相关命令、索引CRUD命令、文档CRUD命令)

    这篇博客的命令分为ES集群相关命令,索引CRUD命令,文档CRUD命令.这里不包括Query查询命令,它单独写一篇博客. 一.ES集群相关命令 ES集群相关命令主要是_cat命令,所以这里详细讲解下该 ...

  7. react 趟坑

    最近一直在做react项目,发现一个bug,困扰了我两天. Can't perform a React state update on an unmounted component. This is ...

  8. Synchronized的各场景使用方法(多窗口售票例子接上篇)

     同步锁机制:在<Thinking in Java>中,是这么说的:对于并发工作,你需要某种方式来防止两个任务访问相同的资源(其实就是共享资源竞争). 防止这种冲突的方法就是当资源被一个 ...

  9. 目前get到最好用的内网穿透软件

    官网:https://www.natfrp.com/ 软件名称:SakuraLauncher 不花钱可以获取到两个隧道,如果不想花钱的话,每天签到领流量即可 之前用过cpolar,飞鸽,ngrok,但 ...

  10. THUSC2024 & APIO2024 游记

    第二次联赛以上的比赛. Day-n lxs 突然通知:从五月七日开始要去镇海中学集训(这也意味着 THUSC-APIO 中间出去玩的时间没了 ),很神秘.这是属于高二那一届考的联考连通块,不知道为什么 ...