最近碰到了一个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. Qt编写安防视频监控系统23-图片地图

    一.前言 图片地图这个模块是后面新增加进去的,主要是安防领域还有很多应用场景是一个区域比如就一个学校,提供一个学校的平面图或者鸟瞰图,然后在该地图上放置对应的摄像机,双击该摄像机图标可以查看对应的实时 ...

  2. [转]CLion安装及无限试用

    Clion安装及无限试用:链接:https://pan.baidu.com/s/1mreUx5QyS4nkVQMOhdjf7g提取码:ylqw 翻译 搜索 复制

  3. java EE进行Web开发时*.jsp页面的<%@显示“The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path”错误,webcontent文件夹总是出现红x或者java源码出现The import javax.servlet cannot be resolved 的解决方法

    我们在用Eclipse进行Java web开发时,可能会出现这样的错误:The superclass javax.servlet.http.HttpServlet was not found on t ...

  4. 理解IM消息“可靠性”和“一致性”问题,以及解决方案探讨

    本文作者"商文默",本次有修订和改动. 1.写在前面 即时通讯网整理的大量IM技术文章中(见本文末"参考资料"一节),有关消息可靠性和一致性问题的文章占了很大比 ...

  5. Pytorch Layer层总结

    卷积层 nn.Conv1d 对由多个输入平面组成的输入信号应用一维卷积. nn.Conv2d 在由多个输入平面组成的输入信号上应用 2D 卷积. nn.Conv3d 对由多个输入平面组成的输入信号应用 ...

  6. 自动化滑动极验v3示例

    import random import ddddocr from playwright.sync_api import sync_playwright import time import requ ...

  7. Solution -「Gym 101630J」Journey from Petersburg to Moscow

    \(\mathscr{Description}\)   Link.   给定含有 \(n\) 个点 \(m\) 条边的带权无向图,一条路径的长度定义为其中前 \(k\) 大的边权和,求 \(1\) 到 ...

  8. 抽象接口USB的实例化

    /* * 接口的使用 * 1.接口使用上也满足多态性 * 2.接口,实际上就是定义了一种规范 * 3.开发中,体会面向接口编程! */ public class USBTest { public st ...

  9. AI+算力,赋予天翼云数字人“最强大脑”!

    3月31日至4月1日,以"音视频+无限可能"为主题的LiveVideoStackCon 2022音视频技术大会(北京站)圆满举办.天翼云科技有限公司AI产品研发总监陈金出席&quo ...

  10. .NET周刊【1月第3期 2025-01-19】

    国内文章 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(一):从.NET IoT入门开始 https://www.cnblogs.com/GreenShade/p/1866 ...