当前位置: 首页 > article >正文

常用JS代码片段分享(总结)

数组平均数

使用reduce()将每个值添加到累加器,初始值为0,总和除以数组长度。

const average = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length;

// average([1,2,3]) -> 2

大写每个单词的首字母

使用replace()匹配每个单词的第一个字符,并使用toUpperCase()来将其大写。

const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());

// capitalizeEveryWord('hello world!') -> 'Hello World!

首字母大写

使用slice(0,1)和toUpperCase()大写第一个字母,slice(1)获取字符串的其余部分。省略lowerRest参数以保持字符串的其余部分不变,或将其设置为true以转换为小写。(注意:这和上一个示例不是同一件事情)

const capitalize = (str, lowerRest = false) =>

str.slice(0, 1).toUpperCase() + (lowerRest ? str.slice(1).toLowerCase() : str.slice(1));

// capitalize(‘myName’, true) -> ‘Myname’

计数数组中值的出现次数 

每次遇到数组中的特定值时,使用reduce()来递增计数器。

const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);

// countOccurrences([1,1,2,1,2,3], 1) -> 3

数组之间的区别 

从b创建一个Set,然后在a上使用Array.filter(),只保留b中不包含的值。

const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); };

// difference([1,2,3], [1,2]) -> [3]

过滤数组中的非唯一值

将Array.filter()用于仅包含唯一值的数组。 

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

// filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5]

获取滚动位置 

如果已定义,请使用pageXOffset和pageYOffset,否则使用scrollLeft和scrollTop,可以省略el来使用window的默认值。

const getScrollPos = (el = window) =>

  ({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,

    y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});

// getScrollPos() -> {x: 0, y: 200}

滚动到顶部

使用document.documentElement.scrollTop或document.body.scrollTop获取到顶部的距离。

从顶部滚动一小部分距离。

使用window.requestAnimationFrame()来滚动。

const scrollToTop = _ => {

  const c = document.documentElement.scrollTop || document.body.scrollTop;

  if (c > 0) {

    window.requestAnimationFrame(scrollToTop);

    window.scrollTo(0, c - c / 8);

  }

};

// scrollToTop()


http://www.kler.cn/news/328700.html

相关文章:

  • 论文笔记——Graph Bottlenecked Social Recommendation
  • 【文件增量备份系统】MySQL百万量级数据量分页查询性能优化
  • vue3 父子组件调用
  • 【学习笔记】手写 Tomcat 八
  • python获取当月最后工作日实现在数据库查询指定日期数据(python+sql)
  • B+树索引结构的优点
  • 习题1 程序设计和C语言
  • 08-Registry搭建docker私仓
  • Python 如何使用 Pandas 进行数据分析
  • 实战OpenCV之轮廓检测
  • 828华为云征文|部署在线文档应用程序 CodeX Docs
  • cisp-pte多少钱考一次?cisp-pte报考费用及报考条件一次说清楚!
  • ARM V8 A32常用指令集
  • 华为OD机试真题---找终点
  • excel 处理数据的常用场景之考勤表的制作
  • 递归函数设计技巧
  • 一次实践:给自己的手机摄像头进行相机标定
  • 【小沐学GIS】基于ubuntu+three.js的OSM建筑模型显示(node.js、Python)
  • 【论文阅读】基于真实数据感知的模型功能窃取攻击
  • 区块链可投会议CCF C--FC 2025 截止10.8 附录用率
  • 滚雪球学MySQL[1.2讲]:安装与配置
  • Qt界面编程01
  • python-patterns:Python 设计模式大全
  • 个人项目简单https服务配置
  • STL之list篇(上)初识list容器,了解其核心机制,实例化对象进行分析
  • Angular 2 用户输入
  • 安全的价值:构建现代企业的基础
  • k8s篇之数据挂载类型及区别
  • Python编码系列—Python命令模式:将请求封装为对象
  • 数据分析师之Excel学习