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

菜鸟笔记 2022-08-26

red
red

1、什么是对象？

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

2、对象怎么声明？

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

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

属性和方法组成的。


```go
let 对象名 = {
    属性名 ：属性值,
    方法名：函数
}

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

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

5、对象有顺序吗？

没有

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

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

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

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

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

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

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

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

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

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

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

let obj = {
    uname : 'andy',
    age : 18,
    sex : '男'
}
for (let k in obj) {
    console.log(k)//打印属性名
    console.log(obj[k]) //打印属性值
}

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

for in

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

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

13、内置对象math？

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

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

**

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}`)

案例二 调用方法名

  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('无间道')

案例三 对象中的方法

 //对象是有属性和方法组成的,那么属性和方法都要写在对象里面
        let dh = {
            // 属性
            uname : '刘',
            // 方法  方法名：function(){}
            sing: function() {
                console.log('唱歌')
            },
            dance: function(dance) {
                console.log(dance)
            }
        }
        //外部使用   对象.方法名()
        dh.sing()
        dh.dance('开心的马骝')

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

这是查 和改

  let obj = {
            uname : '小明',
            age : 18
        }
        // 查  
        console.log(obj.age)
        //修改 对象.属性  = 新值
        obj.age = 82
        console.log(obj)

删和新增

 //新增一个属性   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)

案例四 遍历对象


        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]}`) //打印属性名和属性值
        }

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

<!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(`
        <table>
        <caption>学生列表</caption>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>家乡</td>
        </tr>
        `)
        // 2、中间的行遍历数组，然后填充对象数据
        for (let i = 0; i < students.length; i++) {
            document.write(`
                <tr>
            <td>${i + 1}</td>
            <td>${students[i].name}</td>
            <td>${students[i].age}</td>
            <td>${students[i].gender}</td>
            <td>${students[i].hometown}</td>
        </tr>
                `)
        }

        document.write(`</table>`)

    </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>

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

向上取整

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

向下取整

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

就近取整

 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   就近取整，负数返回的也是整数

最大值 和最小值

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

案例七 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
        }

第二步：

  //第二步  把形参放入到公式里面
        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)

案例八 随机点名案例

 // 随机点名案例
        // 需求：请把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面中
        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、数组中删除刚才抽中的索引号

        // 随机点名案例
        // 需求：请把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面中
        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~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 退出整个循环
            }
        }
javascript前端前端开发语言

相关文章

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习...
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面...
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生...
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/v...
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 ...
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服...