前端常用代码示例-1-白红宇

这篇文章参考的文章比较多，因为时间长了我一时间没有找到。我会慢慢补上，希望有同学知道的可以评论告诉我，谢谢。

参考文章

Anagrams of string(变更字母顺序构成新字符串-字谜) 使用递归。对于给定字符串中的每个字母，为字母创建字谜。使用map（）将字母与每部分字谜组合，然后使用reduce（）将所有字谜组合到一个数组中，最基本情况是字符串长度等于2或1

anagrams = str => {    if (str.length < 2) {        return [str];    }    if (str.length === 2) {        return [str, str[1] + str[0]]    }    return [...str].reduce((pre, letter, i) =>        pre.concat(anagrams(str.slice(0, i) + str.slice(i + 1)).map(value => letter + value)), []);}anagrams('abcd');复制代码

数组平均数使用reduce（）将每个值添加到累加器，初始值为0，总和除以数组长度

average = arr => arr.reduce((pre, val) => pre + val, 0) / arr.length;average([1, 2, 3, 4, 5, 6, 7, 8]);复制代码

大写每个单词的首字母使使用replace（）匹配每个单词的第一个字符，并使用toUpperCase（）来将其大写

capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());capitalizeEveryWord('hello world !');复制代码

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

capitalize = (str, lowerRest = false) =>    str.slice(0, 1).toUpperCase() + (lowerRest ? str.slice(1).toLowerCase() : str.slice(1));capitalize('jarryLiu',true);复制代码

字符串反转

reverseString = str => [...str].reverse().join('');reverseString('hello');复制代码

检查回文将字符串toLowerCase，并使用replace从中删除非字母的字符。然后拆分为单独字符，reverse，join（''），与原始的非反转字符串进行比较

palindrome = str => {    let s = str.toLowerCase().replace(/[^a-z0-9]/g, '');    return s === [...s].reverse().join('');}palindrome('eye');复制代码

计算数组中值的出现次数使用reduce迭代增加计数器

countOccurrences = (arr, target) =>     arr.reduce((count, val) => val === target ? count + 1 : count, 0);countOccurrences(['a','c','c','b','d'],'c');复制代码

Curry（柯里化）

curry = (fn, arity = fn.length, ...args) =>    arity <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args);curry(Math.max, 3)(3)(7)(90);curry(Math.pow)(2)(10);复制代码

Deep flatten array(拍平数组) 递归，使用reduce来获取所有不是数组的元素,思考一下为什么不用 push

//拍平二维数组flatten = arr => arr.reduce((a, v) => a.concat(v), []);//递归拍平多维嵌套数组deepFlatten = arr =>    arr.reduce((pre, val) =>        pre.concat(Array.isArray(val) ? deepFlatten(val) : val), []);deepFlatten([8,5,[4,[6,[7]]],4]);复制代码

数组比较差异从b创建一个Set，然后在a上使用Array.filter,思考使用Set的好处

different = (arr1, arr2, include = false) => {    let _arr2 = new Set(arr2);    return arr1.filter(ele => include ? _arr2.has(ele) : !_arr2.has(ele));}similarity = (arr1, arr2) => arr1.filter(ele => arr2.includes(ele));different([1, 2, 3, 4, 5], [1, 3, 5], true);复制代码

计算两点之间欧几里得距离 Math.hypot

distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);distance(1,1,2,3);复制代码

转义正则表达式转义正则表达式

escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');escapeRegExp('(test)');复制代码

阶乘使用递归。如果n小于或等于1，则返回1。否则返回n和n – 1的阶乘的乘积

factorial = n => n <= 1 ? 1 : n * factorial(n - 1);factorial(10);复制代码

斐波那契数组生成创建一个特定长度的空数组，初始化前两个值(m,n)。使用Array.reduce向数组中添加值，后面的一个数等于前面两个数相加之和（前两个除外）

fibonacci = (l, m, n) => Array(l).fill(0).reduce((pre, val, i) =>    pre.concat(i > 1 ? pre[i - 1] + pre[i - 2] : ((i === 0) ? m : n)), []);fibonacci(5,2,3);复制代码

过滤数组中的非唯一值将Array.filter用于仅包含唯一值的数组

filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));filterNonUnique([1,22,3,444,3,22,6]);复制代码

获取最大公约数使用递归。基本情况是当y等于0时。在这种情况下，返回m。否则，返回n的GCD和 m/n的其余部分

gcd = (m, n) => !n ? m : gcd(n, m % n);gcd(8,36);复制代码

函数执行计时 console.time

timeTaken = callback => {    console.time('timetask');    let r = callback();    console.timeEnd('timetask');    return r;}timeTaken(()=> anagrams('abcdefghij'));复制代码

键值对转对象 [['a',1],['b',2]] -> {a: 1, b: 2}

objFromPairs = arr => arr.reduce((pre, val) => (pre[val[0]] = val[1], pre), {});objFromPairs([['a',1],['b',2]]);复制代码

管道函数 pipe(func1,func2...)(args)

pipe = (...funcs) => arg => funcs.reduce((funcArgs, func) => func(funcArgs), arg);pipe(x => x + 1, x => console.log(x))(2);复制代码

生成数组幂集 [1,2] -> [[], [1], [2], [2,1]]

powerset = arr => arr.reduce((pre, val) => pre.concat(pre.map(ele => [val].concat(ele))), [[]]);powerset([1,2]);复制代码

范围内随机数(默认0-100)

randomInRange = (min = 0, max = 100) => Math.random() * (max - min) + min;Math.floor(randomInRange(2,10));复制代码

随机化数组顺序

shuffle = arr => arr.sort(() => Math.random() - 0.5);shuffle([1,2,3,4,5,6,7]);复制代码

RGB转十六进制 (255, 165, 1) -> 'ffa501'。 *padStart(ES2017)

//rgbToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6,'0');rgbToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16);rgbToHex(255,165,1);复制代码

字符串中字母排序使用split（’‘）分割字符串，sort（）使用localeCompare（），使用join('')重新组合

sortCharsInString = str => [...str].sort((a, b) => a.localeCompare(b)).join('');sortCharsInString('ibsuidibjbacb');复制代码

数组元素求和 reduce累加

sumArray = arr => arr.reduce((sum, val) => sum + val, 0);sumArray([1,2,3,4,5]);复制代码

交换变量值数组解构

let a = 1;let b = 'bbb';let c = { key: 'value' };[a, b, c] = [c, a, b];console.log(JSON.stringify(a) + '-' + b + '-' + c)复制代码

数组去重 ...new Set(arr)

unique = arr => [...new Set(arr)];unique([11,22,3,444,444,55,55]);复制代码

获取URL参数 match + reduce + map

getUrlParameters = url =>    url.match(/([^?=&]+)(=([^&]*))/g).reduce((obj, val) =>        (obj[val.slice(0, val.indexOf('='))] = val.slice(val.indexOf('=') + 1), obj), {});getUrlParameters('http://url.com/page?name=Adam&surname=Smith');复制代码

验证数字使用！isNaN和parseFloat（）来检查参数是否是一个数字，使用isFinite（）来检查数字是否是有限

validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;validateNumber(10.1);复制代码

过滤空值空值指的是没有具体意义的一些值，比如0，undefined，null，false，空字符串等

let res = [1, 2, 0, '0', undefined, null, false, ''].filter(Boolean);复制代码