web前端JS学习第三十天

对象
目标：掌握对象相关知识，具备对象数组数据渲染页面的能力

• 什么是对象
• 对象使用
• 操作对象
• 遍历对象
• 内置对象

1，对象是什么

对象（object）：javsScript里的一种数据类型

可以理解为是一种无序的数据集合

用来描述某个事物，列如描述一个人

• 人有想姓名，年龄，性别等信息，还有吃饭睡觉打代码等功能
• 如果用多个变量保存则比较散，用对象比较统一

比如描述 班主任信息：

• 静态特征（姓名，，年龄，身高，性别，爱好）=> 可以使用数字，字符串，数组，布尔类型等表示

• 动态行为（点名，唱，跳，rap）=>使用函数表示

小结：

1，对象是什么？

• 对象是一种数据类型
• 无序的数据的集合

2，对象有什么特点？

• 无序的数据的集合
• 可以详细的描述描述某个事物

2，对象使用
目标：掌握对象语法，用它保存多个数据

2.1，对象声明语法
let 对象名= {}

列如：
//声明了一个person的对象

let person = {}

2.2,对象有属性和方法组成
属性：信息或叫特征（名词），比如 手机尺寸，颜色，重量等…

方法：功能或叫行为（动词），比如 手机打电话，发短信，玩游戏

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

2.3，属性

• List item

数据描述的信息称为属性，如人的姓名，身高，，年龄，性别等，一般是名词性的

let  person = {uname: 'andy'age : 18sex: '男'
}

属性都是成对出现的，包括属性名和值，它们之间使用英文 ：分割

多个属性之间使用英文，分隔

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

属性名可以使用“或”一般情况下省略，除非名称遇到特殊符号如空格，中横线等。

小结：

1，对象属性有顺序吗？

• 没有

2，属性和值用什么符号隔开？多个属性用什么隔开？

• 属性和值用; 隔开
• 多个属性用，逗号隔开

2.4 属性访问
声明对象，并添加了诺干属性后，可以使用，或[]获得对象中属性对应的值，我们称之为属性访问

方法一

let person = {name : 'andy'age : 18sex: : '男'
}
console.log (person.name)//andy
console.log (person.age)//18

方法二

let person = {name : 'andy'age : 18sex: : '男'
}
console.log (person['name'])//andy
console.log (person.['age'])//18

小结：
1，对象访问属性有哪两种方式？

• 点形式 对象.属性

• [ ]形式 对象[‘属性’]

2，两种方式有什么区别？

• 点后面的属性名一定不要加引号
• [ ]里面的属性名一定加引号
• 后期不同使用场景会用到不同的写法

2.5，对象中的方法
数据行为性的信息称为方法，如跑步，唱歌等，一般是动词性的，其本质是函数。

let  person = {name: 'andy',sayHi: function () {document.write('hi~~')
}	
}

1,方法是由方法名和函数两部分构成，它们之间使用：分割

2，多个属性之间使用英文，分割

3，方法是依附在对象中的函数

4，方法名可以使用"" 或’’ ，一般情况下省略，除非名称遇到特殊符号如空格，中横线等

2.6，对象中方法访问
声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用

let  person = {name: 'andy',sayHi: function () {document.write('hi~~')
}	
}//对象名.方法名()
person.sayHi()
//hi~~
//注意：千万别忘了给方法名后面加小括号

注意：千万别忘了给方法名后面加小括号

小结：
1，对象访问方法是如何实现的？

• 对象.方法（）

• person.sayHi()

2,对象方法可以传递参数嘛？

• 可以，跟函数使用方法基本一致

3，操作对象
对象本质是无序的数据集合，操作数据无非就是 增， 删，改，查语法

查：查询对象：对象.属性 或者 对象[‘属性’] 对象.方法()

改：查询赋值：对象.属性 = 值，对象.方法=function() {}

增：对象添加新的数据：对象名.新属性名 = 新值

删：删除对象中属性：delete 对象名.属性名

增加属性
也可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活。

let person = {name: 'andy',age : 18
}
person.hobby = '足球'
person['sex'] = '男'
console.log (person)
//{name: 'andy', age: 18, hobby: '足球', sex: '男'}

新增对象中的方法
也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活

person.move = function() {document.write('移动一点点')
}

注意：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

小结：
1，对象是什么？

• 一种数据类型

• 可以理解为一推数据的集合

• 用来表示某个事物

2，对象是如何声明和使用的？

• 用{}把一推数据包起来

• 多个属性和方法之间用逗号隔开

• console.log 输出能方便查看对象里有哪些属性和方法

3，如何动态添加属性和方法？

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

4，遍历对象

目标：能够遍历输出对象里面的元素

遍历对象
对象没有像数组一样的length属性，所有无法确定长度

对象里面是无序的键值对，没有规律，不像数组里面有规律的下标

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

遍历数组里的对象

  let arr = [{ name: '小明', age: 18, num: '男', site: '广东' },{ name: '小红', age: 17, num: '女', site: '广西' },{ name: '小李', age: 19, num: '男', site: '山东' },{ name: '小张', age: 20, num: '男', site: '北京' }]for (let i = 0; i < arr.length; i++) {console.log(arr[i]);}//{name: '小明', age: 18, num: '男', site: '广东'}//{name: '小红', age: 17, num: '女', site: '广西'}//{name: '小李', age: 19, num: '男', site: '山东'}//{name: '小张', age: 20, num: '男', site: '北京'}

