• 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)

    1.    const students={
    2.             name:'张三',
    3.             id:1001,
    4.             sex:'男',
    5.             hobby:function(){
    6.                 console.log('我喜欢唱歌')
    7.             }
    8.  
    9.         }

    三、对象的操作 

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

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

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


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

        

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

    1.    // 增
    2.       peiqi.color = 'pink'
    3.       peiqi.sing = function () {
    4.         console.log('唱歌')
    5.       }
    6.       console.log(peiqi)

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

    1.   // 改
    2.       peiqi.age = 4
    3.       console.log(peiqi)

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

    1.   // 删
    2.       delete peiqi.sex
    3.       console.log(peiqi)

    四、遍历对象 

    for in 可以遍历对象或数组

    1. const peiqi = {
    2.         uname: '佩奇',
    3.         age: 20,
    4.         sex: '女',
    5.         'a-b': 20,
    6.       }
    7.  
    8.       // for in 可以遍历对象或数组
    9.       for (let key in peiqi) {
    10.         console.log(key) //  获取的是属性名
    11.         console.log(peiqi[key]) //;
    12.       }

    for in 遍历数组 

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

    五、渲染表格案例 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         table{
    9.             width: 500px;
    10.             margin: 100px auto;
    11.             border-collapse: collapse;
    12.             /* background: linear-gradient(red, yellow); */
    13.         }
    14.         table,th,td{
    15.             border: 1px solid #757373;
    16.             text-align: center;
    17.             height: 40px;
    18.  
    19.         }
    20.         th{
    21.             background-color: #a8a6a6;
    22.         }
    23.         /* tr:hover{
    24.             background-color: #a8a6a6;
    26.         } */
    27.         tr:hover{
    28.             background-color: antiquewhite;
    29.  
    30.         }
    31.     style>
    32. head>
    33. <body>
    34.    
    35.     <script>
    36.             const students = [
    37.         {
    38.           id: 10001,
    39.           name: 'lily',
    40.           age: 20,
    41.           score: 90,
    42.         },
    43.         {
    44.           id: 10002,
    45.           name: 'lucy',
    46.           age: 21,
    47.           score: 80,
    48.         },
    49.         {
    50.           id: 10003,
    51.           name: 'tom',
    52.           age: 22,
    53.           score: 85,
    54.         },
    55.       ]
    56.       let str=''
    57.       for(let i=0;i
    58.         str+=`
    59.         <tr>
    60.         <td>${students[i].id}td>
    61.         <td>${students[i].name}td>
    62.         <td>${students[i].age}td>
    63.         <td>${students[i].score}td>
    64.       tr>
    65.         `
    66.  
    67.       }
    68.       document.write(`
    69.       <table>
    70.         <thead>
    71.             <th>学号th>
    72.             <th>姓名th>
    73.             <th>年龄th>
    74.             <th>成绩th>
    75.    
    76.         thead>
    77.         <tbody>
    78.     ${str}
    79.         tbody>
    80.     table>
    81.       `)
    82.     script>
    83. body>
    84. html>

    六、Math内置对象 

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

    Math内置对象：

    PI           圆周率

    floor      向下取整

    ceil        向上取整

    round    四舍五入

    abs        取绝对值

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

    max       求一组数据中的最大值

    min        求一组数据中的最小值

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

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

     七、随机函数

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

    1. function getRandom(n, m) {
    2.             if (n > m) {
    3.                 let temp = n
    4.                 n = m
    5.                 m = temp
    6.             }
    7.             //   return Math.round(Math.random()*(m-n))+n
    8.             return Math.floor(Math.random() * (m - n + 1)) + n
    9.  
    10.         }

    八、日期对象

    日期对象：

    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 代表星期日）

    封装时间函数

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

    封装倒计时函数

    1.     function getTime(date) {
    2.             let nowTime = new Date().getTime()//获取当前时间总毫秒数
    3.             let futTime = new Date(date).getTime()//获取未来时间总毫秒数
    4.             let time = (futTime - nowTime) / 1000//未来时间与当前时间差转成秒数
    5.             //倒计时的秒数时间
    6.             var d = parseInt(time / 60 / 60 / 24)//获取倒计时天数
    7.             d = d < 10 ? '0' + d : d
    8.             let h = parseInt(time / 60 / 60 % 24)//获取倒计时小时
    9.             h = h < 10 ? '0' + h : h
    10.             let m = parseInt(time / 60 % 60)//获取倒计时分钟
    11.             m = m < 10 ? '0' + m : m
    12.             let s = parseInt(time % 60)//秒
    13.             s = s < 10 ? '0' + s : s
    14.             return `${d}天 ${h}时 ${m}分 ${s}秒`
    15.  
    16.         }
    17.         console.log(getTime('2023-11-8 20:00:00'))

    九、案例

    随机⽣成颜⾊的案例

    1.     function Random(flag) {
    2.  
    3.             if (flag === true || flag === undefined) {
    4.                 const arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
    5.  
    6.                 let str = '#'
    7.                 for (let i = 1; i <= 6; i++) {
    8.                     let random = Math.floor(Math.random() * arr.length)
    9.                     str += arr[random]
    10.  
    11.                 }
    12.                 return str
    13.             } else {
    14.                 let r = Math.floor(Math.random() * 256)
    15.                 let g = Math.floor(Math.random() * 256)
    16.                 let b = Math.floor(Math.random() * 256)
    17.                 return `rgb(${r},${g},${b})`
    18.             }
    19.  
    20.         }
    21.  
    22.         console.log(Random(false))
    23.         console.log(Random(true))
    24.         console.log(Random())

    随机点名

    1.   const arr=['苹果','香蕉','草莓','橘子']
    2.         function getRandom(n,m){
    3.             if(n>m){
    4.                 let temp=n
    5.                 n=m
    6.                 m=temp
    7.  
    8.             }
    9.             return Math.floor(Math.random()*(m-n+1))+n
    10.         }
    11.         console.log(arr[getRandom(0,arr.length-1)])

  • 相关阅读:
    嵌入式Linux C进程间通信——IPC概述和信号
    经管博士科研基础【27】如何判断正定矩阵或者负定矩阵？
    LinkedBlockingQueue源码分析
    Django框架简单搭建增删改查页面 Django请求生命周期流程图
    小鱼ROS
    免费开箱即用的微鳄任务管理系统
    大厂秋招真题【DP/贪心】字节跳动20230923秋招T1-小红的 01 串【欧弟算法】全网最全大厂秋招题解
    使用Android辅助功能AccessibilityService实现微信自动聊天【外挂插件】
    spring
    文心一言 VS 讯飞星火 VS chatgpt （113）-- 算法导论10.2 5题
  • 原文地址：https://blog.csdn.net/m0_56713342/article/details/134292667