JavaScript基础笔记之对象
概念
- 对象（object）：JavaScript里的一种数据类型 。
- 可以理解为是一种无序的数据集合 。
- 对象由属性和方法组成 。
- 对象是
“键值对”的集合，表示属性和值的映射关系。
属性：信息或叫特征（名词）。 比如 手机尺寸、颜色、重量等 。
方法：功能或叫行为（动词）。 比如 手机打电话、发短信、玩游戏等。
创建对象
多个属性名和属性值用逗号隔开。
方法冒号后面跟的是匿名函数。
let 对象名 = {
属性名: 属性值,
方法名: 函数
}
访问属性
可以使用 . 或 [] 获得对象中属性对应的值。 获得对象里面的属性值。
- 点形式 对象.属性
- [] 形式 对象[‘属性’]
- 两种方式有什么区别？ - 点后面的属性名一定不要加引号 - [] 里面的属性名一定加引号 - 后期不同使用场景会用到不同的写法
let person = {
userName: '乐乐',
gender: '女',
cook() {
console.log('做饭');
}
}
// 访问某个属性
console.log(person.userName);
console.log(person.gender);
console.log(person["gender"]);
person.cook();
document.write(`${person.gender}`)
console.log(person);
console.log(typeof person); //object
对象方法
- 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
- 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
对象使用
-
对象.方法()
-
千万别忘了给方法名后面加小括号
-
对象方法可以传递参数 , 跟函数使用方法基本一致
let person = {
userName: '乐乐',
gender: '女',
cook() {
console.log('做饭');
}
}
person.cook();
操作对象
增
对象名.新属性名 = 新值
删
delete 对象名.属性名
改
对象.属性 = 值 对象.方法 = function() {}
查
对象.属性 或者 对象[‘属性’] 对象.方法()
遍历对象
-
对象没有像数组一样的length属性,所以无法确定长度
-
对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标
let obj = { uname: 'andy', age: 18, sex: '男' } for (let k in obj) { console.log(k) //打印属性名 console.log(obj[k]) //打印属性值 }k 是获得对象的属性名， 对象名[k] 是获得 属性值
内置对象
内置对象Math
-
random：生成0-1之间的随机数（包含0不包括1）
-
ceil：向上取整
-
floor：向下取整
-
max：找最大数
-
min：找最小数
-
pow：幂运算
-
abs：绝对值
生成任意范围随机数
生成0-10的随机数
Math.floor(Math.random() * (10 + 1))
生成5-10的随机数
Math.floor(Math.random() * (5 + 1)) + 5
生成N-M之间的随机数
Math.floor(Math.random() * (M - N + 1)) + N
自动生成表格
<style>
table {
width: 800px;
border-collapse: collapse;
text-align: center;
}
</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 tbHtml = `<table border="1">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>`
for (let i = 0; i < students.length; i++) {
tbHtml += `<tr><td>${i}</td>`
for (let k in students[i]) {
let person = students[i];
tbHtml += `<td>${person[k]}</td>`
}
tbHtml += `</tr>`
}
tbHtml += `</table>`;
document.write(tbHtml)
</script>
随机点名
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 数组
let arr = [
'赵云',
'黄忠',
'关羽',
'张飞',
'马超',
'刘备',
'曹操',
'刘婵',
];
// 名字随机输出
// arr[0]
// arr[1]
// arr[2]
// arr[3]
// arr[4]
// arr[5]
// arr[6] undefined
// 数组长度有关系
// 要计算 0 - 6 随机数
// let index = Math.round(Math.random() * 6);
// console.log(arr[index]);
// function getRandom(min, max) {
// // 区间的 规律
// return Math.round(Math.random() * (max - min) + min);
// }
let index = getRandom(0, arr.length - 1);
console.log(arr[index]);
</script>
//点名不重复
<script>
// 数组
let arr = [
'赵云',
'黄忠',
'关羽',
'张飞',
'马超',
'刘备',
'曹操',
'刘婵',
];
function getRandom(min, max) {
// 区间的 规律
return Math.round(Math.random() * (max - min) + min);
}
// 获取一次 随机数
// let index = getRandom(0, arr.length - 1);
// console.log(arr[index]);
// // 删除数组中的某一个元素
// arr.splice(index,1);
// let index2=getRandom(0, arr.length - 1);
// console.log(arr[index2]);
// arr.splice(index2,1);
// console.log(arr);
// 死循环 只要你数组长度>0 我就执行重复的代码
while (arr.length > 0) {
let index = getRandom(0, arr.length - 1);
console.log(arr[index]);
arr.splice(index, 1); // 根据元素的下标来删除对应的那个数据 数组中少了一个已经显示过的数据 再次随机输出肯定不会重复
}
</script>