一般不用这种方式遍历数组，主要是用来遍历对象

注意：k是获得对象的属性名，对象名[k]是获得属性值

小结：
1，遍历对象用那个语句？

• for in

2，遍历对象中，for k in obj 获得对象属性是那个，获得值是那个？

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

5，内置对象
目标：掌握内置对象，调用JavaScript为我们准备好的功能

学习路径：

• 1，内置对象是什么
• 2，内置对象Math
• 3，生成任意范围随机数

5.1，内置对象是什么
JavaScript内部提供的对象，包含各种属性和方法给开发者调用

思考：我们之前用过内置对象嘛？
document.write()
console.log()

5.2,内置对象Math
Math对象是JavaScript提供的一个 数学高手 对象

提供了一系列做数学运算的方法
方法有：
random：生成0-1之间的随机数（包含0不包含1）（重点）
ceil：向上取整
floor：向下取整
max：找最大数
min：找最下值
pow：幕运算
ads：绝对值

    // 圆周率console.log(Math.PI); //3.141592653589793//随机数// 返回的是小数，但是能得到0 得不到1console.log(Math.random());//0.9949947041279465// 向上取整数，返回整数console.log(Math.ceil(1.5));//2console.log(Math.ceil(1.9));//2console.log(Math.ceil(1.4));//2console.log(Math.ceil(1.1));//2// 向下取，返回的整数console.log(Math.floor(1.9));//1console.log(Math.floor(1.5));//1console.log(Math.floor(1.1));//1//round 就近取整(.5往大取整) 返回的整数console.log(Math.round(1.1));//1console.log(Math.round(1.4));//1console.log(Math.round(1.5));//2console.log(Math.round(1.9));//2console.log(Math.round(-1.5));//-1

5.3生成任意范围随机数

如何生成0-10的随机数呢？
Math.floor(Math.reandom() * (10+1))

如何生成5-10的随机数
Math.floor(Math.reandom() * (5+1))+5

如何生成N-M之间的随机数
Math.floor(Math.reandom() * (M-N+1))+N

随机猜数字案例

   // 声明函数function getRandom(min, max) {// 生成随机数return Math.floor(Math.random() * (max - min + 1) + min)}// 输入两个实参数组let num = getRandom(1, 10)while (true) {// 随机1-10之间数组let uans = +prompt('请猜猜1-10之间的数字')if (uans > num) {alert('不好意，你猜大了~~')} else if (uans < num) {alert('不好意思，你猜小了~~')} else {alert('恭喜你，猜对了~~~你真棒~~~')break}}

   // 声明函数function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1) + min)}let arr = ['刘备', '关羽', '张飞', '马超', '赵云', '黄总']// 随机1-10之间一个数let get = getRandom(0, arr.length - 1)// [get]是随机的数，arr[]是打印对应的下标值document.write(arr[get])// 删除随机到的数对应下标数组的元素arr.splice(get, 1)console.log(arr);

拓展-术语解释

目标：知道一些术语，让自己更专业

术语：关键字 ，解释：在JavaScript中有特殊意义的词汇，举例：let , var , function , if , else , switch , case , break

保留字：在目前的javaScript中没意义，但未来可能具有特殊意义的词汇，举例：int，short , long, char

标识（标识符）：变量名，函数名的另一种叫法

表达式：能产生值的代码，一般配合运算符出现，10+3，age>= 18

语句：一句代码也称之为一条语句，一般按用途还会分类：输出语句，声明语句，分支语句。

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型，string，number，boolean，undefined，null

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫中引用数据类型通过new，关键字创建的对象（系统对象，自定义对象），如object，Array ，Date等

堆栈空间分配区别：

简单数据类型存放到栈里面
1，栈（操作系统）：由操作系统自动分配释怀存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈

引用数据类型存放到堆里面
2，堆（操作系统）：存储复杂类型（对象），一般由程序员分配释怀，若程序员不释怀，由垃圾回收机制回收。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>table {width: 600px;text-align: center;}table,th,td {border: 1px solid #ccc;border-collapse: collapse;}tr {height: 40px;line-height: 40px;}caption {font-size: 18px;font-weight: 700;margin-bottom: 10px;}tr:first-child {background-color: #ddd;}tr:not(:first-child):hover {background-color: #ddd;}</style>
</head><body><h3>学生信息</h3><p>将数组中存储的学生信息，以表格的形式输出到网页中</p><script>// 数组{对象}let arr = [{ name: '小明', age: 19, num: '男', hometown: '河北省' },{ name: '小红', age: 19, num: '女', hometown: '河南省' },{ name: '小刚', age: 17, num: '男', hometown: '山西省' },{ name: '小丽', age: 20, num: '女', hometown: '山东省' }]// 打印头部document.write(``)// 遍历数组{对象}for(let i =0; i < arr.length; i++){document.write(`// 表达式赋值`)}document.write(`
学生列表
序号
姓名
年龄
性别
家乡
   
${i + 1}
${arr[i].name}
${arr[i].age}
${arr[i].num}
${arr[i].hometown}
   `)</script>
</body></html>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！