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処理

配列

方法

要約する

vue+elementUI で埋め込みテーブルを実装する方法の例

MySQL が innobackupex を使用して接続サーバーをバックアップできない場合の解決策

Vue 仮想 DOM クイックスタート

MySQL統計テーブルのサイズを説明する例

スクラッチ宝くじの例を実現する JavaScript キャンバス

Node.jsで子プロセスを作成する方法

Vue3 での Teleport の使用に関する詳細な説明

MySQL における Datetime と Timestamp の使用の概要

ECMAScript6 におけるマップマッピングの基本概念と一般的な方法

Linuxコマンドunzipの詳しい説明

推薦する

Reactの原理の説明

mysql8.0.23 Linux (centos7) のインストールの完全かつ詳細なチュートリアル

MySQLクエリ制御ステートメントの詳細なグラフィック説明

配列をフィルタリングするJavaScript

Vue は zip ファイルのダウンロードを実装します

一般的な Dockerfile コマンドの使用方法の紹介

3つの簡単な例を使ってハイパーリンクの下線を削除する方法

HTML+CSS ボックスモデルの例 (円、半円など) 「border-radius」はシンプルで使いやすい

MySQLデータベーステーブルの定期バックアップの実装の詳細な説明

Linux ps および pstree コマンドの知識ポイントのまとめ

JS の精度外数値問題の解決

Vueはシンプルなメモ帳機能を実装します

MySQL データベース 8 - データベース内の関数の適用の詳細な説明

Datagrip2020 が MySQL ドライバーのダウンロードに失敗する

怖いハロウィーン Linux コマンド