数据驱动怎么实现修改数组对象中的一个对象其他也随之改变？

• Z时代
• 2024-02-22
• 分类：IT

修改第一个对象的active为true/false时，其他对象里的active全变成false

let obj = [
  {
    item: '1',
    active: false
  },
  {
    item: '2',
    active: true
  },
  {
    item: '3',
    active: true
  },
  {
    item: '4',
    active: true
  },
]

回答：

function setActive(obj, index) {
  obj.forEach((item) => {
    item.active = false;
  });
  obj[index].active = true;
}
// 测试
let obj = [
  {
    item: '1',
    active: false
  },
  {
    item: '2',
    active: true
  },
  {
    item: '3',
    active: true
  },
  {
    item: '4',
    active: true
  },
];
setActive(obj, 0);
console.log(obj);

回答：

let obj = [
  {
    item: '1',
    _active: false
  },
  {
    item: '2',
    _active: true
  },
  {
    item: '3',
    _active: true
  },
  {
    item: '4',
    _active: true
  },
];
Object.defineProperty(obj[0], 'active', {
  get: function() {
    return this._active;
  },
  set: function(value) {
    if (value !== this._active) {
      this._active = value;
      if (value) {
        // 将其他对象的 active 全部设为 false
        for (let i = 1; i < obj.length; i++) {
          obj[i]._active = false;
        }
      }
    }
  }
});

// 测试
console.log("原数据", JSON.parse(JSON.stringify(obj)));
obj[0].active = true; // 修改第一个对象的 active 为 true
console.log("修改后数据：", obj);

回答：

const _obj = [
  {
    item: '1',
    active: false,
  },
  {
    item: '2',
    active: true,
  },
  {
    item: '3',
    active: true,
  },
  {
    item: '4',
    active: true,
  },
];
const obj = new Proxy(_obj, {
  get(target, index) {
    const item = target[index];
    if (!item) return undefined;
    return new Proxy(item, {
      set(item, prop, value) {
        if (prop === 'active') {
          _obj.forEach((it) => (it.active = value));
        }
        return Reflect.set(item, prop, value);
      },
    });
  },
});

回答：

方案一（Object.defineProperty）

使用Object.defineProperty可以实现对象的属性代理，可以实现只要修改任意对象的active，其他对象的active也会发生变化。这个也是vue2的双向响应式实现依据。

let obj = [
  {
    item: '1',
    active: false
  },
  {
    item: '2',
    active: true
  },
  {
    item: '3',
    active: true
  },
  {
    item: '4',
    active: true
  },
];
let proxyObj = obj.map((item, index) => {
  let isActive = item.active;
  Object.defineProperty(item, 'active', {
    get() {
      return isActive;
    },
    set(value) {
      isActive = value;
      obj.forEach((el, i) => {
        if (i !== index && el.active !== value) {
          el.active = value;
        }
      });
    },
  });
  return item;
});
// 测试代码
console.log('初始obj:', obj);
proxyObj[1].active = false;
console.log('修改后的obj:', obj);

方案二（Proxy）

也可以使用Proxy实现相同的代理

let obj = [
  {
    item: '1',
    active: false
  },
  {
    item: '2',
    active: true
  },
  {
    item: '3',
    active: true
  },
  {
    item: '4',
    active: true
  },
];
let proxyObj = new Proxy(obj, {
  get(target, index) {
    const item = target[index];
    return new Proxy(item, {
      set(target, prop, value) {
        if (prop === 'active') {
          obj.forEach((el, i) => {
            if (i !== index && el.active !== value) {
              el.active = value;
            }
          })
        }
        return Reflect.set(target, prop, value)
      }
    })
  }
})
// 测试代码
console.log('初始obj:', obj);
proxyObj[1].active = false;
console.log('修改后的obj:', obj);

以上是 数据驱动怎么实现修改数组对象中的一个对象其他也随之改变？ 的全部内容， 来源链接： utcz.com/p/935127.html