当我们在进行前端项目开发的时候，难免会遇到需要判断对象内部属性的变化情况的情况。而 npm 包 get-object-with-attributes-that-changed 就是为解决这种需求而生的一个优秀的工具。本篇文章将详细介绍这个 npm 包的使用教程。
安装
使用 npm 进行安装：
npm install --save get-object-with-attributes-that-changed
使用方法
基本使用
该 npm 包提供的 getObjectWithAttributesThatChanged 方法，可以用来返回目标对象中被更改的部分。在使用时，只需调用该方法，并传入两个参数：
- targetObject：被检测的目标对象；
- newObject：新对象（一般是在原来的对象上进行修改后的产物），用于和 targetObject 进行比较，找出变更的地方。
下面是一个简单的示例代码：
-- -------------------- ---- ------- ----- ---------------------------------- - --------------------------------------------------- ----- ------------ - - ----- ----- ---- -- -- ----- --------- - - ----- ----- ---- -- -- ----- ------- - ------------------------------------------------ ----------- ---------------------展开代码
运行结果如下：
{ age: 24 }
从结果中可以看出，getObjectWithAttributesThatChanged 方法返回一个对象，该对象中包含了被修改的属性名和该属性新的值。
深度遍历
如果目标对象中嵌套了对象，那么也可以使用 getObjectWithAttributesThatChanged 方法来找到被更改的属性。下面是一个嵌套对象的示例代码：
-- -------------------- ---- ------- ----- ------------ - - ----- ----- ---- --- -------- - --------- ------ ----- ------ ------- -------- - -- ----- --------- - - ----- ----- ---- --- -------- - --------- ------ ----- ------ ------- -------- - -- ----- ------- - ------------------------------------------------ ----------- ---------------------展开代码
运行结果如下：
{ age: 24 }
上面的运行结果中，我们只能找到 age 属性的改变，而找不到嵌套在 address 对象内的属性变化。这是因为 getObjectWithAttributesThatChanged 方法默认只会遍历目标对象的一级属性，如果要想遍历整个嵌套树，就需要使用到深度遍历功能。下面是修改后的示例代码：
-- -------------------- ---- ------- ----- ------------ - - ----- ----- ---- --- -------- - --------- ------ ----- ------ ------- -------- - -- ----- --------- - - ----- ----- ---- --- -------- - --------- ------ ----- ------ ------- -------- - -- ----- ------- - ------------------------------------------------ ---------- ------ ---------------------展开代码
运行结果如下：
{ age: 24, 'address.street': '福田区车公庙' }
通过将第三个参数设置为 true，我们可以获取到嵌套在 address 对象内的属性变化。在返回的对象中，'address.street' 是经过拼接后的嵌套属性名。
总结
get-object-with-attributes-that-changed 是一个非常方便的 npm 包，可以帮助我们快速找到对象内部属性的变化情况。在使用过程中，要注意其默认只会遍历目标对象的一级属性，如果需要遍历整个嵌套树，需要将第三个参数设置为 true。同时，本文中提到的示例代码也可以在 Github 中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734f890c4f7277583899
