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 ディスクパーティション実装手順の分析

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

目次

DOM処理

配列

方法

要約する

要素テーブルヘッダー行の高さの問題の解決

閲覧時に作成されたWebページの下部にある余分な空白スペースを削除する方法

高度な JavaScript フロントエンド開発でよく使用されるいくつかの API の例の詳細な説明

MySQL マスタースレーブレプリケーションの実装手順

jsは赤い封筒の順序と量を指定するアルゴリズムを実装します

テキストエリアをレイアウトしたときにテキストが左下にあり、サイズを変更できない問題の解決策

Springboot+Vue-Cropperでアバターの切り取りとアップロードの効果を実現

HTML ハイパーリンクタグ_Powernode Java アカデミー

meta name="" content="の機能の詳細な説明

offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft などのプロパティの図。

推薦する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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