扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS中可能会常用到的一些数据处理方法
  • 784

0
分享到

JS中可能会常用到的一些数据处理方法

2024-04-02 19:04:59 784人浏览 八月长安
摘要

目录DOM处理数组方法总结DOM处理 DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。DOM就是由节点组

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(), { 
left: r.left + window.scrollX, top: r.top + window.scrollY
 });

// Example
getPosition(document.body);     // { left: 0, top: 0 }

在另一个元素之后插入一个元素


const insertAfter = (ele, anotherEle) => anotherEle.parentNode.insertBefore(ele, anotherEle.nextSibling);

// Or
const insertAfter = (ele, anotherEle) => anotherEle.insertAdjacentElement('afterend', ele);

附：在其他元素之前插入一个元素


const insertBefore = (ele, anotherEle) => anotherEle.parentNode.insertBefore(ele, anotherEle);

// Or
const insertBefore = (ele, anotherEle) => anotherEle.insertAdjacentElement('beforebegin', ele);

在元素后面插入给定的 HTML


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

附：在元素之前插入给定的 HTML


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

滚动到页面顶部（返回顶部）


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

数组

数组判空


// `arr` is an array
const isEmpty = arr => !Array.isArray(arr) || arr.length === 0;

// Examples
isEmpty([]);            // true
isEmpty([1, 2, 3]);     // false

克隆数组


// `arr` is an array
const clone = arr => arr.slice(0);

// Or
const clone = arr => [...arr];

// Or
const clone = arr => Array.from(arr);

// Or
const clone = arr => arr.map(x => x);

// Or
const clone = arr => JSON.parse(JSON.stringify(arr));

// Or
const clone = arr => arr.concat([]);

找到数组中最大值对应的索引


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

// Examples
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);

// Examples
indexOfMin([6, 4, 8, 2, 10]);       // 3
indexOfMin([6, 4, 2, 2, 10]);       // 2

获取数组的交集


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

// Examples
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), {});

// Example
groupBy([
    { branch: 'audi', model: 'q8', year: '2019' },
    { branch: 'audi', model: 'rs7', year: '2020' },
    { branch: 'ford', model: 'mustang', year: '2019' },
    { branch: 'ford', model: 'explorer', year: '2020' },
    { branch: 'bmw', model: 'x7', year: '2020' },
], 'branch');

删除数组中的重复值


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

// Example
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));

// Example
const people = [
    { name: 'Foo', age: 42 },
    { name: 'Bar', age: 24 },
    { name: 'Fuzz', age: 36 },
    { name: 'Baz', age: 32 },
];
sortBy(people, 'age');

// returns
//  [
//      { name: 'Bar', age: 24 },
//      { name: 'Baz', age: 32 },
//      { name: 'Fuzz', age: 36 },
//      { name: 'Foo', age: 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}), {});

// Examples
getUrlParams(location.search);              // Get the parameters of the current URL

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

// Duplicate key
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);

// Example
getParam('Http://domain.com?message=hello', 'message');     // 'hello'

用零作为整数的前缀


const prefixWithZeros = (number, length) => (number / Math.pow(10, length)).toFixed(length).substr(2);

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

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

// Example
prefixWithZeros(42, 5);     // '00042'

将数字四舍五入到给定的数字位数


const prefixWithZeros = (number, length) => (number / Math.pow(10, length)).toFixed(length).substr(2);

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

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

// Example
prefixWithZeros(42, 5);     // '00042'

将一个数字截断为给定的小数位数而不进行舍入


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

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

// Examples
toFixed(25.198726354, 1);       // 25.1
toFixed(25.198726354, 2);       // 25.19
toFixed(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)), {});

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

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

// Example
removeNullUndefined({
    foo: null,
    bar: undefined,
    fuzz: 42,
});

检查字符串是否为回文


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

// Examples
isPalindrome('abc');        // false
isPalindrom('abcba');       // true

