【源码共读·Day1】从简单的omit.js源码开始

李哈哈要奋发
323 阅读3分钟

♥️♥️♥️ 李哈哈要奋发啦～冲冲冲！！！相信只要坚持学习会有所回报的！♥️♥️♥️

1. 前言

2. 源码：

function omit(obj, fields) {
  // eslint-disable-next-line prefer-object-spread
  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;

omit.js通过函数封装实现删除对象的属性，返回删除后的新的对象，不改变原对象。

1.函数内部使用了Object.assign()方法对对象进行了浅拷贝。 2.使用for循环遍历要删除的属性名将对象的属性进行剔除。

由此引发的知识拓展：

1.Object.assign()方法的使用：用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。更多详情见ES6。

//基本使用
var target = { a: 1 };

var source1 = { b: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

注意：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

2.使用数组方法进行遍历处理是否更好？常用的方法有哪些？

  • forEach() 方法对数组的每个元素执行一次给定的函数，并将元素传递给回调函数。

  • map() 方法 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。不会改变原始数组。

两者区别：

• forEach()返回值是undefined，不可以链式调用。

• map()返回一个新数组，原数组不会改变。

• 没有办法终止或者跳出forEach()循环，除非抛出异常，所以想执行一个数组是否满足什么条件，返回布尔值，可以用一般的for循环实现，或者用Array.every()或者Array.some();

• forEach()的执行速度 < map()的执行速度

3. 知识拓展

3.1 学习npm发包

查看npm官网学习了npm发包的基本流程、版本号的修改及package.json / README.md等文件的介绍。 npm发包基本流程：

1. 注册npm账号：

官网注册一个账号，记住用户名、密码和邮箱，注册之后需要在邮箱中验证一下才能使用。

2.创建npm包

新建一个文件夹，进入里面执行npm init 生成一个package.json文件，在命令行问卷中回答问题。或者直接执行npm init -y/--yes创建一个默认包。

3. 写入核心功能 image.png

4. 登入npm账号：

执行npm login输入用户名，密码和邮箱。 image.png

5.发包

执行npm publish，发不成功显示如下信息 image.png

添加脚本myTest.js运行node src/myTest.js测试的时候导出报错SyntaxError: Unexpected token 'export'； SyntaxError: Cannot use import statement outside a module； 然后去了解了一下exports、module.exports 和 export、export default的区别(这里不过多讲解了，后续有时间自己再总结一下)。

6.npm下载安装自己发布的包

在自己的项目中运行npm i changeurlarg成功安装。package.json的依赖文件“dependencies”出现。

image.png

image.png

总结

  • 初次尝试配置auto-attach对代码进行调试(不熟)

  • 了解了omit.js的实现

  • 了解了发布npm包的基本流程并注册发布了第一个包

  • 对package和module、package.json等文件有了更深的了解

avatar
文章
阅读
粉丝