JS之对象 – ttdr的菜鸟空间

什么是对象

对象是JS里的一种数据类型，我们可以理解为一种无序的数据集合，可以详细描述某个事物

我们来看一个例子

 let obj = {
     uname:'ttdr'，
     age: 18，
     gender:'男'，
 }

通常由属性和方法组成，属性指的是信息或者特征，方法指的是行为或者叫功能

对象的使用

声明对象：

 let 对象名 = {}
 let 对象名 = new Object()

通常用第一种

 let 对象名 = {
     属性名:属性值，
     方法名:函数，
 }

这里要注意多个属性值之间用,隔开

属性就是依附在对象上的变量（在对象外面是变量，在对象内是属性）

增删改查

我们从一个实例出发来学习这些基本操作。

 <body>
   <script>
     let mihoyi = {
       uname: '米哈游',
       game: ['崩坏3', '原神', '绝区零', '崩坏星穹铁道'，'王者荣耀'],
       slogan:'技术宅拯救世界'
     }
   </script>
 </body>

查：

语法

 对象名.属性
 对象名['']    /*这种用于属性名是字符串的，避免一些报错*/

简单来说就是获取属性值，我们来看看效果

 console.log(mihoyi.slogan)

改

语法

 对象名.属性 = 新值

 <body>
   <script>
     let mihoyi = {
       uname: '米哈游',
       game: ['崩坏3', '原神', '绝区零', '崩坏星穹铁道','王者荣耀'],
       slogan:'技术宅拯救世界'
     }
     mihoyi.game[4] = '未定事件簿'
     console.log(mihoyi.game);
   </script>
 </body>

修改成功喵。

增

语法

 对象名.新属性 = 新值

     mihoyi.president = '刘伟'
     console.log(mihoyi.president)

添加成功

删

语法（了解，最新的语法好像不允许这么直接删喵）

 delete 对象名.属性

对象中的方法

说白了，在对象里面叫方法，除了对象这个门就叫函数

方法的调用

 对象名.方法名

我们来看一个例子

 <body>
   <script>
     let obj ={
       uname: '陈奕迅',
       sing:function(){
         console.log('若这一束吊灯倾泻下来 或者我 已不会存在')
       }
     }
     obj.sing()
   </script>
 </body>

这里便是用了一个方法，注意这里sing是方法的名字。

当然我们也可以传参进去。

遍历对象

注意对象是无序的，所以我们不能像数组一样运用下标来实现遍历。

我们可以用for-in语法来实现遍历，这里我们先用之前学过的数组来体验一下。

 <body>
   <script>
     let arr = ['a', 'b', 'c']
     for(let k in arr){
       console.log(k)
     }
   </script>
 </body>

我们这里发现，打印的是下标——索引号，而且是以字符串的形式打印的（这里通过颜色来判断），这很容易出问题，我们一般不用来遍历数组，但是用来遍历对象刚刚好

我们直接上栗子

 <body>
   <script>
     let mihoyi = {
       uname: '米哈游',
       game: ['崩坏3', '原神', '绝区零', '崩坏星穹铁道'],
       slogan: '技术宅拯救世界'
     }
     for(let k in mihoyi){
       console.log(k)
     }
   </script>
 </body>

打印的就是属性名,注意这里的属性名是以字符串的形式的。

我们要获取内容该怎么办呢

       console.log(mihoyi.k);

这样可以吗

报错了喵,这里注意k表示的内容是带引号的字符串形式，所以这里不能直接这么写，

这里我们就要用另一种写法了，你还记得吗？

     for(let k in mihoyi){
       console.log(mihoyi[k]);
     }

来看看效果

内置对象

JS中提供的对象包含各种属性和方法供开发者使用。

在此之前我们已经用了很多内置对象了，比如：document.write(),console.log()

数学内置对象(Math)

这里我们特别讲一下舒徐内置对象，给了我们一系列数学运算的方法，比如

random:生成0~1之间的随机数，包含0但不包含1
ceil：向上取整
floor:向下取整
round:四舍五入
max：找最大值
min：找最小值
pow：幂运算
abs：绝对值
Math对象在线文档

那么我们应该如何生成任意范围的随机数呢？

