前端常用代码示例-1

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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');

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

    1
    2
    3
    average = arr => arr.reduce((pre, val) => pre + val, 0) / arr.length;

    average([1, 2, 3, 4, 5, 6, 7, 8]);

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

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

    capitalizeEveryWord('hello world !');

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

    1
    2
    3
    4
    capitalize = (str, lowerRest = false) =>
        str.slice(0, 1).toUpperCase() + (lowerRest ? str.slice(1).toLowerCase() : str.slice(1));

    capitalize('jarryLiu',true);

  5. 字符串反转

    1
    2
    3
    reverseString = str => [...str].reverse().join('');

    reverseString('hello');

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

    1
    2
    3
    4
    5
    6
    palindrome = str => {
        let s = str.toLowerCase().replace(/[^a-z0-9]/g, '');
        return s === [...s].reverse().join('');
    }

    palindrome('eye');

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

    1
    2
    3
    4
    countOccurrences = (arr, target) => 
        arr.reduce((count, val) => val === target ? count + 1 : count, 0);

    countOccurrences(['a','c','c','b','d'],'c');

  8. Curry（柯里化）

    1
    2
    3
    4
    5
    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);

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

    1
    2
    3
    4
    5
    6
    7
    8
    //拍平二维数组
    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]);

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

    1
    2
    3
    4
    5
    6
    7
    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);

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

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

    distance(1,1,2,3);

  12. 转义正则表达式
    转义正则表达式

    1
    2
    3
    escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

    escapeRegExp('(test)');

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

    1
    2
    3
    factorial = n => n <= 1 ? 1 : n * factorial(n - 1);

    factorial(10);

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

    1
    2
    3
    4
    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);

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

    1
    2
    3
    filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));

    filterNonUnique([1,22,3,444,3,22,6]);

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

    1
    2
    3
    gcd = (m, n) => !n ? m : gcd(n, m % n);

    gcd(8,36);

  17. 函数执行计时
    console.time

    1
    2
    3
    4
    5
    6
    7
    8
    timeTaken = callback => {
        console.time('timetask');
        let r = callback();
        console.timeEnd('timetask');
        return r;
    }

    timeTaken(()=> anagrams('abcdefghij'));

  18. 键值对转对象
    [[‘a’,1],[‘b’,2]] -> {a: 1, b: 2}

    1
    2
    3
    objFromPairs = arr => arr.reduce((pre, val) => (pre[val[0]] = val[1], pre), {});

    objFromPairs([['a',1],['b',2]]);

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

    1
    2
    3
    pipe = (...funcs) => arg => funcs.reduce((funcArgs, func) => func(funcArgs), arg);

    pipe(x => x + 1, x => console.log(x))(2);

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

    1
    2
    3
    powerset = arr => arr.reduce((pre, val) => pre.concat(pre.map(ele => [val].concat(ele))), [[]]);

    powerset([1,2]);

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

    1
    2
    3
    randomInRange = (min = 0, max = 100) => Math.random() * (max - min) + min;

    Math.floor(randomInRange(2,10));

  22. 随机化数组顺序

    1
    2
    3
    shuffle = arr => arr.sort(() => Math.random() - 0.5);

    shuffle([1,2,3,4,5,6,7]);

  23. RGB转十六进制
    (255, 165, 1) -> ‘ffa501’。 *padStart(ES2017)

    1
    2
    3
    4
    //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);

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

    1
    2
    3
    sortCharsInString = str => [...str].sort((a, b) => a.localeCompare(b)).join('');

    sortCharsInString('ibsuidibjbacb');

  25. 数组元素求和
    reduce累加

    1
    2
    3
    sumArray = arr => arr.reduce((sum, val) => sum + val, 0);

    sumArray([1,2,3,4,5]);

  26. 交换变量值
    数组解构

    1
    2
    3
    4
    5
    6
    let a = 1;
    let b = 'bbb';
    let c = { key: 'value' };
    [a, b, c] = [c, a, b];

    console.log(JSON.stringify(a) + '-' + b + '-' + c)

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

    1
    2
    3
    unique = arr => [...new Set(arr)];

    unique([11,22,3,444,444,55,55]);

  28. 获取URL参数
    match + reduce + map

    1
    2
    3
    4
    5
    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');

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

    1
    2
    3
    validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;

    validateNumber(10.1);

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

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