前端常用代码示例-1

阳光穿透心脏的1/2处 2022-04-27 23:06 147阅读 0赞

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

### 参考文章 ###

>  *

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

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

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

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

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

1.  首字母大写 使用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);
    复制代码

1.  字符串反转

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

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

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

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

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

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

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

1.  数组比较差异 从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);
    复制代码

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

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

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

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

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

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

1.  斐波那契数组生成 创建一个特定长度的空数组，初始化前两个值(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);
    复制代码

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

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

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

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

1.  函数执行计时 console.time

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

1.  键值对转对象 \[\['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]]);
    复制代码

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

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

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

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

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

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

1.  随机化数组顺序

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

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

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

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

1.  数组元素求和 reduce累加

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

1.  交换变量值 数组解构

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

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

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

1.  获取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');
    复制代码

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

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

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

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