js——对象篇

大家好，欢迎来到IT知识分享网。

数组与对象

在js中对象就是一组无序的键值对的集合 对象由属性和方法组成

• 键值对就是冒号左边的内容称为属性，右边的内容称为值，故称为键值对
• 当右边的值为函数时，称为方法，方法相当于函数
• 是一种数据类型 所以在定义时，使用let
• 集合用{} 称为对象字面量

案例一：对象属性和方法的定义

在对象里面称为属性，在对象外面称为变量

 <script> let singer = { 
    uname: '唐嫣', ageage: 18, song: function (x, y) { 
    console.log(x + y) } } singer.song(1, 5) </script> 

 <script> let students = { 
    uname: 'andy', age: 18, gender: '女' } // 1.增 students.hobby = '唱歌' console.log(students) // 2.删除 delete students.uname console.log(students) // 3.改 students.age = 20 console.log(students) // 4.查 console.log(students.gender) console.log(students['gender']); </script> 

方法 对象名.方法名 方法相当于函数，所以自然涉及到参数 在起名字的时候，一般不会嘉善引号，但是当遇到空格或者短横线，会加上引号

 <script> let singer = { 
    uname: '唐嫣', 'uname-gender': '女' } console.log(singer); </script> 

遍历对象

使用for…in…循环，不适宜数组，因为遍历出的是字符串下标，不是数字下标 数组应该使用arr2的形式
可知k是字符串下标，更适合对象的遍历，因为对象的k相当于属性名，属性名就是字符串形式

死记硬背原理：

 <script> let arr = [43, 6, 8, 54, 43] for (let k in arr) { 
    // 在数组中，k表示数组下标 console.log(k) // 并且是字符串形式 console.log(typeof k) console.log(arr[k]) } let arr2 = [4, 56, 5, ] for (let i = 0; i < arr2.length; i++) { 
    console.log(arr2[i]) } </script> 

遍历对象代码：

 <script> let person = { 
    uname: 'andy', age: 25, gender: '女' } for (let k in person) { 
    //当我们使用点表示法（.）来访问对象属性时，如 person.k，JavaScript 实际上是在查找一个名为 k 的属性，而不是 k 变量所持有的那个字符串作为属性名。这就是为什么 console.log(person.k) 不会按照预期工作，除非 person 对象真的有一个名为 k 的属性。 // console.log(person.k) // k得出的是字符串形式的属性，相当于是加了引号的字符串，所以需要使用查的第二种方式 console.log(person[k]) } </script> 

渲染学生信息表格案例

 <style> table { 
    width: 700px; text-align: center; } caption { 
    font-size: 18px; font-weight: 700; margin-bottom: 15px; } table, th, td { 
    border: 1px solid #ccc; border-collapse: collapse; } tr { 
    height: 40px; } </style> 

 <h2>学生信息</h2> <p>将数据渲染到页面中</p> <table> <caption>学生列表</caption> <tr> <th>序号</th> <th>学生</th> <th>年龄</th> <th>性别</th> <th>家乡</th> </tr> 

<script> let students = [ { 
    uname: 'andy', age: 18, gender: '女', hometown: '山东省' }, { 
    uname: 'mike', age: 19, gender: '男', hometown: '河南省' }, { 
    uname: 'andy', age: 18, gender: '女', hometown: '河北省' }, { 
    uname: 'amy', age: 19, gender: '男', hometown: '山西省' } ] for (let i = 0; i < students.length; i++) { 
    document.write( `<tr> <td>${ 
     i + 1}</td> <td>${ 
     students[i].uname}</td> <td>${ 
     students[i].age}</td> <td>${ 
     students[i].gender}</td> <td>${ 
     students[i].hometown}</td> </tr> `) } </script> 

内置对象

直接封装好的对象，包括属性和方法，直接使用

问题：什么时候使用Math.floor和Math.random嵌套使用？在需要求范围的时候 Math.floor（）本身是向下取整

<script> console.log(Math.PI) console.log(Math.max(43, 56, 657, 432, 321)) console.log(Math.min(45, 65, 5677, 6534, 2)) console.log(Math.random()) console.log(Math.ceil(5.3)) console.log(Math.floor(7.8)) console.log(Math.pow(5, 2)) console.log(Math.abs(-6)) // 0-10 console.log(Math.floor(Math.random() * 11)) // N-M 5-10 Math.floor(Math.random()*(M-N+1))+N console.log(Math.floor(Math.random() * (10 - 5 + 1)) + 5); </script> 

<script> let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操'] console.log(arr[Math.floor(Math.random() * arr.length)]); // N-M 5-10 Math.floor(Math.random()*(M-N+1))+N console.log(Math.floor(Math.random() * (10 - 5 + 1)) + 5); </script> 

随机数字小游戏小案例

 <script> // 1.准备一个随机的数字1-10 let random = Math.floor(Math.random() * 10) + 1 flag = true // console.log(random); // 2.用户输入一个数字 // 4.限定输入次数 for (let i = 1; i <= 3; i++) { 
    let num = +prompt("请输入一个数字：") // 3.语句判断 if (num > random) { 
    alert('您输入大了') } else if (num < random) { 
    alert('您输入小了') } else { 
    // 7.这是为了避免在次数还没用完，执行完for循环还需要执行下面的if语句 flag = false // 5.满足条件 break终止条件 alert('正确') break } } // 6.显示次数用完了 if (flag) { 
    alert('您的次数用完了') } </script> 

渲染案例——改变的是数据，不改变的是结构（完整案例资料见链接）

注意点：准备好数据；for循环要卸载document.write外面；使用模板字符串

 <script> let data = [ { 
    src: 'images/course01.png', title: 'Think PHP 5.0 博客系统实战项目演练', num: 1125 }, { 
    src: 'images/course02.png', title: 'Android 网络动态图片加载实战', num: 357 }, { 
    src: 'images/course03.png', title: 'Angular2 大前端商城实战项目演练', num: 22250 }, { 
    src: 'images/course04.png', title: 'Android APP 实战项目演练', num: 389 }, { 
    src: 'images/course05.png', title: 'UGUI 源码深度分析案例', num: 124 }, { 
    src: 'images/course06.png', title: 'Kami2首页界面切换效果实战演练', num: 432 }, { 
    src: 'images/course07.png', title: 'UNITY 从入门到精通实战案例', num: 888 }, { 
    src: 'images/course08.png', title: 'Cocos 深度学习你不会错过的实战', num: 590 }, { 
    src: 'images/course01.png', title: '自动间的', num:  } ] for (let i = 0; i < data.length; i++) { 
    document.write(` <li> <a href="#"> <img src="${ 
     data[i].src}" title='${ 
     data[i].title}' > <h4> ${ 
     data[i].title} </h4> <div class="info"> <span>高级</span> • <span>1${ 
     data[i].num}</span>人在学习 </div> </a> </li> `) } </script> 

简单数据类型和复杂数据类型的综合比较：简单数据类型num会在栈中开辟一个空间用来存放10；复杂数据类型obj会在堆中开辟一个空间用来存放对象，在栈中开辟一个空间用来存放对象在堆中的地址

<script> let num1 = 10 let num2 = num1 num2 = 20 console.log(num1); </script> 

复杂数据类型案例：

 <script> let obj1 = { 
    age: 18 } let obj2 = obj1 obj2.age = 20 console.log(obj1.age); </script> 

总结：在栈中，简单数据类型存储的是值，复杂数据类型存储的是地址，最后的结果存储在堆中