1.什么是对象

1.对象（object）：JavaScript里的一种数据类型

2.可以理解为是一种无序的数据集合

3.用来描述某个事物，例如描述一个人

1.人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能

2.如果用多个变量保存则比较散，用对象比较统一

4.比如描述班主任信息：

1.静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示

2.动态行为 (点名, 唱, 跳, rap) => 使用函数表示

2.对象使用

1.对象声明语法

let 对象名 ={}
//声明了一个name的对象
let name = {}

2.对象由属性和方法组成

1.在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

2.属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等.........

属性：事物的特征，在对象中用属性来表示（常用名词）

3.方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏...........

方法：事物的行为，在对象中用方法来表示（常用动词）

3.属性

1.数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

2.属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔

3.多个属性之间使用英文 , 分隔

4.属性就是依附在对象上的变量（外面是变量，对象内是属性）

5.属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

let 对象名 = {
    属性名: 属性值,
    方法名字:函数
}

let person = {
        name: 'andy',    //属性名:属性值,
        sayHi: function (msg) {  //方法名字:函数
          document.write(msg);
          return '来自于 person的问候';
        },
      };

4.属性访问

   let goods1 ={
            name:'小米',
            price:'2998',
            size:"小",
        }
   注意:输入一个不存在的对象属性的时候:方法一会报错 方法二会显示undefined  
  // 方法一:商品名     good['name']   属性名输错 会报错
        document.write(`商品名称是:${goods1['name']},商品价格是:${goods1['price']},商品的尺寸是:${goods1['size']}`)
        //方法二:     goods.name	  属性名输错 会显示 undefined
        document.write(`商品名称是:${goods1.name},商品价格是:${goods1.price},商品的尺寸是:${goods1.size}`)

5. 对象中的方法

1.数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

2.方法是由方法名和函数两部分构成，它们之间使用 : 分隔

3.多个属性之间使用英文 , 分隔

4.方法是依附在对象中的函数

5.方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

let person = {
        name: 'andy',    //属性名:属性值,
        sayHi: function (msg) {  //方法名字:函数
          document.write(msg);
          return '来自于 person的问候';
        },
      };

6. 对象中的方法访问

1.声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用。

let person = {
        name: 'andy',    //属性名:属性值,
        sayHi: function () {  //方法名字:函数
         document.write('我是叼毛彭炎');
        },
      };
对象名.方法名()
//方法一
person.sayHi()

let person = {
        name: 'andy',    //属性名:属性值,
        sayHi: function () {  //方法名字:函数
              return '叼毛彭炎'
        },
      };
//方法一
person.sayHi()
console.log(person.sayHi());

let person = {
        name: 'andy',    //属性名:属性值,
        sayHi: function (msg) {  //方法名字:函数
         
          return '来自于 person的问候';
        },
      };

//方法二
let result = person.sayHi('') // 拿到return的返回值 页面上会出现   来自于 person的问候

let person = {
        name: 'andy',    //属性名:属性值,
        sayHi: function (msg) {  //方法名字:函数
          document.write(msg);
        },
      };

person.sayHi()
//方法二
let result = person.sayHi(' hello123 '); // 页面上会出现 hello123

3.操作对象

1.查询对象

1.对象.属性

2.对象[ ' 属性 ' ]

3.对象.方法()

let person = {
        name: 'andy',    //属性名:属性值,
        sayHi: function () {  //方法名字:函数
          document.write('来自于 person的问候');
        },
      };
1.	person.name
2.	person['name']
3.	person.sayHi()

2.增加对象

1.对象名.新属性名 = 新值

2.可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活。

     let person = {};

      // 新增一个方法  匿名函数 固定写法
      person.sayHi = function  () {
        document.write('这个是我们新增的sayHi 方法');
      };
 	person.sayHi(); // 调用方法

3.修改对象

1.对象.属性 = 值

2.对象.方法 = function() {}

let person = {
        name: 'andy',    //属性名:属性值,
        sayHi: function () {  //方法名字:函数
         document.write('我是叼毛彭炎');
        },
      };
person.name='叼毛'    //修改属性
person.sayHi= function () {  //修改方法
         document.write('法外狂徒');
      };
person.sayHi();

4.删除对象

1.delete 对象名.属性名

   // 声明一个对象
      let person={
        username:"海贼王"
      };

      // 不想看了  给删除掉
      delete person.username;  // 删除对象中的  username属性

      console.log(person.username); // undefined

4.遍历对象

1.对象没有像数组一样的length属性,所以无法确定长度

2.对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标

let person = {
        age: 18,
        username: '普通人',
        height: 180,
      };
      // 遍历对象  forin
      for (let k in person) {
          console.log(k)   //打印属性名  age   username  height
          console.log(person[k])//打印属性值 18 '普通人' 180

3.一般不用这种方式遍历数组、主要是用来遍历对象

4.一定记住： k 是获得对象的属性名，对象名[k] 是获得属性值

5.综合案列

1.方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
        }
         th {
            background-color: rgba(102, 102, 102, 0.466);
        }
        
    </style>
</head>
<body>
    <script>
    let students = [
        {name:'小明',
        age:'18',
        gender:'男',
        hometown:'河北省'},
        {name:'小红',
        age:'19',
        gender:'女',
        hometown:'河南省'},
        {name:'小刚',
        age:'17',
        gender:'男',
        hometown:'山西省'},
        {name:'小丽',
        age:'18',
        gender:'女',
        hometown:'山东省'},
    ]
    document.write(`
    <table border=:'1'>
            <caption>学生列表</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>

            <tr>
                <td>1</td>
                <td>${students[0].name}</td>
                <td>${students[0].age}</td>
                <td>${students[0].gender}</td>
                <td>${students[0].hometown}</td>
            </tr>
            <tr>
                <td>2</td>
                <td>${students[1].name}</td>
                <td>${students[1].age}</td>
                <td>${students[1].gender}</td>
                <td>${students[1].hometown}</td>
            </tr>
            <tr>
                <td>3</td>
                <td>${students[2].name}</td>
                <td>${students[2].age}</td>
                <td>${students[2].gender}</td>
                <td>${students[2].hometown}</td>
            </tr>
            <tr>
                <td>4</td>
                <td>${students[3].name}</td>
                <td>${students[3].age}</td>
                <td>${students[3].gender}</td>
                <td>${students[3].hometown}</td>
            </tr>
    </table>

    `)
    console.log(students);
    </script>
</body>
</html>

2.方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
        }
         th {
            background-color: rgba(102, 102, 102, 0.466);
        }
        
    </style>
</head>
<body>
    <script>
    let students = [
        {name:'小明',age:'18',gender:'男',hometown:'河北省'},
        {name:'小红',age:'19',gender:'女',hometown:'河南省'},
        {name:'小刚',age:'17',gender:'男',hometown:'山西省'},
        {name:'小丽',age:'18',gender:'女',hometown:'山东省'},
    ]
    let tableHtml = ` <table border='1'>
            <caption>学生列表</caption>
            <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
            </thead>
            <tbody>`;
            //遍历生成tr  根据对象 students里面数组的长度来生 遍历生成tr
        for (let index = 0; index < students.length; index++) {
            //开头
            /*   tableHtml += `<tr><td>${index+1}</td>`;

                <tr>         
                    <td> ${0+1} </td>
                    <td> ${1+1} </td>
                    <td> ${2+1} </td>
                    <td> ${3+1} </td>            
            */
                tableHtml += `<tr><td>${index+1}</td>`;

                  // 对 对象 做 forin遍历  students[index]

                //   k 是获得对象的属性名， 对象名[k] 是获得 属性值
                // (name:'小明',age:'18',gender:'男',hometown:'河北省')
                //[k]:属性名    name   age  gender  hometown
                //students[index][k]:属性值    小明 18  男  河北省
                for (let k in students[index]) {
                //定义一个变量=对象[数组]   person = students[index]   
                // let person = students[index]; // 数组中的每一个对象
                tableHtml += `<td>${person[k]}</td>`;
                /* 
                遍历结果
                <td>小明</td>
                <td>18</td>
                <td>男</td>
                <td>河北省</td>
                */    
                }
             //结尾
             //  </tr>   对应57行的开头<tr>完成一次循环
            tableHtml += `</tr>`
            } 
            
            // 对应table 表格的开头
        tableHtml += ` </tbody> </table>`;

    document.write(tableHtml);
    console.log(students);

    </script>
