> 原文地址：[https://newrelic.com/blog/nerd-life/successful-software-developers-habits](https://newrelic.com/blog/nerd-life/successful-software-developers-habits)
> 原文作者：Kevin Casey
> 原文发布于：2017年4月15日


想象一下，你正在比较两个软件开发人员的简历：Dev A 与 Dev B。两位候选人的背景和技能几乎完全相同：编程语言、框架、平台、方法论、行业等等。在纸面上，他们几乎是同一人。然而，如果可以通过一些特征表明（无论从任何方面来看），表明 Dev A 在他的职业生涯中可能会比 Dev B 更成功。这会是哪些特征呢？

事实证明，技术技能和经验只能让你走得那么远。卓越开发者还培养了关键的行为特征和心态，使他们脱颖而出。我们询问了多个软件专家，了解到能够将卓越开发者和其他人进行区分的习惯和特点。他们列出或预测了这 10 个习惯：
## 1. 你编写整洁、可重用的代码，更易于阅读和测试。
有许多方法可以编写整洁的代码，更易于重用、阅读和测试，但无论使用哪种方法，这都是高质量软件开发的一个越来越关键的特征。位于英国的 [Enigma Digital](https://www.enigma-recovery.com/) 的软件开发经理 [Andrew Magee](https://www.linkedin.com/in/andrew-magee-622398a/) 为我们提供了这样的出发点：**为每个函数分配一个唯一的目的**。

“当你开始编码时，通常是从一行接着一行地编写代码开始，进而使这个函数越来越大”。Magee 说道。一开始你可能会觉得这样更简单，但这会产生几个问题：你的代码变得更难读、更难重用和更难测试。 “一个函数应该只做一件事。如果它做了多于一件事，就不够聚焦。”

Magee 还建议为变量和函数分配清晰、有意义的名称——如果你遵循一个函数一个目的的经验法则，这会更容易实现。 “作为开发人员，你花在阅读代码上的时间比写代码的时间更多”，Magee 指出。“重要的是，在几周后回到开发时，你能够快速、轻松地理解它的意图。”
## 2. 理解你的代码如何推动整体业务。
有很多开发者有能力为公司开发的新的移动应用程序。但是能够在开发前就理解到，公司为什么要开发移动应用程序的大局观的人却很少。优秀的开发人员“广泛了解公司在业务层面上的运作方式，使用业务语言进行沟通，并掌握将业务语言转换为技术语言，反之亦然”。[Ask Applications](http://iac.com/brand/ask-applications) 的软件工程副总裁 Todd Stephan 这样说。同样，Stephan 补充说：优秀的开发人员可以用业务术语讲述技术的价值，换句话说，用公司除开发以外其他人，包括高管们能够理解的术语来表达。

[MarketGoo](http://www.marketgoo.com/) 的 CTO [Jose Miguel Pérez](https://www.linkedin.com/in/josemiguelperez/) 在这一点上也持有类似的观点：“他们公司寻求这种开发者：对项目的目标、目标和影响有广泛的理解，不只局限在作为一个开发者需要了解的范围”。

这里有一个能更好地了解代码对公司整体贡献的关键步骤：专注于你用户或客户。 “成功的开发人员对他们交付的东西负责——不只是指存储库，还包含了对用户的交付”、“顶尖的开发人员会随身携带寻呼机并保持值班状态。”
## 3. 倾听比你说的更重要——或者说你要先倾听，然后再表达
[Evus Technologies](https://www.evus.com/) 的开发主管 Christopher Mendy 表示：“如果你在一个和其他开发人员共事的办公室里，先倾听，然后再说话。这是学习的最快捷方式”。

这需要谦卑，特别是如果你认为自己是房间里最聪明的人。MarketGoo 的 Perez 补充说：优秀的开发人员具有“承认自己不懂的能力和意愿”。此外，他建议不要成为那种只会说一堆技术术语而不承认自己可能还不知道特定问题答案的程序员。
## 4. 你是有纪律性的
除非天赋异常出众，否则它并不是一切。实际上，天赋或技能只是成功公式的一部分。[Badger Maps](https://www.badgermapping.com/) 的 CTO [Gady Pitaru](https://www.linkedin.com/in/gadypitaru/) 表示：“纪律是另一部分”。“一位拥有优秀技能的软件工程师如果没有纪律，就像一位没有地图的老练水手：擅长驾驶船只，但找不到海岸。”

Pitaru 将一个有纪律的软件工程师描述为：

1. 不会为了速度而牺牲质量。除非是必须时，他们意识到他们正在创造技术债务，并努力在未来偿还。
2. 接受开发流程，因为他们认识到这些开发流程是为了帮助开发成功而设立的。例如：“他们在代码审查期间完充分参与，并鼓励有建设性的冲刺回顾”。
3. 了解专注于开发工作的价值：“他们想办法确保自己能做得到，例如使用番茄工作法、阻止日程提醒或戴上耳机等”。
## 5. 你能深深的专注于正确的事情
New Relic 的 Ruby Agent 软件工程师 Katherine Wu 分享了一种特定形式的规律，标志着高度成功的开发人员：他们有能力专注于特定项目的共同目标，而不会被一些“很容易得到”的想法或不切实际的幻想分心，这些想法实际上并没有使你更接近目标。

“我认为沉迷于某个特定技术实现的细节或边缘情况是一种普遍的习惯”，New Relic 的 Ruby Agent 软件工程师 Katherine Wu 说。她将这种心态描述为“如果我们能实现 X、Y 和 Z 就好了”，的思考方式。然而实际项目的目标是“A、B 和 C”。对于工程师来说，这是一种自然的思考过程，但有时需要加以控制。“当你稍微退后一点，你可能会意识到你正在为某些不是所有人都想要实现的宏伟目标而付出很大的努力”。

Wu 表示，有时向前看是好的，只要你能够重新聚焦于：你知道你需要完成的任务是更加重要的，相对于你以为你可能需要完成的任务。这其中一部分是确保你与团队的其他成员处于同一频率。正如 New Relic 的 Smith 所指出的那样，“成功的开发人员明白，创新是一项团队运动”。
## 6. 你对于解决问题有坚持不懈的态度
“要有坚定的信念——某些问题非常困难”，Mendy 指出。“只要有足够的时间和研究，总会找到解决方案，能找到一个难题的解决方案是最棒的感觉”。
## 7. 你能在互联网上得到陌生人的帮助
不要将坚持与骄傲混淆。卓越的开发者不会因为自己的自尊心，而将编程中问题转化成不必要的生产力损耗，特别是当解决方案可能可以在网上找到时。有时，寻求帮助——是的，谷歌也算——是解决问题的最有效的第一步。

“学会如何用谷歌搜索”，Mendy 建议道。“你将遇到的几乎所有计算机编程问题都已经有了解决方案。在某个地方，一定有人遇到了你正在遇到的同样的问题，并且他们通常会在网上发布他们的解决方案”。

不要认为在网上寻求帮助只意味着从 [Stack Overflow](https://stackoverflow.com/) 中复制和粘贴代码。New Relic 的 Tori Wieldt 指出，优秀的开发人员会花时间了解他们在网上找到的解决方案的 What，Why 和 How。她建议：“研究代码的作用以及它如何解决问题，而不是单纯的复制和粘贴；如果没有这个研究透这个解决方案的背景知识，它可能还会回来找你麻烦”。
## 8. 你需要超越技能，才能达到专业水平，但不意味你已经精通它们
当 Ask 正在招聘开发人才时，Stephan 会寻找候选人之前经验中的专业知识，这些经验不必与他试图应聘的工作直接相关。“如果一个人之前很快地建立了专业知识，那么有理由相信这个人能够在其他技能和技术方面再次做到这一点”，他说。

Badger Maps 的 Pitaru 解释了技能和精通之间的区别：“一名拥有优秀技能的软件工程师可以编写 Django 数据库查询，但一名经验丰富的软件工程师将知道如何最有效地编写该查询，以便一行代码可以扩展”。

区分技能和精通。后者意味着你没有任何需要学习的东西。“不要认为你会精通所有事情”，Mendy 说。“现在的开发只是不断地持续学习”。
## 9. 对新事物保持开放态度
另一个 Mendy 所描述的持续学习的前提条件：对新事物持开放态度，并在需要时接受并采纳它们。

“高度成功的软件工程师不断学习行业中的新趋势，并将其直接应用于他们的工作中”，Pitaru 说。“成功的软件工程师知道如何过滤和筛选那些有助于他们继续做到最好和成长的新语言、框架和方法论。可以说，对于一个成功的软件工程师来说，最重要的技能是知道如何获取新的技能”。

正如 Pitaru 所说，学习不会随着计算机科学学位或编码训练营的完成、以及听到“你被雇用了！”这些话而停止（如果你担心这正在发生，那么可能是时候[重启](https://blog.newrelic.com/technology/software-developer-career-boost/)了）。

“保持开放的心态。最糟糕的事情就是只关注一种语言或工具”，Mendy 建议。毕竟，“如果你只有一把锤子，那么所有东西看起来都像钉子”。
## 10. 勇于走出舒适圈
New Relic 的 Wu 表示，她对持续教育和技能发展的方法的不断完善是部分受到了 Cal Newport 的书[《深度工作》](http://calnewport.com/books/deep-work/)的启发。其中的关键引语是：真正的技能发展需要“能够深入探究一个主题，并面对其中困难的部分——并坚持度过那些沮丧的时刻，以便你真正探索，真正理解眼前的事物”。

这可能因为各种各样的原因而变得困难，包括所有那些常常让我们感觉很忙碌但不一定有助于 Wu 所描述的深度思考的事情，比如电子邮件、Slack、会议等等。例如，Wu 注意到她在努力理解复杂话题时遇到了一些困难的信号：她的注意力开始漂移。 “我可能正在阅读一篇技术博客文章，在某个想法的段落中间，甚至在某个句子的中间，我的大脑像是背叛了我——我想知道 Facebook 上有什么？”

Wu 从 Newport 的书中获得的经验是将所学知识运用到实践中。为了实现这个目标，她会设置专注的时间段，例如两小时，并且避免分散注意力的干扰。她将此比作冥想练习，因为专注于某个目标需要刻意地将注意力引回任务本身。她说：“当我注意力开始游离时，我会注意到这一点并轻轻地将注意力重新引回到手头的任务上。这样我就可以努力攻克难题，找出哪些部分我不理解，然后想办法找到答案。我需要进行实验吗？需要编写一个 demo 项目来实验它吗？需要找一个专家为我解释吗？这需要对困难的话题有意识地进行攻克”。

要明确的是，关闭电子邮件几个小时并不会使您成为更好的开发人员——它只是一种集中于真正的进展和改进的机制。她说，要变得更好，“你必须在困难的事情上工作。即使你没有干扰，而且得到了很多编码时间，如果你只是一遍又一遍地构建相同的简单应用程序，那并不一定会扩展你技能的边界。如果你不刻意地扩展你的技能边界，你可能不会尝试以帮助你作为技术贡献者真正成长的方向来构建技能。”

如果感兴趣的话，可以阅读[《成为更棒的开发者的 8 个途径》](https://blog.newrelic.com/engineering/8-ways-become-a-better-coder/)


原文地址：https://newrelic.com/blog/nerd-life/successful-software-developers-habits原文作者：Kevin Casey原文发布于：2017年4月15日想象一下，你正在比较两个软件开发人员的简历：Dev A 与 Dev B。两...

[译] 卓越开发者的10个习惯

> 原文地址：[https://www.paulsblog.dev/advanced-javascript-functions-to-improve-code-quality/](https://www.paulsblog.dev/advanced-javascript-functions-to-improve-code-quality/)
> 原文作者：Paul Knulst
> 原文发布于：2023年1月26日


> 通过使用包括 Debounce、Once 和 Memoize 的函数，以及 Pipe、Pick 和 Zip，来提高代码质量！

## 介绍
**JavaScript 是一种强大而多功能的编程语言**，具有许多内置特性，可以帮助您编写更高效、可维护和易读的代码。

在这篇文章中，我将解释如何使用一些内置特性来创建一些高级函数，以**提高性能**并使你的代码看起来更加美观。我将介绍 Debounce、Throttle、Once、Memoize、Curry、Partial、Pipe、Compose、Pick、Omit 和 Zip，您可以将它们保存在 utils 文件/类中，以优化您的代码质量。

**尽管这些函数使用 JavaScript 实现，但它们可以很容易地在任何编程语言中实现。一旦理解了这些函数的概念，就可以在任何语言中应用。**

此外，本文所描述的函数（或概念）**经常在技术面试中被问到**。

无论您是初学者还是经验丰富的高级开发人员，这些函数都将优化您的代码和编程体验。它们将令你在使用 JavaScript 时更加愉快和高效。
## Debounce
Debounce 函数是一种防止系列事件被快速重复调用的方法。它的机制是推迟函数执行，直到一定时间段过去，事件未被触发，才工作。Debounce 函数是一种有用的解决方案，可以应用于现实世界中，防止用户快速点击按钮并多次执行函数，从而提高性能。

以下代码片段将展示如何在 JavaScript 中实现 debounce 函数：
```javascript
function debounce(func, delay) {
 let timeout;
 return function() {
 const context = this;
 const args = arguments;
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(context, args), delay);
 };
}
```
在这个 JavaScript 代码片段中，`debounce` 函数将返回一个新函数，在先前定义的 `delay` 后执行原始函数。如果该函数再次被调用，`timeout` 将被重置，函数的调用将被推迟。

如果您有一个在窗口调整大小时更新网页布局的函数，则此功能将很有用。如果没有 Debounce 函数，当用户调整窗口大小时，此函数将被快速连续调用多次，这可能会导致性能问题。使用 Debounce 函数，可以限制布局更新的频率，使页面更具响应性和效率。

以下代码片段显示了在这种情况下使用 Debounce 函数的方法：
```javascript
// Define the function that updates the layout
function updateLayout() {
 // Update the layout...
}

// Create a debounced version of the function
const debouncedUpdateLayout = debounce(updateLayout, 250);

// Listen for window resize events and call the debounced function
window.addEventListener("resize", debouncedUpdateLayout);
```
在这个例子中，当窗口调整大小时，`updateLayout` 函数最多每 250 毫秒被调用一次。此功能确保布局仅在用户完成调整窗口大小后的 250ms 后被更新，使网页更有效和响应。
## Throttle
Throttle 函数与 Debounce 函数类似，但行为略有不同。它不是限制函数_调用_的速率，而是限制函数_执行_的速率。这意味着如果在上一段给定时间内调用了函数，它将禁止执行。它保证某个函数以一致的速率运行，不会过于频繁地触发。

Throttle 函数的实现如下：
```javascript
function throttle(func, delay) {
 let wait = false;

 return (...args) => {
 if (wait) {
 return;
 }

 func(...args);
 wait = true;
 setTimeout(() => {
 wait = false;
 }, delay);
 }
}
```
在这个代码片段中， `throttle` 函数会执行提供的 `func` 函数，将 `wait` 变量更新为 `true`，然后启动一个计时器，在 `delay` 过后重置 `wait` 参数。 如果再次调用 `throttle` 函数，它在 `wait` 参数仍然为 `true` 时直接返回，反之调用提供的函数。

如果您要在滚动时更新布局，可以在网页上使用 Throttle 功能。 如果没有 `throttle` 函数，当用户在页面上滚动时，此更新函数将被多次调用，导致严重的性能问题。 使用 `throttle` 函数，您可以确保每 X 毫秒只执行一次。 这将导致网页更响应更有效的可用性。

在下面的代码片段中，您可以看到如何使用 `throttle` 函数：
```javascript
// Define the function that updates the layout
function updateLayout() {
 // Update the layout...
}

// Create a throttled version of the function
const throttledUpdateLayout = throttle(updateLayout, 250);

// Listen for window scroll events and call the throttled function
window.addEventListener("scroll", throttledUpdateLayout);
```
通过定义 `hrottleUpdatedLayout` 函数并指定 250 毫秒的延迟，可以确保窗口滚动时，`updateLayout` 函数最多每 250 毫秒执行一次。如果事件在达到延迟之前被触发，则不会发生任何事情。
## Once
Once 函数是一种在已经调用过后将防止再次执行的方法。特别适用于处理仅应该运行一次的事件监听器，而不是在每次都移除事件监听器，您可以在 JavaScript 中使用 Once 函数。
```javascript
function once(func) {
 let ran = false;
 let result;
 return function() {
 if (ran) return result;
 result = func.apply(this, arguments);
 ran = true;
 return result;
 };
}
```
例如，您可以拥有一个向服务器发送请求以加载数据的函数。使用 `once()` 函数，您可以确保请求不会多次调用，即使用户不断点击按钮。**这将避免性能问题**。

如果没有 `once()` 函数，您需要在请求发送后立即删除单击监听器，以防再次发送请求。

在任何代码中应用 `once()` 函数将如下所示：
```javascript
// Define the function that sends the request
function requestSomeData() {
 // Send the request...
}

// Create a version of the function that can only be called once
const sendRequestOnce = once(sendRequest);

// Listen for clicks on a button and call the "once" function
const button = document.querySelector("button");
button.addEventListener("click", sendRequestOnce);
```
在这个例子中，即使用户多次点击按钮，`requestSomeData` 函数也只会被调用一次。
## Memoize
Memoize是 一个 JavaScript 函数，用于缓存给定函数的结果，以防止多次使用相同参数调用计算代价高昂的例程。
```javascript
function memoize(func) {
 const cache = new Map();
 return function() {
 const key = JSON.stringify(arguments);
 if (cache.has(key)) {
 return cache.get(key);
 }
 const result = func.apply(this, arguments);
 cache.set(key, result);
 return result;
 };
}
```
这个 `memoize()` 函数将缓存给定函数的结果，并使用参数作为键来检索如果在同一参数下再次调用时的结果。

现在，如果您有一个基于输入变量的复杂计算的函数，您可以使用 `memoize()` 函数来缓存结果并在多次使用相同输入时立即检索它们。

为了看到 `memoize()` 函数的好处，您可以使用它来计算斐波那契数列：
```javascript
// Define the function that performs the calculation
function fibonacci(n) {
 if (n < 2)
 return 1;
 return fibonacci(n - 1) + fibonacci(n - 2);
}

// Create a memoized version of the function
const memoizedFibonacci = memoize(fibonacci);

// Call the memoized function with multiple input values
console.time('total')
console.time('sub1')
const result1 = memoizedFibonacci(30);
console.timeEnd('sub1')
console.time('sub2')
const result2 = memoizedFibonacci(29);
console.timeEnd('sub2')
console.time('sub3')
const result3 = memoizedFibonacci(30);
console.timeEnd('sub3')
console.timeEnd('total')
```
在这个例子中，`fibonacci()` 函数将被转换成 `memoizedFibonacci` 函数。然后调用 `memoized()` 函数，并将执行时间记录到控制台。

输出将如下所示： ![image.png](../images/9387208a873d2e142bcfc2e59d27bf31.png) 尽管第二次调用（sub2）仅计算斐波那契数字 29，看起来时间比第二次计算（sub3）斐波那契数字 30 更长，因为它（sub3）被 `memoize()` 函数缓存了。
## Curry
Curry 函数（也称为 Currying）是一个高级的 JavaScript 函数，用于通过“预填充”一些参数来从现有函数创建一个新函数。当处理带有多个参数的函数时，常常使用 Curry 函数将它们转换为仅需局部参数的函数，因为其他参数将始终保持不变。

使用 Curry 函数有几个好处：

- 它有助于避免多次使用同一个变量
- 它使代码更具可读性
- 它将函数划分为多个较小的函数，符合单一职责

```javascript
function curry(func, arity = func.length) {
 return function curried(...args) {
 if (args.length >= arity) return func(...args);
 return function(...moreArgs) {
 return curried(...args, ...moreArgs);
 };
 };
}
```
这个 Curry 函数接收另一个函数 (`func`) 和一个可选的 `arity` 参数，它默认值为 `func` 参数的长度。它返回一个新函数 (`curried`)，可以使用 `arity` 个参数调用。如果调用时未提供所有参数，则返回一个新函数，可以记录后续调用时的参数，直到提供了所有必需参数。当提供了所有参数时，调用原始函数 (`func`)，并返回其结果。

为了理解 Curry 函数的好处，你可以想象一种计算平面上两点间距离的方法。使用 Curry 函数，您可以创建一个新函数，它仅需要其中一个点，使其更容易使用。

以下片段将显示如何使用之前定义的 curry 函数来优化实现的可读性：
```javascript
// Define the function that calculates the distance between two points
function distance(x1, y1, x2, y2) {
 return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
}

// Create a curried version of the function that only requires one of the points
const distanceFromOrigin = curry(distance, 3)(0, 0);

// Call the curried function with the other point
const d1 = distanceFromOrigin(1, 1);
const d2 = distanceFromOrigin(2, 2);
```
在这个例子中，通过使用 `curry` 函数将 `distance` 作为第一个参数， `3` 作为第二个参数（`arity`），创建了距离函数的柯里化版本（`distanceFromOrigin`）。另外，它将使用 `0,0` 和前两个参数一起调用柯里化函数。

现在，函数 `distanceFromOrigin` 是一个新函数，只需要两个参数，并始终使用 `0,0` 作为第一个点。
## Partial
Partial 函数在 JavaScript 中类似于 Curry 函数。Curry 和 Partial 的显著区别在于，调用 Partial 函数会立即返回结果，而不是在 Curry 链中返回另一个函数。
```javascript
function partial(func, ...args) {
 return function partiallyApplied(...moreArgs) {
 return func(...args, ...moreArgs);
 }
}
```
这个 JavaScript 中的 `partial` 函数通常需要一个现有的函数、一个或多个输入参数，并返回一个新函数，新函数在调用时以定义时传入的参数和新参数合并在一起调用原始函数。

在下面的使用情况中，将使用前两个参数预先填充 `calculate` 函数以生成一个具有更可读名称的新函数：
```javascript
// Define the function that calculates something
function calculate(x, y, z) {
	return (x + y) * z
}

// Create a partially applied version of the function the last argument
const multiply10By = partial(calculate, 8, 2);

// Call the partially applied function with the number of iterations
const result = multiply10By(5);
```
在这个例子中，通过部分应用通用计算函数并预先填写前两个参数（8 和 2），创建了 `multiply10By` 函数。 这将创建一个仅需要一个参数的新函数，该参数指定必须对 10 进行的乘法的数量。 此外，它将使代码更易读和理解。
## Pipe
管道函数是一种实用函数，用于链接多个函数并将一个函数的输出传递给下一个函数。它类似于 Unix 管道操作，通过使用 `reduce()` ，所有传入的函数将从左到右依次执行：
```javascript
function pipe(...funcs) {
 return function piped(...args) {
 return funcs.reduce((result, func) => [func.call(this, ...result)], args)[0];
 };
}
```
理解管道函数，想象你有三个函数：

- 向字符串添加前缀
- 向字符串添加后缀
- 将字符串转换为大写

然后，您可以使用管道函数创建一个新函数，该函数从左到右依次执行，对字符串应用变更。
```javascript
// Define the functions that add to the string
function addPrefix(str) {
 return "prefix-" + str;
}

function addSuffix(str) {
 return str + "-suffix";
}

function toUppercase(str) {
 return str.toUpperCase()
}

// Create a piped function that applies the three functions in the correct order
const decorated1 = pipe(addPrefix, addSuffix, toUppercase);
const decorated2 = pipe(toUppercase, addPrefix, addSuffix);

// Call the piped function with the input string
const result1 = decorated1("hello");		// PREFIX-HELLO-SUFFIX
const result2 = decorated2("hello");		// prefix-HELLO-suffix
```
在这个例子中，通过以不同顺序管道执行 `addPrefix`、`addSuffix` 和 `toUppercase` 函数创建了 `decorated1` 和 `decorated2` 函数。创建的新函数可以输入字符串进行调用，以便按给定的顺序应用三个原始函数。由于 pipe 函数提供的顺序不同，因此生成的输出字符串也将不同。
## Compose
组合函数与管道函数相同，但它将使用 `reduceRight` 应用所有函数：
```javascript
function compose(...funcs) {
 return function composed(...args) {
 return funcs.reduceRight((result, func) => [func.call(this, ...result)], args)[0];
 };
}
```
这将导致相同的功能，但函数是从右到左依次执行的。
## Pick
Pick 函数在 JavaScript 中用于从对象中选择特定值。它是通过从提供的项目中选择某些属性来创建一个新对象的方法。它是一种函数编程技术，允许从任何对象中提取属性的子集（如果该属性可用）。

这是 Pick 函数的实现：
```javascript
function pick(obj, keys) {
 return keys.reduce((acc, key) => {
 if (obj.hasOwnProperty(key)) {
 acc[key] = obj[key];
 }
 return acc;
 }, {});
}
```
这个函数有两个参数：

- `obj`：原始对象，新对象将根据它来创建。
- `keys`：要选择传输到新对象中的键数组。

要创建新对象，使用 `reduce()` 方法来遍历键数组并将它们与原始对象的属性进行比较。如果存在值，它将被添加到 reduce 函数的累加器对象中，该对象已使用 `{}` 进行初始化。

在 reduce 函数的最后，累加器对象是一个新的对象，仅包含在 `keys` 数组中的指定属性。

如果您想避免超取数据，此函数非常有用。使用 Pick 函数，您可以从数据库中检索任何对象，然后仅 `pick()` 所需的属性并将它们返回给调用者。
```javascript
const obj = {
 id: 1,
 name: 'Paul',
 password: '82ada72easd7',
 role: 'admin',
 website: 'https://www.paulsblog.dev',
};

const selected = pick(obj, ['name', 'website']);
console.log(selected); // { name: 'Paul', website: 'https://www.paulsblog.dev' }
```
这个函数将使用 `pick()` 函数创建一个仅包含 `name` 和 `website` 的新对象，而不会暴露 `role`、`password` 或 `id` 给调用者。
## Omit
Omit 函数是 Pick 函数的相反，它会从现有对象中删除某些属性。这意味着您可以通过隐藏属性来避免超取数据。如果要隐藏的属性数量小于要选择的属性数量，则可以使用它替换 Pick 函数。
```javascript
function omit(obj, keys) {
 return Object.keys(obj)
 .filter(key => !keys.includes(key))
 .reduce((acc, key) => {
 acc[key] = obj[key];
 return acc;
 }, {});
}
```
这个函数有两个参数：

- `obj`：原始对象，新对象将从中创建。
- `keys`：不应该在新对象中的键数组。

为了创建一个新对象并删除属性，使用 `Object.keys()` 函数创建原始对象的键数组。然后，使用 `filter()` 函数删除在 `keys` 参数中指定的每个键。通过 `reduce` 函数，将遍历剩余的键，并返回一个新对象，该对象仅由不在 `keys` 数组中提供的每个键组成。

实际上，如果您有一个大的用户对象，只想删除 id，您可以使用它：
```javascript
const obj = {
 id: 1,
 name: 'Paul',
 job: 'Senior Engineer',
 twitter: 'https://www.twitter.com/paulknulst',
 website: 'https://www.paulsblog.dev',
};

const selected = omit(obj, ['id']);
console.log(selected); // {name: 'Paul', job: 'Senior Engineer', twitter: 'https://www.twitter.com/paulknulst', website: 'https://www.paulsblog.dev'}
```
在这个例子中，`omit()` 函数被用来移除 `id` 属性，并获取一个仅包含其他属性的对象。这比使用 for 循环，设置 `obj.id=undefined` 或使用 `pick()` 并提供所有属性更具可读性。
## Zip
Zip 函数，它将每个元素数组与另一个元素数组进行匹配，并用于将多个数组合并为单个二维数组。生成的数组将包含来自每个数组的相应元素。通常，当处理来自多个源的数据并需要以某种方式合并或关联时使用此功能。

与 Python 不同，JavaScript 没有预先提供 Zip 函数。但是，实现很容易。
```javascript
function zip(...arrays) {
 const maxLength = Math.max(...arrays.map(array => array.length));
 return Array.from({ length: maxLength }).map((_, i) => {
 return Array.from({ length: arrays.length }, (_, j) => arrays[j][i]);
 });
}
```
这个 JavaScript 代码片段将创建一个新的二维数组，其中每个子数组由提供的数组的元素组成。这意味着，原始数组的每个元素和另一个原始数组的相同索引的元素，根据索引合并成若干个子数组。

例如，您可以有三个数组：

1. 包含各个点的 x 坐标
2. 包含各个点的 y 坐标
3. 包含各个点的 z 坐标

如果没有 zip 函数，您将手动循环数组并配对 x、y 和 z 元素。但是，通过使用 zip 函数，您可以传递原始数组并生成新的 (x、y、z) 元组数组。
```javascript
// Define the arrays that contain the coordinates
const xCoordinates = [1, 2, 3, 4];
const yCoordinates = [5, 6, 7, 8];
const zCoordinates = [3, 6, 1, 7];

// Create a zipped array of points
const points = zip(xCoordinates, yCoordinates, zCoordinates);

// Use the zipped array of points
console.log(points); // [[1, 5, 3], [2, 6, 6], [3, 7, 1], [4, 8, 7]]
```
在这个例子中，`zip` 函数用于将 `xCoordinates`、`yCoordinates` 和 `zCoordinates` 数组组合成单个元组数组。
## 结束语
在本博客文章中，我涵盖了许多强大且有用的函数，它们帮助编写更高效，可读性更强，更易于维护的 JavaScript 代码。如果正确使用，这些函数将提高代码质量，使项目更易于处理。

重要的是要说明，介绍的这些函数不包含在 JavaScript 语言的核心部分中被实现，但在许多流行的 JavaScript 框架中有被实现，如 **underscore.js**，**lodash** 等。

最后，学习在实际软件项目中有效地使用这些函数是一个持续的实践过程。过一段时间后，您将能轻松高效地使用这些函数，使代码更具可读性和可维护性。同时，总体代码质量将得到优化。

最后，您对这些 JavaScript 函数有什么看法？您是否渴望将其应用于您的项目？此外，您对这些函数都有哪些疑问？我很想听到您的想法和回答您的问题。请在评论中分享一切。

谢谢您的阅读，祝你**编码愉快**！

原文地址：https://www.paulsblog.dev/advanced-javascript-functions-to-improve-code-quality/原文作者：Paul Knulst原文发布于：2023年1月26日通过使用包括 Debounce、Once 和 Memoize...

[译] 提高代码质量的 11 个高级 JavaScript 函数

> 原文地址：[https://devblogs.microsoft.com/typescript/changes-to-how-we-manage-definitelytyped/](https://devblogs.microsoft.com/typescript/changes-to-how-we-manage-definitelytyped/)
> 原文发布于：2020年5月29日

> 缩写定义
> DT：Definitely Typed 仓库的缩写
> PR：Pull Request 代码拉取请求的缩写


托管在 github 上的 [Definitely Typed](https://github.com/DefinitelyTyped/DefinitelyTyped)（下文统一简称DT）项目是 [Github 年度 octoverse 报告](https://octoverse.github.com/) 上的常客，是贡献者数最多的前十个仓库之一。如果你没有听说过 DT 的话，它是一个存储了成千上万个 JavaScript 项目的类型声明文件（`.d.ts`文件）仓库，并且你可能已经通过使用 `@types/something` 命名方式的模块来使用过这个仓库的产物了。

最开始完全由社区驱动的方式来进行的类型定义工作对 TypeScript 生态的作用变得越来越重要，以至于 TypeScript 团队承担起了主要的维护 DT 项目的工作。而 TypeScript 团队也非常认真的对待维护 DT 项目的职责，自 [2016年年中](https://github.com/Microsoft/TypeScript/issues/9184) 以来，团队实行这样的轮换制度：被轮换到的成员在一周时间内会专注于合并 PR 和 DT 项目的维护。我们和其他 DT 项目的维护者合作，每周处理约 250 个 PR 请求，直至上周，超过90%的请求都已经被处理了。

在过去的一年里，我们一直致力于开发配套的工具，为了在保证 DT 生态系统稳定性的同时，为维护者贡献代码提供更加精简的体验——定义作者现在可以自己将 PR 合并到他们的模块上了！

### 我们是怎么做到的？
我们为 DT 项目建立了一些保证安全性的手段，这为团队提供了更多系统稳健性方面的信心。
#### 
#### 我们会对每一次变更执行性能和集成测试
性能检查会检查两点：

- 该变化是否增加了编译文件时的内存使用；
- 它们是否会减慢编辑器的操作，比如“转到定义”和代码补全。

性能很重要，因为我们看到过因为一个库的变化导致依赖它的模块的编译时间急剧增加的例子。通过在 PR 过程中提供有用的性能反馈，维护者可以了解性能变化并权衡这些变更的必要性。

集成测试会同时验证这两点：

- 你导出的类型定义和使用 [dts-critic](https://github.com/DefinitelyTyped/dts-critic) 的 JavaScript 的类型定义导出能够大致相同。这能够让开发者对所定义的类型说明是否适配目标 JavaScript 模块更有自信。
- 该改变不会破坏该类型定义库所依赖的下游依赖。
#### 
#### TypeScript 开发环境验证
TypeScript 的升级有可能会破坏你在 DT 中的类型定义。这可能是改进编译器控制流分析导致的，或者是通过修复一个不小心引入的依赖导致的。

TypeScript 开发团队不希望发布了一个新版本之后才发现它破坏了大量 DT 中的类型定义。目前有两个系统来防止这一情况。

第一个是我们简化了测试流程，能够使用开发中（WIP）的编译器对所有 DT 测试用例进行测试。如果新代码会导致 DT 中的报错，那么这个编译器 mr 的作者有责任在 mr 被合并之前在 DT 这边进行相关修复。

第二个是 DT 每晚都会拉取 TypeScript 的 master 分支自动测试。

这能帮助团队尽早发现问题，并将修复问题的责任转移给进行语言修改的人。

#### [dtslint](https://github.com/microsoft/dtslint)为基于模块的测试提供支持
DT 中的模块总是和它的测试文件一起被提交的。这些测试文件以 `.ts` 或 `.tsx` 结尾，测试最终提供给用户的 `.d.ts` 文件。我们建议模块的测试文件从测试库的一些使用示例代码开始，以测试模块的核心使用场景，然后随着被新增到 `.d.ts` 的新类型逐步添加测试用例。

这些测试用例可以验证 `.d.ts` 是否准确的描述了对应的 JavaScript 模块，也可以用于验证新的修改不会破坏旧的版本。

有了这些系统，我们能够更容易扩大每日能够容载的 mr 数量，减少了审核时长。这便是为什么我们最近让定义作者可以自己合并 PR 的原因！
### 
### 哪些 PR 是定义作者有权合并的
对所有对 DT 项目提交的 PR 而言，存在这三组关联方：

- **DT 维护者们**，目的是维护整个 DT 生态稳定性。
- **定义作者**，目的是保持他们的模块有最新的、合适的代码提示。
- **普通开发者**，尽管不是模块作者，但自发的想要维护该模块的定义。

在之前，只有 DT 维护者们才可以合并 PR 请求。通过新的 [github 机器人](https://github.com/DefinitelyTyped/dt-mergebot/)，我们把能力下放到定义作者，使他们能够自行合并他们的变更。

在判断一个 PR 能否被定义作者合并时，我们把对 DT 的变更分为两类：

- PR 添加的是新模块的类型定义，这将需要由 DT 维护者们进行验证和合并，这种请求不能由定义作者自行合并。
- 对原有模块的 PR

针对第二类 PR，我们又根据该模块的影响力分为了两类：

- 影响到的是极受欢迎的库，如：Node、React、Lodash 或 Jest 等
- 其他库

在 npm 上每月下载量达 500 万以上的极受欢迎的库的改动也不能直接由定义作者进行合并，同样需要 DT 维护者们参与验证和进行合并。不过，这种改动是少见的，我们收到的大部分 PR 都是对较小的库的快读修改。

### 什么时候 PR 能够由它的作者合并
在判断了一个 PR 能够被定义作者合并之后，我们的机器人会引导 PR 的作者去完成合并过程。我们为 PR 合并设定了四个条件：

- 没有合并冲突
- CI 已经通过了这个模块和它的依赖的自动化测试
- 这次变更都有在 `d.ts` 中编写相应的测试用例
- 最近一次的提交是由定义作者或者是 DT 维护者审批通过的

随着 PR 经历上述阶段，机器人会自动发送相应的评论描述当前自动合并的状态。

这样做的原因是我们试图让机器人为自动合并可能出现的各种状态分支进行对应的引导，并就下一步该做什么进行反馈，为贡献者提供修订文档的链接。

![image.png](../images/a900a36afa857aaa60a516ec71d99c51.png) ![image.png](../images/09a143aa714e503b063f5508e49d91c6.png) ![image.png](../images/a84d97513e1c8b249ae3aa3aae0bb909.png) ![image.png](../images/9cac03ce8cce6d57d1ac74b9e7d844b8.png) 我们开始看到每天大约有 20 个 PR 请求通过这个新系统被社区合并。由定义作者合并的 PR 通常会在一天内处理完毕，并且不会因为 TypeScript 团队的轮值值班人员的精力不足而被阻止。例如，[theme-ui](https://theme-ui.com/) 发现了一个[类型定义的缺陷](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/45032#issuecomment-635231194)，发现者发起了一个 [PR](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/45114) 来进行修复，定义作者进行了审批并在一个小时内完成了合并。这是一个完美的例子，说明我们为什么要完善 PR 机制。

在我们思考我们应该如何维护这么一个变化频繁的项目的时候，我们认为它结合了谨慎的自动化流程和大量的人力贡献。DefinitelyTyped 是一个大规模的社区项目，有上万人参与贡献，我们真的为它所取得的成就感到骄傲，也要为了下一万个贡献者能够更轻松而努力。

原作者： Orta Therox Engineer on the TypeScript Compiler [https://devblogs.microsoft.com/typescript/author/ortammicrosoft-com/](https://devblogs.microsoft.com/typescript/author/ortammicrosoft-com/)

原文地址：https://devblogs.microsoft.com/typescript/changes-to-how-we-manage-definitelytyped/原文发布于：2020年5月29日缩写定义DT：Definitely Typed 仓库的缩写PR：Pull Reques...

标签: 翻译

[译] 卓越开发者的10个习惯

[译] 提高代码质量的 11 个高级 JavaScript 函数

[译] DefinitelyTyped 的自动化管理改造