对象（Object）

憨憨小陈
150 阅读5分钟

1.定义

为什么要使用对象？

因为用以前学习的数据类型不方便存储用户的信息，比如年龄，姓名，电话号码，如果用多个变量保存就比较散，使用对象会比较统一，可以用来详细描述某个事物。

对象概念 ：js中的一种数据类型；一组无序的数据集合, 特点是可以用来描述某个事物

2. 对象使用

2.1 对象声明语法

image-20220420210321539

    <script>
      // 声明对象属性
      let person = {
        name: "陈奕迅",
        sex: "男",
        age: 18,
        height: 185,
      };
      // 打印一下对象类型
      console.log(typeof person);
       // 打印一下对象
      console.log(person);
    </script>

2.2对象有属性和方法组成

属性：信息或者叫特征（名词）--一般为固定数值

方法：功能或者叫行为（动词）一般为函数

image-20220420210641718

注意点：

  1. 属性指的是数据描述性的信息，比如说：身高，年龄，姓名，一般是名词

  2. 属性都是成对出现的，包括属性名和属性值。他们之间使用**英文分号 ：**隔开

  3. 多个属性之间使用英文逗号 ， 隔开

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

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

  6. 注意点：对象属性没有顺序

  7. 如果访问一个不存在的属性，输出undefined

2.3属性访问

声明对象后，获得对象中的属性值访问有两种方式：

方式1：点形式，对象.属性

image-20220420211607512

方式2：[ ] 形式，对象[ ' 属性 ']

image-20220420211630907

<body>
  <script>
    // 声明对象 -商品
    let goods = {
      name : '小米手机',
      price : 1999,
      size : '大'
    }
    // 访问对象属性写法1：对象.属性 这种会比较常用  例如：goods.name
    // console.log(goods.name);
    // console.log(goods.price);
    // console.log(goods.size);
  // 访问属性写法2：对象['属性']  这种会比较少用  例如：goods['name']  ，记住[里面要加上'']
    console.log(goods['name']);
    console.log(goods['price']);
    console.log(goods['size']);

  </script>
</body>

两者之间的区别

点 后面的属性名 一定不要加引号

[ ] 里面的属性名加引号，除非它是一个变量

方式1 会比较常用

2.4 对象中的方法访问

对象中的方法本质是函数，调用对象中的函数，就是方法调用

image-20220420213035457

 <body>
    <script>
      // 声明对象
      let person = {
        name: "陈奕迅",
        age: 18,
        // 对象方法
        sayHi: function (a) {
          document.write(a);
           // 对象方法-函数返回值
          return "来自远方的鼓励";
        },
      };
      // 访问对象方法-本身是一个函数要加上（）
      // person.sayHi()
      // 对象方法-函数传参
      person.sayHi("今天也要加油哟 <br>");
      person.sayHi("努力的你是最棒的");
      // 打印对象方法-函数返回结果
      document.write(sayHi("努力的你是最棒的"));
    </script>
  </body>

注意点：

  1. 方法是由方法名和函数两部分构成的，它们之间使用了 ： 隔开

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

  3. 方法名后面要加小括号（）

  4. 对象方法可以传递参数

  5. 对象里方法的内容一般为匿名函数。

3.操作对象

对象本质是无序的数据集合，操作数据就是 增 删 改 查

image-20220420214155168

对象增加新的数据

   <title>对象-增加属性和修改属性</title>
  </head>
  <body>
    <script>
      // 声明对象
      let person = {
        name: "陈奕迅",
        // age : 18,
      };
      // 增加属性,当属性对象中之前里面没有的，那就是新增的
      person.age = 18;
      document.write(person.age);
      // 修改属性，当属性对象中之前有的，那就是修改的
      person.name = "张国荣";
      document.write(person.name );
      // 增加方法,匿名函数，固定搭配
      person.sayHi = function () {
        document.write("又是元气满满的一天");
      };
      // 调用方法
      person.sayHi()
    </script>
  </body>

注意点：无论是属性还是方法，同一个对象中出现名称一样的，后面的会覆盖前面的

重新赋值

