这是我参与更文挑战的第16天，活动详情查看：更文挑战

Object and Arrays – Reference VS Copy

今天这个模块的内容可以说就是一个回顾总结，就当做是一个知识点巩固进行学习吧。看题目的意思就是对象和数组-引用 VS 拷贝，我们就单纯这样去理解吧，开始今天的内容复习。

一、效果展示

今天的内容就不要什么效果了，以纯记录和练习为主。

毕竟我第一眼看到这个最终结果的显示的时候，我个人是有点楞的，确实是这样的吗？然后我巴拉了一下代码，emmmmmm…童叟无欺。

二、实现

最终代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Reference VS Copy</title>
</head>
<body>

  <script>
    // 首先我们从字符串，数字和布尔开始
    let a = 'A';
    let b = a;
    a = 'B';

    console.log(a,b);  //B,A

    let c = 0;
    let d = c;
    c++;

    console.log(c,d);  //1,0

    let e = true;
    let f = e;
    e = !f;

    console.log(e,f);  //false,true

    let g = "A";
    let h = "A";
    let i = "A";
    (h = "B"),(i = "C"),(g += h),(g += i);
    console.log(g,h,i);  //ABC,B,C

    // Let's say we have an array
    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

    // and we want to make a copy of it.


    // You might think we can just do something like this:

      // let players2 = players;

    // however what happens when we update that array?

      // players2[0] = "alxe";

    // now here is the problem!

      // console.log(players,players2);

    // oh no - we have edited the original array too!

    // Why? It's because that is an array reference, not an array copy. They both point to the same array!

    // So, how do we fix this? We take a copy instead!

    // one way

    let players2 = players.slice();
    players2 = [].concat(players);
    players2 = [...players];
    players2[0] = 'alex';
    console.log(players,players2);

    function createObj(name) {
      return {
        name:name
      };
    }

    let p1 = createObj('alex');
    let p2 = createObj('jone');
    let p3 = createObj('tony');
    let p4 = createObj('thor');

    let f1 = [p1,p2,p3,p4];
    let f2 = f1.slice();
    // let f2 = [].concat(f1);
    // let f2 = [...f1];

    f2[0].name = "alixesss";

    console.log(f1[0].name);
     

    // or create a new array and concat the old one in

    // or use the new ES6 Spread

    // now when we update it, the original one isn't changed

    // The same thing goes for objects, let's say we have a person object

    // with Objects
    const person = {
      name: 'Wes Bos',
      age: 80
    };

    // and think we make a copy:

    // how do we take a copy instead?

    // We will hopefully soon see the object ...spread

    // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.

  </script>

</body>
</html>

复制代码

三、总结回顾

过程分解

1.首先我们从字符串，数字和布尔开始

    // 首先我们从字符串，数字和布尔开始
    let a = 'A';
    let b = a;
    a = 'B';

    console.log(a,b);  //B,A

    let c = 0;
    let d = c;
    c++;

    console.log(c,d);  //1,0

    let e = true;
    let f = e;
    e = !f;

    console.log(e,f);  //false,true
复制代码

用图例来表示一下：

这样就可以很直观的看出 a 和 b 的值了。

再做一个比较复杂的

    let g = "A";
    let h = "A";
    let i = "A";
    (h = "B"),(i = "C"),(g += h),(g += i);
    console.log(g,h,i);  //ABC,B,C
复制代码

分四步去算出这四部分的值 (h = “B”),(i = “C”),(g += h),(g += i) ：

假设我们有一个数组

    // Let's say we have an array
    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

复制代码

and we want to make a copy of it.
You might think we can just do something like this:

 let players2 = players;
复制代码

however what happens when we update that array?

players2[0] = "alxe";
复制代码

now here is the problem!

console.log(players,players2);
复制代码

oh no – we have edited the original array too!
Why? It’s because that is an array reference, not an array copy. They both point to the same array!
So, how do we fix this? We take a copy instead!
one way

    let players2 = players.slice();
    players2[0] = 'alex';
    console.log(players,players2);
复制代码

    let players2 = players.slice();
    players2 = [].concat(players);
    players2 = [...players];
    players2[0] = 'alex';
    console.log(players,players2);

    function createObj(name) {
      return {
        name:name
      };
    }

    let p1 = createObj('alex');
    let p2 = createObj('jone');
    let p3 = createObj('tony');
    let p4 = createObj('thor');

    let f1 = [p1,p2,p3,p4];
    let f2 = f1.slice();
    // let f2 = [].concat(f1);
    // let f2 = [...f1];

    f2[0].name = "alixesss";

    console.log(f1[0].name);
     
复制代码

let players2 = players.slice();
    players2 = [].concat(players);
    players2 = [...players];
    players2[0] = 'alex';
    console.log(players,players2);

    function createObj(name) {
      return {
        name:name
      };
    }

    let p1 = createObj('alex');
    let p2 = createObj('jone');
    let p3 = createObj('tony');
    let p4 = createObj('thor');

    let f1 = [p1,p2,p3,p4];
    let f2 = f1.slice();
    // let f2 = [].concat(f1);
    // let f2 = [...f1];

    //f2[0].name = "alixesss";
    
    f2[0] = { name:"alexsss"};

    console.log(f1[0].name);
     
复制代码

or create a new array and concat the old one in
or use the new ES6 Spread

以上都可以归纳为 slice,  concat,  ES6解构这三种方法。
复制代码

now when we update it, the original one isn’t changed
The same thing goes for objects, let’s say we have a person object

数组部分还是有挺多内容值得探究的，对于对象部分，我觉得可以另外作为研究，先吃掉一部分再说。

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Zookeeper curator框架

tnsoft IAeMailServer IMAP4 格式化串漏洞

浅谈7种安全加密技术

如何从内存加载DLL

Computer Associates Total Defense SQL注入漏洞和信息泄露漏洞

Windows中下载并安装RabbitMQ

JavaScript 30天编码挑战——第 14 天