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

推薦する

VirtualBox の仮想ディスク vdi ファイルの容量を拡張する方法 (グラフィック チュートリアル)

VirtualBoxのインストールディレクトリを見つけます。ディレクトリ内には容量を拡張するために...

MySQLスケーラブル設計の基本原則

目次序文1. スケーラビリティとは何ですか?スケールアウトの利点:スケールアウトのデメリット:スケー...

ウェブサイトをより高く、よりデザイン的に見せる方法

「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか？ それともデザイン重視にすればい...

Bootstrap が人気な 11 の理由

序文最も人気のあるフロントエンド開発フレームワークである Bootstrap は、Web サイトの開...

Windows 10 に TomCat をインストールするチュートリアル図

WindowsにTomCatをインストールするこの記事では、WindowsプラットフォームにTomC...

ウェブページのメモリ使用量とCPU使用量を削減する方法

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

MySQLインデックスの基本構文

インデックスはソートされたデータ構造です。 where 条件での検索や order by 条件での並...

JavaScript 状態コンテナ Redux の詳細な説明

目次1. Reduxを選ぶ理由2. Reduxデータフロー3つの原則4. Reduxソースコード分析...

HTML4.0 要素のデフォルトスタイルの配置

コードをコピーコードは次のとおりです。 html、アドレス、引用ブロック、本文、dd、div、 dl...

LinuxにNginxをインストールする正しい手順

序文私のように、Java バックエンドに勤勉な人であれば、多数のプロジェクト機能を実装することに加え...

...

MySQL リンクを表示し、異常なリンクを削除する方法

序文：データベースの運用や保守の際には、リンクの総数がいくつあるか、アクティブなリンクがいくつあるか...

CSS セレクタの 4 つのカテゴリ: 基本、組み合わせ、属性、疑似クラス

セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...

SQL効率を分析する方法を説明する

Explain コマンドは、データベースのパフォーマンス問題を解決するために最初に推奨されるコマンド...

vue-router 4 の使用例の詳しい説明

目次1. インスタンスをインストールして作成する2. vue-router4の新機能2.1 動的ルー...