文章序

开发中遇到了一个问题，正好没有深入去研究解构赋值和深浅拷贝，借此机会学习一波，整理如下

函数的形参写法有些不懂，简化代码如下：

function myFunction({
        school = [],
        grade = [],
        class = [],
        name = "hpf",
        age = null
      } = {
        school : [],
        grade : [],
        class : [],
        name : "hpf",
        age : null
      }) {
    school.map(() => {
      // do something
    })
}

看起来就很魔幻，第一次见这么写形参的，但是魔幻归魔幻，咱还得继续分析不是，第一眼看到就想到了解构赋值，但是为什么这里要解构赋值，不清楚，直到我继续往下看，在函数体内发现了.map循环，并且在循环里还改变了变量值，然后我就突然明白了，这是用解构赋值实现深拷贝啊！遂写了个demo测试一下，代码如下：

<script>
let obj1 = {
    name: 'zs',
    age: 20,
    city: 'New York'
};
let obj2 = {
    name: 'zs',
    age: 20,
    city: 'New York'
};
function fun1 (
    {
        name = '',
        age = null,
        city = ''
    } = {
        name: '',
        age: null,
        city: ''
    }
) {
    console.log(name, age, city);                           // zs 20 New York
    name = 'ls',
    age = 30,
    city = 'London'
    console.log(name, age, city);                           // ls 30 London
    console.log(obj1.name, obj1.age, obj1.city);            // zs 20 New York
};
function fun2 (obj) {
    let copyObj = obj;
    console.log(obj.name, obj.age, obj.city);               // zs 20 New York
    copyObj.name = 'ls',
    copyObj.age = 30,
    copyObj.city = 'London'
    console.log(copyObj.name, copyObj.age, copyObj.city);   // ls 30 London
    console.log(obj.name, obj.age, obj.city);               // ls 30 London
};
fun1(obj1);
fun2(obj2);
</script>

可以看出来，不出所料，果然是为了实现深拷贝，以前提到深拷贝，要么就是数组通过循环遍历然后另起一个变量进行复制，要么就是用JSON.prase(JSON.stringify(obj))通过JSON转换，这次又学到了新的方法