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

时间:2023-02-10 15:43:46

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

复习一下基础概念(老司机略过):

      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

 

 

 

 

 

 

 

 

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