事件传参、递归、浅拷贝、深拷贝、JSON对象（进阶）

最新推荐文章于 2024-08-04 03:52:01 发布
最新推荐文章于 2024-08-04 03:52:01 发布
阅读量987 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Li5306/article/details/130869737
版权
本文介绍了JavaScript中的静态作用域规则，展示了如何在函数间传递数据，包括事件处理函数的参数传递方法。同时，探讨了递归的概念，包括递归的执行顺序和带return的递归情况。此外，还讨论了引用类型的区别以及浅拷贝和深拷贝的问题，以及JSON对象在对象转换中的作用。
摘要由CSDN通过智能技术生成

 一、静态作用域

如何确定作用域链

  •      js的作用域链如何确定,取决于函数声明写在哪里,而不是函数调用写在哪里
  •      js的作用域链和函数调用写在哪里没有任何关系 => 静态作用域,词法作用域
  •      js的作用域属于静态作用域(词法作用域).
    let x = 20;

    function fn() {
      let x = 10;
      show(); // fn => 全局
    }

    function show() {
      console.log(x);// show => 全局 // 20
    }

    fn();
    let x = 20; (全局x)
    fn();
     let x = 10; (fn内的x)
     show();
       console.log(x);

二、函数间传递数据 

  • 如何让一个函数A去获取另一个函数B的局部变量的值?
  •     在B函数中调用函数A,并传入B函数的局部变量给A函数.
  •     这个做法是很多前端数据通信解决方案的核心逻辑。
  •     例如:jsonp,框架里的组件通信.状态管理.s 
    function A(x) {
      console.log(x);
    }

    function B(){
      let x = 100;
      A(x);
    }

    B();

三、事件传参  

<body>
  
  <button id='btn1'>按钮1</button>
  <div></div>
  <p></p>

  <button id='btn2'>按钮2</button>
  <h3></h3>
  <span></span>
</body>

3.0：方式一 

<script>

    // 点击第一个按钮，给div设置内容，这是div，给p设置内容，这是一个p标签
    // 点击第二个按钮，给h3设置内容，这是一个h3，给span设置内容，这是一个span

    let aBtn = document.querySelectorAll('button');
    let oDiv = document.querySelectorAll('div')[0];
    let oP = document.querySelectorAll('p')[0];
    let oH3 = document.querySelectorAll('h3')[0];
    let oSpan = document.querySelectorAll('span')[0];

    aBtn[0].onclick = function() {
      oDiv.innerText = '这是div';
      oP.innerText = '这是一个p标签';
    }

    aBtn[1].onclick = function() {
      oH3.innerText = '这是一个h3';
      oSpan.innerText = '这是一个span';
    }
</script>

 方式二

<script>

    // 点击第一个按钮，给div设置内容，这是div，给p设置内容，这是一个p标签
    // 点击第二个按钮，给h3设置内容，这是一个h3，给span设置内容，这是一个span

    let aBtn = document.querySelectorAll('button');
    let oDiv = document.querySelectorAll('div')[0];
    let oP = document.querySelectorAll('p')[0];
    let oH3 = document.querySelectorAll('h3')[0];
    let oSpan = document.querySelectorAll('span')[0];

    // 看代码 => 猜谜语 => 考虑返回值 => 你看见的是谜面 => 你得把谜底猜出来 
    // 不能这样写,这样写会把undefined赋值给点击事件,这是没有任何用处的.
    
    aBtn[0].onclick = setInnerText (oDiv, oP, '这是div', '这是一个p标签');

    aBtn[1].onclick = setInnerText (oH3, oSpan, '这是一个h3', '这是一个span');

    function setInnerText (el1, el2, text1, text2) {
      el1.innerText = text1;
      el2.innerText = text2;
    }

  </script>

3.1

<script>

    // 点击第一个按钮，给div设置内容，这是div，给p设置内容，这是一个p标签
    // 点击第二个按钮，给h3设置内容，这是一个h3，给span设置内容，这是一个span

    let aBtn = document.querySelectorAll('button');
    let oDiv = document.querySelectorAll('div')[0];
    let oP = document.querySelectorAll('p')[0];
    let oH3 = document.querySelectorAll('h3')[0];
    let oSpan = document.querySelectorAll('span')[0];
    
    // 事件传参的第一种解决方案：
    // 在匿名函数内调用函数并传参.

    aBtn[0].onclick = function () {
      setInnerText (oDiv, oP, '这是div', '这是一个p标签');
    };

    aBtn[1].onclick = function () {
      setInnerText (oH3, oSpan, '这是一个h3', '这是一个span');
    };

    function setInnerText (el1, el2, text1, text2) {
      el1.innerText = text1;
      el2.innerText = text2;
    }

  </script>

3.2

<script>

    // 点击第一个按钮，给div设置内容，这是div，给p设置内容，这是一个p标签
    // 点击第二个按钮，给h3设置内容，这是一个h3，给span设置内容，这是一个span

    let aBtn = document.querySelectorAll('button');
    let oDiv = document.querySelectorAll('div')[0];
    let oP = document.querySelectorAll('p')[0];
    let oH3 = document.querySelectorAll('h3')[0];
    let oSpan = document.querySelectorAll('span')[0];
    
    // 事件传参的第一种解决方案：
    // 在匿名函数内调用函数并传参.

    aBtn[0].onclick = setInnerText (oDiv, oP, '这是div', '这是一个p标签');
    
    aBtn[1].onclick = setInnerText (oH3, oSpan, '这是一个h3', '这是一个span');

    // 闭包传参.
    // 点击按钮,触发的是setInnerText函数,还是setInnerText的子函数?
    // 点击按钮,触发的是setInnerText的子函数
    function setInnerText (el1, el2, text1, text2) {  
      return function() {
        el1.innerText = text1;
        el2.innerText = text2;
      }
    }
  </script>

四、bind传参 

<body>
  
  <button id='btn1'>按钮1</button>
  <div></div>
  <p></p>

  <button id='btn2'>按钮2</button>
  <h3></h3>
  <span></span>
</body>

 4.0

<script>

    // 点击第一个按钮，给div设置内容，这是div，给p设置内容，这是一个p标签
    // 点击第二个按钮，给h3设置内容，这是一个h3，给span设置内容，这是一个span

    let aBtn = document.querySelectorAll('button');
    let oDiv = document.querySelectorAll('div')[0];
    let oP = document.querySelectorAll('p')[0];
    let oH3 = document.querySelectorAll('h3')[0];
    let oSpan = document.querySelectorAll('span')[0];
    
    // 事件传参的第一种解决方案：
    // 在匿名函数内调用函数并传参.

    // bind返回一个函数。用来给点击按钮触发。
    // bind返回的函数如何给它传参? => 直接给bind传参即可.(第一个参数不是)
    aBtn[0].onclick = setInnerText.bind (null, oDiv, oP, '这是div', '这是一个p标签');
    
    aBtn[1].onclick = setInnerText.bind (null, oH3, oSpan, '这是一个h3', '这是一个span');

    function setInnerText (el1, el2, text1, text2) {
      el1.innerText = text1;
      el2.innerText = text2;
    }

  </script>

 4.1

<body>
  
  <button>按钮</button>
</body>
<script>

    const oBtn = document.querySelectorAll('button')[0];

    // oBtn.onclick = show.bind(null, '你好');

    // 在show后面加.bind
    // bind的第一个参数写null.
    oBtn.onclick = show.bind(null, '你好坏哦，我好喜欢！');

    function show(msg) {
      console.log(msg);
    }

  </script>

五、递归 

    递归 => 函数自己触发自己 (跟循环有点像)

    表现形式 => 一个函数声明内部有自己的调用.

    递归都需要一个条件来终止递归.(跟循环一样);

    如果一个递归停不下来,会报下面的错误.

    Uncaught RangeError: Maximum call stack size exceeded

5.0 

<script>
    let count = 0;

    function show() {
      // 打印
      console.log(900);
      // 计数+1
      count++;
      // 如果不足3次,继续递归打印
      if (count < 3) {
        show();
      }
    }

    // for (let count = 0; count < 3; count++) {
    //   console.log(900);
    // }

    show();

  </script>

 5.1

    let arr = [1, 2, 3, 4, 5];

    // 写一个递归,打印这个数组的所有元素

    let i = 0;

    function fn() {
      console.log(arr[i]);
      i++;
      if (i < arr.length) {
        fn();
      }
    }

    fn();

 5.2

let arr = [1, 2, 3, 4, 5];

    function fn(i) {
      console.log(arr[i]);
      i++;
      if (i < arr.length) {
        fn(i);
      }
    }

    fn(0);

5.3

let arr = [1, 2, 3, 4, 5];

    // 传参写法。
    function fn (i) {
      i--;
      if (arr[i] !== undefined) {
        console.log(arr[i]);
        fn (i);
      }
    }
    fn(5);

六、工作中的递归 

<script>

    // 对象套对象,如果需要访问所有的对象属性.需要递归.

    function fn (obj) {
      console.log(obj.name)
    }

    let obj = {
      name: '小陈',
      obj: {
        name: '小赵',
        obj: {
          name: '小迪'
        }
      }
    }

    // 利用同一个函数,传递不同成参数,实现打印name.
    // fn(obj);
    // fn(obj.obj);
    // fn(obj.obj.obj);


  </script>

七、递归处理多层对象嵌套 

<script>

    // 对象套对象,如果需要访问所有的对象属性.需要递归.

    let obj = {
      name: '小陈',
      obj: {
        name: '小赵',
        obj: {
          name: '小迪',
          obj: {
            name: '小飞',
            obj: {
              name: '小文'
            }
          }
        }
      }
    }

    // 利用同一个函数,传递不同成参数,实现打印name.
    // fn(obj);
    // fn(obj.obj);
    // fn(obj.obj.obj);
    // fn(obj.obj.obj.obj);
    // fn(obj.obj.obj.obj.obj);

    function fn (obj) {
      // 打印实参的name属性
      console.log(obj.name);
      // 如果当前的obj存在obj属性,并且这个obj属性是对象,就递归打印name
      if (obj.obj !== undefined && typeof obj.obj === 'object') {
        fn(obj.obj);
      }
    }

    fn(obj);


  </script>

八、递归执行顺序 

递归执行时，最后调用的fn先结束调用，最先调用的fn最后结束调用。

    函数执行栈 => 先进后出,后进先出.

    递归的性能不好.递归次数越多,性能越不好.

function fn(i) {
      i++;
      if (i < 4) {
        console.log('递归前' + i);
        fn(i);
        console.log('递归后' + i);
      }
    }

    fn(0);

 递归执行顺序分析：

     A:
    console.log('递归前1');
    console.log('递归前2');
    console.log('递归前3');
    console.log('递归后1');
    console.log('递归后2');
    console.log('递归后3');
    B
    console.log('递归前1');
    console.log('递归后1');
    console.log('递归前2');
    console.log('递归后2');
    console.log('递归前3');
    console.log('递归后3');
    C
    console.log('递归前1');
    console.log('递归前2');
    console.log('递归前3');
    console.log('递归后3');
    console.log('递归后2');
    console.log('递归后1');

九、带return的递归 

<script>

    // 1*2*3*4*........

    // num拿到的是第一次fn调用return的值.
    let num = fn(3);

    // fn调用了3次.
    // 最后一次调用把结果1return给第二次调用,第二次调用把2*1return给第一次调用,第一次调用把3*2*1return给num

    function fn(n) {
      // 如果n是1,就返回1,如果不是1,就递归进行阶乘.
      // return n === 1 ? 1 : n * fn(n-1);

      if (n === 1) {
        return 1
      } else {
        return n * fn(n-1)
      }
    }

    // num1 = 1;
    // num2 = 2 * num1;
    // num3 = 3 * num2;

    // 兔子数列 => 斐波那契数列 => 从第三项开始，每项都是前两项的和。
    // 1,1,2,3,5,8,13,21............

    // let count = feibonaqi(10); => 45位 (算不动了)

  </script>

十、引用类型 

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

10.0 

    let arr = [1, 2, 3];

    // 下面只操作item,原数组的元素是不会改变的
    arr.forEach((item, i) => {
      item++;
      arr[i]++;
    });
    let arr = [{num: 1}, {num: 2}, {num: 3}];

    // 如果数组的元素是对象,则操作item和arr[i]效果是一样的.
    arr.forEach((item, i) => {
      item.num++;
      arr[i].num++;
    })
    let aLi = document.querySelectorAll('li');

    aLi.forEach((item, i) => {
      aLi[i].style.backgroundColor = 'red';
      item.style.backgroundColor = 'red';
    })

 10.1

 js有6种数据类型:number,string,boolean,undefined,null,object

其中object可以分为:array,function,plain object,Math,arguments,node(节点),Date,....

 如果按照存储的方式不同:

    1:基本类型.(number,string,boolean,undefined,null)(存储在栈中).

    2:引用类型.(object)(存储在堆中).

    // 基本类型的赋值现象:
    // 赋值的本质就是复制.
    let x = 10;
    // 把x的值复制一份,再赋值给y.(1个10变成2个10)
    let y = x;
    // 把第二个10变成20,第一个10没有变化.
    y = 20;
    console.log(x);// 10
    // oYm是引用类型.
     let oYm = {name: '小陈'};
    // 引用赋值.
     let obj = oYm;
    // 修改obj的name,从oYm上也可以看到变化.
     obj.name = '小赵';
     console.log(oYm.name);//

     基本类型变量内存储的是值本身.

  •     引用类型变量内存储的不是对象本身,而是对象的引用(地址).
  •     堆中的对象是不能直接访问的，需要通过对象的引用(地址)来访问.
  •     小陈这个人(对象).
  •     小陈的相片(对象的引用).看相片就能知道相片背后的是哪个人.
  •     基本类型存值本身 => 钱包装钱.钱就是基本类型.(钱直接装在钱包里).
  •     引用类型存的是对象的引用 => 钱包里放的是相片,而不是小陈这个人.(钱包内装的不是小陈这个人)

 10.2

// 引用赋值之后,两个变量代表同一个对象,所以这个变,那个也变.

    let oYm = {
      name: '小赵'
    }
    // 引用赋值,复制的是对象的引用.一个引用变成两个引用(不是一个对象变成两个对象)
    // 两个引用都指向同一个对象.这样在两个引用上都可以看到相同的变化。
    let obj = oYm;
    obj.name = '小赵';
    console.log(obj.name);// 小赵
    console.log(oYm.name);// 小赵
// 原始对象.
    let oYm = {
      name: '小陈'
    }

    引用赋值
    let obj = oYm;

    // 把obj的引用从存储幂幂的引用变成存储超越的引用.
    // 把obj变成一个新的对象,不会影响oYm.
    obj = {
      name: '小赵',
    }

    console.log(obj.name);// 小赵
    console.log(oYm.name);// 小陈

10.3

 当前的修改时在修改对象，还是在修改引用?

    修改纯对象:

    对象.属性名 = xxxxxxx

    对象[属性名] = xxxxxxx

    修改数组:

    数组[下标] = xxxxx;

    数组.属性 = xxxxx;

    push,pop,shift,unshift,splice,reverse,sort

    修改引用(变量重新赋新值):

    对象 = 新的值.

    数组 = [];

    function fn(list, num) {
      list.push(100);
      num = 100;
    };

    let arr = [1,2,3];
    let x = 10;

    // 引用赋值
    list = arr;
    // 基本赋值
    num = x;
    fn(arr, x);

    console.log(arr);// [1,2,3,100]
    console.log(x);// 10
let arr1 = 'john'.split('');
    arr2和arr1是同一个数组
    let arr2 = arr1.reverse();
    let arr3 = 'jones'.split('');
    arr2push,也就是arr1push.
    arr2.push(arr3);
    console.log(arr1.length + ' ' + arr1.slice(-1));
    // 5 ['j','o','n','e','s']
    const x = 10;
    // const声明的是常量,值不能修改
    x = 20;

    // obj是引用类型.存储的是引用.
    const obj = {name: 8080};
    // 存储的是引用,不能修改
    obj = 200;
    // 修改引用背后的对象,不会报错.
    obj.name = '8888';

    // const声明的数组,还能push吗?
    // 能,push修改的是数组本身,而不是数组的引用.

    const arr = [1,2,3];
    arr.push(4);
    // 不能直接修改数组引用
    arr = [];

十一、浅拷贝 

<script>

    // 深浅拷贝 => 引用类型的属性拷贝.(把一个对象的属性拷贝给另一个对象).

    let oYm = {
      name: '小陈',
      age: 32,
      sex: '女'
    }

    // 最简单的拷贝
    // let obj = {...oYm};

    let obj = {};

    // 循环对象的写法.对象有多少个属性,就会循环多少次.
    // prop就是每次循环到的属性名.
    // 语法 => for(let 属性名 in 对象名)
    for (let prop in oYm) {
      obj[prop] = oYm[prop];
    }

    // obj.name = oYm.name;
    // obj.age = oYm.age;
    // obj.sex = oYm.sex;

  </script>

十二、浅拷带来的问题 

浅拷贝在拷贝时,如果属性是引用类型,则拷贝前和拷贝后的属性指向同一个对象.
这样会导致修改其中一个,另一个也会跟着变. 

<script>

        let oYm = {
      name: '小陈',
      exhusband: {
        name: '小邓'
      }
    }

    let obj = {};

    // for in 浅拷贝.
    for (let prop in oYm) {
      obj[prop] = oYm[prop];
    }

    // obj.name = oYm.name;
    // 这是引用赋值,会导致obj.exhusband和oYm.exhusband指向同一个对象.
    // obj.exhusband = oYm.exhusband;

    // 修改obj的属性,实际上也是在修改oYm的属性.
    obj.exhusband.name = '小飞';
    // 小飞
    console.log(oYm.exhusband.name);

  </script>

十三、深拷贝 

  • 为了解决浅拷贝带来的问题,我们需要深拷贝
  • 浅拷贝拷贝前后是相同的对象.
  • 深拷贝拷贝前后是不同的对象.
<script>
    let oYm = {
      name: '小陈',
      exhusband: {
        name: '小邓'
      }
    }

    // 最简单的深拷贝.
    // let obj = JSON.parse(JSON.stringify(oYm));

    // 两步完成深拷贝
    let str = JSON.stringify(oYm);
    let obj = JSON.parse(str);

    obj.exhusband.name = '小飞';

    // false
    console.log(oYm.exhusband === obj.exhusband);
    // 小邓
    console.log(oYm.exhusband.name);

  </script>

十四、JSON对象 

JSON => 是一个不标准的对象 => 但是现在大多数浏览器都支持,因此都习惯当成标准的对象来用.

    JSON对象 => 处理纯对象.

    什么json对象 => 就是纯对象.

    for in => 循环对象.对象没有length属性,因此无法通过for来循环.

    JSON.parse => 把json字符串转换为json对象

    JSON.stringify => 把json对象转换为json字符串.

    // 纯对象(json对象)
    // let oYm = {
    //   name: '小陈'
    // }

    // JSON.parse() => 把json字符串转换为json对象
    // JSON.stringify() => 把json对象转换为json字符串

    let oYm = {name: '小陈'}

    // 打印oYm转换为json字符串之后的结果
    let str = JSON.stringify(oYm);
    console.log(str);
    console.log(typeof str);
    
    let obj = JSON.parse(str);
    console.log(obj);
    console.log(typeof obj);
    // 经过JSON.parse转换之后,oYm和obj就不是同一个对象了。
    console.log(obj === oYm);

AVIC_501
关注
专栏目录
前端面试的话术集锦第 5 篇：高频考点( 类型转换 & 深浅拷贝 & 模块化机制等)
念兮为美
09-06 587
typeof判断类型；instanceof正确判断对象的原理；类型转换转Boolean对象转原始类型四则运算符⽐较运算符==和===的区别；This闭包原型的理解闭包解决var定义函数的问题深拷⻉浅拷贝提升暂时性死区varlet及const区别；原型继承Class实现继承本质组合继承寄⽣组合继承；⼏种⽅式实现模块化⽴即执⾏函数；AMD和CMD、CommonJS、ESModule实现简洁版的promise；EventLoop进程与线程区别JS单线程好处执⾏栈异步代码执⾏顺序？解释Node中的Eventloop
JavaScript学习笔记--进阶之路
JackieDYH的博客
03-16 1575
了解js特性&事件使用 20200316 1、JavaScript简介 历史： 第一个浏览器 就是文本和图片 网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互 诞生：为了实现用户和网页的交互而出现 1、开发一门新语言 2、使用已经成熟的语言（java<sun> python c ------） ​ 这个时候使用的是java ---...
【深拷贝与JSON实现深拷贝】
weixin_64356463的博客
09-18 577
JS实现深拷贝以及JSON实现深拷贝
JSON 序列化和反序列化实现深拷贝的原理
qq_45217161的博客
06-11 649
需要注意的是，使用 JSON 序列化和反序列化实现深拷贝时，只有那些可以被 JSON 序列化为字符串的属性才能够被复制。如果对象中包含了特殊类型的属性，例如函数、日期等，那么序列化后的值就可能会失去原来的类型信息，从而无法被正确地反序列化回来。在 JavaScript 中，我们可以将一个对象序列化为字符串，然后再将其反序列化为新的对象。在这个过程中，JavaScript 引擎会解析序列化后的字符串，并根据其中的信息动态地生成一个新的对象。可以看到，序列化后的字符串包含了整个对象的属性和值。
JSON实现深拷贝的方法
逆风优雅的博客
04-29 3277
深拷贝：深拷贝主要是将另一个对象的属性值拷贝过来之后，另一个对象的属性值并不受到影响，因为此时它自己在堆中开辟了自己的内存区域，不受外界干扰。 let data = { code: "1231312" iprAuthorizationNumber: "ZL11111111111112" iprAuthorizationTime: "2022-04-07" iprClassification: "syxx" iprCode: "IP1231312" iprName: "123123" iprWa.
详解JSON实现深拷贝
tiantian的博客
11-12 2840
浅拷贝和深拷贝： 针对对象 深拷贝和浅拷贝只针对像Object和Array这样的复杂对象的，String,Number等简单类型不存在深拷贝。 浅拷贝： 因为浅拷贝只会将对象的各个属性进行依次复制，并不会进行递归复制。在JavaScript中，对于Object和Array这类引用类型值，当从一个变量向另一个变量复制引用类型值时，这个值的副本其实是一个指针，两个变量指向同一个堆对象，改变其中一个变量，另一个也会受到影响。所以浅拷贝会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址，当
JavaScript面试必备：数据类型与深浅拷贝解析
"JavaScript面试题集，包含了24道关于JavaScript语言的核心问题和答案，涵盖了数据类型、数据类型的判断以及浅拷贝与深拷贝的区别等基础和进阶知识点。" JavaScript是一种广泛应用于Web开发的动态脚本语言，其灵活...
js进阶高级与ES6，常用函数方法
weixin_46028831的博客
10-16 506
ES6与高级 2021.9.11 class类的使用 类的本质就是function函数 在ES6中声明类用class关键字 ES6中类没有变量提升，所以必须先定义类，才能实例化对象 类里面的共有属性和方法在内部调用，一定要加this使用 constructor构造函数的this指向实例对象，方法里的this指向方法调用者(下面有案例) 创建类 //创建一个类的格式 class 类名 { //constructor是构造函数，即使不写，也会自动创建 constructor(user,age)
2018春招前端面试: 闯关记(精排精校) | 掘金技术征文
CRPER
03-13 6535
前言 去年年末研发组解散失业, so选择回去学车了,也顺利拿到了驾照 最近回归大深圳….开始踏上漫漫的找工作之路; “拉勾上吊一百年不匹配!!!”,”BOSS直聘日夜没反应!!!” 题目范围涵盖我最近遇到的笔试题和面谈的(CSS/JS/HTTP/Node/Hybrid/Vue/NG/React) emm…..这里不列举哪些公司了, 若是你完整的阅读一...
JSON，对象深拷贝
看见小狮子没
07-04 1263
JavaScript Object Notation1、JSON是一个字符串 常常用于网络传输数据的一种字符串格式区别： querystring 查询字符串 "name=karen&pwd=abc123&count=20" template 模板字符串 `666` JSON json字符串 '{"name":"karen","its":["hello","h5"]}' （' '）2、JSON解析 ...
JSON.parse(JSON.stringify(obj))实现深拷贝
程序员小明1024
08-31 3651
SON.parse()和JSON.stringify()实现深拷贝： 实际开发中，如果怕影响原数据，我们常深拷贝出一份数据做任意操作，其实使用JSON.stringify()与JSON.parse()来实现深拷贝是很不错的选择。 但是当拷贝的数据为undefined,functio...
JSON.parse(JSON.stringify())实现深拷贝
m0_73490373的博客
04-26 2942
深拷贝就是完全拷贝一份新的对象，会在堆内存中开辟新的空间，拷贝的对象被修改后，被拷贝的原对象不会产生任何变化。主要针对的是引用数据类型.
JS实现对象或者JSON深拷贝
Anoddguy的博客
08-02 3625
深拷贝的意思是能拷贝对象中的对象，而不会对原对象产生影响。 方法一采用递归 var json={ 'name':'liming', 'age':'20', 'height':'160cm', 'friends':{ 'name':'jack', 'age':'21', 'height':'180cm' }, }...
JSON方法实现深拷贝存在的问题
CreatorRay的博客
11-11 611
现在的前端面试中，深拷贝出现的频率极高。常规的问题中，可能首先问你，什么是深拷贝，实现深拷贝的方式都有哪些，你可能会答出几点，比如通过JSON对象提供的JSON.strinfy和JSON.parse来实现，因为这种实现方式异常简单，一行代码即可，心里美滋滋，你让我手写我丝毫不慌。那么，面试官如果反手问一句，通过JSON提供的方法实现深拷贝会不会存在哪些问题？你是否能答出满意的结果呢。
JSON详解与JSON深拷贝
wingchiehpih的博客
12-12 2783
JSON详解与JSON深拷贝 文章目录JSON详解与JSON深拷贝1、JSON简介2、JSON基本语法3、JSON序列化4、Stringify补充5、Parse补充6、JSON序列化实现深拷贝 1、JSON简介 JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。 JSON的全称是JavaScript Object Notation（JavaScript对象符号），主要应用于JavaScript中，但是目前已经独立于编程语言，在各个编程语言中都可以使用。 目
java json 实现 深拷贝
最新发布
weixin_30977485的博客
08-04 111
Java JSON 实现深拷贝教程 深拷贝是指复制一个对象及其所有嵌套对象，确保新对象与原对象完全独立。我们可以使用 JSON 方法在 Java 中进行深拷贝。接下来的文章将详细介绍实现该功能的步骤与代码示例。 实现流程 在进行深拷贝之前，我们需要明确操作的流程。下面是实现深拷贝的步骤： 步骤 描述 1 创建...
json数据深拷贝
qq_45479398的博客
02-23 310
json数据深拷贝
Json对象深拷贝
热门推荐
yiyan12的专栏
03-05 1万+
1、浅拷贝        对于一个引用类型，如果直接将它赋值给另一个对象，只是将引用地址赋值给新对象，修改一个对象另一个也会被更改。         例：var user = { code:'0001', name:'张三' }; var user2 = user; user2.name = '李四'; console.log(user); console.log(user2); ...
JavaScript对象浅拷贝与深拷贝详解及代码示例
本文主要介绍了JavaScript中对象浅拷贝和深拷贝的概念以及其实现方法。在JavaScript中，对象复制是指创建一个新的对象，使其与原对象有相同的属性和值。浅拷贝和深拷贝是两种不同的复制策略，它们在处理复杂数据结构...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值