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

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

大家好,今天我继续给大家分享本系列文章的最后一部分,感谢你对本系列文章的持续关注,希望对你的日常工作有所帮助。

106、shuffle

使用 Fisher–Yates shuffle 洗牌算法对数组的内容进行随机排序,生成新的数组。

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

更多关于 Fisher–Yates shuffle 洗牌算法的内容,你可以点击文末原文链接查看。

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

const foo = [1, 2, 3];
shuffle(foo); // [2, 3, 1], foo = [1, 2, 3]

107、similarity

查找两个数组之间的交集。

const similarity = (arr, values) => arr.filter(v => values.includes(v));

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

108、sleep

用于延迟异步函数的执行。

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function sleepyWork() {
  console.log("I'm going to sleep for 1 second.");
  await sleep(1000);
  console.log('I woke up after 1 second.');
}

109、smoothScroll

用于让指定的DOM节点平滑滚动到可视区域。

const smoothScroll = element =>
  document.querySelector(element).scrollIntoView({
    behavior: 'smooth'
  });
  
smoothScroll('#fooBar'); 
// scrolls smoothly to the element with the id fooBar
smoothScroll('.fooBar'); 
// scrolls smoothly to the first element with a class of fooBar

110、sortCharactersInString

将单词的内容按照字母的顺序进行重新排序。

const sortCharactersInString = str => [...str].sort((a, b) => a.localeCompare(b)).join('');

sortCharactersInString('cabbage'); 
// 'aabbceg'

111、splitLines

用于将一段字符串按照“换行符”分割成数组进行输出。

const splitLines = str => str.split(/\r?\n/);
splitLines('This\nis a\nmultiline\nstring.\n'); 
// ['This', 'is a', 'multiline', 'string.' , '']

112、stripHTMLTags

格式化去掉 HTML 代码内容,输出文本内容。

const stripHTMLTags = str => str.replace(/<[^>]*>/g, '');

stripHTMLTags('<p><em>lorem</em> <strong>ipsum</strong></p>'); 
// 'lorem ipsum'

113、sum

用于计算数字之和。

const sum = (...arr) => [...arr].reduce((acc, val) => acc + val, 0);

sum(1, 2, 3, 4); // 10
sum(...[1, 2, 3, 4]); // 10

114、tail

用于获取数组除第一个元素之外的所有元素,如果数组只有一个元素,则返回本数组。

const tail = arr => (arr.length > 1 ? arr.slice(1) : arr);

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

115、take

从数组开始位置截取n个元素,生成新的数组。

const take = (arr, n = 1) => arr.slice(0, n);

take([1, 2, 3], 5); // [1, 2, 3]
take([1, 2, 3], 0); // []

116、takeRight

从数组开始末尾截取n个元素,生成新的数组。

const takeRight = (arr, n = 1) => arr.slice(arr.length - n, arr.length);

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

117、timeTaken

用来计算函数执行的时间。

const timeTaken = callback => {
  console.time('timeTaken');
  const r = callback();
  console.timeEnd('timeTaken');
  return r;
};

timeTaken(() => Math.pow(2, 10)); 
// 1024, (logged): timeTaken: 0.02099609375ms

118、times

按照指定的次数,进行回调函数。

const times = (n, fn, context = undefined) => {
  let i = 0;
  while (fn.call(context, i) !== false && ++i < n) {}
};

var output = '';
times(5, i => (output += i));
console.log(output); // 01234

119、toCurrency

此段代码用于按照指定的货币类型格式化货币数字。

const toCurrency = (n, curr, LanguageFormat = undefined) =>
  Intl.NumberFormat(LanguageFormat, { style: 'currency', currency: curr }).format(n);
  
toCurrency(123456.789, 'EUR'); 
// €123,456.79  | currency: Euro | currencyLangFormat: Local
toCurrency(123456.789, 'USD', 'en-us'); 
// $123,456.79  | currency: US Dollar | currencyLangFormat: English (United States)
toCurrency(123456.789, 'USD', 'fa'); 
// ۱۲۳٬۴۵۶٫۷۹ ؜$ | currency: US Dollar | currencyLangFormat: Farsi
toCurrency(322342436423.2435, 'JPY'); 
// ¥322,342,436,423 | currency: Japanese Yen | currencyLangFormat: Local
toCurrency(322342436423.2435, 'JPY', 'fi'); 
// 322 342 436 423 ¥ | currency: Japanese Yen | currencyLangFormat: Finnish

