【若川视野 x 源码共读】第36期 | omit.js 剔除对象中的属性

卿浅
88 阅读2分钟

1.omit.js的使用

omit({ name: 'Benjy', age: 18 }, [ 'name' ]); // => { age: 18 }

2.源码分析

image.png

方法比较好懂.先是通过Object.assign浅拷贝目标对象,然后对fields进行遍历,获取到key,之后通过delete删除shallowCopy上的对应属性,最后返回修改后的对象.

3.学习到的点

调试的时候,重新学习了一下Object.assign()方法.

  • 用法:Object.assign(target,source1,source2...); 该方法将所有可枚举的自身属性从一个或多个 源对象 复制到目标对象。它返回修改后的目标对象。
  • 细节1:如果目标对象有相同key值,则源对象的属性会覆盖目标对象属性,如果多个源对象有相同key值,则后入参对象的属性会覆盖先入参的属性。
const obj1={a:1};
const obj2={a:2,b:1};
const obj3={a:3,b:2,c:1};
const obj4=Object.assign(obj1,obj2,obj3);//{a:3,b:2,c:1}
  • 细节2:如果源对象的属性是引用类型,则复制给目标对象的只是引用地址,即如果源对象或者目标对象其中任意一方对该引用属性进行修改会导致另一方的属性改变.(Omit.js作者在readme中提到了通过omit方法返回的对象是一个浅拷贝对象.所以如果原obj中如果存在嵌套属性,那么后期在修改嵌套属性时会原obj和返回对象都会出现改动)
function test() {
  'use strict';

  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}

  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}}
  console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}

  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}}
  console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 0}}

  obj2.b.c = 3;
  console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 3}}
  console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 3}}

  // Deep Clone
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { "a": 0, "b": { "c": 0}}
}

test();

4.体会

加群好久了,源码其实也不是没有看过,但总感觉挺难写下来的.还是要继续努力啊.

avatar
文章
阅读
粉丝