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 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 無効にするとフォームの入力が送信できない問題の解決方法
>>: HTML の入力の readonly 属性と disabled 属性の違いについて簡単に説明します。
目次1.スリープ機能2.タイムアウトを設定する3. 約束4. 非同期待機5. 1秒後に出力1、2秒後...
目的: MySQL 集計関数のネストされた使用集計関数は直接ネストできません。例: max(coun...
require メソッドの読み込みルールキャッシュからの読み込みを優先するコアモジュールパス形式のモ...
Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...
protobufの簡単な紹介Protobuf は、Google のオープンソースのシリアル化プロトコ...
パブリッシュ/サブスクライブとは何ですか?例を挙げてみましょう。あなたは服を買うために店に行きます。...
この記事の例では、タブ効果を記述するためのJSの具体的なコードを参考までに共有しています。具体的な内...
現代の Web ビジュアル デザインは、初期の情報の積み重ねから、その後のグラフィックスと抽象化、そ...
/******************** * 仮想ファイルシステム VFS **********...
ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...
目次導入リンク始めるコードを読み進めてくださいプロキシ設定傍受を要求する異なるプレフィックスを持つイ...
このブログは、MySQL8.0.15 を正常にインストールしたことを思い出すために書きました。以前は...
jQuery 入門jQuery ライブラリは、簡単なマークアップ行を使用して Web ページに追加で...
ソース ファイルを右クリックすると、次のコードが見つかります。 1. CSSを使用してFirefox...
DockerにNginxをインストールするNginx は、IMAP/POP3/SMTP サービスも提...