JSでよく使われるデータ処理方法

JSでよく使われるデータ処理方法

DOM処理

DOM はドキュメントの構造化された表現を提供し、スクリプトを通じてドキュメント構造にアクセスする方法を定義します。実際の目的は、js が html 要素を操作できるようにする仕様を作成することです。 DOM はノードで構成されています。

要素がフォーカスされているかどうかを確認する

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

ユーザーがページの一番下までスクロールしたかどうかを確認する

const isAtBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

要素の兄弟要素をすべて取得する

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

ドキュメントに対する要素の位置を取得します

const getPosition = ele => (r = ele.getBoundingClientRect(), { 
左: r.left + window.scrollX、上: r.top + window.scrollY
 });

// 例
getPosition(document.body); // { 左: 0、上: 0 }

要素を別の要素の後に挿入する

親ノードを挿入する前に、ele を anotherEle に挿入します。

// または
const insertAfter = (ele, anotherEle) => anotherEle.insertAdjacentElement('afterend', ele);

P.S. 他の要素の前に要素を挿入する

親ノードに insertBefore を挿入します。

// または
const insertBefore = (ele, anotherEle) => anotherEle.insertAdjacentElement('beforebegin', ele);

指定されたHTMLを要素の後に挿入します

const insertHtmlAfter = (html, ele) => ele.insertAdjacentHTML('afterend', html);

P.S. 指定されたHTMLを要素の前に挿入します

const insertHtmlBefore = (html, ele) => ele.insertAdjacentHTML('beforebegin', html);

ページの先頭までスクロールします(先頭に戻る)

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

配列

配列の空チェック

// `arr` は配列です
const isEmpty = arr => !Array.isArray(arr) || arr.length === 0;

// 例
isEmpty([]); // 真
isEmpty([1, 2, 3]); // 偽

配列の複製

// `arr` は配列です
const clone = arr => arr.slice(0);

// または
const clone = arr => [...arr];

// または
const clone = arr => Array.from(arr);

// または
const clone = arr => arr.map(x => x);

// または
const clone = arr => JSON.parse(JSON.stringify(arr));

// または
const clone = arr => arr.concat([]);

配列内の最大値のインデックスを見つける

const indexOfMax = arr => arr.reduce((prev, curr, i, a) => curr > a[prev] ? i : prev, 0);

// 例
indexOfMax([1, 3, 9, 7, 5]); // 2
indexOfMax([1, 3, 7, 7, 5]); // 2

付録: 最小値に対応するインデックス

const indexOfMin = arr => arr.reduce((prev, curr, i, a) => curr < a[prev] ? i : prev, 0);

// 例
最小インデックス([6, 4, 8, 2, 10]); // 3
最小インデックス([6, 4, 2, 2, 10]); // 2

配列の交差を取得する

const getIntersection = (a, ...arr) => [...new Set(a)].filter(v => arr.every(b => b.includes(v)));

// 例
getIntersection([1, 2, 3], [2, 3, 4, 5]); // [2, 3]
getIntersection([1, 2, 3], [2, 3, 4, 5], [1, 3, 5]); // [3]

キー別にオブジェクトセットをグループ化する

const groupBy = (arr, key) => arr.reduce((acc, item) => ((acc[item[key]] = [...(acc[item[key]] || []), item]), acc), {});

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

/*
{
    オーディオ: [
        { ブランチ: 'audi'、モデル: 'q8'、年: '2019' },
        { ブランチ: 'audi'、モデル: 'rs7'、年: '2020' }
    ]、
    BMW:
        { ブランチ: 'bmw'、モデル: 'x7'、年: '2020' }
    ]、
    フォード:
        { ブランチ: 'フォード'、モデル: 'マスタング'、年: '2019' },
        { ブランチ: 'フォード'、モデル: 'エクスプローラー'、年: '2020' }
    ]、
}
*/

配列から重複した値を削除する

const removeDuplicate = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));

// 例
removeDuplicate(['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']); // ['h', 'e', 'w', 'r', 'd']

配列内の項目を指定されたキーで並べ替える

const sortBy = (arr, k) => arr.concat().sort((a, b) => (a[k] > b[k]) ? 1 : ((a[k] < b[k]) ? -1 : 0));

// 例
定数人 = [
    { 名前: 'Foo'、年齢: 42 }、
    { 名前: 'バー'、年齢: 24 }、
    { 名前: 'Fuzz'、年齢: 36 }、
    { 名前: 'バズ'、年齢: 32 }、
];
sortBy(人、'年齢');

