一些用过的方法

﹏ヽ暗。殇╰゛Y 2022-11-04 05:28 135阅读 0赞

首先说明下，这些是在“**web开发前端**”公众号里看到的，（是一个很优质的公众号，大家可以去关注学习一下）并且根据自身的项目经历整理出来的。

/*1.如果数组所有元素满足函数条件，则返回true。调用时，如果省略第二个参数，则默认传递布尔值*/
    /*1.1 js版*/
    const all = (arr, fn = Boolean) => arr.every(fn);
    let all1=all([4, 2, 3], x => x > 10); 
    let all2=all([1, 2, 3]); 
    console.log(all1);// false
    console.log(all2);// true
    /*1.2 vue封装函数，export版*/
    export function all(arr,fn = Boolean) { 
    	return arr.every(fn)
    }
    //在需要用到的页面引入 import {all} from '../js/style.js'
    let arr=[0,23,7]
    let fun=x=>typeof x=='number';
    let all3=all(arr,fun)//arr和fun必传，不然输出false
    console.log(all3);//true
    
    
    /*2.判断数组中的元素是否都相等*/
    /*2.1 js版*/
    const isAllSame = arr => arr.every(val => val === arr[0]);
    let isAllSame1=allEqual([1, 2, 3, 4, 5, 6]); // false
    let isAllSame2=allEqual([1, 1, 1, 1]); // true
    /*2.2 vue封装函数，export版*/
    export function isAllSameFun(arr) { 
    	return arr.every(val => val === arr[0])
    }
    //引入同上
    let isAllSameFun1=isAllSameFun([1, 1, 1, 1,'1']); 
    let isAllSameFun2=isAllSameFun([1, 1, 1, 1]);
    console.log(isAllSameFun1);//false
    console.log(isAllSameFun2);//true
    
    
    /*3.动态的在某个id里添加html内容，内容为数组*/
    /*3.1 js版*/
    addHtml(arr,id){ 
      let el= document.querySelector('#' + id)
      el.innerHTML += arrHtml.map(item => `<div>${ item.name}</div>`).join('')
    }
    //使用,在view层要加id，例如<div id="idAdd"></div>
    this.addHtml([{ name:'item 1'}, { name:'item 2'}], 'idAdd');
    /*3.2 vue封装函数，export版*/
    export function addHtml(arrHtml,id) { 
    	let el= document.querySelector('#' + id)
      el.innerHTML += arrHtml.map(item => `<div>${ item.name}</div>`).join('')
    }
    //引入同上
    addHtml([{ name:'item 1'}, { name:'item 2'}], 'id');
    
    
    /*4.求平均数*/
    /*4.1 js版*/
    const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;
    let average1=average(...[1, 11, 3]); 
    let average2=average(1, 2, 3); 
    console.log(average1);//5
    console.log(average2);//2
    /*4.2 vue封装函数，export版*/
    export function getAverage(...nums) { 
    	return nums.reduce((acc, val) => acc + val, 0) / nums.length
    }
    let average1=getAverage(...[1, 11, 3]); 
    let average2=getAverage(1, 2, 3); 
    console.log(average1);//5
    console.log(average2);//2
    
    
    /*5.求平均数进阶版*/
    /*5.1 js版*/
    const averageBy = (arr, fn) =>arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => acc + val, 0)/arr.length;
    let averageBy1=averageBy([{  n: 14 }, {  n: 2 }, {  n: 8 }, {  n: 6 }], o => o.n); 
    let averageBy2=averageBy([{  n: 4 }, {  n: 2 }, {  n: 8 }, {  n: 6 }], 'n');
    console.log(averageBy1);// 7.5
    console.log(averageBy2);// 5
    /*5.2 vue封装函数，export版*/
    export function getAverageAdvance(arr,fn) { 
    	return arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => acc + val, 0)/arr.length
    }
    let averageBy1=getAverageAdvance([{  n: 14 }, {  n: 2 }, {  n: 8 }, {  n: 6 }], o => o.n); 
    let averageBy2=getAverageAdvance([{  n: 4 }, {  n: 2 }, {  n: 8 }, {  n: 6 }], 'n');
    console.log(averageBy1);// 7.5
    console.log(averageBy2);// 5
    
    
    /*6.函数包含两个参数，类型都为数组，依据第二个参数的真假条件，将一个参数的数组进行分组，条件为真的放入第一个数组，其它的放入第二个数组 */
    /*6.1 js版 */
    const differentiateArr = (arr, filter) =>arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);
    let differentiateRes=differentiateArr(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]); 
    console.log(differentiateRes);//[ ['beep', 'boop', 'bar'], ['foo'] ] 
    /*6.2 vue封装函数，export版 */
    export function getDifferentiate(arr, filter) { 
    	return arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []])
    }
    let bifurcate1=getDifferentiate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]); 
    console.log(bifurcate1);//[ ['beep', 'boop', 'bar'], ['foo'] ] 
    
    
    /*7.将数组按照指定的函数逻辑进行分组，满足函数条件的逻辑为真，放入第一个数组中，其它不满足的放入第二个数组 */
    /*7.1 js版 */
    const bifurcateBy = (arr, fn) =>arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);
    let bifurcateByRes=bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[1] === 'o'); 
    console.log(bifurcateByRes);//[ ['boop', 'foo'], ['beep', 'bar'] ]
    /*7.2 vue封装函数，export版 */
    export function arrJudge(arr, fn) { 
    	return arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []])
    }
    let bifurcateByRes=arrJudge(['beep', 'boop', 'foo', 'bar'], x => x[1] === 'o'); 
    console.log(bifurcateByRes);//[ ['boop', 'foo'], ['beep', 'bar'] ]
    
    
    /*8.检测页面是否滚动到页面底部 */
    /*8.1 js版 */
    const bottomVisible = () =>document.documentElement.clientHeight + window.scrollY >=(document.documentElement.scrollHeight || document.documentElement.clientHeight);
    console.log(bottomVisible())//true or false
    /*8.2 vue封装函数，export版 */
    export function isGoButtom() { 
    	return document.documentElement.clientHeight + window.scrollY >=(document.documentElement.scrollHeight || document.documentElement.clientHeight)
    }
    console.log(isGoButtom())//true or false
    
    
    /*9.将字符串的首字母转成大写 */
    /*9.1 js版 */
    const capitalize = ([first, ...rest]) =>first.toUpperCase() + rest.join('');
    console.log(capitalize('fooBar'));//FooBar
    /*9.2 vue封装函数，export版 */
    export function switchStr([first, ...rest]) { 
    	return first.toUpperCase() + rest.join('')
    }
    console.log(switchStr('fooBar'));//FooBar
    
    
    /*10.将一个句子中每个单词首字母转换成大写字母 正则*/
    /*10.1 js版*/
    const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
    console.log(capitalizeEveryWord('hello world!'));
    /*10.2 vue封装函数，export版 */
    export function switchStrAll(str) { 
    	return str.replace(/\b[a-z]/g, char => char.toUpperCase())
    }
    console.log(switchStrAll('hello world!'));
    
    
    /*11.统计数组中某个值出现的次数 */
    /*11.1 js版*/
    const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
    let countOccurrencesRes=countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3
    console.log(countOccurrencesRes);
    /*11.2 vue封装函数，export版 */
    export function countOccurrences(arr, val) { 
    	return arr.reduce((a, v) => (v === val ? a + 1 : a), 0)
    }
    let countOccurrencesRes=countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3
    console.log(countOccurrencesRes);
    
    
    /*12.通过递归的形式，将多维数组展平成一维数组*/
    /*12.1 js版*/
    const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));
    let deepFlattenRes=deepFlatten([1, [2], [[3], 4], 5]); 
    console.log(deepFlattenRes)// [1,2,3,4,5]
    /*12.2 vue封装函数，export版 */
    export function deepFlatten(arr) { 
    	return [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)))
    }
    let deepFlattenRes=deepFlatten([1, [2], [[3], 4], 5]); 
    console.log(deepFlattenRes)// [1,2,3,4,5]