首页 > 其他分享 >js深拷贝案例

js深拷贝案例

时间:2023-09-03 09:03:08浏览次数:36  
标签:const oldObj newObj 案例 obj deepCopy 拷贝 js color

<!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>

 

标签:const,oldObj,newObj,案例,obj,deepCopy,拷贝,js,color
From: https://www.cnblogs.com/tomcat2022/p/17674558.html

相关文章

  • JS面向对象小案例 模态框
    <!DOCTYPEhtml><htmlclass="no-js"><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><title></title>......
  • JS虚拟机JS加密技术:优缺点及案例研究
    JS虚拟机是一种用JS语法实现的模拟虚拟机逻辑执行的代码,以执行JS代码的技术。它提供了一种将JS代码编译成二进制指令集的方法,并模拟执行这些指令。本文将介绍jsvmp技术的优缺点,并提供一些案例代码。一、jsvmp技术的优点跨平台兼容性:jsvmp技术可以在不同的操作系统和硬件平台上运行,......
  • 通过调整解码器参数,EasyPlayer.js可以实现H.265音频解码
    EasyPlayer是一款稳定且流畅的流媒体播放器,它能够支持H.264和H.265视频播放。该播放器能够处理各种视频流格式,包括RTSP、RTMP、HLS、FLV和WebRTC等。EasyPlayer具备多个版本,例如EasyPlayer-RTSP、EasyPlayer.js和EasyPlayerPro,以满足不同用户在不同场景下的需求。此外,EasyPlayer还......
  • Node为nuxt.js 的源代码打包的执行命令
    为Node源代码打包的执行命令#清理缓存数据/root/.nvm/versions/node/v14.17.6/bin/npmcacheclean--force#删除之前使用过的插件模板文件等,若下面有.nuxt文件也一下做删除rm-rfnode_modulespackage-lock.json.nuxt#设置淘宝的npm源/root/.nvm/versions/node/v14.17......
  • 如果您在集成H.265视频流媒体播放器EasyPlayer.js时遇到了"SourceBuffer"报错,您可以采
    EasyPlayer是由青犀视频公司推出的一款功能强大且高度开放的H.265视频流媒体播放器。它支持播放H.264和H.265视频格式,具有出色的稳定性和流畅的播放效果。此外,EasyPlayer还提供多个版本供用户选择,包括EasyPlayer-RTSP、EasyPlayer-Pro和EasyPlayer.js等版本。每个版本都具有自己的......
  • nodejs + superagent 示例记录【2023-09-02】【尝试nodejs接口测试库】
    constsuperagent=require("superagent");(async()=>{ try{  constres=awaitsuperagent.get(   "https://jsonplaceholder.typicode.com/users"  );  constheaderDate=   res.headers&&res.headers.date?......
  • JSONCPP向浏览器前端发送服务器本地文件列表
    服务器解析了浏览器请求之后,要进行响应响应体里需要存放请求的内容HTML标签:是页面的核心内容,定义了页面有什么内容。CSS:控制HTML元素的排版布局和展示方式,是美化页面文档的。JavaScript:让用户与页面进行交互,或在网页背后默默操控网页,以便让显示的内容与效果有所改变。对网页来......
  • How to automatically run a scheduled task every hour in Node.js All In One
    HowtoautomaticallyrunascheduledtaskeveryhourinNode.jsAllInOne如何在Node.js中每间隔一小时自动运行一个定时任务引用场景Node.js后台爬虫服务,定时爬去指定页面,抓取最新数据,并写入到数据库中;在同一个Node.js部署环境中,没有使用Linux的crontab权......
  • JSTL基础部分
    在使用JSTL时记得正确引入了JSTL标签库<%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%>jstlif标签判断test属性表示判断的条件(使用EL表达式输出)<br><c:iftest="${12==12}">正确<br></c:if>jstl多路判断<......
  • 220230825-纯js实现以下代码
    题目<ul><li>1<li><li>2<li><li>3<li></ul>代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"con......