将一个字符串转换为 camelCase


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

// Examples
toCamelCase('background-color');            // backgroundColor
toCamelCase('-WEBkit-scrollbar-thumb');     // WebkitScrollbarThumb
toCamelCase('_hello_world');                // HelloWorld
toCamelCase('hello_world');                 // helloWorld

将字符串转换为 PascalCase


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

// Examples
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;');

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

将多个空格替换为单个空格


// Replace spaces, tabs and new line characters
const replaceSpaces = str => str.replace(/\s\s+/g, ' ');

// Only replace spaces
const replaceOnlySpaces = str => str.replace(/  +/g, ' ');

// Example
replaceSpaces('this\n   is     \ta    \rmessage');  // 'this is a message'

在字母顺序中对文本文档的行进行排序


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

// Reverse the order
const reverseSortedLines = str => str.split(/\r?\n/).sort().reverse().join('\n');

// Example
sortLines(`Thaddeus Mullen
Kareem Marshall
Ferdinand Valentine
Hasad Lindsay
Mufutau Berg
Knox Tyson
Kasimir Fletcher
Colton Sharp
Adrian Rosales
Theodore Rogers`);

将字符串截断为完整的单词（超出隐藏）


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

// Example
truncate('This is a long message', 20, '...');  // 'This is a long...'

取消转义 HTML 特殊字符


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

总结

到此这篇关于JS中可能会常用到的一些数据处理方法的文章就介绍到这了,更多相关JS常用数据处理方法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: JS中可能会常用到的一些数据处理方法