image-20220405224340020

  <title>对象的增删查改总结</title>
  </head>
  <body>
    <script>
      // 声明对象
      let person = {
        name: "周杰伦",
        sex: "女",
        hobby: "唱歌",
        height: 180,
        sayHi: function (a) {
          // document.write(a);
          return "你好";
        },
      };
      // 查询对象属性
      console.log(person.hobby);
      console.log(person["name"]);
      // 方法传参

      // 查询对象方法
      // person.sayHi("你好")
      console.log(person.sayHi("你好"));

      // 增加对象属性
      person.age = 18;
      console.log(person.age);

      // 改对象属性
      person.sex = "男";
      console.log(person.sex);

      // 删除对象属性
      delete person.height;
      console.log(person.height);  //显示undefined 声明但没有赋值，直接打印输出
    </script>
  </body>

4.遍历对象

对象没有像数组一样的length属性，所以无法确定长度 所以没有办法使用for 循环。所以采用了for in 来遍历对象

image-20220420215309782

注意：k 是获得对象的属性名 对象名[ k ] 是获得属性值

遍历数组对象案例

image-20220420233146525

      let students = [
        { name: "小明", age: 18, gender: "男", hometown: "河北省" },
        { name: "小红", age: 19, gender: "女", hometown: "河南省" },
        { name: "小刚", age: 17, gender: "男", hometown: "山东省" },
        { name: "小丽", age: 18, gender: "男", hometown: "山西省" },
      ];
      const tbody = document.querySelector("tbody");
      let html = ``;
      for (let index = 0; index < students.length; index++) {
        html += `      <tr>
          <td>${index + 1}</td>
          <td>${students[index].name}</td>
          <td>${students[index].age}</td>
          <td>${students[index].gender}</td>
          <td>${students[index].hometown}</td>
        </tr>`;
      }
      tbody.innerHTML = html

优化：用了for in 遍历了对象。优化了代码结构

 创建学习信息数组对象
      let students = [
        { name: "小明", age: 18, gender: "男", hometown: "河北省" },
        { name: "小红", age: 19, gender: "女", hometown: "河南省" },
        { name: "小刚", age: 17, gender: "男", hometown: "山东省" },
        { name: "小丽", age: 18, gender: "男", hometown: "山西省" },
      ];
      const tbody = document.querySelector("tbody");
      let html = ``;
      for (let index = 0; index < students.length; index++) {
        html += ` <tr>
     <td>${index + 1}</td>`; //不需要进行对象遍历，只负责循环就可以了
        //  对 对象 做forin 遍历
        for (let k in students[index]) {
          let person = students[index]; //数组中的每一个对象
          // console.log(person);
          // html += ` <td>${students[index][k]}</td>`;
          html += ` <td>${person[k]}</td>`;
        }
      }
      tbody.innerHTML = html

5.内置对象

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

Math 对象是JavaScript 提供的数学对象，提供了一系列数学运算的方法

方法有

random：生成0-1之间的随机数（包含0不包括1） ceil：向上取整 floor：向下取整 max：找最大数 min：找最小数 pow：幂运算 abs：绝对值

 <title>内置对象</title>
  </head>
  <body>
    <script>
      //数学对象
      // 随机数：随机出现数字0-1，包括0，不包括1
      console.log(Math.random());
      // 向上取整 巧妙记忆停车收费，
      console.log(Math.ceil(1.2)); //结果是2
      console.log(Math.ceil(3.3)); //结果是4
      // 向下取整 巧妙记忆抹掉零头
      console.log(Math.floor(1.5)); //结果是1
      console.log(Math.floor(2.4)); //结果是2
      // 四舍五入
        console.log(Math.round(3.1)); //结果是3
      // 最大值
      console.log(Math.max(1, 3, 55, 11, 6)); //结果是55
      // 最小值
      Math.min(1, 3, 4, 5, 22); //结果是1
      // 幂运算
      // 3的平方
      console.log(Math.pow(3, 2)); //结果是9
      // 5的立方
      console.log(Math.pow(5, 3)); //结果是125
      // 绝对值
      console.log(Math.abs(1)); //结果是-1
    </script>
  </body>