生成0~10的随机数

     console.log(Math.floor(Math.random()  * (10+1)))

我们通过向下取整来获取整数。

随机数组抽签，且不允许重复

 <body>
   <script>
     let arr = ['原神','崩坏三','绝区零']
     let random = Math.floor(Math.random() * arr.length)
     arr.splice(random,1)
     console.log(arr[random])
   </script>
 </body>

5~15随机数

 console.log(Math.floor(Math.random()  * 11)+5)

案例

我们来看几个案例试试水

渲染学生信息表

我们这里有几个学生信息，请把其中的对象打印出来。

 <body>
   <script>
     let students = [
       { name: '小明', age: 18, gender: '男', hometown: '江苏' },
       { name: '小红', age: 18, gender: '女', hometown: '北京' },
       { name: '小刚', age: 18, gender: '男', hometown: '上海' },
       { name: '小花', age: 18, gender: '女', hometown: '浙江' },
       { name: '小李', age: 18, gender: '男', hometown: '安徽' },
       { name: '小王', age: 18, gender: '男', hometown: '江西' }
     ]
   </script>
 </body>

     for(let i = 0;i < students.length;i++){
       console.log(students[i]);
     }

非常简单喵，那么我要打印所有的名字我该怎么办呢。

很简单的喵

     for(let i = 0;i < students.length;i++){
       console.log(students[i].name);
     }

打印在控制台还是太简陋了，我想要打印成表格可以不可以呢？

可以的可以的兄弟，我们直接上代码

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>案例</title>
   <style>
     table{
       width: 600px;
       text-align:center;
     }
     table,
     th,
     td {
       border: 1px solid #000;
       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>
 </head>
 
 <body>
   <h2>学生信息</h2>
   <table>
     <caption>学生列表</caption>
     <tr>
       <th>编号</th>
       <th>姓名</th>
       <th>性别</th>
       <th>年龄</th>
       <th>家乡</th>
     </tr>
     <script>
       /*准备数据*/
       let students = [
       {name: '小明', age: 18, gender: '男', hometown: '江苏' },
       {name: '小红', age: 18, gender: '女', hometown: '北京' },
       {name: '小刚', age: 18, gender: '男', hometown: '上海' },
       {name: '小花', age: 18, gender: '女', hometown: '浙江' },
       {name: '小李', age: 18, gender: '男', hometown: '安徽' },
       {name: '小王', age: 18, gender: '男', hometown: '江西' }
       ]
       /*开始渲染*/
       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>
         `)
       }
     </script> 
   </table>
 </body>
 
 </html>

目标达成，撒花。

猜数字游戏

又是经典的猜数字游戏

 <body>
   <script>
     function getRandom(min,max){
       return Math.floor(Math.random() * (max-min+1)) + min;
     }
     let random = getRandom(1,10)
     console.log(random)
     while(true){
     let num = +prompt('请输入你猜的数字')
     if(num>random){
       alert('猜大了')
     }else if(num<random){
       alert('猜小了')
     }else{
       alert('恭喜你猜对了')
       break
     }
     } 
   </script>
 </body>

我们再来个限定次数的

 <body>
   <script>
     function getRandom(min,max){
       return Math.floor(Math.random() * (max-min+1)) + min;
     }
     let random = getRandom(1,10)
     let flag = true
     console.log(random)
     for(let i = 1;i <= 2;i++){
     let num = +prompt('请输入你猜的数字')
     if(num>random){
       alert('猜大了')
     }else if(num<random){
       alert('猜小了')
     }else{
       alert('恭喜你猜对了')
       break
     }
     if(flag){
       alert('你猜了3次，游戏结束')
     }
     } 
   </script>
 </body>

随机生成颜色

我们直接看代码

 <body>
   <script>
     function getRandomColor(fla = true){
       if(flag){
         //如果是true返回十六进制颜色
         let str = '#'
         let arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
         for(let i = 0;i < 6;i++){
           str += arr[Math.floor(Math.random()*arr.length)]
         }
         return str
       }else{
         //如果是false返回rgb颜色
         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(getRandomColor(false))
     console.log(getRandomColor(true))
   </script>
 </body>

这里只是生成了色值，那么怎么能转化为颜色呢，我们放到后面再聊。