</body>
</html>

5.内置对象

1.内置对象是什么

JavaScript内部提供的对象，包含各种属性和方法给开发者调用

2.Math内置对象

1.Math对象是JavaScript提供的一个“数学高手”对象

2.提供了一系列做数学运算的方法

3.方法

代码	语法	写法
random	生成0-11之间的随机数（包含0不包括1）	Math.random()
ceil	向上取整	Math.ceil(1.6)
floor	向下取整	Math.fllor(1.6)
max	找最大值	Math.max(222,26265,6512651,6516541,6156165,1564984)
min	找最小值	Math.min(222,26265,6512651,6516541,6156165,1564984)
pow	幂运算	Math.pow(2,10)
abs	绝对值	Math.abs(-666)
round	四舍五入	Math.round(6.666666)

3.生成任意范围随机数

Math.round (Math.random() * (最大值 - 最小值)) + 最小值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 求得是 N - M 之间的一个随机数公式
        // let random = Math.floor(Math.random() * (10 - 1 + 1)) + 1
        // console.log(random)
        // 封装一个随机数函数  min 到  max  
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let random = getRandom(1, 10)
        console.log(random)
        let random1 = getRandom(5, 10)
        console.log(random1)
    </script>
</body>
</html>

6.综合案列

1.猜数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num1 =Math.round(Math.random()*9+1)
        while(true){
            let num2 =+prompt('请输入一个数字猜大小')
            if (num1>num2) {
                alert('猜小了')
            }else if (num1<num2) {
                alert('猜大了')
            } else{
                alert('猜对了'+ num2)
                break
            }
        }
    </script>
</body>
</html>

2.随机点名

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>16-随机显示英雄的姓名.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 数组
      let arr = [
        '赵云',
        '黄忠',
        '关羽',
        '张飞',
        '马超',
        '刘备',
        '曹操',
        '刘婵',
      ];
      // 名字随机输出
      // arr[0]
      // arr[1]
      // arr[2]
      // arr[3]
      // arr[4]
      // arr[5]
      // arr[6] undefined
      // 数组长度有关系

      // 要计算  0 - 6 随机数
      // let index = Math.round(Math.random() * 6);

      // console.log(arr[index]);

      function getRandom(min, max) {
        // 区间的 规律
        return Math.round(Math.random() * (max - min) + min);
      }

      let index = getRandom(0, arr.length - 1);
      console.log(arr[index]);

      // 第二和第三个打印
      // 。。。。。 去写业务处理

      let index2=getRandom(0, arr.length - 1)
      console.log(arr[index2]); // 不能和上一个打印 重复

      let index3=getRandom(0, arr.length - 1)
      console.log(arr[index3]); // 不能和上一个打印 重复

    </script>
  </body>
</html>

3.随机点名不重复

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>16-随机显示英雄的姓名.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 数组
      let arr = [
        '赵云',
        '黄忠',
        '关羽',
        '张飞',
        '马超',
        '刘备',
        '曹操',
        '刘婵',
      ];

      function getRandom(min, max) {
        // 区间的 规律
        return Math.round(Math.random() * (max - min) + min);
      }

      // 获取一次 随机数
      // let index = getRandom(0, arr.length - 1);
      // console.log(arr[index]);
      // // 删除数组中的某一个元素
      // arr.splice(index,1);

      // let index2=getRandom(0, arr.length - 1);
      // console.log(arr[index2]);
      // arr.splice(index2,1);

      // console.log(arr);

      // 死循环  只要你数组长度>0  我就执行重复的代码
      while (arr.length > 0) {
        let index = getRandom(0, arr.length - 1);
        console.log(arr[index]);
        arr.splice(index, 1);// 根据元素的下标来删除对应的那个数据  数组中少了一个已经显示过的数据  再次随机输出肯定不会重复
      }
    </script>
  </body>
