JavaScript 对象增删改查 + 遍历对象+内置函数 + 随机对象

red
red

1、什么是对象？

    对象是JavaScript 里的一种数据类型；可以理解为是一种无序的数据集合；
    用来描述某个事物,例如描述一个人信息
1
2

2、对象怎么声明？

let 对象名 = {}
例如：
//声明了一个person的对象
let person = {}
1
2
3
4

3、对象由哪几部分组成的？

属性和方法组成的。
1


```go
let 对象名 = {
    属性名 ：属性值,
    方法名：函数
}
1
2
3
4
5
6

4、对象访问属性有哪两种方式

对象.属性
对象['属性']
1
2

5、对象有顺序吗？

没有
1

6、两种对象方式有什么不同？

 点后面的属性名一定不要加引号
    []里面的属性名一定加引号
1
2

7、对象中的方法和属性有什么区别？

 属性是静态的；方法是动态的
1

8、对象方法可以传递参数吗？

可以,跟函数使用方法基本一致。
操作对象
增删改查
查：直接 对象.属性
增  改 ：
会去对象里面找是否有 sex 这个属性,如果有则更新值修改；如果没有这个属性，就直接新增属性
        obj.sex = '男'
删：
//删除    了解
delete obj.uname
console.log(obj)
1
2
3
4
5
6
7
8
9
10
11

9、对象是如何声明和使用的？

1、用{}把一堆数据包起来
    2、多个属性和方法之间用逗号隔开
    3、console.log输出 方便查看对象里有哪些属性和方法
1
2
3

10、如何动态添加属性和方法？

1、对象如果有这个属性相当于重新赋值
2、对象如果没有这个属性相当于动态添加一个属性
1
2

遍历对象
1、对象没有像数组一元的length属性,所以无法确定长度
2、对象里面是无序的键值对,没有规律.不像数组里面有规律的下标。

let obj = {
    uname : 'andy',
    age : 18,
    sex : '男'
}
for (let k in obj) {
    console.log(k)//打印属性名
    console.log(obj[k]) //打印属性值
}
1
2
3
4
5
6
7
8
9

11、遍历对象用哪个语句？

for in 
1

12、遍历对象中, for k in obj,获得对象属性是哪个？活得值是哪个？

获得对象属性是k
获得值是 obj[k]
1
2

13、内置对象math？

math对象是JavaScript提供的一个对象
如：random:生成0-1之间的随机数(包含0不包含1)
ceil:向上取整
floor:向下取整
max:找最大数
min:找最小数
pow:幂运算
abs:绝对值
1
2
3
4
5
6
7
8

14、生成任意范围随机数？

1、如何生成0-10的随机数？
    Math.floor(Math.random()*(10+1))
2、如何生成5-10的随机数？
    Math.floor(Math.random()* (5+1)) +5
3、如何生成N-M之间的随机数？
    Math.floor(Math.random()* (M - N + 1))+N
1
2
3
4
5
6

15、之前用过的内置对象有

**
document.write()
console.log()

案例一 : 声明产品对象

        // 声明产品对象
         let goods = {
            name: '小米10青春版',
            num: '100012816024',
            weight : '0.55kg',
            address : '中国大陆'
         }
        //  对象['属性名']
         document.write(goods['name'])  
        //  对象.属性名
         document.write(`名字：${goods.name} ,产品号：${goods.num} 重量：${goods.weight} 产地:${goods.address}`)    
1
2
3
4
5
6
7
8
9
10
11

案例二调用方法名

  let person = {
                uname : '刘',
                age : 18,
                sex: '男',
                //方法名:function(){}
                sayHi: function() {
                    console.log('hi~')
                },
                mtv: function(s) {
                    console.log(s)
                }
            }
            console.log(person.uname)
            //调用函数名
            person.sayHi()
            // 实参有内容，形参要传参
            person.mtv('无间道')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

案例三对象中的方法

 //对象是有属性和方法组成的,那么属性和方法都要写在对象里面
        let dh = {
            // 属性
            uname : '刘',
            // 方法  方法名：function(){}
            sing: function() {
                console.log('唱歌')
            },
            dance: function(dance) {
                console.log(dance)
            }
        }
        //外部使用   对象.方法名()
        dh.sing()
        dh.dance('开心的马骝')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

案例四：对象中的增删改查

这是查和改

  let obj = {
            uname : '小明',
            age : 18
        }
        // 查  
        console.log(obj.age)
        //修改 对象.属性  = 新值
        obj.age = 82
        console.log(obj)
1
2
3
4
5
6
7
8
9

删和新增

 //新增一个属性   js 可以非常方便的动态新增属性或者方法
        //会去对象里面找是否有 sex 这个属性,如果有则更新值修改；如果没有这个属性，就直接新增属性
         let obj = {
            uname : '小明',
            age : 18
        }
        obj.sex = '男'
        console.log(obj)
        obj.sing = function () {
            console.log('hi')
        }
        console.log(obj)
        //删除    了解
        delete obj.uname
        console.log(obj)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

案例四遍历对象


        let obj = {
            uname: 'andy',
            age: 18,
            sex: '男'
        }
        // k是变量名字  这个可以随便起    obj 是对象名字
        for (let k in obj) {
            // console.log(k)//打印属性名
            // console.log(obj[k]) //打印属性值
            console.log(`${k}:${obj[k]}`) //打印属性名和属性值
        }
1
2
3
4
5
6
7
8
9
10
11
12

案例五：对象案例；静态值换成动态值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <h2>学生信息</h2>
    <p>将数据渲染到页面中...</p>
    <!-- <table>
        <caption>学生列表</caption>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>家乡</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
            <td>河北省</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小王</td>
            <td>18</td>
            <td>女</td>
            <td>河南省</td>
        </tr>
        <tr>
            <td>3</td>
            <td>小段</td>
            <td>21</td>
            <td>男</td>
            <td>河南省</td>
        </tr>
        <tr>
            <td>4</td>
            <td>小贺</td>
            <td>21</td>
            <td>女</td>
            <td>新疆省</td>
        </tr>
        
    </table> -->
    <script>


        //数组  里面可以放任何的数据类型
        // let arr = [1,'pink',true,undefined,null,{},[]]
        // console.log(arr)

        let students = [
            { name: '椋焜', age: '18', gender: '男', hometown: '河北省' },
            { name: '椋琪', age: '17', gender: '女', hometown: '河南省' },
            { name: '英达', age: '18', gender: '男', hometown: '河南省' },
            { name: '老鹰', age: '21', gender: '男', hometown: '新疆省' },

        ]
        // //循环遍历整个对象
        // for(let i = 0 ; i < students.length ; i++) {
        //     // console.log(students[i])
        //     // 能得到某个对象的值
        //     console.log(students[i].name)
        // }



        // 遍历数组
        // 需求：根据以上数据渲染生成表格
        // 分析：1、打印表格 头部和尾部
        document.write(`
        
        `)// 2、中间的行遍历数组，然后填充对象数据for(let i =0; i < students.length; i++){
            document.write(`
                
                `)}

        document.write(`
        学生列表
        
            序号
            姓名
            年龄
            性别
            家乡
        
        
           
            ${i + 1}
            ${students[i].name}
            ${students[i].age}
            ${students[i].gender}
            ${students[i].hometown}
        
        
