美文网首页
JS 改变形参导致实参改变

JS 改变形参导致实参改变

作者: kiwi_leo | 来源:发表于2019-05-28 11:12 被阅读0次

    今天碰到一个有意思的问题,在一个函数中对形参做了改变之后,导致实参的值发生了变化,原先并没有注意,今天偶然触发(所以代码要规范啊.......),直接上代码。

    代码

    demo1

    function test1(param){
      param = 3;
    }
    var x = 1;
    test(x);
    console.log(x); // x = 1 
    
    

    demo2

    function test2(param){
      param.name = "aven";
    }
    var persion = {
        name:"ake",
        age:18
    };
    
    test2(persion);
    console.log(persion); //{name:"aven",age:18}
    
    

    问题

    一样的套路,但是结果不同,demo1没有改变传入的实参变量,demo2改变了传入的实参变量。

    差别就在于demo1中,参数为简单数据类型(null,undefined,boolean,number,string),demo2中为复杂数据类型(object,typeof([]) === 'object')。

    解决

    那么要想对复杂数据类型进行传参后的处理应该怎么办?

    简单实现一个deepClone

    deepClone

    function deepClone(obj) {
        const tempObj = {};
        let keys = Object.keys(obj);
        keys.forEach(key => {
            if (typeof obj[key] === 'object') {
                if (Array.isArray(obj[key])) {
                    tempObj[key] = [].concat(obj[key]);
                } else {
                    tempObj[key] = deepClone(obj[key])
                }
            } else {
                tempObj[key] = obj[key];
            }
        });
        return tempObj;
    }
    

    创建一个新Object,当原Object的key所对应value为简单数据类型时,可以直接赋值给新Object,当原Object的key所对应value为复杂数据类型时,要对这个value递归使用deepClone方法,不可以直接赋值给新Object。

    引申

    如何比较两个复杂数据类型是否相等?

    比较两个复杂数据类型

    相关文章

      网友评论

          本文标题:JS 改变形参导致实参改变

          本文链接:https://www.haomeiwen.com/subject/oalrtctx.html