</html>

7.javaScript补充内容

1.回顾内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>19-回顾知识.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // let a = 100;
      // console.log(b);
      // console.log(a);

      // 1 代码 报错  不会继续输出 a  正解
      // 2 不会报错 b 输出 undefined  a 输出 100
      // 3 代码 报错 会继续输出 a

      // js的组成部分 两大部分
      // 1 ECMAScript   规定语法的标准 ->  if for while
      // 2 webAPI(还没有学到)
      // 2.1 Dom  文档对象模型
      // 2.2 Bom  浏览器对象模型
      // 2.3 Bom 是包含这 Dom

      // 数据类型的分类
      // 基本数据类型 简单数据类型 值类型 字符串 数字 布尔 undefined null
      // 引用数据类型 复杂数据类型 数组、对象、函数

      // 类型转换
      // 隐式转换
      // 显式转换

      // console.log("1"+1);// "11"  数字转字符串
      // console.log(true + 1); // 2  在计算机种  false :  0  true : 1

      // console.log(Number("123b"));//NaN
      // console.log(parseInt("123b")); // 123

      // return break coninute
      // return 终止函数的运行并返回结果
      // break 终止循环 （for和while）
      // coninute 跳过本次循环 还会继续开启下一次的循环

      // 在同一个作用域内必须 先声明再使用

      // console.log(b);
      // let b = 100;

      // let b = 100;
      // function func1() {
      //   // 在同一个作用域内必须 先声明再使用   否则就报错
      //   console.log(b);
      //   let b = 200;
      // }
      // func1();

      let num = 1;
              
      let sum = ++num + num++;
      console.log(sum); // 4 
      console.log(num); 
    </script>
  </body>
</html>

2.switch-case条件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>04-条件语句-switch-case.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      /*
           1 switch-case 功能和 if else-if else   一模一样

           2 switch-case-break-defaul
             1 switch(day)  想要对 day做判断
             2 case 1 ：    day ===1 满足条件
             3 break 打断当前的case
             4 default 如果以上的 case 都不满足，最终 执行default里面的代码


      */

      // let day = 4;
      // if (day === 1) {
      //   console.log('白饭');
      // } else if (day === 2) {
      //   console.log('喝粥');
      // } else {
      //   console.log('不吃了');
      // }

      // let day = 1;
      // switch (day) { // 你要判断谁
      //   case 1: //  if  (day === 1)
      //   // 执行 1 的业务逻辑
      //   console.log('白饭');
      //   case 2:
      //     console.log("喝粥");
      //     break
      //   case 3:
      //     console.log("海鲜");
      //     break
      //   default:
      //     // 以上都不满足 就执行代码
      //     console.log("不吃啦");
      // }

      //  let day=4;
      //  switch (day) {
      //    case >3 :
      //      console.log("大于3");
      //      break;
      //    default:
      //      break;
      //  }
    </script>
  </body>
</html>

3.do while循环

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>05-do-while.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      /* 
      1 循环 3种写法
        1 for 循环
        2 while 循环
        3 do while 循环 很少
          1 先执行一次 do里面的代码，然后再去执行while里面的程序
          2 哪怕  while里面的条件不成立 也会先执行一次do中的代码
       */

      let index = 0;
      do {
        console.log('执行了do 里面的代码',index);
        index++
      } while (false);
    </script>
  </body>
</html>

8.拓展

1.页面渲染综合案列

