• 有关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的严谨模式
    Docker之Compose服务编排
    最近5年183个Java面试问题列表及答案[最全]
    Rancher概述
    迭代器和生成器
    Prometheus 安装
    Prometheus 介绍
    装饰器函数
  • 原文地址:https://www.cnblogs.com/wanglli/p/13441180.html
Copyright © 2020-2023  润新知