`)

    </script>
</body>

</html>
<style>
    table {
        width: 600px;
        text-align: center;
    }

    table,
    th,
    td {
        border: 1px solid #ccc;
        /* 为表格设置合并边框模型 */
        border-collapse: collapse;
    }

    caption {
        font-size: 18px;
        margin-bottom: 10px;
        font-weight: 700;

    }

    tr {
        height: 40px;
        cursor: pointer;
    }

    table tr:nth-child(1) {
        background-color: #ddd;
    }

    /* 行 高亮 */
    table tr:not(:first-child):hover {
        background-color: #eee;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

学生列表
序号	姓名	年龄	性别	家乡
${i + 1}	${students[i].name}	${students[i].age}	${students[i].gender}	${students[i].hometown}

案例六内置对象就是随便数向上取整、向下取整、就近取整、

向上取整

     console.log(Math.random())//随机数  返回的是0-1之间小数(包括0不包括1)
        console.log(Math.ceil(1.1))//Math.ceil 向上取整，返回的整数
        console.log(Math.ceil(1.5))
        console.log(Math.ceil(1.9))
1
2
3
4

向下取整

console.log(Math.floor(1.1))Math.floor 向下取整，返回的整数
        console.log(Math.floor(1.5))
        console.log(Math.floor(1.9))
1
2
3

就近取整

 console.log(Math.round(1.1))  //round  是就近取整，返回的是整数
        console.log(Math.round(1.5))
        console.log(Math.round(-1.5)) //这个比较特殊 返回的是-1
        console.log(Math.round(-1.9))//返回-2   就近取整，负数返回的也是整数
1
2
3
4

最大值和最小值

  //最大值   最小值   
        console.log(Math.max(1,5,9,21))
        console.log(Math.min(1,5,9,21))
1
2
3

案例七 N -M 之间的一个随机数公式

第一步：

//求得是  N -M 之间的一个随机数公式
        let random = Math.floor(Math.random() * (10-1+1))+1  //每次刷新的是  1-10
        console.log(random)
        //封装一个随机函数     min到max
        //第一步
        function getRandom(min,max) {
            return Math.floor(Math.random() * (M-N +1))+N
        }
1
2
3
4
5
6
7
8

第二步：

  //第二步  把形参放入到公式里面
        function getRandom(min,max) {
            return Math.floor(Math.random() * (max-min +1))+min
        }

        getRandom(1,10)
        console.log(getRandom(1,10))
        let random = getRandom(1,10)
        console.log(random)

1
2
3
4
5
6
7
8
9
10

案例八随机点名案例

 // 随机点名案例
        // 需求：请把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面中
        function getRandom(min,max) {
            return Math.floor(Math.random() * (max-min +1))+min
        }
        //  声明一个数组
        let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
        // document.write(`${arr[0]}`) //返回数组第一个赵云
        //生成一个随机数
        let random = getRandom(0,arr.length -1)
        // document.write(`${random}`)  //取得数组中的随机下标
        document.write(`${arr[random]}`) //根据数组的下标取得随机名字
1
2
3
4
5
6
7
8
9
10
11
12

案例九：随机点名，不能重复（显示名字的时候，数组里边不显示它）


        // 随机点名案例  不能重复显示
        // 分析：1、利用随机函数随机生成一个数字作为索引号
        // 2、数组[随机数]生成到页面中
        // 3、数组中删除刚才抽中的索引号

        // 随机点名案例
        // 需求：请把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面中
        function getRandom(min,max) {
            return Math.floor(Math.random() * (max-min +1))+min
        }
        //  声明一个数组
        let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
        // document.write(`${arr[0]}`) //返回数组第一个赵云
        //生成一个随机数
        let random = getRandom(0,arr.length -1)
        // document.write(`${random}`)  //取得数组中的随机下标
        document.write(`${arr[random]}`) //根据数组的下标取得随机名字

        // // 从哪里删,删除几个
        arr.splice(random,1)
        console.log(arr) //打印 数组,看显示的内容有没有从数组中删掉
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

案例十：猜字游戏

     // 猜数字游戏
        //  需求:程序随机生成1~10之间的一个数字,用户输入一个数字
        //  1、如果大于该数字，就提示，数字猜大了，继续猜。
        //  2、如果小于该数字，就提示，数字猜小了，继续猜。
        //  3、如果猜对了，就提示猜对了，程序结束。

        // 分析：
        // 1、利用随机数生成一个数字
        // 2、需要一直猜，所以需要不断的循环
        // 3、因为条件是结果猜对了，就是判断条件退出，用while循环合适
        // 4、内部判断可以用多分支语句。
        // ---------------------------------------------------
        // 1、随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        //生成1~10之间的随机数
        let random = getRandom(1, 10)
      console.log(random)
        // 用户输入，不断的弹框 直到输入正确为止。
        while (true) {
            let num = + prompt('请您输入一个1~10的数字:')
            //  1、如果大于该数字，就提示，数字猜大了，继续猜。
            //  2、如果小于该数字，就提示，数字猜小了，继续猜。
            //  3、如果猜对了，就提示猜对了，程序结束。
            // 使用三个分支
            if( random <num) {
                alert('私密马赛，您猜大了')
            }else if ( random > num ) {
                alert('比亚乃，你猜小了')
            }else {
                alert('萨瓦迪卡 ，你猜对了')
                // return   退出函数
                break;  //break 退出整个循环
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

相关阅读:
const int* , const int * const, int * const之间的区别
 uni-app - 城市选择索引列表 / 通过 A-Z 排序的城市列表（uview 组件库 IndexList 索引列表）
虚拟机配置网络ip，主打一个详细
 Android未捕获异常监控原理
 【愚公系列】2022年10月微信小程序-优购电商项目-⾃定义组件传参
 文件结构介绍
 微信小程序--》Vant组件库的安装与使用
 elasticsearch 相似度计算
 缓存之缓存简介
 Linux-多路转接-epoll
原文地址：https://blog.csdn.net/qq_48203828/article/details/126491347

JavaScript 对象增删改查 + 遍历对象+内置函数 + 随机对象

1、什么是对象？

2、对象怎么声明？

3、对象由哪几部分组成的？

4、对象访问属性有哪两种方式

5、对象有顺序吗？

6、两种对象方式有什么不同？

7、对象中的方法和属性有什么区别？

8、对象方法可以传递参数吗？

9、对象是如何声明和使用的？

10、如何动态添加属性和方法？

11、遍历 对象用哪个语句？

12、遍历对象中, for k in obj,获得对象属性是哪个？活得值是哪个？

13、内置对象math？

14、生成任意范围随机数？

15、之前用过的内置对象有

案例一 : 声明产品对象

案例二 调用方法名

案例三 对象中的方法

案例四 ： 对象中的增删改查

案例四 遍历对象

案例五： 对象案例 ； 静态值换成动态值

案例六 内置对象 就是随便数 向上取整、向下取整、就近取整、

案例七 N -M 之间的一个随机数公式

案例八 随机点名案例

案例九 ： 随机点名，不能重复 （显示名字的时候，数组里边不显示它）

案例十 ： 猜字游戏

11、遍历对象用哪个语句？

案例二调用方法名

案例三对象中的方法

案例四：对象中的增删改查

案例四遍历对象

案例五：对象案例；静态值换成动态值

案例六内置对象就是随便数向上取整、向下取整、就近取整、

案例八随机点名案例

案例九：随机点名，不能重复（显示名字的时候，数组里边不显示它）

案例十：猜字游戏