专栏首页前端达人127个常用的JS代码片段,每段代码花30秒就能看懂(五)
原创

127个常用的JS代码片段,每段代码花30秒就能看懂(五)

大家好,今天我继续给大家分享本系列文章的第五部分,希望对你的日常工作有所帮助。

85、minN

此段代码输出数组中前 n 位最小的数。

const minN = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n);

minN([1, 2, 3]); // [1]
minN([1, 2, 3], 2); // [1,2]

86、negate

此函数功能将不满足函数条件的内容筛选出来。

const negate = func => (...args) => !func(...args);

[1, 2, 3, 4, 5, 6].filter(negate(n => n % 2 === 0)); // [ 1, 3, 5 ]

87. nodeListToArray

此函数返回给定的DOM节点,并以数组的形式输出。

const nodeListToArray = nodeList => [...nodeList];

nodeListToArray(document.childNodes); // [ <!DOCTYPE html>, html ]

88. pad

按照指定的长度生成字符串,如果字符串不够,可以按照设定的字符串内容在左右两边进行填充,默认空格为填充字符。

const pad = (str, length, char = ' ') =>
  str.padStart((str.length + length) / 2, char).padEnd(length, char);
  
pad('cat', 8); // '  cat   '
pad(String(42), 6, '0'); // '004200'
pad('foobar', 3); // 'foobar'

89. radsToDegrees

此函数功能将弧度转换成度数。

const radsToDegrees = rad => (rad * 180.0) / Math.PI;

radsToDegrees(Math.PI / 2); // 90

90、randomHexColorCode

此段代码用于生成随机的16进制颜色代码。

const randomHexColorCode = () => {
  let n = (Math.random() * 0xfffff * 1000000).toString(16);
  return '#' + n.slice(0, 6);
};

randomHexColorCode(); // "#e34155"

91、randomIntArrayInRange

按照指定的数字范围随机生成长度为 n 的数组。

const randomIntArrayInRange = (min, max, n = 1) =>
  Array.from({ length: n }, () => Math.floor(Math.random() * (max - min + 1)) + min);
  
randomIntArrayInRange(12, 35, 10); // [ 34, 14, 27, 17, 30, 27, 20, 26, 21, 14 ]

92、randomIntegerInRange

按照指定的范围内生成一个随机整数。

const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

randomIntegerInRange(0, 5); // 3

93、randomNumberInRange

该代码段可用于返回指定范围内的随机数(包含小数部分)。

const randomNumberInRange = (min, max) => Math.random() * (max - min) + min;

randomNumberInRange(2, 10); // 6.0211363285087005

94、readFileLines

此段代码将读取到的文本内容,按行分割组成数组进行输出。

const fs = require('fs');
const readFileLines = filename =>
  fs
    .readFileSync(filename)
    .toString('UTF8')
    .split('\n');

let arr = readFileLines('test.txt');
console.log(arr); // ['line1', 'line2', 'line3']

95、Redirect to a URL

此函数功能将页面导向一个指定的网站地址。

const redirect = (url, asLink = true) =>
  asLink ? (window.location.href = url) : window.location.replace(url);
  
redirect('https://www.qianduandaren.com');

96、reverse

此段代码用于将一段字符串进行颠倒。

const reverseString = str => [...str].reverse().join('');

reverseString('foobar'); // 'raboof'

97、round

将小数按照指定的位数,进行四舍五入保留。

const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);

round(1.005, 2); // 1.01

98、runPromisesInSeries

通过数组的形式,连续运行多个promise。

const runPromisesInSeries = ps => ps.reduce((p, next) => p.then(next), Promise.resolve());
const delay = d => new Promise(r => setTimeout(r, d));

runPromisesInSeries([() => delay(1000), () => delay(2000)]); 
// Executes each promise sequentially, taking a total of 3 seconds to complete

99、sample

从数组中获取一个随机数。

const sample = arr => arr[Math.floor(Math.random() * arr.length)];

sample([3, 7, 9, 11]); // 9

100、sampleSize

在数组中随机生选择 n 个元素生成新的数组,如果n大于数组长度,则为随机整个数组的排序。这里使用到了 Fisher–Yates shuffle 洗牌算法。

简单来说 Fisher–Yates shuffle 算法是一个用来将一个有限集合生成一个随机排列的算法(数组随机排序)。这个算法生成的随机排列是等概率的。同时这个算法非常高效。

