js基础5

89 阅读1分钟

一、对象

一、定义

在计算机世界中,万事万物都可以被称为对象.

二、语法
<script>
      // 定义对象
      // 语法:
      // let 变量名 = {}
      // 对象是由一些具体得信息构成得
      let person={
        name:'小明',
        gender:'女',
        age:18
      }
      // 通过对象能够将一个人物进行具体得描述
      let age = 18
      let gender = '男'
      // 1.定义对象
      let xiaohong={
        // 属性名:属性值,
        age:20,
        gender:'女',
        hobby:'唱歌'
      }
      let xiaoming={
        age:10,
        gender:'男'
      }
      // 2.对象的读取
      // 语法:对象名.属性名
      console.log(xiaoming.age)
      console.log(xiaohong.hobby)

      // 3.对象属性的修改
      // 语法:对象名.属性名=新的值
      console.log(xiaoming.age=30)

      // 4.对象属性的删除
      // 语法: delete 对象名.属性名
      delete xiaohong.hobby
      console.log(xiaohong )
    </script>
练习
<script>
    //对象可以完整的描述一个事物(一个人.一个物)的信息
    
    // 定义一个商品
    // 如果对象中啥也没有,称为空对象
    let goods = {
      name:'小米手机',
      num:'12345678',
      weight:'250g',
      address:'北京海淀'
    }
     // 如何修改一个对象的属性
      goods.name='小米10Plus'
      // 如何去追加一个新增属性
      goods.color='粉色'
      console.log(goods.color)
      console.log(goods.num)
      console.log(goods.weight)
      console.log(goods.address)
      console.log(goods.name)
    // 对象的补充内容
    // 1.如果一个对象中没有某个内容,我非要读取结果如何?
    let car = {
      color:'yellow',
      brand:'大众',
      price:'20万'
    }
    console.log(car.year) //undefined
    // 2.如果对象中没有某个属性,我非要给它赋值
    car.year='2020年'
    console.log(car) //结果是动态为对象增加了一个新属性
    // 在对对象进行赋值时,存在就是修改
    // 不存在就是动态新增
    
     // person.name person.age
      // 还有一种就是使用[] 即:对象名['属性名']
      // 举例:
      console.log(person.name)
      console.log(person['name'])

      // 如果属性名比较特殊的时候,使用[]的语法
      // 举例说明:
      let person1 = {
        name:'小点',
        age:20,
        'his-id':1 //特殊属性名
      }

      // person.his-id 语法错误 此时使用[]语法就可以
      console.log(person['his-id'])
  </script>
二、对象方法
<script>
      //访问即方法,函数如果在对象中即为方法
      // 在班级里彼此之间[同学]相称

      let person = {
        name:'andy',
        age:20,
        gender:'男',

        // 方法名:(匿名)函数
        canSing:function(){
          // 此处的逻辑就是之前所学习的
          // 所有和函数相关的语法
          console.log('哈哈哈,我会唱歌')
        }
      }
      // 1.如何定义
      // 方法就是函数,函数是需要调用的
      // 如何进行调用?
      // 对象名.方法名()
      // 举例说明:
      person.canSing()

      // 2.带参数的方法
      let person1 = {
        name:'小明',
        age:10,

        // 方法名叫sayHi方法如何写
        sayHi:function(name){
          // a)分析哪里实在定义函数
          console.log(name)
        }
      }
      // b)那个地方实在调用函数

      // 定义时是形参,实参是调用时的函数
      person1.sayHi('小红红')

      // 3.方法的参数可不可以有默认值
      // 形参可以有默认值
      let person2 = {
        name:'小红',
        gender:'女',

        sum:function(x,y=0){
          console.log(x+y)

        }
      }
      person.sum(10)

      // 4.方法中可不可以写return
      let person3 = {
        name:'11',
        age:10,

        total:function(n){
          let s = 0
          for(let i=0;i<=n;i++){
            s += i
          }
          return s
        }
      }
      let res = person3.total(10)
      console.log(res)
    </script>
  </div>
