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

 [[408192]]

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

本文转载自微信公众号「前端历劫之路」，可以通过以下二维码关注。转载本文请联系前端历劫之路公众号。

标题名称：今天，学会这10个JS代码段就够了！
网页路径：http://www.shufengxianlan.com/qtweb/news17/311417.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联