js比较对象属性是否发生变化的最简便写法

需求背景：

要求在离开页面时需要判断页面的数据是否有做过改动，由于页面的数据是表单对象的形式，所以只需要判断对象的属性值是否有发生过变化就行

 

解决方案：

查找资料发现比较简单的写法就是通过JSON.stringify转换成字符串进行对比

 

上代码案例：

const x = {
    a: 1,
    b: 2,
    c: {
        k: 'test'
    },
    d:[1,2,3,5]
};
 
// 备份一份原数据y
const y = JSON.stringify(x)

// 修改x数据
x.a = 3

// 判断数据是否有变动
 if (isChange(x, y)) {
       console.log('数据未修改');
   } else {
      console.log('数据有变动');
  }
 
// 数据是否有变化的方法封装
function isChange(x, y) {
    return JSON.stringify(x) === y
}

　　

注：也能用该方法判断两个对象是否完全相等

 

参考资料：
vue 判断表单值是否改变