前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >今天,学会这10个JS代码段就够了!

今天,学会这10个JS代码段就够了!

作者头像
Vam的金豆之路
发布2021-12-01 10:53:24
2650
发布2021-12-01 10:53:24
举报
文章被收录于专栏:前端历劫之路

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

代码语言:javascript
复制
const array = ['a', 'b'];
const elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

函数只执行一次

代码语言:javascript
复制
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(); // 不执行

防抖

代码语言:javascript
复制
/**
 * 防抖
 * @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));

递归数组降为一维

代码语言:javascript
复制
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]

数组降维(二维降一维)

代码语言:javascript
复制
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']

使用可选链进行函数调用

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

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

代码语言:javascript
复制
const data = [
  {
   name:"maomin"
  },
  {
    name:""
  }
]
const arr = data.filter(item =>
    Object.values(item).includes('')
);

console.log(arr.length>0?"有空值":"无空值"); // 有空值

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

代码语言:javascript
复制
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分类

代码语言:javascript
复制
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维数组

代码语言:javascript
复制
 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"]]]
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-06-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端历劫之路 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 用 apply 将数组各项添加到另一个数组
  • 函数只执行一次
  • 防抖
  • 递归数组降为一维
  • 数组降维(二维降一维)
  • 使用可选链进行函数调用
  • 检测数组对象中是否有空值
  • 计算数组中每个元素出现的次数
  • 按属性对object分类
  • 将带有分割符的字符串转化成一个n维数组
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档