• 前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS基础（五）

    接受自己原本的样子，

    比努力扮演另一个轻松多了。

    思维导图

    对象

    什么是对象

    对象使用

    遍历对象

    索引号是字符串型，不推荐遍历数组。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         table {
    10.             width: 600px;
    11.             text-align: center;
    12.         }
    13.  
    14.         table,
    15.         th,
    16.         td {
    17.             border: 1px solid #ccc;
    18.             border-collapse: collapse;
    19.         }
    20.  
    21.         caption {
    22.             font-size: 18px;
    23.             margin-bottom: 10px;
    24.             font-weight: 700;
    25.         }
    26.  
    27.         tr {
    28.             height: 40px;
    29.             cursor: pointer;
    30.         }
    31.  
    32.         table tr:nth-child(1) {
    33.             background-color: #ddd;
    34.         }
    35.  
    36.         table tr:not(:first-child):hover {
    37.             background-color: #eee;
    38.         }
    39.     style>
    40. head>
    41.  
    42. <body>
    43.     <h2>学生信息h2>
    44.     <p>将数据渲染到页面中...p>
    45.  
    46.     <table>
    47.         <caption>学生列表caption>
    48.         <tr>
    49.             <th>序号th>
    50.             <th>姓名th>
    51.             <th>年龄th>
    52.             <th>性别th>
    53.             <th>家乡th>
    54.         tr>
    55.         
    56.         <script>
    57.             // 1. 数据准备
    58.             let students = [
    59.                 { name: '小明', age: 18, gender: '男', hometown: '河北省' },
    60.                 { name: '小红', age: 19, gender: '女', hometown: '河南省' },
    61.                 { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
    62.                 { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
    63.                 { name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校' }
    64.             ]
    65.             // 2. 渲染页面
    66.             for (let i = 0; i < students.length; i++) {
    67.                 document.write(`
    68.                 
    69.                     ${i + 1}
    70.                     ${students[i].name}
    71.                     ${students[i].age}
    72.                     ${students[i].gender}
    73.                     ${students[i].hometown}
    74.                 
    75.                 `)
    76.             }
    77.         script>
    78.     table>
    79.  
    80. body>
    81.  
    82.  
    83. html>

    内置对象

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math

    关于round，如果是.5，往大取，-20.5，-20大取-20；4.5，往大取，5。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // 属性
    14.     console.log(Math.PI)
    15.     // 方法
    16.     // ceil 天花板  向上取整
    17.     console.log(Math.ceil(1.1)) // 2 
    18.     console.log(Math.ceil(1.5)) // 2 
    19.     console.log(Math.ceil(1.9)) // 2 
    20.     // floor 地板  向下取整
    21.     console.log(Math.floor(1.1))  // 1
    22.     console.log(Math.floor(1.5))  // 1
    23.     console.log(Math.floor(1.9))  // 1
    24.     console.log(Math.floor('12px'))  // 1
    25.     console.log('----------------')
    26.     // 四舍五入 round
    27.     console.log(Math.round(1.1))  // 1
    28.     console.log(Math.round(1.49))  // 1
    29.     console.log(Math.round(1.5))  // 2
    30.     console.log(Math.round(1.9))  // 2
    31.     console.log(Math.round(-1.1))  // -1 
    32.     console.log(Math.round(-1.5))  // -1
    33.     console.log(Math.round(-1.51))  // -2
    34.  
    35.     // 取整函数 parseInt(1.2)   // 1
    36.     // 取整函数 parseInt('12px')   // 12
    37.  
    38.     console.log(Math.max(1, 2, 3, 4, 5))
    39.     console.log(Math.min(1, 2, 3, 4, 5))
    40.     console.log(Math.abs(-1));
    41.  
    42.     // null  类似 let obj = {}
    43.     let obj = null 
    44.   script>
    45. body>
    46.  
    47. html>

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // 左闭右开 能取到 0 但是取不到 1 中间的一个随机小数
    14.     // console.log(Math.random())
    15.  
    16.     // 0~ 10 之间的整数
    17.     // console.log(Math.floor(Math.random() * 11))
    18.     // let arr = ['red', 'green', 'blue']
    19.     // let random = Math.floor(Math.random() * arr.length)
    20.     // // console.log(random)
    21.     // console.log(arr[random])
    22.     // 取到 N ~ M 的随机整数
    23.     function getRandom(N, M) {
    24.       return Math.floor(Math.random() * (M - N + 1)) + N
    25.     }
    26.     console.log(getRandom(4, 8))
    27.   script>
    28. body>
    29.  
    30. html>

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
    14.     // 1. 得到一个随机数， 作为数组的索引号， 这个随机数 0~6
    15.     let random = Math.floor(Math.random() * arr.length)
    16.     // 2. 页面输出数组里面的元素 
    17.     document.write(arr[random])
    18.  
    19.     // 3. splice(起始位置(下标), 删除几个元素)
    20.     arr.splice(random, 1)
    21.     console.log(arr)
    22.   script>
    23. body>
    24.  
    25. html>

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // 1. 随机生成一个数字 1~10
    14.     // 取到 N ~ M 的随机整数
    15.     function getRandom(N, M) {
    16.       return Math.floor(Math.random() * (M - N + 1)) + N
    17.     }
    18.     let random = getRandom(1, 10)
    19.     console.log(random)
    20.     // 需要不断的循环
    21.     while (true) {
    22.       // 2. 用户输入一个值
    23.       let num = +prompt('请输入你猜的数字:')
    24.       // 3. 判断输出
    25.       if (num > random) {
    26.         alert('您猜大了')
    27.       } else if (num < random) {
    28.         alert('您猜小了')
    29.       } else {
    30.         alert('猜对啦，真厉害')
    31.         break  // 退出循环
    32.       }
    33.     }
    34.   script>
    35. body>
    36.  
    37. html>

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // 1. 随机生成一个数字 1~10
    14.     // 取到 N ~ M 的随机整数
    15.     function getRandom(N, M) {
    16.       return Math.floor(Math.random() * (M - N + 1)) + N
    17.     }
    18.     let random = getRandom(1, 10)
    19.     // 2. 设定三次  三次没猜对就直接退出
    20.     let flag = true  // 开关变量 
    21.     for (let i = 1; i <= 3; i++) {
    22.       let num = +prompt('请输入1~10之间的一个数字:')
    23.       if (num > random) {
    24.         alert('您猜大了，继续')
    25.       } else if (num < random) {
    26.         alert('您猜小了，继续')
    27.       } else {
    28.         flag = false
    29.         alert('猜对了，真厉害')
    30.         break
    31.       }
    32.     }
    33.     // 写到for的外面来
    34.     if (flag) {
    35.       alert('次数已经用完')
    36.     }
    37.   script>
    38. body>
    39.  
    40. html>

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     div {
    11.       width: 300px;
    12.       height: 300px;
    13.  
    14.     }
    15.   style>
    16. head>
    17.  
    18. <body>
    19.  
    20.   <script>
    21.     // 1. 自定义一个随机颜色函数
    22.     function getRandomColor(flag = true) {
    23.       if (flag) {
    24.         // 3. 如果是true 则返回 #ffffff
    25.         let str = '#'
    26.         let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
    27.         // 利用for循环随机抽6次 累加到 str里面
    28.         for (let i = 1; i <= 6; i++) {
    29.           // 每次要随机从数组里面抽取一个  
    30.           // random 是数组的索引号 是随机的
    31.           let random = Math.floor(Math.random() * arr.length)
    32.           // str = str + arr[random]
    33.           str += arr[random]
    34.         }
    35.         return str
    36.  
    37.       } else {
    38.         // 4. 否则是 false 则返回 rgb(255,255,255)
    39.         let r = Math.floor(Math.random() * 256)  // 55
    40.         let g = Math.floor(Math.random() * 256)  // 89
    41.         let b = Math.floor(Math.random() * 256)  // 255
    42.         return `rgb(${r},${g},${b})`
    43.       }
    44.  
    45.     }
    46.     // 2. 调用函数 getRandomColor(布尔值)
    47.     console.log(getRandomColor(false))
    48.     console.log(getRandomColor(true))
    49.     console.log(getRandomColor())
    50.  
    51.  
    52.  
    53.     // let str = '#'
    54.     // str = str + 'f'
    55.  
    56.  
    57.   script>
    58. body>
    59.  
    60. html>

    综合案例

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     let num1 = 10
    14.     let num2 = num1
    15.     num2 = 20
    16.     console.log(num1) // 结果是？
    17.  
    18.  
    19.     let obj1 = {
    20.       age: 18
    21.     }
    22.     let obj2 = obj1
    23.     // 修改属性
    24.     obj2.age = 20
    25.     console.log(obj1.age)
    26.   script>
    27. body>
    28.  
    29. html>

  • 相关阅读:
    中国大模型语料数据联盟迎来9家新成员，开源第二批语料数据
    行列视（RCV）数据安全如何保障？
    JavaScript： 异步代码同步执行
    15-k8s-高级存储之pv与pvc
    jquery 分页兼容i7,i8浏览器
    立晶半导体Cubic Lattice Inc 专攻音频ADC,音频DAC,音频CODEC,音频CLASS D等CL7016
    fanuc机器人IO分配报警信号分配无效
    dalle:zero-shot text-to-image generation
    java版工程管理系统Spring Cloud+Spring Boot+Mybatis实现工程管理系统源码
    Java中的代码优雅重构实战
  • 原文地址：https://blog.csdn.net/upgrade_bro/article/details/133231726