前端常用代码示例-1-CSDN博客

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

参考文章

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);
复制代码