更加直观的存储数据信息,数组不满足数组的存储,很难区分信息;这个时候就有了对象!
对象(object):javaScript里的一种数据类型
可以理解为是一种无序的数据集合
对象可以用来描述详细某个事物,例如描述一个人
有静态特征;动态行为(动态行为==》使用函数表示)
对象的使用:
对象声明语法
let 对象名 ={ }
对象由属性和方法组成
属性:信息或叫特征(名词),就是这个事物具体的特征,可描述的外在特征。
方法:功能或叫行为(动词), 能干吗行为
let 对象名= {
属性名:属性值
方法名:函数
}
属性:数据描述的信息称为属性,如人的名字、身高、年龄、性别等,一般是名词性的
属性都是成对出现的,包括属性名和值,它们之间使用英文 : 隔开
多个属性之间使用 , 隔开
属性就是依附在对象上的变量(在对象外面是变量,对象内是属性 类似 name :'andy'等价于name ='andy')
属性名可以使用""或者'',一般情况下可以省略,除非名称遇见特殊符号如空格、中横线等
属性访问:声明对象,并添加了若干属性后,可以使用 . 或者[ ]获取对象中属性对应的值 ,我们称之为属性访问,简单的理解就是获取对象里面的属性值
对象中的方法:
对象的方法:数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数
1.方法是由方法名和函数两部分构成,它们之间使用 : 隔开
2.方法是依附在对象中的函数(是匿名函数)
3.方法名可以使用""或者'',一般情况下可以省略,除非名称遇见特殊符号如空格、中横线等
对象方法的访问:
声明对象,并添加若干方法后,可以使用 . 调用对象中函数,我们称之为方法调用
<!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>
<script>
// 对象是由属性和方法组成的,那么属性和方法都要写在对象里面
let ldh = {
// 属性
uname: '刘德华',
// 方法 方法名:function(){}
sing: function () {
console.log('唱歌');
},
dance: function (s) {
console.log(s);
}
}
console.log(ldh.uname); //属性需要有输出,才能显示
ldh.sing() //方法不需要输出,只需要调用即可
ldh.dance('恭喜发财')
</script>
</body>
</html>
操作对象:
查:查询对象 对象.属性或者对象[' 属性' ] 对象.方法() 对象的方法的使用有(),属性直接是属性.属性,没有括号。
改:重新赋值 对象.属性 =值 对象.方法=function(){ }
增: 对象添加新的数据 对象名.新属性名=新值
删: 删除对象中属性 delete 对象名.属性名
遍历对象:
能够遍历输出对象里面的元素
对象没有像数组一样的length属性,所以无法确定长度
对象里面是无序的键值对,没有规律,不像数组里面有规律的下标
所以专门产生for in遍历对象
遍历对象的时候,对象属性遍历出来只能使用 obj [k] 里面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>
<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>
</head>
<body>
<script>
// 定有一个存储若干学生信息的数据
let students = [ //使用的是[ ]包裹起来的是数组 对象很多个,使用数组包裹起来,放在一个数组里面
{ name: '小明', age: 18, gender: '男', hometown: '河北省' }, //里面的是{ }包裹起来的是对象
{ name: '小红', age: 19, gender: '女', hometown: '河南省' },
{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },
{ name: '小丽', age: 18, gender: '女', hometown: '山东省' },
{ name: '小潘', age: 17, gender: '男', hometown: '山西省' },
]
// 第一步 打印表格的头部和尾部 ``反引号可以换行
document.write(`
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
`)
// 中间遍历行数 原则就是有几条数据,我就遍历几次
// {students[i] 能得到数组里面的对象(因为对象是一整个数据类型,想要拿到对象的属性,还要.属性)
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>
内置对象:
javascript内部提供对象,包含各种属性和方法给开发者调用
内置对象math
math对象是JavaScript提供的一个关于数学类型的对象;提供了一系列做数学运算的方法
random:生成0~1之间的随机数(包含0不包括1)
ceil: 向上取整
floor:向下取整
max:最大值
min:最小值
pow:幂运算
abs:绝对值
生成任意范围随机数
如何生成0~10的随机数?
Math.floor(Math.random() * (10 +1) )
如何生成5~10的随机数?
Math.floorMath.random() * (5 +1))+5
如何生成N~M的随机数?
基本数据类型:在存储变量,存储的是值本身,因此也叫做值类型
引用类型:复杂数据类型,在存储变量,变量中存储的仅仅是地址(引用),因此叫做引用数据类型
对可以由系统或者程序员分配,堆是在栈立面开辟出来的一小块空间(存储引用数据类型),但是那个变量指向的仅仅是地址,某些进制编码。编码里面里面才是真正的值,相当于指向人的标识名字,别人真正的东西没指到!
栈:由操作系统自动分配释放存放函数的参数值、局部变量的值等,其操作方式类似于数据结构中的栈。简单数据类型存放在栈立面
堆:存储复杂数据类型,一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。引用数据类型存放到堆里面
栈和堆区别小例子:
<!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>
<script>
// 简单数据类型按值来存储。
let num1=10
let num2 =num1 //在简单数据类型中。。左边是变量,被赋值,右边是值,赋值方 简单数据类型按值存储!!!
num2=20 //左边变量(被赋值方)的改变,不会影响右边赋值方
console.log(num1);
// 复杂数据类型按照地址来存储 堆里面数据按照地址进行存储
let obj1 ={
age:18
}
let obj2=obj1
obj2.age=24
console.log(obj1); //输出的是age:24
// 复杂数据类型按照地址进行存储。变量赋值的时候,其实是把地址进行赋值,所以它们的地址相同,
// 地址相同意味着它们指向的是同一个值,同一个值!所以只要其中一个改变值的时候,意味着另外一个也跟着改变,因为它们本身就是同一个。
</script>
</body>
</html>