【JavaScript】23_浅拷贝和深拷贝 + 对象的复制 + 数组的常用方法

7、浅拷贝和深拷贝

浅拷贝（shallow copy）

• 通常对对象的拷贝都是浅拷贝
• 浅拷贝顾名思义，只对对象的浅层进行复制（只复制一层）
• 如果对象中存储的数据是原始值，那么拷贝的深浅是不重要
• 浅拷贝只会对对象本身进行复制，不会复制对象中的属性（或元素）

深拷贝（deep copy）

• 深拷贝指不仅复制对象本身，还复制对象中的属性和元素
• 因为性能问题，通常情况不太使用深拷贝

    <script>
        //创建一个数组
        const arr = [{name:'孙悟空'},{name:'猪八戒'}]
        const arr2= arr.slice()//浅拷贝

        const arr3 = structuredClone(arr)//专门用来深拷贝的方法

        console.log(arr)
        console.log(arr3)
    </script>

8、对象的复制

对象的复制

• Object.assign(目标对象, 被复制的对象)

• 将被复制对象中的属性复制到目标对象里，并将目标对象返回

• 也可以使用展开运算符对对象进行复制

… (展开运算符)

• 可以将一个数组中的元素展开到另一个数组中或者作为函数的参数传递
• 通过它也可以对数组进行浅复制

    <script>
        const arr = ['孙悟空','猪八戒','沙和尚']
        const arr2 = arr.slice()

        console.log(arr===arr2)//false

        // const arr3 = [arr[0],arr[1],arr[2]]
        const arr3 = [...arr]//效果一致
        // const arr3 = ['唐僧',...arr,'白骨精']

        console.log(arr)
        console.log(arr3)
    </script>

9、数组的方法

push()

• 向数组的末尾添加一个或多个元素，并返回新的长度
  pop()
• 删除并返回数组的最后一个元素

unshift()

• 向数组的开头添加一个或多个元素，并返回新的长度

shift()

• 删除并返回数组的第一个元素

splice()

• 可以删除、插入、替换数组中的元素

• 参数：

  1. 删除的起始位置
  2. 删除的数量
  3. 要插入的元素

• 返回值：

  • 返回被删除的元素

reverse()

• 反转数组

    <script>
        let arr = ['孙悟空','猪八戒','沙和尚']

        let result = arr.push('唐僧','白骨精')
        console.log(arr)

        result = arr.pop()//返回被删除的元素名字
        console.log(result)
        result = arr.unshift('牛魔王')//返回长度下标

        arr = ['孙悟空','猪八戒','沙和尚','唐僧']
        result = arr.splice(1,3)
        // result = arr.splice(1,1,'牛魔王'`,'铁扇公主','红孩儿')
        // result = arr.splice(1,0,'牛魔王','铁扇公主','红孩儿')
        console.log(result)

        arr = ["a", "b", "c", "d"]
        arr.reverse()
        // console.log(arr)
    </script>