【若川视野 x 源码共读】第36期 | omit.js 剔除对象中的属性
- 本文参加了由公众号@若川视野 发起的每周源码共读活动,点击了解详情一起参与。
- 这是源码共读的第36期,链接:juejin.cn/post/711878…
1、omit.js的使用(以下简称omit)
该库比较简单,仅提供一个方法,该方法接受一个对象以及该对象需要过滤掉的属性列表,具体使用步骤如下:
-
安装omit:
npm i --save omit.js -
引入omit:
const omit = require('omit.js') -
使用omit:
omit({ name: 'Benjy', age: 18 }, [ 'name' ]); // => { age: 18 }
2、omit源码如下:
function omit(obj, fields) {
// 对原对象进行浅拷贝
const shallowCopy = Object.assign({}, obj);
// 遍历需过滤的属性
for (let i = 0; i < fields.length; i += 1) {
const key = fields[i];
// 删除需过滤的属性
delete shallowCopy[key];
}
// 返回过滤掉属性后的对象
return shallowCopy;
}
export default omit;
3、源码关注点:
源码中代码不多,我觉得需要关注的点是其中的Object.assign方法,该方法可以实现对象的浅拷贝,既然是浅拷贝,那么在实际使用过程中可能会出现与预期不一致的地方,因此可能需要结合实际场景作相关处理,Object.assign用法如下:
Object.assign(target,source1,source2...)方法将所有可枚举(Object.propertyIsEnumerable() 返回 true)的自有(Object.hasOwnProperty() 返回 true)属性从一个或多个源对象复制到目标对象,返回修改后的对象。具体请看
使用该方法有两点需要注意:
- 如果目标对象有相同key值,则源对象的属性会覆盖目标对象的属性,如果多个源对象有相同的key,则后入参对象的属性值会覆盖先入参的属性值,如下代码中的obj3.a以及obj3.b将分别覆盖obj2.a,obj1.a和obj2.b。
var obj1={a:10};
var obj2={a:20,b:15};
var obj3={a:30,b:25,c:19};
var obj4=Object.assign(obj1,obj2,obj3);
console.log(obj4)//{a:30,b:25,c:19}
- 如果源对象的属性是引用类型,则复制给目标对象的只是引用地址,即如果源对象或者目标对象其中任意一方对该引用属性进行修改会导致另一方的属性改变:
var obj1 = { a: 0 , b: { c: 20}};
var obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // {"a":0,"b":{"c":20}}
obj1.a = 10;
console.log(JSON.stringify(obj1));// {"a":10,"b":{"c":20}}
console.log(JSON.stringify(obj2));// {"a":0,"b":{"c":20}}
obj2.a = 20;
console.log(JSON.stringify(obj1)); // {"a":10,"b":{"c":20}}
console.log(JSON.stringify(obj2)); // {"a":20,"b":{"c":20}}
obj2.b.c = 30;
console.log(JSON.stringify(obj1)); // {"a":10,"b":{"c":30}}
console.log(JSON.stringify(obj2)); // {"a":20,"b":{"c":30}}
4、阅后感受
第一次参加这样的活动,也是这类型活动的第一个笔记,总得感受是本次源码相较简单,如果自己工作中用得到,即使不安装该库,直接在项目的某个文件封装一个方法也是可以的,然后可以根据需要对该方法进行一定程度的优化甚至拓展,比如其中的浅拷贝部分或许就可以换成深拷贝,然后遍历过滤属性的部分也可以试试其它写法等等。