每日一练 JS30天挑战 JS变量的赋值和引用

本文链接：https://blog.csdn.net/qq_44692240/article/details/109279597

JS变量的赋值和引用

测试代码

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

  <script>
    let name = "Arvin"
    let name2 = name
    console.log(name,name2)//Arvin Arvin
    name = '苹果'
    console.log(name,name2)//苹果 Arvin

    let number = 2
    let number2 = number
    console.log(number,number2)//2 2
    number = 4
    console.log(number,number2)//4 2

    let bool1 = true
    let bool2 = bool1
    console.log(bool1,bool2)//true true
    bool1 = false
    console.log(bool1,bool2)//false true

    
    const players = ['wes','Sarah','Ryan']
    const team = players
    team[3] = '修改了'
    console.log(players,team)//相同 同一块堆内存
    console.log(players===team)//true

    const team2 = players.slice();
    //ES6展开操作符
    const team3 = [...players]
    console.log(team2)
    team2[4] = '我又修改了'
    team3[4] = '我也修改了'
    console.log(players,team,team2,team3)//team2、team3指向了一个新的堆内存

    const person = {
      name: "Wes Bos",
      age: 22
    }

    const dev = person
    dev.name = "小明"
    console.log(person,dev)//小明 22 小明 22
    const dev2 = Object.assign({},person,{name:'小王'})
    const dev3 = {...person}//展开操作符
    dev3.name = '小亮'
    console.log(person, dev2, dev3)//小明 22 小王 22 小亮 22
    
    const author = {
      name: 'Alice',
      age: 34,
      social: {
        wechat: 'Alice Lala',
        facebook: 'athor.alice'
      }
    }


    const au2 = Object.assign({},author)//浅层次复制
    const au3 = JSON.parse(JSON.stringify(author))//深层次复制
    console.log(au2===author)//false
    au2.name = '王小明'
    au2.social.wechat = 'Lala - Alice --check'
    console.log(author , au2) //author.social === au2.social
    console.log(au2.social === author.social)//true
    console.log(au3.social === author.social)//false

    const arr = [1,2,3,4]
    function fn(arr3){
      let arr2 = arr3
      console.log(arr === arr2)//true
      console.log(arr3 === arr2)//true
      console.log(arr3 === arr)//true
    }
    fn(arr)
    
  </script>

</body>
</html>