更多关于 Fisher–Yates shuffle 洗牌算法的内容,你可以查看 https://gaohaoyang.github.io/2016/10/16/shuffle-algorithm/

const sampleSize = ([...arr], n = 1) => {
  let m = arr.length;
  while (m) {
    const i = Math.floor(Math.random() * m--);
    [arr[m], arr[i]] = [arr[i], arr[m]];
  }
  return arr.slice(0, n);
};

sampleSize([1, 2, 3], 2); // [3,1]
sampleSize([1, 2, 3], 4); // [2,3,1]

101、 scrollToTop

此函数功能将页面平滑的滚动到页面的顶部。

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};

scrollToTop();

102、serializeCookie

此段代码用于将 cookie 序列化成 name-value 的形式方便你存储在 Set-Cookie 头信息里。

const serializeCookie = (name, val) => `${encodeURIComponent(name)}=${encodeURIComponent(val)}`;

serializeCookie('foo', 'bar'); // 'foo=bar'

103、serializeCookie

此段代码用于在相应的DOM节点添加属性和值。

const setStyle = (el, ruleName, val) => (el.style[ruleName] = val);

setStyle(document.querySelector('p'), 'font-size', '20px');
// The first <p> element on the page will have a font-size of 20px

104、 shallowClone

此段代码用于浅复制一个对象。

const shallowClone = obj => Object.assign({}, obj);

const a = { x: true, y: 1 };
const b = shallowClone(a); // a !== b

105、show

从段代码用于显示所有指定的 DOM 元素。

const show = (...el) => [...el].forEach(e => (e.style.display = ''));

show(...document.querySelectorAll('img')); // Shows all <img> elements on the page

小节

今天的内容就和大家分享到这里,感谢你的阅读,如果你喜欢我的分享,麻烦给个关注、点赞加转发哦,你的支持,就是我分享的动力,后续会持续分享剩余的代码片段,欢迎持续关注。

本文原作者:Fatos Morina 来源网站:medium 注:并非直译

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 127个常用的JS代码片段,每段代码花30秒就能看懂(五)

    按照指定的长度生成字符串,如果字符串长度不够,可以按照设定的字符在其左右两端补齐,默认为空格字符串。

    前端达人
  • 【ES6基础】const介绍

    在ES6之前,JavaScript被其他编程语言诟病没有定义常量的能力,甚至在大多数企业的开发文档中,对于常量的定义都使用var。一般经常会使用大写字母和下划线...

    前端达人
  • 【ES6基础】const介绍

    在ES6之前,JavaScript被其他编程语言诟病没有定义常量的能力,甚至在大多数企业的开发文档中,对于常量的定义都使用var。一般经常会使用所有字母大写和下...

    前端达人
  • 127个常用的JS代码片段,每段代码花30秒就能看懂(五)

    按照指定的长度生成字符串,如果字符串长度不够,可以按照设定的字符在其左右两端补齐,默认为空格字符串。

    前端达人
  • 动手写个数字输入框3:痛点——输入法是个魔鬼

    前言  最近在用Polymer封装纯数字的输入框,开发过程中发现不是坑,也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历: 《动手写个数字输...

    ^_^肥仔John
  • C/C++ const

    const是C语言的关键字,经C++扩充,功能变得强大,用法复杂。const用于定义一个常变量(只读变量)。当const与指针、引用、函数等结合起来使用时,情况...

    Dabelv
  • 锋利的jQuery第八期

    上一期介绍了属性过滤选择器,提到了正则,那这次还是稍微说说吧,首先是不等于,开头以及结尾。原效果图如下:

    聚沙成塔
  • 简洁的javascript编码(一)--变量、函数

    本文作者:IMWeb jaychen 原文出处:IMWeb社区 未经同意,禁止转载 ? 一、变量 使用语义化的变量名称 Bad cons...

    IMWeb前端团队
  • 简洁的javascript编码(一)--变量、函数

    现代浏览器已经在运行时做了很多的优化,因此很多时候如果我们要遵循那些流传已久的优化策略不过是浪费时间。可以参考这个来获取建议的优化要点。 Bad:

    IMWeb前端团队
  • 前端-团队效率-webpack4打包骚操作

    吴文周

扫码关注云+社区

领取腾讯云代金券