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

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

用 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"]]]



相关文章
|
7月前
|
JavaScript
js代码段
js代码段
22 0
|
JavaScript 前端开发 Java
19 个解决常见 JavaScript 问题的实用 ES6 代码段
在我们的开发人员工作流程中,我们经常遇到可能只需要几行代码即可解决的具有挑战性的问题。在本文中,我尝试编写一些有用的代码片段,这些代码片段可以在处理 URL、DOM、事件、日期、用户偏好等时为你提供帮助。
19 个解决常见 JavaScript 问题的实用 ES6 代码段
|
JavaScript 前端开发
推荐10 个短小却超实用的 JavaScript 代码段(http://www.jianshu.com/p/3ef822ec5a63)
文章转自《http://www.jianshu.com/p/3ef822ec5a63》,感谢作者分享! 推荐10 个短小却超实用的 JavaScript 代码段 字数2018 阅读4777 评论8 喜欢203 JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性
1558 0
|
XML Web App开发 JavaScript
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0
|
2天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
10 1
|
10天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!