js深拷贝案例

合集 - 自己的JS自己写的笔记(3)
1.JS对象数组的遍历和解构的一起使用2.JS面向对象小案例 模态框
3.js深拷贝案例
收起
复制代码
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="" />
    </head>
    <style>
        .item{
            color:red;
            background-color: antiquewhite;
            border:1px solid burlywood;
            width:100px;
            height:300px;
        }
    </style>
    <body>
       <div></div>
       
    </body>

    <script>
        const obj={
            uname:'pink',
            age:18,
        }
        const o={}
        function deepCopy(newObj,oldObj){
            for(let k in oldObj){
                newObj[k]=oldObj[k];
            }
        }
        deepCopy(o,obj)
        console.log(o);
    </script>
</html>
复制代码

 带数组模式的的深拷贝

复制代码
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="" />
    </head>
    <style>
        .item{
            color:red;
            background-color: antiquewhite;
            border:1px solid burlywood;
            width:100px;
            height:300px;
        }
    </style>
    <body>
       <div></div>
       
    </body>

    <script>
        const obj={
            uname:'pink',
            age:18,
            hobby:['乒乓球','篮球'],
        }
        const o={}
        function deepCopy(newObj,oldObj){
            for(let k in oldObj){
                if(oldObj[k] instanceof Array){
                    newObj[k]=[];
                    deepCopy(newObj[k],oldObj[k]);
                }else{
                    newObj[k]=oldObj[k];
                }
               
            }
        }
        deepCopy(o,obj)
        console.log(o);
    </script>
</html>
复制代码

 带有数组 和对象的 深拷贝案例

复制代码
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="" />
    </head>
    <style>
        .item{
            color:red;
            background-color: antiquewhite;
            border:1px solid burlywood;
            width:100px;
            height:300px;
        }
    </style>
    <body>
       <div></div>
       
    </body>

    <script>
        const obj={
            uname:'pink',
            age:18,
            hobby:['乒乓球','篮球'],
            family:{
                name:'小秋',
                age:19,
            }
        }
        const o={}
        function deepCopy(newObj,oldObj){
            for(let k in oldObj){
                if(oldObj[k] instanceof Array){
                    newObj[k]=[];
                    deepCopy(newObj[k],oldObj[k]);
                }else if(oldObj[k] instanceof Object){
                   newObj[k]={};
                   deepCopy(newObj[k]=oldObj[k])
                    
                }else{
                    newObj[k]=oldObj[k];
                }
               
            }
        }
        deepCopy(o,obj)
        console.log(o);
    </script>
</html>
复制代码

 利用 转化字符串来实现 但是方法好像无法复制啊 

复制代码
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="" />
    </head>
    <style>
        .item{
            color:red;
            background-color: antiquewhite;
            border:1px solid burlywood;
            width:100px;
            height:300px;
        }
    </style>
    <body>
       <div></div>
       
    </body>

    <script>
        const obj={
            uname:'pink',
            age:18,
            hobby:['乒乓球','篮球'],
            family:{
                name:'小秋',
                age:19,
            },
            eat:function(){
                alert('ddd');
            }
        }
      const aa= JSON.stringify(obj);
      console.log(aa);
      const newObj=JSON.parse(aa);
      console.log(newObj);
    </script>
</html>
复制代码

 

posted @   斯斯20222  阅读(7)  评论(0)  编辑  收藏  举报
相关博文：
·  JS对象数组的遍历和解构的一起使用
·  JS面向对象小案例 模态框
·  js数组复制（浅拷贝，深拷贝）
·  js 数组和对象的深拷贝的方法
·  javascript: 复制数组时的深拷贝及浅拷贝(chrome 105.0.5195.125)
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae