今天，学会这10个JS代码段就够了！

淩亂°似流年 2021-09-08 20:42 293阅读 0赞

## 用 apply 将数组各项添加到另一个数组 ##

const array = ['a', 'b'];
    const elements = [0, 1, 2];
    array.push.apply(array, elements);
    console.info(array); // ["a", "b", 0, 1, 2]

## 函数只执行一次 ##

function once (fn){ 
      let called = false
      return function () { 
        if (!called) { 
          called = true
          fn.apply(this, arguments)
        }
      }
    }
    
    function func (){ 
        console.log(1);
    }
    
    //调用
    let onlyOnce = once(func);
    
    // 测试
    onlyOnce(); // 1
    onlyOnce(); // 不执行

## 防抖 ##

/** * 防抖 * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */
    let timeout;
    function Debounce(func, wait = 3000, immediate = true) { 
      // 清除定时器
      if (timeout !== null) clearTimeout(timeout);
      // 立即执行，此类情况一般用不到
      if (immediate) { 
        var callNow = !timeout;
        timeout = setTimeout(function() { 
          timeout = null;
        }, wait);
        if (callNow) typeof func === 'function' && func();
      } else { 
        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
        timeout = setTimeout(function() { 
          typeof func === 'function' && func();
        }, wait);
      }
    }
    
    Debounce(()=>console.log(1));

## 递归数组降为一维 ##

let children = [1, [2, 3], [4, [5, 6, [7, 8]]], [9, 10]];
    function simpleNormalizeChildren(children) { 
                for (let i = 0; i < children.length; i++) { 
                    if (Array.isArray(children[i])) { 
                        children = Array.prototype.concat.apply([], children);
                        simpleNormalizeChildren(children)
                    }
                }
                return children;
            }
    
    console.log(simpleNormalizeChildren(children)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

## 数组降维(二维降一维) ##

function simpleNormalizeChildren(children) { 
                for (let i = 0; i < children.length; i++) { 
                    if (Array.isArray(children[i])) { 
                        return Array.prototype.concat.apply([], children)
                    }
                }
                return children
    }
    let arrs = [['1'],['3']];
    const arr = simpleNormalizeChildren(arrs);
    console.log(arr); // ['1','3']

## 使用可选链进行函数调用 ##

function doSomething(onContent, onError) { 
      try { 
       // ... do something with the data
      }
      catch (err) { 
        onError?.(err.message); // 如果onError是undefined也不会有异常
      }
    }

## 检测数组对象中是否有空值 ##

const data = [
      { 
      	name:"maomin"
      },
      { 
        name:""
      }
    ]
    const arr = data.filter(item =>
        Object.values(item).includes('')
    );
    
    console.log(arr.length>0?"有空值":"无空值"); // 有空值

## 计算数组中每个元素出现的次数 ##

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
    
    let countedNames = names.reduce(function (allNames, name) { 
      if (name in allNames) { 
        allNames[name]++;
      }
      else { 
        allNames[name] = 1;
      }
      return allNames;
    }, { });
    
    console.log(countedNames); // { Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }

## 按属性对object分类 ##

let people = [
      {  name: 'Alice', age: 21 },
      {  name: 'Max', age: 20 },
      {  name: 'Jane', age: 20 }
    ];
    
    function groupBy(objectArray, property) { 
      return objectArray.reduce(function (acc, obj) { 
        let key = obj[property];
        if (!acc[key]) { 
          acc[key] = [];
        }
        acc[key].push(obj);
        return acc;
      }, { });
    }
    
    const groupedPeople = groupBy(people, 'age');
    console.log(groupedPeople);
    // { 
    // 20: [
    // { name: 'Max', age: 20 },
    // { name: 'Jane', age: 20 }
    // ],
    // 21: [{ name: 'Alice', age: 21 }]
    // }

## 将带有分割符的字符串转化成一个n维数组 ##

const str = "A-2-12";
     const str1 = str.split('-');
     console.log(str1);
     const arr = str1.reverse().reduce((pre,cur,i) => { 
     if(i==0)
      {  pre.push(cur)
       return pre
     }
      return [cur,pre]
    },[])
     
    console.log(arr) // ["A"["B",["C"]]]

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关关于代码混淆，看这篇就够了

代码混淆一.基本概念 java的bytecode很容易通过JAD等反编译工具还原出源代码。这样势必不满足安全的定义。如何一定程度上保护需要防止被反编译的源代码呢？

叁歲伎倆/ 2024年03月27日 16:49/ 0 赞/ 105 阅读

相关关于redis，学会这10点就够了

1. 简介 Redis是一个key-value的内存数据库.先存到内存中，会根据一定的策略持久化到硬盘文件，来保证数据持久化，即使断电也不会丢失数据，可以通过把硬

心已赠人/ 2023年02月27日 13:38/ 0 赞/ 7 阅读

相关 Euraka-看这就够了

1.架构图架构图.png ![c3a875a79a0505abada407d7a3d0363c.png][] Euraka支持多副本机制所有的R

柔光的暖阳◎/ 2023年01月07日 07:05/ 0 赞/ 232 阅读

相关 Git，看这篇就够了！！

目录 [安装配置与文档][Link 1] [文档教程相关][Link 2] [下载安装][Link 3] [概念

àì夳堔傛蜴生んèń/ 2022年12月19日 08:42/ 0 赞/ 963 阅读

相关前端动态规划 js 看这篇就够了

动态规划 90% 的字符串问题都可以用动态规划解决，并且90%是采用二维数组。一、动态规划的三大步骤动态规划，无非就是利用历史记录，来避免我们的重复计算。而这

╰+哭是因爲堅強的太久メ/ 2022年11月15日 06:01/ 0 赞/ 204 阅读

相关关于redis，学会这8点就够了

1、redis是什么 [redis][]是一种支持Key-Value等多种数据结构的存储系统。可用于缓存、事件发布或订阅、高速队列等场景。该数据库使用ANSI C语言编写，支

Myth丶恋晨/ 2022年04月05日 18:39/ 0 赞/ 205 阅读

相关关于redis，学会这8点就够了

转载供学习使用 1，redis是什么 [redis][]是一种支持Key-Value等多种数据结构的存储系统。可用于缓存，事件发布或订阅，高速队列等场景。该数据库使用ANS

本是古典何须时尚/ 2022年03月15日 00:24/ 0 赞/ 258 阅读

相关记住这几个git命令就够了

git clone: 下载初始化 git add:添加 git commit -m ‘ ’ :提交带消息 git push：推送 git pull：拉取

╰+哭是因爲堅強的太久メ/ 2021年09月19日 15:16/ 0 赞/ 349 阅读

相关今天，学会这几个Vue高级实战技巧就够了!

前言今天，我们来分享几个不可不知的vue高级实战技巧。技巧自动注册组件我们平时可能这样引入注册组件。每次都得需要在头部引入，然后注册，最后在模板上使

骑猪看日落/ 2021年09月09日 01:26/ 0 赞/ 319 阅读

相关今天，学会这10个JS代码段就够了！

用 apply 将数组各项添加到另一个数组 const array = ['a', 'b']; const elements = [0, 1, 2];

淩亂°似流年/ 2021年09月08日 20:42/ 0 赞/ 294 阅读