js基础之对象

目录

一、对象定义

二、声明对象：object

三、对象的操作 

四、遍历对象 

五、渲染表格案例 

六、Math内置对象 

 七、随机函数

八、日期对象

封装时间函数

封装倒计时函数

九、案例

随机⽣成颜⾊的案例

随机点名

---

一、对象定义

对象     ： 对象可以存储一个人完整的信息，对象里有属性和方法，是以键值对组成的

js对象为了描述客观事物，如一本书，一个人，一只猫....

语法：

{ 属性名：值，

属性名：值，

属性名：值 }    若干个键（key）值（value)对
    

二、声明对象：object

1、字面量

访问对象的值，对象的变量名.属性名

访问对象的值，  对象的变量名[ ' 属性名']      如果不加引号就会朝内存中找这个变量  

  给对象添加属性  对象名.属性名=属性值

修改对象的属性值  对象名.属性名=属性值

对象名['属性名']添加属性

2 new关键字创建

var obj = new Object(){

            name: '属性值'

        }

        // console.log(obj)

3、构造函数创建对象 函数名首字母大写

        function Person(name) {

            this.name = name

        }

        var person = new Person('对象')

        // console.log(person)

   const students={
            name:'张三',
            id:1001,
            sex:'男',
            hobby:function(){
                console.log('我喜欢唱歌')
            }

        }

三、对象的操作 

对象操作------增删改查
    
    对象名都是字符串，属性名没有特殊符号的时候，字符串引号可以省略

    查-------对象名.属性名 或 对象名['属性名']   (不加引号表示变量）

    // 对象名都是字符串,属性名没有特殊符号的时候，字符串引号可以省略
      const peiqi = {
        uname: '佩奇',
        age: 20,
        sex: '女',
        'a-b': 20,
      }
      console.log(peiqi['a-b'])

    
    当里面的属性用变量存起来时用[ ]
    总结：属性名明确的话，两种形式都可以，属性名存在变量里或者属性名含有特殊符号的，只能用中括号

    

    增-------对象名.属性名=属性值

   // 增
      peiqi.color = 'pink'
      peiqi.sing = function () {
        console.log('唱歌')
      }
      console.log(peiqi)

    改--------对象名.属性名=属性值

  // 改
      peiqi.age = 4
      console.log(peiqi)

    删---------delete   对象名.属性名

  // 删
      delete peiqi.sex
      console.log(peiqi)

四、遍历对象 

for in 可以遍历对象或数组

const peiqi = {
        uname: '佩奇',
        age: 20,
        sex: '女',
        'a-b': 20,
      }

      // for in 可以遍历对象或数组
      for (let key in peiqi) {
        console.log(key) //  获取的是属性名
        console.log(peiqi[key]) //;
      }

for in 遍历数组 

  const arr = [1, 2, 3]
      for (let k in arr) {
        console.log(k) // 拿到的是索引 字符串
        console.log(arr[k])
      }

五、渲染表格案例 

六、Math内置对象 

Math内置对象------提供一系列与数学运算相关的属性或方法

Math内置对象：

PI           圆周率

floor      向下取整

ceil        向上取整

round    四舍五入

abs        取绝对值

pow          求某个数的几次方
sqrt           求平方根

max       求一组数据中的最大值

min        求一组数据中的最小值

random  是 [ 0-1 ）之间的随机的小数

 console.log(typeof Math) // object 对象类型
      console.log(Math.PI) // 3.1415926
      // 常用方法
      console.log(Math.abs(-5)) // 5 绝对值
      console.log(Math.ceil(10.1)) // 11 向上取整
  console.log(Math.floor(10.9)) // 向下取整 10
 console.log(Math.max(10, 3, 4, -1)) // 10
      console.log(Math.min(10, 3, 4, -1)) // -1
      console.log(Math.pow(2, 5)) // 求2的5次方
      console.log(Math.sqrt(16))
      console.log(Math.round(10.5)) // 11 四舍五入

 七、随机函数

产生n-m之间的随机整数

function getRandom(n, m) {
            if (n > m) {
                let temp = n
                n = m
                m = temp
            }
            //   return Math.round(Math.random()*(m-n))+n
            return Math.floor(Math.random() * (m - n + 1)) + n

        }

八、日期对象

日期对象：

console.log(data.getTime())    //从1970年1月1日到此时此刻的毫秒数

console.log(date.valueOf())     //拿到此时此刻的毫秒数

var data= +new Date()         //拿到的也是此时此刻的毫秒数

var data = Date.now()           //拿到的也是此时此刻的毫秒    

var data = new Date('2023/10/1')         //拿到指定日期的毫秒数

格式化时间：

var date = new Date()      //获取中国标准时间

date.getFullYear()            // 获取年份

date.getMonth()              //获取月份(获取的月份比实际的月份小一月，要加1）

date.getDate()                //获取日期

date.getHours()            // 获取小时

date.getMinutes            //获取分钟

date.getSeconds()          //获取秒数

    date.getDay()     //获取一个星期中的星期几（1 - 6 代表星期一到六， 0 代表星期日）

封装时间函数

 function getTime() {
            var date = new Date()
            var y = date.getFullYear() //获取当前年份
            var m = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 //获取当前月份
            var d = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //获取当前日期
            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()//获取当前小时
            var mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()//获取当前分钟
            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()//获取当前秒数
            return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s
        }

        console.log(getTime()) 

封装倒计时函数

    function getTime(date) {
            let nowTime = new Date().getTime()//获取当前时间总毫秒数
            let futTime = new Date(date).getTime()//获取未来时间总毫秒数
            let time = (futTime - nowTime) / 1000//未来时间与当前时间差转成秒数
            //倒计时的秒数时间
            var d = parseInt(time / 60 / 60 / 24)//获取倒计时天数
            d = d < 10 ? '0' + d : d
            let h = parseInt(time / 60 / 60 % 24)//获取倒计时小时
            h = h < 10 ? '0' + h : h
            let m = parseInt(time / 60 % 60)//获取倒计时分钟
            m = m < 10 ? '0' + m : m
            let s = parseInt(time % 60)//秒
            s = s < 10 ? '0' + s : s
            return `${d}天 ${h}时 ${m}分 ${s}秒`

        }
        console.log(getTime('2023-11-8 20:00:00'))

九、案例

随机⽣成颜⾊的案例

    function Random(flag) {

            if (flag === true || flag === undefined) {
                const arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']

                let str = '#'
                for (let i = 1; i <= 6; i++) {
                    let random = Math.floor(Math.random() * arr.length)
                    str += arr[random]

                }
                return str
            } else {
                let r = Math.floor(Math.random() * 256)
                let g = Math.floor(Math.random() * 256)
                let b = Math.floor(Math.random() * 256)
                return `rgb(${r},${g},${b})`
            }

        }

        console.log(Random(false))
        console.log(Random(true))
        console.log(Random())

随机点名

  const arr=['苹果','香蕉','草莓','橘子']
        function getRandom(n,m){
            if(n>m){
                let temp=n
                n=m
                m=temp

            }
            return Math.floor(Math.random()*(m-n+1))+n
        }
        console.log(arr[getRandom(0,arr.length-1)])