17 個の JavaScript ワンライナー

17 個の JavaScript ワンライナー

1. DOMとBOM関連

1. 要素にフォーカスがあるかどうかを確認する

const hasFocus = (ele) => ele === document.activeElement;


2. 要素の兄弟ノードをすべて取得する

const 兄弟 = (ele) => [].slice.call(ele.parentNode.children).filter((child) => child !== ele);

// または const siblings = (ele) => [...ele.parentNode.children].filter((child) => child !== ele);


3. 選択したテキストを取得する

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


4. 前のページに戻る

履歴を戻す
// または history.go(-1);


5. すべてのクッキーを消去する

const clearCookies = () => document.cookie
  。スプリット(';')
  .forEach((c) =>(document.cookie = c.replace(/^ +/, '')
  .replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`)));


6. クッキーをオブジェクトに変換する

const クッキー = document.cookie
。スプリット(';')
.map((item) => item.split('='))
.reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {});

2. 配列関連

7. 2つの配列を比較する

// `a` と `b` は配列です const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
// または const isEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);

// 例 isEqual([1, 2, 3], [1, 2, 3]); // true
isEqual([1, 2, 3], [1, '2', 3]); // 偽


8. オブジェクトの配列をオブジェクトに変換する

const toObject = (arr, key) => arr.reduce((a, b) => ({ ...a, [b[key]]: b }), {});
// または const toObject = (arr, key) => Object.fromEntries(arr.map((it) => [it[key], it]));

// 例 toObject([
  { id: '1'、名前: 'アルファ'、性別: '男性' },
  { id: '2'、名前: 'ブラボー'、性別: '男性' },
  { id: '3'、名前: 'チャーリー'、性別: '女性' }]、
'id');

/*
{
'1': { id: '1', 名前: 'アルファ', 性別: '男性' },
'2': { id: '2', 名前: 'ブラボー', 性別: '男性' },
'3': { id: '3'、名前: 'チャーリー'、性別: '女性' }
}
*/

9. オブジェクトの配列のプロパティによるカウント

const countBy = (arr, prop) => arr.reduce((prev, curr) => ((prev[curr[prop]] = ++prev[curr[prop]] || 1), prev), {});

// 例 countBy([
{ ブランチ: 'audi'、モデル: 'q8'、年: '2019' },
{ ブランチ: 'audi'、モデル: 'rs7'、年: '2020' },
{ ブランチ: 'フォード'、モデル: 'マスタング'、年: '2019' },
{ ブランチ: 'フォード'、モデル: 'エクスプローラー'、年: '2020' },
{ ブランチ: 'bmw'、モデル: 'x7'、年: '2020' },
]、
'支店');

// { 'アウディ': 2、 'フォード': 2、 'BMW': 1 }

10. 配列が空かどうか確認する

const isNotEmpty = (arr) => Array.isArray(arr) && Object.keys(arr).length > 0;

// 例 isNotEmpty([]); // false
isNotEmpty([1, 2, 3]); // 真

3. オブジェクト関連

11. 複数のオブジェクトが等しいかどうかを確認する

const isEqual = (...objects) => objects.every((obj) => JSON.stringify(obj) === JSON.stringify(objects[0]));

// 例 isEqual({ foo: 'bar' }, { foo: 'bar' }); // true
isEqual({ foo: 'bar' }, { bar: 'foo' }); // false


12. オブジェクトの配列から属性値を抽出する

const pluck = (objs, property) => objs.map((obj) => obj[property]);

// 例 pluck([
  { 名前: 'ジョン'、年齢: 20 },
  { 名前: 'スミス'、年齢: 25 }、
  { 名前: 'ピーター'、年齢: 30 },
]、
'名前');

// ['ジョン', 'スミス', 'ピーター']

13. オブジェクトのキーと値を反転する

const invert = (obj) => Object.keys(obj).reduce((res, k) => Object.assign(res, { [obj[k]]: k }), {});
// または const invert = (obj) => Object.fromEntries(Object.entries(obj).map(([k, v]) => [v, k]));

// 例 invert({ a: '1', b: '2', c: '3' }); // { 1: 'a', 2: 'b', 3: 'c' }

14. オブジェクトから空および未定義のプロパティをすべて削除する

const 削除NullUndefined = (obj) =>
  オブジェクト.entries(obj).reduce(
    (a, [k, v]) => (v == null ? a : ((a[k] = v), a)),
    {},
  );

// または const removeNullUndefined = (obj) =>
  オブジェクト.エントリ(obj)
    .filter(([_, v]) => v != null)
    .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});

// または const removeNullUndefined = (obj) =>
  Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null));

// 例removeNullUndefined({
  foo: null、
  バー: 未定義、
  ファズ: 42
});
// { ファズ: 42 }

15. オブジェクトをプロパティで並べ替える

定数ソート = (obj) =>
  オブジェクト.keys(obj)
    。選別()
    .reduce((p, c) => ((p[c] = obj[c]), p), {});

// 例 const colors = {
  白: '#ffffff',
  黒: '#000000',
  赤: '#ff0000',
  緑: '#008000',
  青: '#0000ff',
};
並べ替え(色);
/*
{
  黒: '#000000',
  青: '#0000ff',
  緑: '#008000',
  赤: '#ff0000',
  白: '#ffffff',
}
*/

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

定数isPromise = (obj) =>
  !!オブジェクト &&
  (typeof obj === 'オブジェクト' || typeof obj === '関数') &&
  typeof obj.then === 'function';


17. オブジェクトが配列かどうかを確認する

Array.isArray() メソッドは、次のコードで obj をオーバーライドします。

JavaScript ワンラインプログラムに関するこの記事はこれで終わりです。JavaScript ワンラインプログラムに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 18 個のキラー JavaScript ワンライナー
  • 開発でよく使われる JavaScript の 1 行コード 25 個 (要約)
  • 1行のJSでモバイルマネー形式の入力ルールを実装

<<:  無効にするとフォームの入力が送信できない問題の解決方法

>>:  HTML の入力の readonly 属性と disabled 属性の違いについて簡単に説明します。

推薦する

DockerはMysql、.Net6、Sqlserverなどのコンテナをデプロイします

目次CentOS 8にDockerをインストールする1. yumを更新する2. containerd...

Vue3.0 における Ref と Reactive の違いの詳細な分析

目次参照と反応参照反応的RefとReactiveの違いshallowRef と shallowRea...

Docker に Solr 8.6.2 をインストールし、中国語の単語セグメンターを構成する方法

1. 環境バージョンDocker バージョン 19.03.12セントロス7ソル8.6.2 2. Do...

Centos7 で ZooKeeper3.4 ミドルウェアを構築するための一般的なコマンドの概要

1.ダウンロードして解凍する1. Zookeeperの紹介分散サービス フレームワークとして、Zoo...

Mybatis マッパー動的プロキシの原理の分析

序文動的プロキシの原理を説明する前に、まず、mybatis を統合した後の dao 層の 2 つの実...

Linux システムによって報告される xfs_vm_releasepage 警告問題に対処する方法

問題の説明最近、いくつかのマシンで、一日のさまざまな時間に次の警告メッセージが表示されました。 3月...

Google ブラウザのラベルと入力間のスペースに関する小さな問題

最初にコード、次にテキストコードをコピーコードは次のとおりです。 <!DOCTYPE html...

IP アドレス経由で MySql にアクセスする方法

1. mysqlにログインします。 mysql -u ルート -h 127.0.0.1 -p 2. ...

ボタンをクリックして画像を切り替える JavaScript

この記事の例では、ボタンをクリックすることで画像を切り替えることを実現するJavaScriptの具体...

Layui は複数条件クエリのサンプルコードを実装します

最近ファイルシステムを作ったのですが、フィールドが多すぎることに気づきましたページングを使用した複数...

Reactにおける不変値の説明

目次不変の値とは何ですか?不変の値を使用するのはなぜですか? Reactのパフォーマンス最適化は不変...

JavaScript Canvas は動的なワイヤーフレーム効果を描画します

この記事では、JavaScript Canvasの動的なワイヤーフレーム効果を描画する具体的なコード...

KVM ベースの SRIOV パススルー構成とパフォーマンス テストの詳細な説明

SRIOVの導入、VFパススルー構成、パケット転送速度性能テスト目次1. SRIOVの紹介2. 環境...

Windows 10 と MySQL 5.5 のインストールとインストールなしの使用の詳細なチュートリアル (画像とテキスト)

この記事では、Windows 10環境でのMySQL 5.5のインストールと使用方法を紹介します。リ...

rpm を使用して指定されたバージョンの docker (1.12.6) をインストールする詳細な手順

1. 理由システムが Centos7.3 の場合、yum install docker を使用して直...