一、对象（object）

1.1 对象是什么？

对象（object）：JavaScript里的一种数据类型
可以理解为是一种无序的数据集合
用来描述某个事物，例如描述一个人
- 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
- 如果用多个变量保存则比较散，用对象比较统一
比如描述一个人的信息：
- 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
- 动态行为 (点名, 唱, 跳, rap) => 使用函数表示

1.2.1 对象的声明

<script>
  // 对象也是一种数据类型，我们可以认为对象也是一个Object类型的变量
  // let 变量名 = {}
  // let student = new Object()
  let student = {} // 语法糖

  console.log(student)
</script>

1.2.2-利用new Object创建对象

<script>
    // 利用 new Object 创建对象
    let obj = new Object();   // 创建一个空的对象
    obj.uname = '张三疯';
    obj.age = 18;
    obj.sex = '男';
    obj.sayHi = function() {
      console.log('hi~');
    }
    // (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
    // (2) 每个属性和方法之间用 分号结束
    console.log(obj.uname);
    console.log(obj['sex']);
    obj.sayHi();
</script>

1.3 对象成员的添加

<script>
  // 对象也是一种数据类型，我们可以认为对象也是一个Object类型的变量
  // let 变量名 = {}
  // let student = new Object()
  // 特征==属性： 姓名  年龄  性别 学科
  // 行为==方法==功能： 写代码 调bug
  let student = {
    // 属性名称(键-key):属性值(值-value),
    // 属性名称:属性值:key是字符串，可以省略引号
    // 值：如果是字符串就需要添加引号，其它不用
    gender: '男',
    subject: '前端',
    name: 'hsu_ee',
    age: 18,

    // 方法的添加
    // 方法名称：匿名函数
    corder: function() {
      console.log('我会写代码')
    },
    debug: function() {
      console.log('我会调bug')
    }
  }

  console.log(student)
</script>

1.4 对象的属性值的获取-点语法

<script>
  let student = {
    // 属性名称(键-key):属性值(值-value),
    // 属性名称:属性值
    gender: '男',
    subject: '前端',
    name: '李东',
    age: 18,

    // 方法的添加
    // 方法名称：匿名函数
    corder: function() {
      console.log('我会写代码')
    },
    debug: function() {
      console.log('我会调bug')
    }
  }
  // 获取对象的属性值的语法是点语法：对象.属性名称
  console.log('学员的姓名是：', student.name)
  console.log('学员的学科是：', student.subject)

  // 调用对象的方法 的语法是点语法：对象.方法属性名称()
  student.corder()
  student.debug()
</script>

1.5 对象的属性值的获取-[]方式

<script>
      let student = {
        // 属性名称(键-key):属性值(值-value),
        // 属性名称:属性值
        name: 'xu_ee',
        age: 18,

        // 方法的添加
        corder: function() {
          console.log('我会写代码')
        }
      }
      // 获取对象的属性值的语法：[]语法：对象['属性名称'] === 对象.属性名称
      console.log('我的的姓名是：', student['name'])
      // student['corder']：获取到一个方法
      student['corder']() // === student.corder()

      let propName = prompt('请输入你想获取的属性名称')
    </script>

1.6-对象的属性值的获取-[]方式-2

<script>
      let student = {
        // 属性名称(键-key):属性值(值-value),
        // 属性名称:属性值
        name: 'xuee',
        age: 18,

        // 方法的添加
        corder: function() {
          console.log('我会写代码')
        }
      }
      // 获取对象的属性值的语法：[]语法：对象['属性名称'] === 对象.属性名称
      // console.log('学员的姓名是：', student['name'])
      // // student['corder']：获取到一个方法
      // student['corder']()

      let propName = prompt('请输入你想获取的属性名称')
      // console.log(propName)

      // 点语法和['属性名称']都是获取对象的指定名称的属性值
      // 获取一个对象不存在的属性值，返回undefined（返回一个数组不存在的索引位置返回undefined）
      console.log('你想要的属性值是：', student.propName)
      console.log('你想要的属性值是：', student['propName'])

      // 对象[属性名称变量] 》》 先解析变量，根据变量的值获取属性值

      // 如果属性名称是一个变量，那么[变量]是唯一的机会
      console.log('你想要的属性值是：', student[propName])

</script>

1.7-对象的行为--方法

<script>
      // let say = function (){}

      let student = {
        name: 'jack', // 对象的属性 = 值
        // 方法：自我介绍
        say: function() {
          console.log(456)
        } // 对象的方法属性 = 值-函数
      }

      student.say()
      // console.log(window)

      student['say']()
