zoukankan      html  css  js  c++  java
  • 有关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}
  • 相关阅读:
    maven 的 oracle的Missing artifact com.oracle:******:jar:11.2.0.2.0
    [CF 191C]Fools and Roads[LCA Tarjan算法][LCA 与 RMQ问题的转化][LCA ST算法]
    公司估值(贴现现金流量法DCF)
    Shell编程学习---第五篇:Shell的输入和输出
    S3C2410 实验三——块拷贝、字拷贝(寄存器的理解)
    模板方法模式实现组合查询
    关于方程x^2+y^2=p (p为素数)的解问题
    IOS登陆+注册+抽奖+排行榜
    用PersonalRank实现基于图的推荐算法
    Redis3.0--集群安装部署
  • 原文地址:https://www.cnblogs.com/wanglli/p/13441180.html
Copyright © 2011-2022 走看看