js语法中一些容易被忽略，但会造成严重后果的细节

一、复杂数据类型-“对象”的地址引用方式，不理解清楚，会出大乱子

复习一下基础概念（老司机略过）：

      JS的数据可以分为简单类型（数字、字符串、布尔值、null和undefined）和 复杂数据类型（对象），主要的不同是：简单数据类型是栈内存直接引用，复杂数据类型是地址引用的，放在堆内存中，所以也叫引用类型（堆栈概念庞大，这里不讲，百度资料很多）。下边讲到的诸多问题的导火索，就是这个地址引用。

     这里不谈“js中一切皆对象”这个言论，因为数字、字符串、布尔值等貌似‘对象’，因为他们有用方法，但请看定义，【js中‘对象’是可变的键控集合】，很显然，数字、字符串等不满足，因为他们不可变，所以说，js中俗定意义来讲，能称满足对象属性的大众意义数据类型是：对象、数组、函数、正则。

     记住这四个家伙，他们都是地址引用，接下来的诸多场景，出现问题，他们都有份。

1、场景一：函数形参引用复杂类型，请小心赋值，会改变实参的哦 ,下面是错误情况

    var obj = {};//全局建一个对象
    obj.n = 1;
    var arr = [];//全局建一个数组
    arr.n = 1;
    var fun = function(){};//全局建一个函数
    fun.n = 1;
    var reg = /d/;////全局建一个正则
    reg.n = 1;

    function bang(p){//形参p 改变形参p的n属性 回头看看会不会影响实参
        p.n = 2;
    }
    bang(obj);
    console.log(obj)//{n:2}  //obj.n 已经改变 1->2 影响了实参 全局变量obj
    bang(arr);
    console.log(arr.n)//2   arr也沦陷 arr.n值变为2
    bang(fun);
    console.log(fun.n)//2   fun.n也变了
    bang(reg);
    console.log(reg.n)//2   reg.n也变了

PS:同理参数是数组的，在函数内改变形参内的值，也会改变实参

有一些看似解决的方案，但实际并没有解决，或是遗留隐患，希望你不要中枪，PS:下面主要讨论对象和数组。（因为实际中少有给正则变量增加属性，后边则不讨论正则，function用作形参时大多体现在回调上，基本也不会去给函数赋一个属性，构建函数也是在原型上赋值新属性，所以函数也pass）

失败方案1：形参使用解构语句，或使用Object.assign重复制对象

失败原因：解构与Object.assign都是潜复制

var obj = {
    n:1,
    x:{
        nn:1
    }
};//全局建一个对象 注意obj.x也是一个对象

function bang({...p}){//形参p 改变形参p的n属性 p.x.nn属性 回头看看会不会影响实参
    p.n = 2;
    p.x.nn = 2;
}
bang(obj);
console.log(obj.n)//1  //解构确实保证了一级属性 没有改变
console.log(obj.x.nn)//2  //但是二级属性还是受到了污染
//为什么会这样？
//因为解构只是浅复制，只是对第一层简单类型的数据实现复制，而对象类型的属性复制的只是地址，引用的还是一个堆内存中的存储位置

失败方案2：使用Object.assign复制对象

失败原因：解构与Object.assign都是潜复制

var obj = {
    n:1,
    x:{
        nn:1
    }
};//全局建一个对象 注意obj.x也是一个对象

function bang({...p}){//先assign 形参p 改变形参p的n属性 p.x.nn属性 回头看看会不会影响实参
    var pp = Object.assign({},p);
    pp.n = 2;
    pp.x.nn = 2;
}
bang(obj);
console.log(obj.n)//1  //解构确实保证了一级属性 没有改变
console.log(obj.x.nn)//2  //但是二级属性还是受到了污染
//为什么会这样？
//因为Object.assign同样也是浅复制

2、场景二：数组方法slice只传递引用，不是真正意义的复制 

//slice只是传递引用，不是真正意义的复制
var arr = [{a:11},{a:11}];  //arr [{a:11},{a:11}]
var arr1 = arr.slice(0);   //arr1 [{a:11},{a:11}]
arr1[0].a = 22  
//arr1[0]指向的还是arr[0]的引用地址
//arr1 [{a:22},{a:11}]  arr [{a:22},{a:11}]
//concat也存在同样的问题 [].concat(arr)  

还有forEach、map、filter等，回调中的引用会不会也受地址引用的影响，答案是肯定的。如果在回调中修改了形参，会修改原数组，这是我们都不想要的。

var arr = [{n:{nn:1}},{n:{nn:2}}]

//我们常用map来加工数组，生产新数组，但如果在回调中修改了item，是否会影响到原数组呢？
var newArr = arr.map(item=>{
    item.n.nn++;
    return item;
})
console.log(newArr)//[{n:{nn:2}},{n:{nn:3}}]  我们得到了加工完毕的新数组
console.log(arr)//[{n:{nn:2}},{n:{nn:3}}]   但原数组arr也被影响了

会不会有这种想法，想要使用map实现数组复制的，但这种复制没什么用哦

var arr = [{n:{nn:1}},{n:{nn:2}}]

var newArr = arr.map(v=>v);//已经用map“复制”了个newArr,但它真的“干净”么？
newArr[0].n.nn = 99;//我修改了newArr，会不会改变arr呢

console.log(newArr)//[{n:{nn:99}},{n:{nn:3}}]  
console.log(arr)//[{n:{nn:99}},{n:{nn:3}}]   arr改变了，很明显map的复制没什么用

