javascript: 复制数组时的深拷贝及浅拷贝(chrome 105.0.5195.125)

一，js代码:

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>
  <button onclick="assignCopy()">无效:变量直接赋值</button><br/><br/><br/>
  <button onclick="sliceCopy()">浅拷贝:slice复制数组</button><br/><br/>
  <button onclick="concatCopy()">浅拷贝:concat复制数组</button><br/><br/>
  <button onclick="arrayFromCopy()">浅拷贝:Array.from复制数组</button><br/><br/>
  <button onclick="operatorCopy()">浅拷贝:操作运算符复制数组</button><br/>
  说明：对于对象数组的整体拷贝，其内部对象则依旧为浅拷贝<br/><br/><br/>

  <button onclick="mapCopy()">深拷贝:map遍历复制数组</button><br/><br/>
  <button onclick="jsonCopy()">深拷贝:json复制数组</button><br/><br/>
<script>
    //直接赋值复制数组
    function assignCopy() {
            let array1 = new Array("1","2",{name:'老刘',age:30},"3"); 
            let array2 = array1;
        console.log('array1:');
        console.log(array1);
        console.log('array2:');
        console.log(array2);
         array1[1] = '测试';
         array1[2].name = '老王';
        console.log('array1:');
        console.log(array1);
        console.log('array2:');
        console.log(array2);
        console.log('是否同一个数组：');
        console.log(array1 === array2 );
        }
      //slice复制数组
            function sliceCopy() {
            let array1 = new Array("1","2",{name:'laoliu',age:30},"3"); 
            let array2 = array1.slice(0); 
        console.log('array1:');
        console.log(array1);
        console.log('array2:');
        console.log(array2);
        array1[1] = '测试';
        array1[2].name = '老王';
        console.log('array1:');
        console.log(array1);
        console.log('array2:');
        console.log(array2);
        console.log('是否同一个数组：');
        console.log(array1 === array2 );
        }
      //concat复制数组
            function concatCopy() {
            let array1 = new Array("1","2",{name:'laoliu',age:30},"3"); 
            let array2 = array1.concat();  
        console.log('array1:');
        console.log(array1);
        console.log('array2:');
        console.log(array2);
        array1[1] = '测试';
        array1[2].name = '老王';
        console.log('array1:');
        console.log(array1);
        console.log('array2:');
        console.log(array2);
        console.log('是否同一个数组：');
        console.log(array1 === array2 );
        }
      //操作运算符复制数组
            function operatorCopy() {
            let array1 = new Array("1","2",{name:'laoliu',age:30},"3"); 
            let array2 = [...array1]; 
        console.log('array1:');
        console.log(array1);
        console.log('array2:');
        console.log(array2);
        array1[1] = '测试';
        array1[2].name = '老王';
        console.log('array1:');
        console.log(array1);
        console.log('array2:');
        console.log(array2);
        console.log('是否同一个数组：');
        console.log(array1 === array2 );
        }
              //map遍历复制数组
            function mapCopy() {
            let array1 = new Array("1","2",{name:'laoliu',age:30},"3"); 
            let array2 = [...array1.map(aInfo => {
    return Object.assign({}, aInfo)
})];
        console.log('array1:');
        console.log(array1);
        console.log('array2:');
        console.log(array2);
        array1[1] = '测试';
        array1[2].name = '老王';
        console.log('array1:');
        console.log(array1);
        console.log('array2:');
        console.log(array2);
        console.log('是否同一个数组：');
        console.log(array1 === array2 );
        }
    // jsonCopy
            function jsonCopy() {
            let array1 = new Array("1","2",{name:'laoliu',age:30},"3"); 
            let array2 = JSON.parse(JSON.stringify(array1));
        console.log('array1:');
        console.log(array1);
        console.log('array2:');
        console.log(array2);
        array1[1] = '测试';
        array1[2].name = '老王';
        console.log('array1:');
        console.log(array1);
        console.log('array2:');
        console.log(array2);
        console.log('是否同一个数组：');
        console.log(array1 === array2 );
        }
</script>
</body>
</html>