最近碰到了一个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. git path

    github -> deepin-4090-edd25519-key openl -> deepin-4090-rsa-key gitee -> deepin-4090-dsa-ke ...

  2. Python依赖库的导入、导出 | 解决内网安装模块问题 | Python

    通过在有网的机器A下下载所有的依赖包至package文件夹下: pip3 download -r requirements.txt -d ./package 将依赖包移动至没有网的机器B下,指定依赖包 ...

  3. 关于动态使用keepAlive不生效的问题

    首先,我想实现在返回页面时,页面不进行刷新,比如我原先选择的第四页,返回后显示了第一页 想到使用keepAlive缓存组件,大部分推荐的方法为这样,但是不生效 <keep-alive v-if= ...

  4. JuiceFS 2024:开源与商业并进,迈向 AI 原生时代

    即将过去的 2024 年,是 JuiceFS 开源版本推出的第 4 年,企业版的第 8 个年头.回顾过去这一年,JuiceFS 社区版依旧保持着快速成长的势头,GitHub 星标突破 11.1K,各项 ...

  5. 为你的Blazor程序加入本地化多语言功能

    本地化 本地化是为给定语言和地区定制应用程序的过程. BootstrapBlazor 组件允许您将其 UI 元素转换为所需的语言.这包括按钮.过滤器操作符属性等文本.组件内部默认使用当前请求 UI 文 ...

  6. window service 2012 R2 0x8007000d

    今天遇到了一个很无语的问题,我的一个.net core 项目,部署到IIS上之后,启动网站,报500.19的错误.尝试了网上N种办法始终没办法解决,最后重装了我的.net core,解决了. 第一步: ...

  7. C# WebAPI 插件热插拔

    背景 WebAPI 插件热插拔是指在不重启应用程序的情况下,能够动态地加载.更新或卸载功能模块(即插件)的能力.这种设计模式在软件开发中非常有用,尤其是在需要频繁更新或扩展功能的大型系统中.通过实现插 ...

  8. 独立开发经验谈:如何借助 AI 辅助产品 UI 设计

    我在业余时间开发了一款自己的独立产品:升讯威在线客服与营销系统.陆陆续续开发了几年,从一开始的偶有用户尝试,到如今线上环境和私有化部署均有了越来越多的稳定用户,在这个过程中,我也积累了不少如何开发运营 ...

  9. RocketMQ实战—3.基于RocketMQ升级订单系统架构

    大纲 1.基于MQ实现订单系统核心流程的异步化改造 2.基于MQ实现订单系统和第三方系统的解耦 3.基于MQ实现将订单数据同步给大数据团队 4.秒杀系统的技术难点以及秒杀商详页的架构设计 5.基于MQ ...

  10. [QOJ8672][PKUSC2024] 排队

    函数复合,直接转化为离线问题,那我们就需要完成对满足条件的量的区间加操作. 显然 \(ans_{[l,r]}\ge ans_{(l,r]}\),所以可以线段树二分. 时间复杂度 \(O(q\log n ...