JS实用小Tips

1、reduce的应用

reduce介绍

reduce主要实现的功能类似累加，通过一个值记录最终实现结果，并且将这个值不断放入遍历中，最后返回需要的最终结果。
reduce((previousValue, currentValue, currentIndex, array) => { /* … */ } ,initialValue)
首参方法中四个参数分别是上一个记录的值、当前遍历item、当前遍历index以及数组本身，次参则是可以给pre一个初始值。

使用场景

const arr = [1,2,3,4,5]
// 1、累加（给一个初始值2）
const test =arr.reduce((pre,cur)=>{
    
    
  return pre+cur;
},2)
// 输出17

// 2、找出最大值
const test2=arr.reduce((pre,cur)=>pre>cur?pre:cur)
// 输出5

当如果数组项为数字，求最大最小值也可以Math.max(…arr)也可以实现甚至看起来更优雅。但局限性在类型为数字，而当数组项为其他类型时（如求一个对象数组中的某个属性的最大值），reduce可以提供一个更好的解决思路。

2、初始化二维数组

本人在实际写代码的过程中遇到过初始化二维数组的场景，当时也想用fill实现，但是失败了，原因就是我直接放入了[]而指向了实际的数组对象，导致所有的都指向了同一个空数组，参考后用map可以更优雅实现。

const secondArr = Array(5).fill(0).map(()=>Array(0))
// 输出
// 0: []
// 1: []
// 2: []
// 3: []
// 4: []
// length: 5

初始化一个已知有几行的二维数组，只需先用0填充外面一层，再对每个进行遍历return空数组即可。

3、从数组中过滤出假值

用Boolean函数过滤掉所有假值：0，undefined，null，false，“”，‘’。弊端：0也会被滤掉，对于数字数组来说可能需要数字0的存在。

const arr=[0,3,2,'',false,null]
const arrFilter = arr.filter(Boolean)
console.log(arrFilter)
//输出[3,2]

4、空值合并运算符

空值合并运算符 (??) 是一个逻辑运算符，当其左侧操作数为空或未定义时返回其右侧操作数，否则返回其左侧操作数。

const foo = null ?? 'my school';
// 输出: "my school"
const baz = 0 ?? 42;
// 输出: 0

5、将十进制转换为二进制或十六进制

const num = 10;
num.toString(2);
// 输出: "1010"
num.toString(16);
// 输出: "a"
num.toString(8);
// 输出: "12"