业务开发中的javascript小技巧

Posted 2021-09-06 凌雁飞鸿

在顺利完成某一功能模块后，如何提高工作效率、如何时代吗更加简洁、优雅，便是我们接下来要考虑的问题。下面总结了一些开发过程中经常用到的一些技巧，供大家一起学习。

一、求和，最小值和最大值

const array = [5,4,7,8,9,2];
array.reduce((a,b) => a+b); // 求和
array.reduce((a,b) => a>b?a:b); // 最大值
array.reduce((a,b) => a<b?a:b); // 最小值

二、从数组中过滤掉“假”值

主要用于过滤掉像0, undefined, null, false, "", \'\'这些“假”值

const array = [3, 0, 6, 7, \'\', false];
array.filter(Boolean);

三、适用对象或Map实现计数器

比如说现在要计算一个关键词出现的频率

let string = \'kapilalipak\';

const table={}; 
for(let char of string) {
  table[char]=table[char]+1 || 1;
}
// 输出table
{k: 2, a: 3, p: 2, i: 2, l: 2}

或者

const countMap = new Map();
  for (let i = 0; i < string.length; i++) {
    if (countMap.has(string[i])) {
      countMap.set(string[i], countMap.get(string[i]) + 1);
    } else {
      countMap.set(string[i], 1);
    }
  }
// 输出
Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

四、随机排列一个数组中元素的位置

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.sort(() => {
    return Math.random() - 0.5;
});

五、双问号语法

概念是 当左边的值为 null 或者 undefined 时，就返回右边的值

const foo = null ?? \'my school\';
// 输出: "my school"

const baz = 0 ?? 42;
// 输出: 0

六、可选链

代码review时刚学到的，非常实用。

const adventurer = {
  name: \'Alice\',
  cat: {
    name: \'Dinah\'
  }
};

// 正常情况下我们可能这样写
const dogName = adventurer.dog ? adventurer.dog.name : \'\';
// 而使用可选链后我们可以这样写
const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined