プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

青灯夜游
リリース: 2021-05-17 09:41:51
転載
2074 人が閲覧しました

この記事では、プロのようにコードを書くのに役立つ 20 の JavaScript ワンライナーを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

JavaScript は成長と発展を続けています。

JavaScript は最も簡単に始めることができる言語の 1 つであり、したがって市場に新しい言語であるためです テクノロジーオタクになる ドアを開けました。 (疑問符の顔?)

確かに、JavaScript では多くの素晴らしいことができます。学ぶべきことはまだたくさんあります。

そして、JavaScript を初めて使用する場合でも、プロの開発者である場合でも、何か新しいことを学ぶことは常に良いことです。

この記事では、作業効率の向上とコードのデバッグに役立つ、非常に役立つワンライナー (20 件) をまとめました。

1 行のコードとは何ですか?

ワンライナーとは、たった 1 行のコードで特定の機能を実行するコーディング手法です。

01 - ブール値をランダムに取得する

この関数は、Math.random() メソッドを使用してブール値 (true または false) を返します。
Math.random 0 から 1 までの乱数を作成し、それが 0.5 より大きいか小さいかを確認します。
これは、正解するか不正解になる確率が 50/50 であることを意味します。

プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

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

console.log(getRandomBoolean());
// a 50/50 chance of returning true or false
ログイン後にコピー

02 - 日付が週末であるかどうかを確認する

この機能を使用すると、指定された日付が平日であるかどうかを確認できます。または週末。

プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const isWeekend = (date) => [0, 6].indexOf(date.getDay()) !== -1;

console.log(isWeekend(new Date(2021, 4, 14)));
// false (Friday)
console.log(isWeekend(new Date(2021, 4, 15)));
// true (Saturday)
ログイン後にコピー

03 - 数値が偶数か奇数かを確認する

数値が偶数か奇数かを確認する単純なユーティリティ関数です。

プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const isEven = (num) => num % 2 === 0;

console.log(isEven(5));
// false
console.log(isEven(4));
// true
ログイン後にコピー

04-配列内の一意の値を取得する (配列重複排除)

配列からすべての重複値を削除する非常に簡単な方法配列 。この関数は、配列を Set に変換し、配列を返します。

プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const uniqueArr = (arr) => [...new Set(arr)];

console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5]));
// [1, 2, 3, 4, 5]
ログイン後にコピー

05-変数が配列であるかどうかの確認

変数が配列であるかどうかを確認するクリーンで簡単な方法。

もちろん、他の方法も可能です

プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const isArray = (arr) => Array.isArray(arr);

console.log(isArray([1, 2, 3]));
// true
console.log(isArray({ name: 'Ovi' }));
// false
console.log(isArray('Hello World'));
// false
ログイン後にコピー

06-2 つの数値の間の乱数を生成します

これはは 2 つの数値を引数として受け取り、それら 2 つの数値の間で乱数を生成します。

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

console.log(random(1, 50));
// could be anything from 1 - 50
ログイン後にコピー

07 - ランダムな文字列 (一意の ID?) を生成します。

おそらく 一時の一意の ID が必要です。外出先で使用できるトリックを次に示します。ランダムな文字列。

プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const randomString = () => Math.random().toString(36).slice(2);

console.log(randomString());
// could be anything!!!
ログイン後にコピー

08-ページの先頭までスクロールします

window.scrollTo() メソッドは # を置きます## X および Y 座標までスクロールします。 ゼロとゼロに設定すると、ページの一番上までスクロールします。

プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const scrollToTop = () => window.scrollTo(0, 0);

scrollToTop();
ログイン後にコピー

09 - ブール値の切り替え

ブール値の切り替えは、さまざまな方法で解決できる非常に基本的なプログラミングの問題の 1 つです。

if ステートメントを使用してブール値に設定する値を決定する代わりに、関数を使用できます。現在の値を反転します。
演算子。

プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

// bool is stored somewhere in the upperscope
const toggleBool = () => (bool = !bool);
//or
const toggleBool = b => !b;
ログイン後にコピー

10-2 つの変数の交換

以下のコードは、3 番目の変数を使用せず、1 行のコードのみを使用して 2 つの変数を交換します。変数を使用する簡単な方法の 1 つ。


プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

[foo, bar] = [bar, foo];
ログイン後にコピー

11-2 つの日付の間の日数を計算する

2 つの日付の間の日数を計算するには、

