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

2019-11-01 admin

原文在 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上关注我,以获取最新内容。如果您喜欢时事通讯,则在帖子下方可以使用一种表格来注册。与往常一样,感谢您阅读本文,并祝您愉快!


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

[转载]原文链接:https://segmentfault.com/a/1190000020883149

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78765.html

文章标题:5个有趣且不必要的 JavaScipt 技巧

相关文章
JavaScript优化以及前段开发小技巧
&lt;/div&gt; &lt;script&gt; var content = ‘’; for(i=1; i&lt;1000000; i++) content += ‘写入页面’; document.getElementById(‘co...
2017-03-18
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
变量转换 var myVar = &quot;3.14159&quot;, str = &quot;&quot;+ myVar,&#x2F;&#x2F; to string int = ~~myVar, &#x2F;&#x2F; ...
2017-03-24
提高JavaScript执行效率的23个实用技巧
本文向大家分享23种JavaScript提高执行效率的小技巧、最佳实践等非常实用的内容。当然JavaScript的实用技巧不止这些,还有很多即好玩又能提高程序运行效率的技巧,以后我们会继续分享给大家。 文中所提供的代码片段都已经过最新版的C...
2017-03-14
提高Web性能的前端优化技巧总结
这篇文章讲述可以帮助 改善优化前端的技术,非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN,以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升。 一. 清理 HTML 文档 HTML,即超文本标记语言,几乎...
2017-03-15
学几招 vscode 技巧
俗话说「磨刀不误砍柴工」,对于开发者来说,一款优秀的 IDE 或者 text editor 能有效提升工作效率。Visual Studio Code (下文中简称 vscode)因其强大的功能,较快的运行速度以及众多的扩展,在开发者中相当流...
2018-05-03
vue指令只能输入正数并且只能输入一个小数点
最近在做一个金额查询,验证的时候总是出现很多问题,如输入-号后,input框里是没有了,但是在model里还是绑定了,提交的时候就会报错,真的是让人很是郁闷,小数点也是input框过滤掉了,但是提交的时候也会出现。不过经过努力终于找到了一种...
2018-06-08
多边形,梯形盒阴影css实现技巧
一般情况下,我们给块状元素(四边形)添加阴影样式,直接用css box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);就可以了,但是总有一些需求是那么的特别,例如下图: 要求给这样的梯形盒外围加阴影,第一眼...
2018-03-20
基于 React 的单页应用优化技巧
本文内容是基于项目前端框架优化而提炼出的一些比较实用的单页优化小技巧,在此做一下沉淀,希望能帮到在这方面摸索的同学。 前端框架是在 React 16+、react-router v4、webpack v3、Next1.x 之上构建。 Nex...
2018-04-08
玩转JavaScript,这些技巧值得你拥有!
oncontextmenu=&quot;window.event.returnValue=false&quot; 将彻底屏蔽鼠标右键 &lt;table border oncontextmenu=return(false)&gt; &l...
2018-11-16
防抖动处理和节流 小技巧
1. 简单的防抖动处理,一秒内点击一次 var timer = null; $(&#x27;.coupon&#x27;).click(function(){ if (timer) { return; } timer = ...
2018-06-13
回到顶部