var arr = [{n:{nn:1}},{n:{nn:2}}]

//你会说这样直接复制太简单了，肯定会影响，我见过下面这样写的
var newArr = arr.map(v=>{
    var vv = Object.assign({},v);
    return vv;
});
newArr[0].n.nn = 99;//我修改了newArr，会不会改变arr呢

console.log(newArr)//[{n:{nn:99}},{n:{nn:3}}]  
console.log(arr)//[{n:{nn:99}},{n:{nn:3}}]   arr改变了

总结：[对象通过引用来传递，他们永远不会被复制]，函数形参引用和“=”等号赋值传递的都是引用地址，解构赋值和Object.assign都是浅复制，复制的对象属性、数组属性都是地址指针。

解决办法，jQuery的$.extend()方法已经封装了深拷贝，项目中没有依赖jQuery的可以自己封装一个deepCope方法，网上资源有的是。

此处有但是转折：地址引用虽然给我们带来了一些麻烦，但是事有两面性，有时候利用这个特性，能帮我们简化一些问题。比如数组的include方法，就可以有如下操作

var arr1 = [{n:1},{n:2}]
var arr2 = [{n:3},{n:4}]
var newArr= arr1.concat(arr2);//arr1、arr2合成了一个新数组 newArr

//在后边的使用中，我又想知道newArr中的元素都出自哪里，就可以用includes查出
newArr.forEach(v=>{
    console.log(arr1.includes(v)) // true true false false
})

//因为引用的是地址，includes对比的也是地址，所以对于追踪来说反而有利
//这个场景在dom中的列表点击上，比较常见

二、原型继承的问题，原型链中慎用引用类型的属性，不要修改实例继承的原型的引用类型属性，因为这将改变原型的值，造成不好的连锁反应。(原型的这些东西比较抽象，老手不用说就明白，新手怎么说也晕乎，还是直接上demo吧)

//方法 以参数为原型，创建实例
function creatObject (o){
    var Fun = function(){}
    Fun.prototype = o;
    return new Fun();
}
//创建目标原型
var peo = {
    name:'中国人',
    body:{
        height:180,
        weight:140
    }
}
//以peo为原型，创建继承了其属性的实例 stu
var stu = creatObject(peo);
var teacher = creatObject(peo);
console.log(stu.body.weight);//140
//重点：修改实例stu继承的原型属性 body.weight 会反射到原型peo中的去 又会进而影响其他所有继承peo的实例
//这是原型链本身经典问题：就是原型中的引用类型属性会被实例共享，也就能在实例中重写原型属性，造成连锁灾难
//所以尽量在构造函数中，而不是在原型上定义属性；开发中尽量少单独使用原型链，最好在没搞清原型继承关系前，不要轻易使用原型链
stu.body.weight = 200;
console.log(peo.body.weight)//200
console.log(teacher.body.weight)//200

 三、合理使用链式写法和try cache，保持必要的代码容错，提升代码的健壮性。避免常见的卡死级错误，如 Uncaught TypeError: Cannot read property 'XX' of undefined 

　　上面这个报错信息大家应该都很熟悉，很常见，但危害很大，能直接卡死进程，导致下面的程序都无法进行，经常在新手代码中出现，还有就是对接api接口，因为数据格式不稳定时产生（api接口数据中没有出现期待的字段）。解决办法有try catch 和 链式写法，个人推荐一般场景用链式就足够了，但像转JSON的时候，就要用try catch了。

//1、链式写法 设置默认值，增强容错的同时，还very优雅简洁
var data = {};
var array = [];

//下面这样就会出问题  因为data.d是undefined  undefined是没有属性的，调用undefined的属性就会报错
var errData = data.d.d;  //Uncaught TypeError: Cannot read property 'd' of undefined

//怎样避免这样的错误
//我推荐链式写法，干净利索,如下

//错误写法
var res = data.a.b;  // error
var res1 = array[0].a;// error
//正确写法
var res = (data.a||{}).b;
var res1 = (array[0]||{}).a;

// 2、try catch解决json转换问题  这里不谈try catch的缺陷，万事两面性，只看取舍
var jsonStr = '{n:11}';

//json格式不对 报错 Uncaught SyntaxError: Unexpected token n in JSON at position 1
// var jsonData = JSON.parse(jsonStr) //error

//这个情景经常在对接api接口时碰到，后台没有给我们返回期望值，导致程序报错崩溃，怎么办？
//好的程序应该在这里预先做好容错，保证代码的健壮性
var jsonData;
try{
    jsonData = JSON.parse(jsonStr)
}catch(err){
    jsonData = {};//当出现问题时，我们要给一个容错的默认值
    console.warn("JSON转换失败：",err)
}
console.log(jsonData)

 四、Math.max 和 Math.min 求极值

//Math.max求极值简单方便  Math.min同理
Math.max.apply( null, [1,11,2])//11
Math.max.apply( null, [1,11,2,null])//11
Math.max.apply( null, [1,11,2,''])//11

//但Math.max对参数类型兼容比较低，如下操作都会失败 Math.min同理
Math.max.apply( null, [1,11,2,undefined]) //NaN
Math.max.apply( null, [1,11,2,'string']) //NaN

// 我们可以用map加一层容错处理 
Math.max.apply( null, [1,11,2,'string',0,undefined,null,'',-22].map(v=>Number(v)||0)) //11

 原创博文，求收藏、引用，不要复制粘贴