5个有趣且不必要的 JavaScipt 技巧

原文在 https://areknawo.com/5-interesting-and-not-necessarily-useful-javascript-tricks/
作者是 Areknawo

---

前一段时间，我创建了一个标题为“7个可爱的Web开发技巧”的帖子。在这里，我描述了一些有趣的技巧，您可以使用3种主要的Web技术之一来实现这些技巧-HTML，CSS和JavaScript。而且，我必须承认-你们似乎都喜欢它！因此，续集来了！

这次，为了更加一致，我决定只专注于JavaScript。它可能是三者中最有趣，用途最广泛的，因此有很多事情要讨论。我们将介绍5种JavaScript技巧，这些技巧在上一篇文章中没有提到。希望您会发现它们很有趣！

在进入列表之前，请快速注意一下。我看到了对上一篇文章的一些回复，并想清除一些内容。我知道并不是该列表或上一个列表中的所有条目可能都是真正有用的或推荐的做法，但这不是我的目标。用“技巧”一词我的意思就是-有趣的或仅出于此目的而值得了解的“技巧”。有用只是一种奖励。如果它打算100％有用，那么我将其称为“提示”。我希望你明白。现在，让我们转到列表！

5.切换范围

从不太“极端”的技巧开始，我们得到了switch声明。它的大多数用例都归结为字符串或数字值匹配。但是，您知道您也可以将其与一些更复杂的布尔值一起使用吗？看一看。

const useSwitch = value => {
  let message = "";

  switch (true) {
    case value < 0:
      message = "lesser than 0";
      break;

    case value === 0:
      message = "0";
      break;

    case value % 1 !== 0:
      message = "a float";
      break;

    case value > 0 && value <= 9:
      message = "higher than 0 and is 1 digit long";
      break;

    case value >= 10 && value <= 99:
      message = "2 digits long";
      break;

    case value >= 100:
      message = "big";
      break;
  }

  console.log(`The value is ${message}`);
};

useSwitch(24); // The value is 2 digits long.

而不是为switch语句提供实际变量，我们只是传递true。这样，我们实质上使它成为一个大if-else选择。是否应使用它仅取决于您的个人喜好或所遵循的代码准则。如果您发现它比if-else链条更具可读性，那就去买它。两种解决方案的性能大致相同。

4.字符串化函数

接下来，我们有一些本身并不是真正的技巧。对函数进行字符串化是您很长时间以来最了解的功能。相反，我想让您知道这种功能的一些有趣用例。

const func = () => {
  console.log("This is a function");
}
const stringifiedFunc = `${func}`; /* `() => {
  console.log("This is a function");
}` */

首先快速看一下语法方面。您应该知道，当您将任何JS类型的值转换为字符串时，.toString()都会调用一个特殊方法。您可以使用此事实来实现此方法的自己的版本，并以不同的方式处理将JS值转换为字符串的情况。可以单独考虑这是一个技巧。;）无论如何，我想说的是，您可以将值（包括函数）转换为带有ES6模板文字的字符串（如示例中所示），方法是将它们与空字符串文字（""）串联，或者仅通过调用该.toString()方法直接。

现在，让我们回到函数。我想指出，您不能依赖结果字符串来包含函数编写时的所有代码。例如，它仅来自ES2019（当前为ECMAScript标准的最新版本），其.toString()目的是在结果字符串中包含函数体内的所有注释和空格。您可以我之前的一篇文章中阅读有关ES2019功能的更多信息。无论如何，考虑到所有这些，对函数进行字符串化怎么可能甚至有用？

不要搜索太多，我想引用一个我最近的副项目中使用的巧妙技巧。想象一下，可以通过调用一个函数来创建一种节点。该函数将另一个函数用作参数，然后运行该参数以配置新节点。对于包含相同语句的函数，结果节点相同。

可悲的是，创建新节点是一个缓慢的过程（尤其是考虑大量节点时），并且您至少要最小化要创建的节点数。为此，您可以例如创建一个“缓存”对象，在该对象中通过其字符串化的config函数存储所有已创建的节点，以防止进行任何重复调用-有趣吗？

当然，即使是很小的空格或注释，基于字符串的基于函数的ID也会被认为是不同的。您可以通过一些附加的字符串处理来解决它，但是这会忽略我们试图实现的所有性能改进。

但是，只要配置功能允许，您就不能容忍对象键。您可以通过简单地对字符串化函数进行哈希处理来轻松解决此问题-它不会在性能上花费很多。