</script>

1.8-对象操作--修改和新增

<script>
      let student = {
        name: 'jack',
        say: function() {
          console.log(456)
        }
      }
      console.log(student)

      // 1。如果对象的属性值存在，重新赋值就是修改
      student.name = 'rose'
      console.log(student)
      // 2.如果属性值不存在，就是新增属性且赋值
      student.age = 20
      console.log(student)

      student['gender'] = '男'
      console.log(student)
</script>

1.9-对象操作-属性删除

<script>
      let student = {
        name: 'jack',
        say: function() {
          console.log(456)
        }
      }
      console.log(student)
      // 删除对象的成员： delete 对象.属性
      // 如果成员不存在,则也不报错
      delete student.say
      delete student.name
      delete student.age
      console.log(student)
</script>

1.10-对象的使用-案例

获取一串字符串中每个字符出现的次数

<script>
      // 获取一串字符串中每个字符出现的次数:{a:2,b:4,c:6,d:1}
      let str = 'aasdfasdfasfasdfasdfasdfdfhjgh'
      // 结果
      let obj = {}
      // 遍历字符串-字符串的本质是字符数组
      for (let i = 0; i < str.length; i++) {
        // console.log(str[i]) // a  >> {a:2}
        let key = str[i]
        // 如果对象中有当前遍历到的字符所对应的成员，则 将值 +　1
        // 获取一个对象不存在的属性值，返回undefined
        if (obj[key]) {
          obj[key] += 1
        }
        // 如果对象没有当前遍历到的字符所对应的成员，那么 添加一个新的成员，且值为1
        else{
          obj[key] = 1
        }
      }

      console.log(obj)
</script>

1.11-对象的遍历(for...in)

<script>
      let student = {
        gender: '男',
        subject: '前端',
        name: 'xuee',
        age: 18,
        debug: function() {
          console.log('我会调bug')
        }
      }
      // 遍历对象使用for ... in：因为对象没有索引，所以不能使用for索引的方式进行遍历
      // for(let key in 对象){}
      for (let key in student) {
        console.log(key, student[key])
      }
</script>

1.12-学生信息的渲染

<script>
      let students = [        { name: '小明', age: 18, gender: '男', hometown: '河北省' },        { name: '小红', age: 19, gender: '女', hometown: '河南省' },        { name: '小刚', age: 17, gender: '男', hometown: '山西省' },        { name: '小丽', age: 18, gender: '女', hometown: '山东省' }      ]

      // 拼接前面的网页结构
      let htmlStr = `<table border="1" width="500px">
                      <thead>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>家乡</th>
                      </thead>
                      <tbody>`
      // 遍历数组，拼接相应的静态结构
      for (let i = 0; i < students.length; i++) {
        htmlStr += `<tr>
                      <th>${i + 1}</th>
                      <th>${students[i].name}</th>
                      <th>${students[i].age}</th>
                      <th>${students[i].gender}</th>
                      <th>${students[i].hometown}</th>
                    </tr>`
      }
      // 拼接后面的网页结构
      htmlStr += `</tbody>
                </table>`

      document.write(htmlStr)
</script>

微信截图_20220618105125.png

二、内置对象Math

1.1-Math对象的基本使用

<script>
      // ceil:向上取整：获取比这个数大的  所有整数 中的最小值
      // 经典应用场景：获取总页数
      //  11条  》 每页10条  》 几页？ Math.ceil(11 / 10)
      let num = 1.1
      console.log(Math.ceil(num));

      // floor:向下取整：  获取双这个数  小的  所有整数中的  最大值
      let num2 = 1.9
      console.log(Math.floor(num2))

      // max:求一组数据 中的最大值
      console.log(Math.max(1, 234, 325, 4, 645, 6747, 568))
      // ...:展开运算符，可以将数组的所有成员一个一个展开
      console.log(Math.max(...[1, 234, 325, 4, 645, 6747, 568]))

      // min:获取一组数据中的最小值
      console.log(Math.min(1, 234, 325, 4, 645, 6747, 568))

      // pow(数据，n次幂)
      console.log(Math.pow(2, 10))

      // abs:绝对值：负值成为正数
      console.log(Math.abs(-100))
</script>

1.2-random函数生成随机数

