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 属性の違いについて簡単に説明します。
この記事では、左ボタンと右ボタンをクリックすることで画像を切り替えるjQueryの具体的なコードを例...
背景開発中、特定の状況でビジネス ロジックをバッチ処理するためのスクリプトが必要になる場合があります...
Dockerfile を使用すると、ユーザーはカスタム イメージを作成できます。基本構造Docker...
1. 正規表現マッチング大文字と小文字を区別するマッチングの場合 ~ ~*は大文字と小文字を区別しな...
この記事では、参考までに簡単なHTMLと音楽プレーヤーの制作コードを紹介します。具体的な内容は以下の...
ユーザーグループLinux では、すべてのユーザーはグループに属する必要があり、Linux には次の...
目次1. 需要2. 解決策3. 最初の改善4.砂糖を加える5. 理解不能6. 問題点7. オブジェク...
/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...
最近、プロジェクトの過程で問題に遭遇しました。メニューバーを常に上部に表示し、後続の要素をその下に表...
準備1. 環境の説明:オペレーティング システム: Windows Server 2019 PHP ...
序文ウェブサイトのアクセス元をカウントしたい場合は、PHP を使用して情報を取得してデータベースに記...
目次環境仮想マシンバージョンMySQL バージョン事前準備MySQLの実行ステータスを確認するルート...
序文JavaScriptはWebフロントエンドで広く使われている言語の一つであり、Webアプリケーシ...
目次コードの実行に長い時間がかかる場合はどうなりますか? Axiosにはタイムアウト処理機能が搭載さ...
まず、マージン崩壊が発生する 3 つの状況を見てみましょう。 1. 隣接する 2 つのブロックレベル...