まず最初に2 つの日付間の絶対値を見つけて、それを 86400000 (1 日のミリ秒数に等しい) で除算し、最後に結果を四捨五入して返します。

1プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const daysDiff = (date, date2) => Math.ceil(Math.abs(date - date2) / 86400000);

console.log(daysDiff(new Date('2021-05-10'), new Date('2021-11-25')));
// 199
ログイン後にコピー

12 - テキストをクリップボードにコピーします

PS:

navigator.clipboard が存在するかどうかを確認するチェックを追加する必要がある場合があります。 .writeText

1プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text);
};
ログイン後にコピー

13 - 複数の配列をマージするさまざまな方法

配列をマージするには 2 つの方法があります。その 1 つは、

concat メソッドを使用することです。もう 1 つはスプレッド演算子 (#…) を使用します。

PS: 「設定」オブジェクトを使用して、最終的な配列から何かをコピーすることもできます。


1プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

// Merge but don't remove the duplications
const merge = (a, b) => a.concat(b);
// Or
const merge = (a, b) => [...a, ...b];

// Merge and remove the duplications
const merge = [...new Set(a.concat(b))];
// Or
const merge = [...new Set([...a, ...b])];
ログイン後にコピー

14-获取javascript语言的实际类型

人们有时会使用库来查找JavaScript中某些内容的实际类型,这一小技巧可以节省你的时间(和代码大小)。

1プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const trueTypeOf = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
};

console.log(trueTypeOf(''));
// string
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf());
// undefined
console.log(trueTypeOf(null));
// null
console.log(trueTypeOf({}));
// object
console.log(trueTypeOf([]));
// array
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf(() => {}));
// function
ログイン後にコピー

15-在结尾处截断字符串

需要从头开始截断字符串,这不是问题!

1プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const truncateString = (string, length) => {
  return string.length < length ? string : `${string.slice(0, length - 3)}...`;
};

console.log(
  truncateString(&#39;Hi, I should be truncated because I am too loooong!&#39;, 36),
);
// Hi, I should be truncated because...
ログイン後にコピー

16-从中间截断字符串

从中间截断字符串怎么样?

该函数将一个字符串作为第一个参数,然后将我们需要的字符串大小作为第二个参数,然后从第3个和第4个参数开始和结束需要多少个字符

プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const truncateStringMiddle = (string, length, start, end) => {
  return `${string.slice(0, start)}...${string.slice(string.length - end)}`;
};

console.log(
  truncateStringMiddle(
    &#39;A long story goes here but then eventually ends!&#39;, // string
    25, // 需要的字符串大小
    13, // 从原始字符串第几位开始截取
    17, // 从原始字符串第几位停止截取
  ),
);
// A long story ... eventually ends!
ログイン後にコピー

17-大写字符串

好吧,不幸的是,JavaScript没有内置函数来大写字符串,但是这种解决方法可以实现。

1プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

console.log(capitalize(&#39;hello world&#39;));
// Hello world
ログイン後にコピー

18-检查当前选项卡是否在视图/焦点内

此简单的帮助程序方法根据选项卡是否处于视图/焦点状态而返回truefalse

1プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const isTabInView = () => !document.hidden;  // Not hidden

isTabInView();
// true/false
ログイン後にコピー

19-检查用户是否在Apple设备上

如果用户使用的是Apple设备,则返回true

1プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice);
// true/false
ログイン後にコピー

20-三元运算符

当你只想在一行中编写if..else语句时,这是一个很好的代码保护程序。

プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

// Longhand
const age = 18;
let greetings;

if (age < 18) {
  greetings = &#39;You are not old enough&#39;;
} else {
  greetings = &#39;You are young!&#39;;
}

// Shorthand
const greetings = age < 18 ? &#39;You are not old enough&#39; : &#39;You are young!&#39;;
ログイン後にコピー

21-短路评估速记

在将变量值分配给另一个变量时,可能要确保源变量不为null,未定义或为空。
可以编写带有多个条件的long if语句,也可以使用短路评估。

2プロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。

// Longhand
if (name !== null || name !== undefined || name !== &#39;&#39;) {
  let fullName = name;
}

// Shorthand
const fullName = name || &#39;buddy&#39;;
ログイン後にコピー

希望对你有所帮助!

英文原文地址:https://dev.to/ovi/20-javascript-one-liners-that-will-help-you-code-like-a-pro-4ddc

更多编程相关知识,请访问:编程入门!!

以上がプロのようにコーディングできるよう、20 以上の JavaScript ワンライナーを学習してください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート