14 JS中的引用与复制

    这个部分主要是帮助你通过不同的语句来感受在 JavaScript 中对不同类型数据的引用(Reference)和复制(Copy)的区别。由于操作在 Console 中进行,所以请直接运行页面后打开 Console,边编辑代码,边查看结果。

    过程指南

    1. 首先从 String、Number、Boolean 类型的值开始。 先声明了一个 Number 型的变量 ,并将此变量赋值给另一个变量 age2,这时两个变量的值都是 100。
      然后赋给 age 新的值,可见对 age 的修改并不会对 age2 造成影响。
    2. 那对于数组来说,情况是否一样呢?下面我们来看看数组。

      1. const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
      2. const team = players;
      3. console.log(players, team);

      延续上面的思路,先声明一个数组 players,并将其赋值给 team。试想一下,如果需要修改 team 中的值,我们可以如何操作?或许可以这样?

      1. team[3] = 'Lux';

      来看看发生了什么。

      1. console.log(players, team);
      2. // ["Wes", "Sarah", "Ryan", "Lux"] ["Wes", "Sarah", "Ryan", "Lux"]

      WOW 原数组 plaryers 也被修改了。为什么会这样?因为 team 只是这个数组的引用,并不是它的复制。teamplayers 这两个变量指向的是同一个数组。
      所以如何解决这个问题?接下来我们开始真正的复制吧!

      • 方法一

      • 方法二

        concat() 方法是用来合并数组的,它也不会更改原有的数组,而是返回一个新数组,所以可以将 players 数组与一个空数组合并,得到的结果就符合预期了。

        1. const team3 = [].concat(players);
        2. team3[3] = 'Lux3';
        3. console.log(players, team3);
      • 方法四

        此外使用 Array 创建新的数组实例的方法也是可行的。

        1. const team5 = Array.from(players);
        2. team5[3] = 'Lux5';
        3. console.log(players, team5);

      除此之外,还可以用 push 这样的方法。数组部分已经介绍完毕,下面我们进入 Object 类型数据的试验吧~

    3. 先声明对象:

      然后思考一下如何可以取得它的复制,试试想当然的做法:

      1. const captain = person;
      2. captain.number = 99;
      3. console.log(person, captain);
      4. // Object {name: "Wes Bos", age: 80, number: 99}
      5. // Object {name: "Wes Bos", age: 80, number: 99}

      这样好像行不通, 的值也被更改了,那该如何才能真正复制呢?

      • 方法一 Object.assign()

        使用 Object.assign(target, ...sources) 时,后来的源对象的属性值,将会覆盖它之前的对象的属性。所以可以先复制 person 之后,再赋给属性新的值。

        1. const cap2 = Object.assign({}, person, { number: 99, age: 12 });
      • 方法二 JSON 转换

        利用 JSON 可以先将对象转成字符串的格式,然后再把它转成 JSON,从而实现复制。

        1. const wes = {
        2. name: 'Wes',
        3. age: 100,
        4. social: {
        5. twitter: '@wesbos',
        6. facebook: 'wesbos.developer'
        7. }
        8. };
        9. const dev = Object.assign({}, wes);
        10. const dev2 = JSON.parse(JSON.stringify(wes));
        11. console.log(wes);
        12. console.log(dev);
        13. console.log(dev2);

    OVER~(^o^)/~