// 戻り値
// [
// { 名前: 'バー', 年齢: 24 },
// { 名前: 'バズ'、年齢: 32 },
// { 名前: 'Fuzz', 年齢: 36 },
// { 名前: 'Foo'、年齢: 42 },
// ]

方法

URLパラメータをオブジェクトに変換する

const getUrlParams = query => Array.from(new URLSearchParams(query)).reduce((p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v}), {});

// 例
getUrlParams(location.search); // 現在のURLのパラメータを取得する

getUrlParams('foo=Foo&bar=Bar'); // { foo: "Foo", bar: "Bar" }

// 重複キー
getUrlParams('foo=Foo&foo=Fuzz&bar=Bar'); // { foo: ["Foo", "Fuzz"], bar: "Bar" }

URLからパラメータの値を取得する

const getParam = (url, param) => new URLSearchParams(new URL(url).search).get(param);

// 例
getParam('http://domain.com?message=hello', 'message'); // 'hello'

整数にゼロを付ける

const prefixWithZeros = (数値、長さ) => (数値 / Math.pow(10、長さ)).toFixed(長さ).substr(2);

// または
const prefixWithZeros = (number, length) => `${Array(length).join('0')}${number}`.slice(-length);

// または
const prefixWithZeros = (number, length) => String(number).padStart(length, '0');

// 例
プレフィックスウィズゼロ(42, 5); // '00042'

数値を指定された桁数に丸めます

const prefixWithZeros = (数値、長さ) => (数値 / Math.pow(10、長さ)).toFixed(長さ).substr(2);

// または
const prefixWithZeros = (number, length) => `${Array(length).join('0')}${number}`.slice(-length);

// または
const prefixWithZeros = (number, length) => String(number).padStart(length, '0');

// 例
プレフィックスウィズゼロ(42, 5); // '00042'

数値を四捨五入せずに指定された小数点以下の桁数に切り捨てます

const toFixed = (n, fixed) => `${n}`.match(new RegExp(`^-?\\d+(?:\.\\d{0,${fixed}})?`))[0];

// または
const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);

// 例
固定(25.198726354, 1); // 25.1
固定(25.198726354, 2); // 25.19
固定(25.198726354, 3); // 25.198
toFixed(25.198726354, 4); // 25.1987
toFixed(25.198726354, 5); // 25.19872
toFixed(25.198726354, 6); // 25.198726

オブジェクトからすべてのnullおよび未定義のプロパティを削除します

const removeNullUndefined = obj => Object.entries(obj).reduce((a, [k, v]) => (v == null ? a : (a[k] = v, a)), {});

// または
const removeNullUndefined = obj => Object.entries(obj).filter(([_, v]) => v != null).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});

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

// 例
未定義のNullを削除します({
    foo: null、
    バー: 未定義、
    ファズ: 42,
});  

文字列が回文かどうかをチェックする

const isPalindrome = str => str === str.split('').reverse().join('');

// 例
isPalindrome('abc'); // false
isPalindrom('abcba'); // 真

文字列をキャメルケースに変換する

const toCamelCase = str => str.trim().replace(/[-_\s]+(.)?/g, (_, c) => c ? c.toUpperCase() : '');

// 例
toCamelCase('background-color'); // 背景色
toCamelCase('-webkit-scrollbar-thumb'); // WebkitScrollbarThumb
toCamelCase('_hello_world'); // HelloWorld
toCamelCase('hello_world'); // helloWorld

文字列をパスカルケースに変換する

const toPascalCase = str => (str.match(/[a-zA-Z0-9]+/g) || []).map(w => `${w.charAt(0).toUpperCase()}${w.slice(1)}`).join('');

// 例
toPascalCase('hello world'); // 'HelloWorld'
toPascalCase('hello.world'); // 'HelloWorld'
toPascalCase('foo_bar-baz'); // FooBarBaz

HTML 特殊文字のエスケープ

const escape = str => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;').replace(/"/g, '&quot;');

