有关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 5.15.6 发布
一.前言 我们今天为商业许可证持有者发布了 Qt 5.15.6 LTS.作为补丁版本,Qt 5.15.6 没有添加任何新功能,但提供了错误修复和其他改进. 您可以使用维护工具在现有的在线安装中添加 Q ...
- 上位机能不能替代PLC呢?
一.前言 大家好!我是付工. 之前有个学员问了这样的一个问题: 学会了上位机,是不是就可以不用PLC了呢? 今天跟大家分享一下上位机能不能代替PLC? 二.网络架构 首先我们看下这张网络架构图. 从图 ...
- 第七章 LinkedBlockingQueue源码解析
1.对于LinkedBlockingQueue需要掌握以下几点 创建 入队(添加元素) 出队(删除元素) 2.创建 Node节点内部类与LinkedBlockingQueue的一些属性 static ...
- ffmpeg简易播放器(1)--了解视频格式
视频帧 对于一份视频,实质上是多张图片高速播放形成的.每一张图片即为该视频的一帧.而每秒钟播放的图片张数便为所谓的帧率(Frame Rate/Frame Per Second).常见的帧率有24fps ...
- 2006. 差的绝对值为 K 的数对数目
给你一个整数数组 nums 和一个整数 k ,请你返回数对 (i, j) 的数目,满足 i < j 且 |nums[i] - nums[j]| == k . |x| 的值定义为: 如果 x &g ...
- dart箭头函数和自执行函数的详解
01==>箭头函数 // List list = ['苹果', '香蕉', '栗子']; // list.forEach((element) { // print(element); // }) ...
- Java02-基础语法
Java基础语法 [ 任务列表 ] 1.注释 2.字面量 3.变量 4.关键字.标识符 5.方法 6.类型转换 7.输入输出 8.运算符 9.其他 -------------------------- ...
- Flink CDC全量和增量同步数据如何保证数据的一致性
Apache Flink 的 Change Data Capture (CDC) 功能主要用于实时捕获数据库中的变更记录,并将其转换为事件流以供下游处理.为了保证全量和增量数据同步时数据的一致性.不丢 ...
- Luogu P3041 USACO12JAN Video Game G 题解 [ 紫 ] [ AC 自动机 ] [ 动态规划 ]
Video Games G:弱智紫题,30min 切了,dp 思路非常板. 多模式串一看肯定就是要建出 AC 自动机,然后在 fail 树里下传标记,预处理每个节点到达后的得分. 然后设计 \(dp_ ...
- Net跨平台硬件信息查询库 Hardware.Info:全面获取系统硬件详情
Hardware.Info 是一个基于 .NET Standard 2.0 的跨平台库,提供了硬件信息查询的功能,支持 Windows.Linux 和 macOS 操作系统.该库通过不同平台下的系统接 ...