例子:遍历学生信息
<style>
    table{
      width: 400px;
      height: 100px;
      text-align: center;
      margin: 0 auto;
    }
    td{
      border: 1px solid pink;
      border-collapse: collapse;
    }
  </style>
<script>

    // 对象有啥用嘞?
    // 答:对象能够存储比较复杂的数据,比商品信息、学生信息

    // 1. 通过对象先定义若干个学生信息(理解下面的数据是啥意思?)
    let students = [
      {name: '小明', age: 18, gender: '男', hometown: '河北省'},
      {name: '小红', age: 19, gender: '男', hometown: '河南省'},
      {name: '小刚', age: 17, gender: '女', hometown: '山西省'},
      {name: '小丽', age: 18, gender: '女', hometown: '山东省'}
    ]

    // 2. 上述的代码中,谁是真正需要显示的数据?
    // 答:小明 小红 18 19 ... 这些数据
    // 要获取数据需要数组和对象互相配合,比如
    // students[0] // 数组中每个对象是一个单元
    // console.log(students[1])
    // 知道上述情形后,获取小红这个数据咋办?
    // console.log(students[1].age)
    // let student = students[1]
    // console.log(student.name) // 小红

    // 3. 通过遍历拿到全部的数据
    // 1. 数组遍历 2. 可能需要对象遍历

    document.write('<table>')
    document.write(`
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>家乡</td>
      </tr>
    `)

    for (let i = 0; i < students.length; i++) {
      // console.log(students[i])
      let student = students[i]
      
      document.write(`
        <tr>
          <td>${i + 1}</td>
          <td>${student.name}</td>
          <td>${student.age}</td>
          <td>${student.gender}</td>
          <td>${student.hometown}</td>
        </tr>
      `)
    }

    document.write('</table>')
  </script>
三、JS内置对象
<script>
      // JS很多内置对象
      // Math
      // 对象 = 属性+方法
      // 属性是什么意思,方法是能做什么事情

      // 1.Math属性,它只有一个属性PI 3.1415926圆周率
      console.log(Math.PI)
      // 2.Math有很多很多方法
      let maxNumber = Math.max(1,2,3,4,5)
      console.log(maxNumber) //5
    let minNumber = Math.min(1,2,3,4,5)
      console.log(minNumber) //1
      //floor取整数 简单粗暴的取整数 向下取整 直接将小数部分扔掉
      let price = 12.345 //12
      console.log(Math.floor(price))
      // ceil取整数 向上取整 向整数部分加1
      let price1 = 12.333
      console.log(Math.ceil(price)) //13
    // pow求次幂 
      console.log(Math.pow(2,3)) //2的3次方
      //abs求绝对值
      console.log(Math.abs(-1)) //1
    
    // random
      // Math.random()是用来求一个随机数的 会自动生成0到1之间的随机数
      console.log(Math.random())
      console.log(Math.random()*10)
      // 如果出现了一堆小数
      let intNumber = Math.floor(Math.random()*10)
      console.log(intNumber)

      // 随机数 Math.random的一个难点
      // Math.random可以为0不可为1
      // Math.random() 0.9999999999

      // 请你求出0~10之间的随机(包含10)
      let i = Math.random()*(10+1) //0~11 不包含11
      Math.floor(i) //0~10

      Math.floor(Math.random()*(N+1))
      Math.floor(Mth.random()*(5+1))+5
      // 公式:N~M之间的随机数
      // Math.floor(Math.random()*(M-N+1))+N
    </script>
堆栈内存
<script>
      let x= 1
      let y= x
      console.log(y)
      console.log(x)

      let user = {
        name:'小明',
        age:18
      }
      let user1 = user
      console.log(user1)
      // user1.name = '小小猫'
      // console.log(user.name)
      // user.age=20
      // console.log(user1.age)
      user1 = {
        name:'小刚',
        age:32
      }
      console.log(user.name)
      // 如果是变量之间进行赋值,如变量1 = 变量2
      // 变量1 和 变量2 就会指向同一个内存,因此改变其中一个
      // 另一个也会改变

      // 如果是 变量=新的对象,那么就会在内存中建立新的空间
      // 变量与其他的变量之间互不影响
    </script>