本文链接: https://lsjlt.com/news/135935.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS中可能会常用到的一些数据处理方法
    目录DOM处理数组方法总结DOM处理 DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。DOM就是由节点组...
    99+
    2024-04-02
  • JS中Date的一些常用方法小结
    目录内置对象Date创建Date对象日期的格式化Date对象自带的方法获取时间戳附：获得Date总的毫秒数（距离1970年1月1号过了多少毫秒）总结内置对象Date Date对象在实...
    99+
    2022-11-13
    js date方法 js日期函数date js日期函数
  • 经常用到的一些mysql数据库语法
    本文主要给大家介绍经常用到的一些mysql数据库语法，文章内容都是笔者用心摘选和编辑的，具有一定的针对性，对大家的参考意义还是比较大的，下面跟笔者一起了解下经常用到的一些mysql数据库语法吧。1）登录my...
    99+
    2024-04-02
  • js数组的常用方法有哪些
    这篇文章主要介绍了js数组的常用方法有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇js数组的常用方法有哪些文章都会有所收获，下面我们一起来看看吧。 数组的常用方法有下面...
    99+
    2024-04-02
  • JavaScript中数组常用的迭代处理方法有哪些
    这篇文章主要介绍“JavaScript中数组常用的迭代处理方法有哪些”，在日常操作中，相信很多人在JavaScript中数组常用的迭代处理方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方...
    99+
    2024-04-02
  • Javascript数据类型中有哪些可能会中招的细节
    今天就跟大家聊聊有关Javascript数据类型中有哪些可能会中招的细节，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。 前言Javascr...
    99+
    2024-04-02
  • 如何在PHP中使用自然语言处理功能？这些面试问题可能会问到。
    自然语言处理（NLP）是计算机科学领域的一个重要分支，它涉及到计算机对自然语言的理解、生成和处理。在PHP中，有很多工具和库可以帮助你实现自然语言处理功能。本文将介绍如何在PHP中使用自然语言处理功能，并探讨在面试中可能会遇到的相关问题。...
    99+
    2023-08-28
    面试 自然语言处理 函数
  • Java 大数据处理中常用的函数有哪些？
    随着数据量的不断增加，大数据处理已经成为了企业中不可或缺的一部分。在 Java 大数据处理中，一些常用的函数可以帮助开发人员更加高效地处理海量数据。本文将介绍 Java 大数据处理中常用的函数，并配以相应的演示代码。 一、MapReduc...
    99+
    2023-09-22
    大数据 shell 函数
  • JS使用reduce()方法处理树形结构数据
    目录定义语法实例1. 没有传递初始值init2. 传递初始值的情况下3. 数组去重4. 利用 reduce 对数组中的 Object 对象进行分组及合并5. 利用 reduce 处理...
    99+
    2024-04-02
  • JS数组中常用方法技巧学会进阶成为大佬
    目录splice()方法join()方法reverse()方法every()方法reduce()方法filter()方法findIndex()方法 和find()方法fin...
    99+
    2024-04-02
  • MyBatis中多对一和一对多数据的处理方法
    目录多对一的处理1、数据库设计2、搭建测试环境3、按查询嵌套处理4 、按结果嵌套处理一对多的处理1、实体类编写2、按结果嵌套处理3、按查询嵌套处理4、小结多对一的处理 多对一的理解：...
    99+
    2023-01-03
    MyBatis多对一 MyBatis一对多处理
  • fio 使用碰到的坑，一些不常用，但可能用到的参数（校验 跳跃 多线程）
    1， 祼盘读写 一个分区   -filename=/dev/sdb1 同时测试多个分区  -filename=/dev/sdb1;/dev/sdb2 比例： fio -filename=/dev/sdb1 -direct=1 -iodept...
    99+
    2023-09-20
    linux 运维 服务器
  • 浅析python常用数据文件处理方法
    0.前言 虽说python运行速度慢，但其编程速度，第三方包的丰富度是真的高。 涉及到文件批处理还是会选择python。 1. 动态文件名 在文件批处理中，文件名经常只有编号是不同的...
    99+
    2024-04-02
  • js数组常用最重要的方法有哪些
    这篇文章将为大家详细讲解有关js数组常用最重要的方法有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。数组作为js中常用的数据类型使我们用的最多的, 在其他地方可以搜索...
    99+
    2024-04-02
  • 有哪些数据预处理的方法
    今天就跟大家聊聊有关有哪些数据预处理的方法，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。数据预处理的方法有：1、数据清理，通过填写缺失的值、光滑噪声数据、识别或删除离群点并解决不一致...
    99+
    2023-06-14
  • Python数据处理的方法有哪些
    这篇文章主要介绍“Python数据处理的方法有哪些”，在日常操作中，相信很多人在Python数据处理的方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Python数据处理的方法有哪些”的疑惑有所帮助！...
    99+
    2023-06-16
  • 精通！掌握Golang中常用的数据处理工具和方法
    必知！Golang中的数据处理常用工具和方法概述：在Golang中，数据处理是开发中常见的任务之一。无论是从数据库中读取数据、处理用户输入、解析JSON数据还是进行数据转换，都需要使用到一些常用的工具和方法。本文将为你介绍几个经常用到的数据...
    99+
    2023-12-23
    方法 Golang：数据处理 常用工具
  • String类中的一些常用方法(JAVA)
    目录 字符串比较方法： boolean equals(Object anObject)：  int compareTo(String s)： int compareToIgnoreCase(String str) 字符串查找方法： char...
    99+
    2023-10-03
    java 开发语言
  • 详解JS中异常与错误处理的正确方法
    目录简介1 面向错误编程1.1 墨菲定律1.2 先判否2. js 内置的错误处理2.1 Error 类2.2 throw2.3 try catch2.4 Promise.catch3...
    99+
    2023-05-16
    JS异常处理 JS错误处理 JS异常
  • 学会运用常用的pandas函数，轻松处理大规模数据
    掌握pandas库常用函数，轻松处理大数据，需要具体代码示例 随着大数据时代的到来，数据处理变得越来越重要，而pandas库作为Python中最常用的数据处理库之一，其强大的功能和灵活的处理方式受到了广大数据分析师和科学家的喜爱...
    99+
    2024-01-24
    大数据 Pandas 常用函数
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作