页面渲染.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>index.html</title>
    <link rel="stylesheet" href="./style.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>

    <!-- 来引入外部的js -->
    <script src="./data/data.js"></script>
    
    <script>
      // console.log(data);// 8 
      
      
      
      // 定义变量 用来最终显示 标签
      // 开头
      let html = `
      <div class="box w">
  <div class="box-hd">
    <h3>精品推荐</h3>
    <a href="#">查看全部</a>
  </div>
  <div class="box-bd">
    <ul class="clearfix">
      `;

      // 中间需要遍历
      for (let index = 0; index < data.length; index++) {
        // 在循环li标签的时候  可以动态传入对应图片和文字内容！ 
        html += `
        <li>
        <img src="${data[index].src}" alt="" />
        <h4>
          ${data[index].title}
        </h4>
        <div class="info">
          <span>高级</span> • <span>${data[index].num}</span>人在学习
        </div>
      </li>
        `;
      }

      // 结尾
      html += `
    </ul>
  </div>
</div>
      `;

      // 把拼接好的html 显示到网页中
      document.write(html);
    </script>
  </body>
</html>

2.术语解释

术语	解释	举例
关键字	在JavaScript中有特殊意义的词汇	let、var、function、if、else、 switch、case、break
保留字	在目前的JavaScript中没意义，但未来可能会具有特殊意义的词汇	int、short、long、char
标识（标识符）	变量名、函数名的另种叫法	无
表达式	能产生值的代码，一般配合运算符出现	10 + 3、age >= 18
语句	一句代码也称之为一条语句，一般按用途还会分类:输出语句、声明语句、分支语句	无

3.基础数据类型和引用数据类型

1.简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

2.值类型：

简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null

3.引用类型：

复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

4.堆栈空间分配区别：

栈堆.png

1.栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

2.堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。引用数据类型存放到堆里面

5.简单类型的内存分配

简单类型的内存分配.png 1.值类型（简单数据类型）： string ，number，boolean，undefined，null

2.值类型变量的数据直接存放在变量（栈空间）中

6.复杂类型的内存分配

复杂类型的内存分配.png 1.引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

2.引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>18.基本数据类型和引用数据类型.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // let num = 10; // 基本数据类型  数字

      // function changeNum(n) {
      //   // 基本数据类型 传参 需要这么来理解
      //   // let n = num ; // 复制了一份数据 给n
      //   n = 100; // n的改变和num 不影响
      // }

      // changeNum(num);
      // console.log(num); //  =  10 !

      // // 对象 引用数据类型
      // let person = {
      //   name: '悟空',
      // };

      // function changePerson(obj) {
      //   obj.name = '八戒';
      // }
      // changePerson(person);
      // console.log(person); // 八戒  被函数修改了

      // 基本数据类型
      // let num = 100;
      // let num2 = num; // 把num 100  赋值给了 num2

      // num2 = 10000;// 修改了num2
      // console.log(num);

      // let person={
      //   name:"悟空"
      // };

      // let newPerson=person;

      // newPerson.name="八戒";

      // console.log(person);
      // console.log(newPerson);

      /* 
      
      栈 
        1 适合存放具体具体大小的数据， 这一些数据一般变化不会太大 
          let num =100; 
          let show=true;
          let msg="你好";

      堆 
        1 适合存放可能会经常改变大小的数据，这一些数据变化比较大
          let person={}

          person.name="悟空"  // 增加数据的属性

          delete person.name  // 删除了数据的属性

          let arr=[];

          for 100次  arr.push(index) //  数组 被修改的比较多了
          arr.splice(3,1)// 修改元素了 

      只要我们开始声明一个变量 ，内存中就开始开辟了空间 
       let a=100 ;//  有a在， 开辟空间 来存放变量  （写代码 故意写了很多个 let 。。。。 浪费内存 性能下去）

      两个都是存放数据的地方 
      */

      let num = 100; // 基本数据类型  放心的是复制吧 新旧两个数据 互不影响
      let num2 = num;
      num2 = 10000;
      console.log(num); // 100 互不影响

      let person={username:"悟空"};// 引用数据类型

      let person2=person;  // 引用地址的传递 复制而已  新旧数据 本质是一样的  会收到影响 

      person2.username="八戒";
      console.log(person);// 也是八戒 新旧数据 本质是一样的
    </script>
  </body>
</html>

08.JavaScript对象与拓展