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 属性の違いについて簡単に説明します。
目次CentOS 8にDockerをインストールする1. yumを更新する2. containerd...
目次参照と反応参照反応的RefとReactiveの違いshallowRef と shallowRea...
1. 環境バージョンDocker バージョン 19.03.12セントロス7ソル8.6.2 2. Do...
1.ダウンロードして解凍する1. Zookeeperの紹介分散サービス フレームワークとして、Zoo...
序文動的プロキシの原理を説明する前に、まず、mybatis を統合した後の dao 層の 2 つの実...
問題の説明最近、いくつかのマシンで、一日のさまざまな時間に次の警告メッセージが表示されました。 3月...
最初にコード、次にテキストコードをコピーコードは次のとおりです。 <!DOCTYPE html...
1. mysqlにログインします。 mysql -u ルート -h 127.0.0.1 -p 2. ...
この記事の例では、ボタンをクリックすることで画像を切り替えることを実現するJavaScriptの具体...
最近ファイルシステムを作ったのですが、フィールドが多すぎることに気づきましたページングを使用した複数...
目次不変の値とは何ですか?不変の値を使用するのはなぜですか? Reactのパフォーマンス最適化は不変...
この記事では、JavaScript Canvasの動的なワイヤーフレーム効果を描画する具体的なコード...
SRIOVの導入、VFパススルー構成、パケット転送速度性能テスト目次1. SRIOVの紹介2. 環境...
この記事では、Windows 10環境でのMySQL 5.5のインストールと使用方法を紹介します。リ...
1. 理由システムが Centos7.3 の場合、yum install docker を使用して直...