// ...
const hash = value => {
  let hashed = 0;

  for (let i = 0; i < value.length; i += 1) {
    hashed = (hashed << 5) - hashed + value.charCodeAt(i);
    hashed |= 0;
  }

  return `${hashed}`;
};
const hashedFunc = hash(stringifiedFunc); // "-1627423388"

我知道我刚刚描述的内容似乎过于具体，无法应用于更一般的用例。当然可以，但是我只是想给您一个现实的例子，说明这种技巧给您带来的可能性。

3.可调用对象

可调用对象，具有属性的函数或任何您想调用的对象都是一个非常简单的想法，可以很好地演示JavaScript的多功能性。

const func = () => {
  // ...
};
func.prop = "value";
console.log(func.prop); // "value"

上面的代码段对您来说似乎没有什么特别。您可以在几乎任何JS对象保存自己的属性，除非它与使用说明，否则.freeze()，.seal()或.preventExtensions()方法。上面的函数现在既可以用作常规函数，也可以用作包含某种数据的对象。

上面的代码片段看起来并不完美。将属性分配给给定的函数可能会随着时间的推移而感到重复和混乱。让我们尝试改变它！

const func = Object.assign(() => {
    // ...
}, {
  prop: "value"
});
console.log(func.prop); // "value"

现在，我们正在使用该Object.assign()方法来使我们的代码看起来更好。当然，此方法仅在与ES6兼容的环境中（或与Transpiler一起使用）可用，但是，由于我们还在此处使用箭头功能，因此我认为这是理所当然的。

2.词法绑定的类方法

假设我们有一个包含许多字段和方法的类。您可以想象自己在这种情况下，不是吗？如果在给定的时刻仅需要所有类属性和方法的一小部分怎么办？也许您可以使用ES6 解构分配来使代码看起来更好？可悲的是，这并不容易-看一下。

class Example {
  method() {
    console.log(this);
  }
}

const instance = new Example();
const { method } = instance;

method(); // undefined

如您所见，在提取方法之后，将value this更改为undefined。这是预期的行为-的价值this是运行时绑定和方式和地点，你的函数被调用在确定我在讨论这个。我以前的帖子。

有一个办法解决，但是- .bind()。

class Example {
    constructor() {
        this.method = this.method.bind(this);
    }
  method() {
    console.log(this);
  }
}

const instance = new Example();
const { method } = instance;

method(); // Example {}

现在，我们的代码可以按预期工作，尽管它需要添加类构造函数，并因此增加了几行代码。我们可以缩短时间吗？

class Example {
  method = () => {
    console.log(this);
  }
}
// ...

看来我们已经做到了！在您的类中具有按词法绑定的方法的简便快捷方法。上面的语法可最新的常绿浏览器中使用，并在必要时可以进行编译，请尽情使用！

1.从构造函数返回

此列表上的最后一个条目也与类相关。您可能听说过从构造函数返回自定义值的可能性。这不是很受欢迎或推荐的做法，但是它可以使您获得一些有趣的结果。还记得我之前提出的缓存节点的先前示例吗？让我们以此为基础！

// ...
const cache = {};

class Node {
  constructor(config) {
    const id = hash(`${config}`);

    if (cache[id]) {
      return cache[id];
    } else {
      cache[id] = this;
      config();
    }
  }
}

const node = new Node(() => {});
const nodeReference = new Node(() => {});
const secondNode = new Node(() => {
  console.log("Hello");
});

console.log(node === nodeReference, node === secondNode); // true, false

我们的节点现在具有类的形式，并且像以前一样，可以使用字符串化和哈希配置函数对其进行缓存。看到所有片段融合在一起真是太好了！

新鲜玩意？

所以，仅此而已。我知道这不是您见过的最长的一个，但是，嘿，至少我设法使您感兴趣，对吗？无论如何，请在评论部分让我知道您不知道上述哪些技巧？另外，您还可以在这种文章中分享您的意见，如果您想查看更多文章，请与我们分享。;）

公告

最后，我很快宣布了一个消息-我正在建立自己的Reddit社区！它被称为r / Areknawo，我希望它成为这个博客（像您这样的博客）的读者的地方，以讨论各种帖子，博客相关的内容以及其他与Web开发，设计或技术相关的内容。如果您想表达您的支持，只需去那里，成为会员，然后赶紧离开。;）

因此，如果您喜欢此博客，请考虑在Twitter，Facebook或Reddit上关注我，以获取最新内容。如果您喜欢时事通讯，则在帖子下方可以使用一种表格来注册。与往常一样，感谢您阅读本文，并祝您愉快！

---

机翻搬运
没有公众号需要你关注