Javascript中的对象
1.什么是对象
1.可以理解为一种无序的数据集合
-
用来描述某个事物 ,例如描述一个人
-
一个人的信息
静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
动态行为 ( 唱歌, 跳舞,) => 使用函数表示
2.对象的声明
1.声明一个对象,语法如下
let 对象名 = {
属性名 : 属性值,
方法名: 方法值
}
2.对象有属性和方法组成
属性：信息或叫特征（名词）。 比如 手机尺寸、颜色、重量等…
方法：功能或叫行为（动词）。 比如 手机打电话、发短信、玩游戏…
<script>
//描述一个复杂的事物,可以使用对象
//对象也是一种数据类型
//有两个特点 1.属性 2.方法
let user = {
name : '张三',
age : 18 ,
sex : '男',
//注意的是属性值之间用,号分隔
sayHi : function() {
document.write(`你好`)
}
}
</script>
3.对象属性的访问
声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，称之为属性访问。
<script>
let name = 'color';
let proson = {
name : '卢克',
color : '白色'
}
console.log(proson.name); //对象名.属性名
console.log(proson['color']); //这也是访问属性,[]中需要有分号才行
//console.log(proson[name]); //如果访问一个对象属性是没有添加''号有可能出现报错
//console.log(proson.sayHi); ///这样的话会出现undefined,因为对象中没有赋值给sayHi属性
</script>
4.对象中的方法书写与访问
数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。
-
方法是由方法名和函数两部分构成，它们之间使用 : 分隔
-
多个属性之间使用英文 , 分隔
-
方法是依附在对象中的函数
-
方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
-
声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，称之为方法调用(注意的是方法名后面需要有括号)。
-
对象方法也是可以传递参数的
<script> //对象方法的使用 let person = { name : '张三', //msg接受实参 sayHi : function (msg) { document.write(msg) //return 返回值给方法 return '来自于明星的问好' } } //对象的方法也是函数一种 也可以写入参数 //返回值可以被变量代替,方便使用 let num = person.sayHi('大家好') document.write(num) </script>
5.对象的操作
1.查询对象
查询对象有的形式
1.对象.属性
2.对象[‘属性’]
3.对象.方法名())
<script>
console.log(proson.name); //对象名.属性名
console.log(proson['color']); //这也是访问属性,[]中需要有分号才行
</script>
2.重新赋值
1.对象.属性 = 值
2.对象.方法 = function() {}
3.注意点,如果对象中没有该属性名,那么将会添加属性到对象中
<script>
let proson = {
name : '张三',
age : 18,
sayHi : function () {
document.write(`你好`)
}
}
//对象的属性值修改 和新增类似 如果对象种没有这个属性 那么就添加属性 ,如有就修改
proson.color = '白色'
proson.name = '李四'
proson.aage = 19
//对象的方法也是可以修改的
proson.sayHi = function () {
document.write(`这是新增的方法`)
}
//调用对象方法
parson.sayHi()
</script>
3.删除属性
delete 对象名.属性名
<script>
let proson = {
//声明一个对象
username : '火影',
}
// 删除对象属性
delete person.username
console.log(person.username); //undefined 因为对象里面不存在username的属性值
</script>
6.遍历对象(for in)
语法
for ( let k in 对象名) {
console.log(k) 找对象种属性名为k
console.log(对象名[k]) 也是找对象属性名'k'
}
<script>
for (let k in person ) {
//打印对象属性名
console.log(k);
//console.log(person.k) 找的对象种属性名为k
//console.log(person['k']) 是找对象属性名'k'的值
//打印对象的属性值
console.log(person[k]);
//person['username'] //k = 'username'
}
</script>
7.遍历对象并生成表格的形式
需求如图
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h3 {
font-weight: 400;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
th {
background-color: #ccc;
padding: 0 20px;
}
body {
text-align: center;
padding-top: 100px;
}
</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:'山东省'}
]
//输入的页面效果图用字符串拼接加起来
let tableHtml = ` <h3>学生列表</h3>
<table border="1">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>`
//循环里面的表格内容
for ( let i = 0 ; i < students.length;i++) {
tableHtml += `<tr><td>${i+1}</td>`
//循环重复代码 利用对象遍历for in 完成
for (let k in students[i]) {
tableHtml += `<td>${students[i][k]}</td>`
}
//循环完毕后的添加结束部分
tableHtml += `</tr>`
}
//末尾添加结束标签
tableHtml += `</table>`
//在页面打印出效果
document.write(tableHtml)
</script>
</body>
</html>
7.内置对象Math
Math对象是JavaScript提供了一系列做数学运算的方法
1.random：生成0-1之间的随机数（包含0不包括1）
2.ceil：向上取整
3.floor：向下取整
4.max：找最大数
5.min：找最小数
6.pow：幂运算
7.abs：绝对值
<script>
//math内置对象
//1.random()返回一个随机数 包含0 不包含1
console.log(Math.random()); //随机
//2.ceil() 向上取整
console.log(Math.ceil(0.5)); //1
//3.向下取整floor
console.log(Math.floor(0.5)); //0
//4.四舍五入 round()
console.log(Math.round(0.6)); //1
//5.求最大值 数学对象内置有方法 算出来 最大值和最小值
console.log(Math.max(1,2,3,4,5,6,77,4));
// 最小值
console.log(Math.min(1,2,3,4,5,6,77,4));
// 幂运算 对某个数字 平方 或者 立方。。。
// 2 平方 = 2 * 2
// 2 立方 = 2 * 2 * 2
console.log(Math.pow(2, 3)); // 2立方 3个2相乘
console.log(Math.pow(2, 2)); // 2平方
console.log(Math.pow(3, 2)); // 3 的平方
// 绝对值 -1 = 1 -2 = 2
console.log(Math.abs(-2)); //2
console.log(Math.abs(-3)); //3
</script>
8.随机生成的数
//生成0 - 10 的随机数
//Math.random() 随机 0 - 1之间不包含1 所以用它与10相乘取值 范围就在0-10之间不包含10
let random = parseInt(Math.random() * 10) ;
//生成 5 - 10的随机数
let random1 = parseInt(math.random()* (5 + 1)) + 5
//生成N - M 的数
let random2 = parseInt(math.random()* (m - N + 1)) + N
