JS技巧(二)

未结 0 2345
VIP1 2019年09月20日
悬赏:20积分

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

回帖
  • 还没有人回复
本周热议
没有相关数据
layui

微信扫码关注 网盟开源 公众号