<script>
      // Math.randomI()只能生成0-1之间的随机数，理论上包含0但是不包含1
      console.log(Math.random())

      // 生成0-10 的随机数
      console.log(Math.floor(Math.random() * 11))
      // 需要 0 - n的随机数： parseInt(Math.random() * (n+1))
      // console.log(parseInt(Math.random() * 11))

      let arr = ['张三', '李四', '王五', '赵六']
      // 生成一个 0 到  长度-1  的随机数
      let index = parseInt(Math.random() * arr.length)
      document.write(arr[index])
</script>

1.3-生成指定范围的随机数

<script>
      // Math.randomI()只能生成0-1之间的随机数，理论上包含0但是不包含1
      // 生成5 - 10
      // 先生成0-5  + 5
      // let num = parseInt(Math.random() * (5 + 1)) + 5
      // console.log(num)

      // 生成N - M
      // let num = parseInt(Math.random() * (N + 1)) + (M - N)
      // let num = parseInt(Math.random() * (M - N + 1)) + N
</script>

1.4-随机点名优化

<body>
    <button>单击点名</button>
    <script>
      let names = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
      let btn = document.querySelector('button')
      btn.addEventListener('click', function() {
        // 1.生成一个合理的随机索引
        let index = parseInt(Math.random() * names.length)

        console.log(names[index])
        // 将当前被抽中的姓名从数组中移除
        names.splice(index, 1)

        // 如果所有姓名都抽取完毕，则应该禁用按钮
        if (names.length == 0) {
          btn.disabled = true
        }
      })
    </script>
</body>

1.5-猜数字游戏

<script>
      // 需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字
      // ①：如果大于该数字，就提示，数字猜大了，继续猜
      // ②：如果小于该数字，就提示，数字猜小了，继续猜
      // ③：如果猜对了，就提示猜对了，程序结束

      // 1.获取用户输入的数字： 1-10
      // 2.生成随机的1-10的数
      // 3.进行判断，根据判断结果给出提示或者退出操作
      // 3.用户输入+ 判断操作  应该包含在这个循环结构中：while:不知道具体的循环次数
      // 3.1 写一个死循环，猜对了，使用break关键字可以退出循环

      // 生成随机的1-10的数
      let index = parseInt(Math.random() * 10) + 1

      while (1) {
        // 用户输入的数字
        let num = +prompt('请输入一个1-10的值')
        // 判断
        if (num > index) {
          alert('大了，继续')
        } else if (num < index) {
          alert('小了，继续')
        } else {
          alert('真棒，干饭')
          // 退出当前循环
          break
        }
      }
</script>

1.6-值类型数据作为变量赋值时的特点

<script>
      let num = 20
      console.log(num) // 20

      function updateValue(temp) {
        temp = 40
      }

      updateValue(num)

      console.log(num) // 20
</script>

1.7-引用类型数据做为变量赋值时的特点

<script>
      let obj = {
        name: 'jack',
        age: 20
      }
      console.log(obj) // {name: 'jack', age: 20}

      function updateValue(temp) {
        temp.name = 'rose'
        temp.age = 18

        console.log(temp === obj)
      }

      updateValue(obj)
      console.log(obj) // {name: 'rose', age: 18}
</script>

三、构造函数

1.1-为什么需要构造函数

我们为什么需要使用构造函数：因为我们前面两种创建对象的方式一次只能创建一个对象
因为我们一次创建一个对象，里面很多的属性和方法是大量相同的，我们只能复制
因此我们可以利用函数的方法重复这些相同的代码我们就把这个函数称为构造函数
又因为这个函数不一样，里面封装的不是普通代码，而是对象
构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装导函数里面

JS基础--对象（object）

一、对象（object）

1.1 对象是什么？

1.2.1 对象的声明

1.2.2-利用new Object创建对象

1.3 对象成员的添加

1.4 对象的属性值的获取-点语法

1.5 对象的属性值的获取-[]方式

1.6-对象的属性值的获取-[]方式-2

1.7-对象的行为--方法

1.8-对象操作--修改和新增

1.9-对象操作-属性删除

1.10-对象的使用-案例

1.11-对象的遍历(for...in)

1.12-学生信息的渲染

二、内置对象Math

1.1-Math对象的基本使用

1.2-random函数生成随机数

1.3-生成指定范围的随机数

1.4-随机点名优化

1.5-猜数字游戏

1.6-值类型数据作为变量赋值时的特点

1.7-引用类型数据做为变量赋值时的特点

三、构造函数

1.1-为什么需要构造函数