有关js的双向绑定解除方法
最近碰到了一个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的双向绑定解除方法的更多相关文章
- 用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
- 真正的原生JS数据双向绑定(实时同步)
真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- js 超浓缩 双向绑定
绑定确实是个有趣的话题. 现在我的绑定器有了不少的功能 1. 附着在Object对象上,一切以对象为中心 2. 与页面元素进行双向绑定 3. 与任意对象绑定,主要是应用在绑定到页面元素的一些属性上,比 ...
- angularjs bind与model配合双向绑定 表达式方法输出
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- [JS] 数据双向绑定原理
通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title" ...
- Vue3.0 实现数据双向绑定的方法
ue3.0 是通过Proxy实现的数据双向绑定,Proxy是ES6中新增的一个特性,实现的过程是在目标对象之前设置了一层"拦截",外界对该对象的访问,都必须先通过这层拦截,因此提供 ...
- Vue.js 关于双向绑定的一些实现细节
Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的. 当把一个普通 Javascript 对象传给 Vue 实例来作 ...
- js event事件绑定的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 通过原生js实现数据的双向绑定
通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...
随机推荐
- Qt编写安防视频监控系统23-图片地图
一.前言 图片地图这个模块是后面新增加进去的,主要是安防领域还有很多应用场景是一个区域比如就一个学校,提供一个学校的平面图或者鸟瞰图,然后在该地图上放置对应的摄像机,双击该摄像机图标可以查看对应的实时 ...
- [转]CLion安装及无限试用
Clion安装及无限试用:链接:https://pan.baidu.com/s/1mreUx5QyS4nkVQMOhdjf7g提取码:ylqw 翻译 搜索 复制
- 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 ...
- 理解IM消息“可靠性”和“一致性”问题,以及解决方案探讨
本文作者"商文默",本次有修订和改动. 1.写在前面 即时通讯网整理的大量IM技术文章中(见本文末"参考资料"一节),有关消息可靠性和一致性问题的文章占了很大比 ...
- Pytorch Layer层总结
卷积层 nn.Conv1d 对由多个输入平面组成的输入信号应用一维卷积. nn.Conv2d 在由多个输入平面组成的输入信号上应用 2D 卷积. nn.Conv3d 对由多个输入平面组成的输入信号应用 ...
- 自动化滑动极验v3示例
import random import ddddocr from playwright.sync_api import sync_playwright import time import requ ...
- Solution -「Gym 101630J」Journey from Petersburg to Moscow
\(\mathscr{Description}\) Link. 给定含有 \(n\) 个点 \(m\) 条边的带权无向图,一条路径的长度定义为其中前 \(k\) 大的边权和,求 \(1\) 到 ...
- 抽象接口USB的实例化
/* * 接口的使用 * 1.接口使用上也满足多态性 * 2.接口,实际上就是定义了一种规范 * 3.开发中,体会面向接口编程! */ public class USBTest { public st ...
- AI+算力,赋予天翼云数字人“最强大脑”!
3月31日至4月1日,以"音视频+无限可能"为主题的LiveVideoStackCon 2022音视频技术大会(北京站)圆满举办.天翼云科技有限公司AI产品研发总监陈金出席&quo ...
- .NET周刊【1月第3期 2025-01-19】
国内文章 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(一):从.NET IoT入门开始 https://www.cnblogs.com/GreenShade/p/1866 ...