** 随机数补充**

1648889363581

内置对象练习

 <title>内置对象的练习</title>
  </head>
  <body>
    <script>
      // 如何生成0-10的随机数呢？
      /* 分析：1，random随机数是0-1之间的，
           可以random随机数 0-1 *10
           出现小数部分可以四舍五入  */
      console.log(Math.round(Math.random() * 10));

      // 如何生成5-10的随机数
      /* 分析：1，先生成0-5的随机数，random（）* 5
              2. 再把生成的0-5的随机数 random（）* 5 +5就变成 5-10 */
      console.log(Math.round(Math.random() * 5 + 5));

      /* 如何生成6-10的随机数？
      分析：1，先生成0-1的随机数
            2，再生成0-4的随机数 
            3. 最后再生成0-4的随机数 + 6 */
      Math.random() * 4 + 6;
      // Math.random() * (最大值 - 最小值) + 最小值 => Math.random() * (10 -6) + 6

      function getRandom(min, max) {
        return Math.round(Math.random() * (max - min) + min);
      }
      console.log(getRandom(6, 10));
    </script>
  </body>

随机点名案例

image-20220420234821271

image.png

随机点名案例改进-不允许重复显示

image-20220420234956296

<script>
// 声明一个数组
let arr = ["赵云", "黄忠", "关羽", "张飞", "马超", "刘备", "曹操"];
// 声明函数，
function getRandom (min,max) {
  // 返回一个结果是最小值到最大值的区间范围
  return Math.round(Math.random() * (max - min) + min)
}
// 动态生成随机数 ，index赋值=最小值和最大值
let index = getRandom(0,arr.length - 1)
// 将索引对应的数据从数组中删除  和上一个打印不重复
// arr.slice(想要删除的元素的下标,想要删除的个数)
arr.slice(index,1)

document.write(arr[index])

猜数字案例

image-20220420235103013

  <title>猜数字游戏</title>
  </head>
  <body>
    <script>
      
      /*  1.随机数是1-10间的 Math.round(Math.random() * (max - min) + min)
           */

      // 声明随机数1-10的变量
      let andomNum = Math.round(Math.random() * 9 + 1);
      // 当不明确循环次数的时候就比较适合用while循环，有明确次数就用for循环
      // 死循环
      while (1) {
        // 设置用户输入数字,一开始设置用户放在循环的外面当执行第一次完毕的时候就没有办法在继续循环输入数字
        let num = +prompt("请开始猜数字");
        if (num > andomNum) {
          alert("数字猜大了，继续猜");
        } else if (num < andomNum) {
          alert("数字猜小了，继续猜");
        } else {
          // 以上条件不满足的话就执行这个
          alert("恭喜你,猜对了");
          break; //break终止循环 是要在for循环和while循环里面才能合法执行
        }
      }
    </script>
  </body>

拓展

前言:

变量声明时都会在栈里申请一个空间；

一个栈对应一个变量，一个变量也只有一个栈；

栈与栈之间是互不干扰的；

变量的相互赋值，只是把在栈里的数据复制了一份，给了另一变量的栈里。

基本数据类型

介绍：

基本数据类型又叫做简单数据类型，在存储时变量中存储的是值本身，因此叫做值类型。

值类型（简单数据类型），如： string ，number，boolean，undefined，null。

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

image-20220405235513929

注意：

可以把基本数据类型的变量a赋值给另一个变量b，a只是把在栈里的值赋给b，在后面修改b的值不会影响a的值。

复杂数据类型

介绍：

复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型。

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

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

image-20220406000016945

注意：

不能把一个引用数据类型变量随便赋值给另一个变量，如：let a=[3];let b=a; 这样赋值其实不是把数据赋值给b，而是把a连接堆的地址赋值给了b，这样做会造成，我在修改b的值的时候，也把a的值也做了修改，因为，a和b栈不同，但是它两连接堆的地址确是相同的，也就是说，a和b的值存储在同一个堆里。

 let a = [2];
           let b = a;
             b[0] = 5;
             console.log(a, b)//输出值为5和5
avatar
文章
阅读
粉丝