JS技巧（二）

5. 数组降维

二维数组

let arr = [ [1], [2], [3] ]
arr = Array.prototype.concat.apply([], arr); // [1, 2, 3]

多维数组降维

let arr = [1, 2, [3], [[4]]]
arr = arr.flat(3) // [1, 2, 3, 4]

flat 有兼容性问题，手机端问题不大。浏览器端不兼容 edge。填 Infinity 可展开任意深度的数组

6.深拷贝
使用变量 a 拷贝对象 b，改变 a 中的值 b 中的值也会跟着改变，这叫做浅拷贝。要想让 a 独立于 b 就需要深拷贝

简易处理

function deepClone() {
    return JSON.parse(JSON.stringify(obj))
}

既然是简易处理就有他的不足，上面主要是用了 JSON 的序列化和反序列化。而 JSON 是不支持函数和 undefined 的因此碰到这些情况会缺失，但是已经能够满足大部分情况了

复杂处理
复杂处理就需要采用递归的方式了

function deepClone(obj) {  
  function isClass(o) {    
  if (o === null) return "Null";    
  if (o === undefined) return "Undefined";    
    return Object.prototype.toString.call(o).slice(8, -1);  
  }  
  var result;  
  var oClass = isClass(obj);  
  if (oClass === "Object") {    
    result = {};  
  } else if (oClass === "Array") {
    result = [];  
  } else {    
    return obj;  
  }  
  for (var key in obj) {    
    var copy = obj[key];    
    if (isClass(copy) == "Object") {      
      result[key] = arguments.callee(copy);//递归调用    
    } else if (isClass(copy) == "Array") {      
      result[key] = arguments.callee(copy);    
    } else {      
      result[key] = obj[key];    
    }  
  }  
  return result;
}

7. 防抖 & 节流

防抖和节流属于高阶技巧，业务中比较多见的场合也就是搜索内容改变提示信息。即使不加也也不一定能看出区别，但是加了新手维护代码可能会崇拜你哦。

防抖

function debounce(func, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}

节流

function throttle(func, wait) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

8. 获取数组极值

function smallest(array){                           
  return Math.min.apply(Math, array);             
}                                                 
function largest(array){                            
  return Math.max.apply(Math, array);             
}  
smallest([0, 1, 2.2, 3.3]); // 0
largest([0, 1, 2.2, 3.3]); // 3.3

感谢岁月无影的评论，再此补充用 es6 的实现方式

let list = [1, 2, 3, 4, 5]
Math.max(...list) // 5
Math.min(...list) // 1

9.判断小数是否相等

function epsEqu(x,y) {  
  return Math.abs(x - y) < Math.pow(2, -52);
}
// 举例
0.1 + 0.2 === 0.3 // false
epsEqu(0.1 + 0.2, 0.3) // true

感谢 IAmFineThanks 提供的 Number.EPSILON ，Number.EPSILON === Math.pow(2, -52)因此上述方法也可以这么写

function epsEqu(x,y) {  
  return Math.abs(x - y) < Number.EPSILON;
}

用户输入的是十进制数字，计算机保存的是二进制数。所以计算结果会有偏差，所以我们不应该直接比较非整数，而是取其上限，把误差计算进去。这样一个上限称为 machine epsilon，双精度的标准 epsilon 值是 2^-53 （Math.pow(2, -53)）

转自 掘金 MrXu_
链接：https://juejin.im/post/5d7659c76fb9a06b307068ed