120、toDecimalMark

用于格式化数字,将其转换成逗号分隔的数字字符串。

const toDecimalMark = num => num.toLocaleString('en-US');

toDecimalMark(12305030388.9087); 
// "12,305,030,388.909"

121、toggleClass

使用 element.classList.toggle() 来切换元素中指定样式类。

const toggleClass = (el, className) => el.classList.toggle(className);

toggleClass(document.querySelector('p.special'), 'special'); 
// The paragraph will not have the 'special' class anymore

122、tomorrow

用于获取明天的日期。

const tomorrow = () => {
  let t = new Date();
  t.setDate(t.getDate() + 1);
  return t.toISOString().split('T')[0];
};

tomorrow(); 
// 2019-09-08 (if current date is 2018-09-08)

123、unfold

基于初始值,和步长生成一个新的数组。

const unfold = (fn, seed) => {
  let result = [],
    val = [null, seed];
  while ((val = fn(val[1]))) result.push(val[0]);
  return result;
};

var f = n => (n > 50 ? false : [-n, n + 10]);
unfold(f, 10); 
// [-10, -20, -30, -40, -50]

124、union

合并两个数组,并删除重复的内容。

const union = (a, b) => Array.from(new Set([...a, ...b]));
union([1, 2, 3], [4, 3, 2]);
// [1,2,3,4]

125、uniqueElements

使用 ES6 的 set 和 …rest 运算去除数组中重复的元素。

const uniqueElements = arr => [...new Set(arr)];

uniqueElements([1, 2, 2, 3, 4, 4, 5]); 
// [1, 2, 3, 4, 5]

126. validateNumber

用于检查参数类型是否是数字。

const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;

validateNumber('10'); // true

127. words

将一段英文字符串拆分成单词数组(去除一些特殊符号)。

const words = (str, pattern = /[^a-zA-Z-]+/) => str.split(pattern).filter(Boolean);

words('I love javaScript!!'); 
// ["I", "love", "javaScript"]
words('python, javaScript & coffee'); 
// ["python", "javaScript", "coffee"]

小节

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

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

本文分享自微信公众号 - 前端达人(frontend84),作者:前端达人

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    大家好,今天我继续给大家分享本系列文章的最后一部分,感谢你对本系列文章的持续关注,希望对你的日常工作有所帮助。

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

    大家好,在上一篇文章 127个常用的JS代码片段,每段代码花30秒就能看懂(一)里,我分享了前21段代码,今天继续分享21段代码,希望对你的日常工作有所帮助。

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

    大家好,在上一篇文章 127个常用的JS代码片段,每段代码花30秒就能看懂(一)里,我分享了前21段代码,今天继续分享21段代码,希望对你的日常工作有所帮助。

    前端达人
  • 精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解

    该项目来自于 Github 用户 Chalarangelo,目前已在 Github 上获得了 5000 多Star,精心收集了多达 48 个有用的 JavaSc...

    程序员宝库
  • 127个常用的JS代码片段,每段代码花30秒就能看懂(六)

    大家好,今天我继续给大家分享本系列文章的最后一部分,感谢你对本系列文章的持续关注,希望对你的日常工作有所帮助。

    前端达人
  • 编程思想 之「异常及错误处理」

    在 Java 的异常及错误处理机制中,用Throwable这个类来表示可以作为异常被抛出的类。Throwable对象可以细分为两种类型(指从Throwable继...

    CG国斌
  • 二分查找算法速记

    二分查找(英语:binary search),也称折半搜索(英语:half-interval search)对数搜索(英语:logarithmic search...

    KevinYan
  • 编程思想 之「异常及错误处理」

    在 Java 的异常及错误处理机制中,用Throwable这个类来表示可以作为异常被抛出的类。Throwable对象可以细分为两种类型(指从Throwable继...

    CG国斌
  • SAP MM中的一些增强接口

    AMPL0001 AMPL上附加数据地用户子屏幕 LMEDR001 打印程序的增强 LMELA002 一收货入帐时从装运通知采纳批量编号 LMELA010 内部...

    用户5495712
  • 如何在Debian 9上为用户目录设置vsftpd

    FTP是文件传输协议的缩写,是一种曾经广泛用于在客户端和服务器之间移动文件的网络协议。它已被更快,更安全,更方便的文件传输方式所取代。很多休闲互联网用户希望直接...

    丰一川

扫码关注云+社区

领取腾讯云代金券