一、复杂数据类型-“对象”的地址引用方式，不理解清楚，会出大乱子
复习一下基础概念（老司机略过）：
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
原创博文，求收藏、引用，不要复制粘贴