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开发,设计或技术相关的内容。如果您想表达您的支持,只需去那里,成为会员,然后赶紧离开。;)

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


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

原文链接:segmentfault.com

上一篇:css超出一行不折行,而是显示省略号
下一篇:关于js中正则表达式

相关推荐

  • 聊聊苹果营销页中几个有趣的交互动画

    前言 前两天在浏览 苹果 16寸 营销页面 的时候,发现了几个比较有意思的交互,心里想着自己虽然是一个穷逼,但是知识是无界限的呀,于是便研究了一波。 (/public/upload/310464f...

    2 天前
  • 用node玩一些有趣的东西好不

    作为前端开发者,我们最常用的语言就是JavaScript了,而用JS来开发页面似乎让我们觉得无聊,听说node可以玩一些后端的东西,于是乎学习了node,但是没有合适而又好玩的demo,没有让我学习下...

    9 个月前
  • 用 canvas 的 getImageData 做点有趣的事

    说明 canvas元素标签强大之处在于可以直接在HTML上进行图形操作,具有极大的应用价值。 canvas 可以实现对图像的像素操作(https://developer.mozilla.org...

    2 年前
  • 浅谈 TypeScript - 使用类编写一个有趣的动画

    除了 TypeScript 本身的特性之外,我们又回到了前端最本质的工作上,在没有使用现代 Web 前端框架的情况下,我们要做一个类似抽屉柜一样的效果。 两周之后,产品 跟 说很希望在列表的旁边...

    2 年前
  • 有趣的闭包

    金三银四搞事季,前端这个近年的热门领域,搞事气氛特别强烈,我朋友小伟最近就在疯狂面试,遇到了许多有趣的面试官,有趣的面试题,我来帮这个搞事 boy 转述一下。 以下是我一个朋友的故事,真的不是我。

    2 年前
  • 有趣的注释,总有你喜欢的那款

    1. 专栏(/blogs) 2. 文章详情 hooper(https://img.javascriptcn.com/9f9a0cf4c6d61698a15ca313c...

    1 年前
  • 有趣的正则表达式

    (https://img.javascriptcn.com/70f280cb27cdc2cb6f8a79c93199df51) regex.jpg 听到正则表达式,大家一定不会陌生。

    2 年前
  • 有趣的CSS弹跳动画

    这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我...

    1 年前
  • 有趣的API—Page Visibility

    语言为技术服务,技术为需求服务。 我们在日常浏览网页的时候,经常会遇到这样的情况,有些页面元素,当你在当前网页的时候,它正常进行,切换到其他页面的时候,或者最小化的时候,它就停了。

    2 个月前
  • 有趣的 JavaScript 格式转换

    原文链接:https://ssshooter.com/201904...(https://ssshooter.com/20190418jsformattransform/) 之前做文件上传和 can...

    10 个月前

官方社区

扫码加入 JavaScript 社区