重新梳理JScript基础知识之对象篇

1.什么是对象？

对象（object）：是一种数据类型，一种无序的数据集合，用来描述某一事物。

js中的数据类型分为两大类：基本数据类型和引用数据类型

基本数据类型有：数字型、字符串型、布尔型、undefined、null。

引入数据类型有：arr数组、function函数和object对象。

2.对象的使用

1.对象生声明的语法

let 对象名 = {}

// 例如

let person =  {}

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

属性是描述一些信息或者特征。

方法是描述行为或者功能。

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

3.属性

用来描述数据的信息称为属性，一般用名词

    let obj = {
      uname: '张三',
      age: 22,
      gender: '男'
    }

注意：

• 属性都是都是成对出现，属性名和属性值直接是用英文 : 隔开的
• 多个属性之间是用英文 ，隔开
• 属性就是依附在对象上的变量 在对象外面是变量，对象内是属性

4.属性的访问

对象名.属性  或者

对象名['属性']

5.对象中的方法

数据具有行为性的信息称为方法，实际上就是函数

    let obj = {
      uname: '张三',
      sayHi: function () {
        document.write('Hi')
      }
    }

• 方法是由方法名和函数组成 直接用英文 : 隔开
• 多个属性和方法用英文 , 隔开
• 方法也是依附在对象上的函数

6.方法的访问

    let obj = {
      uname: '张三',
      sayHi: function () {
        document.write('Hi')
      }
    }
    obj.sayHi()  //对象名.方法名()

小括号一定不能省略

3.操作对象

操作对象和数组是一样的就是增、删、改、查

查询对象：对象名: 属性  或对象名['属性值']    对象名.方法名()

改：对象.属性 = 值   对象.方法 = function() {}

曾：对象名.新属性名 = 新值

查： delete 对象名.属性名

    //新增属性
    let obj = {
      uname: '张三',
      sayHi: function () {
        document.write('Hi')
      }
    }
    obj.age = 22
    obj.gender = '男'
    obj['hobby'] = '打篮球'
    console.log(obj)

    //新增方法    
    obj.sing = function () {
      document.write('song')
    }
    obj.sing()

4.遍历对象

    for (let k in obj) {
      console.log(k) //打印的是属性名
      console.log(obj[k]) // 打印的是属性值
    }

对象是用for in 的方法遍历 一般不用遍历数组的方法来遍历对象

重点：k 是获取的对象的属性名，对象名[k] 获取的是属性值

不能写成对象名[k] 不然会报错

案例：打印数据并渲染成表格

  <script>
    let students = [{
        name: '小明',
        age: 18,
        gender: '男',
        hometown: '河北省'
      },
      {
        name: '小红',
        age: 19,
        gender: '女',
        hometown: '河南省'
      },
      {
        name: '小刚',
        age: 17,
        gender: '男',
        hometown: '山西省'
      },
      {
        name: '小丽',
        age: 18,
        gender: '女',
        hometown: '山东省'
      }
    ]
    for (let i = 0; i < students.length; i++) {
      // console.log(students[i]) //打印的是students 这个数组里面的每一个 对象 的元素
      console.log(students[i].name) // 遍历出每一个名字
      console.log(students[i].age) // 遍历出每一个年龄
      console.log(students[i]['gender']) // 遍历出每一个性别
      console.log(students[i]['hometown']) // 遍历出每一个地址
    }
  </script>

5.内置对象

在JavaScript中的内部给我们提供的一些对象 我们可以直接调用

像document.write()和console.log()就是内置对象

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

生成1-10的随机数

 Math.floor(Math.random() * (10 + 1))

生成5-10的随机数

Math.floor(Math.random() * (5 + 1)) + 5

生成n-m的随机数

Math.floor(Math.random() * (M - N + 1)) + N

案例：

点名: 每次刷新网页运行, 在控制台 随机输出一位同学的名字 ["老赵", "老李", "小传", "小黑"]，如果输出了，则数组中删除这个名字

  <script>
    // 引入公式
    function getRandom(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
    }
    let arr = ["老赵", "老李", "小传", "小黑"]
    // 生成一个包含0和3的随机数并声明一个变量来接收 索引号最大值 = arr.length - 1 
    let random = getRandom(0, arr.length - 1)
    // 通过数组[随机数] 就可以随机点名
    // arr[random]
    console.log(arr[random])
    // 通过splice(删除位置,删除个数)来删除被点到的人
    arr.splice(random, 1)
    console.log(arr)
  </script>