11 の驚くべき JavaScript ワンライナー!

プロの開発者に好印象を与えたい場合はどうしますか?それは簡単です。単純なロジックを使用し、できるだけ少ないコードを使用して、複雑な問題を解決します。 ES6 アロー関数の導入により、エレガントでシンプルに見える単一行のコードを作成することができます。

この記事では、珍しくて強力なワンライナーを 11 個紹介します。準備はできたか？まずは最初のものから始めましょう！

1. 文字列内の文字数を取得する

文字数を取得するは、さまざまな状況で役立つ便利なユーティリティです。これを使用して、単語の後に続くスペースの数を取得したり、文字列内の特定の区切り文字の数を取得したりできます。

const characterCount = (str, char) => str.split(char).length - 1

アイデアは非常にシンプルです。渡された引数 char を使用して文字列を分割し、返された配列の長さを取得します。文字列が分割されるたびに、スプリッターよりも 1 つ多くの文字列が存在するため、1 を減算すると、characterCount の 1 行が得られます。

2. オブジェクトが空かどうかを確認する

オブジェクトが空であることを確認することは、実際には、思っているよりもはるかに困難です。オブジェクトが {} に等しいかどうかを確認するたびに、オブジェクトが空であっても false が返されます。

幸いなことに、次の 1 行のコードはまさに私たちが望んでいることを実行します。

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object

この行では、オブジェクトのキーの長さが 0 に等しいかどうか、および渡されたパラメータが実際のオブジェクトであるかどうかを確認します。

3. 一定時間待ってから実行します

この 1 行のコードでは、非同期プログラミングをいくつか紹介します。考え方はシンプルです。

コードを実行するときに、一定の時間待機する場合は、待機に関するワンライナーを次に示します。

##

const wait = async (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

待機中のワンライナー-liner では、Promise を作成し、setTimeout 関数を使用して一定時間後に解決します。

4. 2 つの日付の日の差を取得する

Web アプリケーションを開発する場合、多くの非常に混乱を招く概念があるため、日付が最も混乱する部分になることがよくあります。計算違い。

これは、2 つの日付間の日数の差を計算する強力なワンライナーです。しかし、やるべきことはまだあります。私と同じように、独自の単一行を作成して、月ごと、年ごとの差異などを計算することができます。

const daysBetween = (date1, date2) => Math.ceil(Math.abs(date1 - date2) / (1000 * 60 * 60 * 24))

この一行の背後にあるロジックは理解するのが簡単です。 2 つの日付を減算すると、戻り値はミリ秒単位の差になります。ミリ秒を日に変換するには、それぞれミリ秒、秒、分、時間で割る必要があります。

5. 別の URL へのリダイレクト

実際の Web サイトを作成したことがあるなら、認証ロジックに遭遇したことがあるはずです。たとえば、管理者以外のユーザーは /admin ルートにアクセスできないようにする必要があります。ユーザーが試行した場合は、別の URL にリダイレクトする必要があります。

このワンライナーは、上で述べた状況では問題なく機能しますが、他にも多くの使用例が見つかると思います。

const redirect = url => location.href = url

location は、グローバル ウィンドウ オブジェクトのメソッドです。href 属性を設定すると、ユーザーがリンクをクリックしたときと同じように動作します。

6. デバイスのタッチ サポートを確認する

インターネットに接続できるデバイスが増えるにつれて、応答性の高い Web サイトを作成する必要性がますます重要になっています。高い。 20 年前、開発者は Web サイトのデスクトップ バージョンを検討していましたが、現在では Web トラフィックの 50% 以上がタッチ デバイスから来ています。

したがって、デバイスのタッチ サポートに基づいて何らかのアクションを実行することは、非常に重要な概念です。

const touchSupported = () => ('ontouchstart' in window || DocumentTouch && document instanceof DocumentTouch)

この行では、ドキュメントがタッチスタート イベントをサポートしているかどうかを確認しています。

7. 要素の後に HTML 文字列を挿入します

Web アプリケーションを開発する場合、JavaScript を使用して DOM を更新するのが一般的です。仕事を遂行するための基本的な方法はいくつかありますが、物事が複雑になると、克服するのが困難になる可能性があります。

これは、HTML 要素の直後に HTML 文字列を挿入する 1 行のコードです。数分考えてグーグル検索すれば、このワンライナーの以前のバージョンを見つけることができると思います。

const insertHTMLAfter = (html, el) => el.insertAdjacentHTML('afterend', html)

8. 配列のシャッフル開発中の一連のデータのシャッフルは、いつでも遭遇する可能性のある一般的な状況です。残念ながら、JavaScript には次のような問題があります。配列に対する組み込みのシャッフル方法はありません。ただし、毎日使えるシャッフル ワンライナーを次に示します:

const shuffle = arr => arr.sort(() => 0.5 - Math.random())

它利用数组的排序方法，在数组的前一个元素之前或之后进行随机排序。

9、在网页上获取选定的文本

浏览器在全局 windows 对象上有一个名为 getSelection 的内置方法。

使用此方法，你可以创建一个单行，返回网页上突出显示或选定的文本。

const getSelectedText = () => window.getSelection().toString()

10、 获取一个随机布尔值

在编程时，尤其是在编写游戏时，有时你会想要随机采取行动。在这种情况下，下面的单行非常方便。

const getRandomBoolean = () => Math.random() >= 0.5

上面的单行有 50/50 的机会返回 true 或 false。因为生成的随机数大于 0.5 的概率等于较小的概率。

但是，例如，如果你想获得一个概率为 70% 错误的随机布尔值，那么，你可以简单地将 0.5 更改为 0.7，依此类推。

11、计算数组的平均值

可以使用多种方法计算数组的平均值。但道理对所有人都是一样的。你必须获得数组及其长度的总和；然后除法给出平均值。

const average = (arr) => arr.reduce((a, b) => a + b) / arr.length

在平均单行中，我们使用 reduce 来获取一行中的数组的总和，而不是使用循环。然后，我们将其除以数组长度，这是数组的平均值。

写在最后

今天的内容，就是这样，现在，我想你已经了解了 11 个简单但功能强大的 JavaScript 单行程序。我试着选择那些不是很受欢迎和知名度的东西，这样你就可以学习新东西。我每天都在使用它们，我想对你也会有所帮助。

感谢你的阅读，如果你喜欢它，一定要点赞，如果你对这篇文章有什么想说的，请在留言区告诉我们。

翻译： 杨小二

英文：

https://betterprogramming.pub/11-rare-javascript-one-liners-that-will-amaze-you-331659832301