// または
const escape = str => str.replace(/[&<>"']/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[m]);

複数のスペースを1つのスペースに置き換える

// スペース、タブ、改行文字を置き換えます
const replaceSpaces = str => str.replace(/\s\s+/g, ' ');

// スペースのみを置換
const replaceOnlySpaces = str => str.replace(/ +/g, ' ');

// 例
replaceSpaces('this\n is \ta \rmessage'); // 'これはメッセージです'

テキスト文書の行をアルファベット順に並べ替える

const sortLines = str => str.split(/\r?\n/).sort().join('\n');

// 順序を逆にする
const reverseSortedLines = str => str.split(/\r?\n/).sort().reverse().join('\n');

// 例
sortLines(`タデウス・マレン
カリーム・マーシャル
フェルディナンド・バレンタイン
ハサド・リンゼイ
ムフタウベルグ
ノックス・タイソン
カシミール・フレッチャー
コルトン・シャープ
エイドリアン・ロサレス
セオドア・ロジャース

/* 出力 */
/*
エイドリアン・ロサレス
コルトン・シャープ
フェルディナンド・バレンタイン
ハサド・リンゼイ
カリーム・マーシャル
カジミール・フレッチャー
ノックス・タイソン
ムフタウベルグ
タデウス・マレン
セオドア・ロジャース
*/

文字列を単語全体に切り捨てる(非表示を超えて)

const truncate = (str, max, suffix) => str.length < max ? str : `${str.substr(0, str.substr(0, max - suffix.length).lastIndexOf(' '))}${suffix}`;

// 例
truncate('これは長いメッセージです', 20, '...'); // 'これは長い...'

HTML 特殊文字のエスケープ解除

const unescape = str => str.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/�*39;/g, "'").replace(/&quot;/g, '"');

要約する

これで、JS でよく使われるデータ処理方法についての記事は終了です。よく使われる JS データ処理方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 非常に詳細な基本的なJavaScript構文ルール
  • js 基本構文と Maven プロジェクト構成チュートリアル ケース
  • Javascript における分割代入構文の詳細な説明
  • jsはウォーターフォールフローのボトムアウトによるデータの動的ロードを実現します
  • jsは双方向データバインディング(アクセサ監視)を実現します
  • JavaScriptの基本構文とデータ型の詳細な説明

<<:  MySQLでユーザー認証情報を表示する具体的な方法

>>:  Linux parted ディスク パーティション実装手順の分析

推薦する

scss で mixin が動作しない問題の解決方法 (ブラウザでコンパイルできない)

ミックスインメソッド: ブラウザはコンパイルできません: 以前のバージョンのsassでは上記の記述方...

JSはGMTとUTCのタイムゾーンを完全に理解しています

目次序文1. GMT GMTとはGMTの歴史2. UTC UTCとはUTC は次の 2 つの部分で構...

レイアウトサイズを変更するために左右にドラッグする純粋なCSS

ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使...

Docker を使用して MySQL 5.7 および 8.0 マスター スレーブ クラスターをデプロイする方法

> MySQL 5.7 クラスタ マスターとスレーブをデプロイする (テストのみ)イメージバー...

Vue+tsx のスロット使用の問題が置き換えられない

目次序文問題を見つける解決する追記序文最近、 UIコンポーネントを作成する予定で、 vue 2.xと...

MySQL 5.7 でデータベースのデータ保存場所を変更する方法

MySQL データベースに保存されるデータが徐々に増加すると、元のストレージ領域がいっぱいになり、M...

MySQL の冗長インデックスと重複インデックスの詳細な説明

MySQL では、同じ列に複数のインデックスを作成できます。意図的であるかどうかにかかわらず、MyS...

JavaScript カウントダウン プロンプト ボックス

この記事の例では、カウントダウンプロンプトボックスを実装するためのJavaScriptの具体的なコー...

データベースを削除して逃げる?xtraback を使用して MySQL データベースをバックアップする方法

1. mysqldump バックアップ方法では論理バックアップが使用されます。最大の欠点は、バック...

動的なデジタル時計を実装するJavaScript

この記事では、JavaScriptで動的なデジタル時計を実装するための具体的なコードを参考までに紹介...

負荷分散と動的・静的分離を実現するNginx+Tomcatの原理の分析

1. Nginx ロードバランシングの実装原理1. Nginxはリバースプロキシを通じて負荷分散を実...

Windows 10 の Docker で countly-server を展開して実行するプロセス

私は最近countlyに触れて、慣れてきました。私は、必要に応じてcountlyのクラッシュプラグイ...

Vueはログイン認証コードを実装する

この記事では、ログイン認証コードを実装するためのvueの具体的なコードを例として紹介します。具体的な...

テーブル切り替えのための JavaScript プラグインのカプセル化

この記事では、テーブル切り替えプラグインを実装するためのJavaScriptのカプセル化コードを参考...

IE8ブラウザはWebページ標準に完全互換となる

<br />海外メディアの報道によると、マイクロソフトはソフトウェアの相互運用性への取り...