前端日常总结与实战技巧-4

数值精度丢失

如果数值过长，会造成精度丢失，前端用任何转换处理都会造成精度丢失问题。
例如下图中的数值转字符串，最后得出的结果精度还是丢失
所以最好是原始值就是字符串，这样精度才不会丢失

reduce实现累加

最简单的累加：

let a = [3, 4, 5];
let sum = a.reduce((accumulator, currentValue) => accumulator + currentValue);

console.log(sum); // 输出 12

特殊处理的累加：

let a = [
    { n: 3 },
    { n: 4 },
    { n: 5 },
    { n: 6 },
];

// 实现累加,acc为累加数值，curr为当前项
// 内部可以做多条件判断，做特殊处理
// n = 5 则 n 翻5倍
// 如果计算值为0,则直接返回acc
let sum = a.reduce((acc, curr) => {
    if (curr.n === 5) {
        return acc + curr.n * 5;
    } else if (curr.n === 6) {
        return acc
    } else {
        return acc + curr.n;
    }
}, 0);

console.log(sum); // 输出：32

image标签跨域问题

加上crossOrigin='anonymous'即可

 <img src="xxxxx" alt="" crossOrigin='anonymous' />

crossOrigin 属性

1. anonymous
   执行一个跨域请求获取资源，但不可以携带cookie、证书或者 HTTP 基本验证信息
2. use-credentials
   跨域请求获取资源，可以携带cookie、证书或者 HTTP 基本验证信息

uni-app中使用html2Canvas图片模糊

在uni-app中把image改成img标签

Reflect操纵Object

正常的操纵Object，例如：获取、新增、删除、修改

let obj = {
    name: '张三',
    age: 100,
    address: "浙江省杭州市"
}
obj.nickName = "江南舞王" // 新增
obj.name = '赵四' // 修改
delete obj.age // 删除
console.log(obj) // 获取

我们可以通过Reflect函数式的操纵Object，例如：获取、新增、删除、修改

Reflect.set(obj,'name','赵四') // 修改
Reflect.set(obj,'nickName','江南舞王') // 新增
Reflect.deleteProperty(obj,'age') // 删除
console.log(Reflect.get(obj,'name')) // 获取
console.log(obj)

通过Reflect操纵对象会返回布尔值，来表示是否操纵成功，对比直接操纵Object，用Reflect可以避免不可预期的错误。

console.log(Reflect.set(obj,'name','赵四')); // true

另外Reflect是函数式操纵，可读性更强，并且Reflect提供了13种函数用于操纵Object。
具体操作请看这篇文章：详解Reflect

MD5加密

两次MD5加密同一个字符串，返回值是完全一致的。
使用MD5加密的同时，需要做加盐处理，这样才能保证密码是安全的。

请求时间差

对于多个请求，可能造成时间差，例如A接口请求后再请求B接口，解决方法：两个接口一起请求
这是一个对业务或者逻辑理解的经验差，代码写到最后，其实是业务逻辑处理和场景处理问题，代码在网上找一找，思考一下基本上功能就可以实现，但哪种实现方式好才是重要的。

---

阅读其它：
前端日常总结与实战技巧-3
前端日常总结与实战技巧-2
前端日常总结与实战技巧-1