对象的声明
首先，对象也是一种数据类型，我们可以认为对象也是一个object类型的变量
特征 == 属性： 姓名 年龄 性别 学科
行为 == 方法 == 功能： 写代码 调bug等
let 变量名 = ｛｝
let setdent = new Object()
let student = ｛｝//语法糖 console.log（student）
对象的成员的添加
let student = ｛
//属性名称（键--key）：属性值（值---value）
//属性名称：属性值：key是字符串，可以省略引号
//值：如果是字符串就需要添加引号，其他不用。
gender:'男',
subject:'前端',
name:'小白',
age:'20',
//上述添加的为特征
、、方法的添加方式，方法名称---匿名函数
corder:function(){
console.log('敲代码')
}
//上述添加的为方法
｝
对象的属性值的获取点语法
获取对象的属性值的语法是点语法：对象.属性名称
例如student.name``student.subject
调用对象的方法的语法是点语法：对象.方法属性名称（）
student.corder()
对象的属性值的获取[]中括号法
获取对象的属性的语法：[]语法：对象['属性名称'] === 对象.属性名称
student['name']
获取一个方法student['corder']()/////// ==== student.corder()
tips
- ~ 如果，
let propName = prompt（'请输入你想获取的属性名称'） 点语法和['属性名称']都是获取对象的指定名称的属性值- 获取一个对象不存在的属性值，返回undefined（返回一个数组不存在的索引位置返回undefined）
console.log('你想要的属性值是：', student.propName) ///undefined
console.log('你想要的属性值是：', student['propName']) ///undefined
因为不存在，所以返回的都是undefined
对象[属性名称变量]----先解析变量，根据变量的值获取属性值
如果属性名称是一个变量，那么[变量]是唯一的机会
console.log('你想要的属性值是：', student[propName])
对象的行为
let student = {
name: 'jack', // 对象的属性 = 值
// 方法：自我介绍
say: function() {
console.log(456)
} // 对象的方法属性 = 值-函数
}
student.say()
// console.log(window)
student['say']()
数组操作--
let arr = [123, 2, 4, 35, 4, 6]
console.log(arr)
// 1.如果索引位置存在，就是修改
arr[0] = 100
console.log(arr)
// 2.如果索引位置不存在，就是添加,并且还会同时修改数组的长度
arr[100] = 200
console.log(arr)
对象操作--修改和新增
let student = {
name: 'jack',
say: function() {
console.log(456)
}
}
console.log(student)
如果对象的属性值存在，重新赋值就是修改
student.name = 'rose'
如果对象的属性值不存在，那就是新增属性且赋值
student.age = '20'
student['gender'] = '男'
如果是以下情况
let prop = 'name'- 成为一个变量
- 再使用唯一的机会中括号赋值
student[prop] = '程序员'
这时候就会解析prop这个变量得到name，然后得到键name，值程序员
对象操作--属性删除
let student = {
name: 'jack',
say: function() {
console.log(456)
}
}
console.log(student)
// 删除对象的成员： delete 对象.属性
// 如果成员不存在,则也不报错
delete student.say
delete student.name
delete student.age
console.log(student)
对象的使用--案例分享
// 获取一串字符串中每个字符出现的次数:{a:2,b:4,c:6,d:1}
let str = 'aasdfasdfasfasdfasdfasdfdfhjgh'
// 结果
let obj = {}
// 遍历字符串-字符串的本质是字符数组
for (let i = 0; i < str.length; i++) {
// console.log(str[i]) // a >> {a:2}
let key = str[i]
// 如果对象中有当前遍历到的字符所对应的成员，则 将值 + 1
// 获取一个对象不存在的属性值，返回undefined
if (obj[key]) {
obj[key] += 1
}
// 如果对象没有当前遍历到的字符所对应的成员，那么 添加一个新的成员，且值为1
else{
obj[key] = 1
}
}
console.log(obj)
对象的遍历
如何对一个对象进行遍历呢
let student = {
gender: "男",
subject: "前端",
name: "李东",
age: 18,
debug: function () {
console.log("我会调bug");
},
};
遍历对象使用 for...in：因为对象没有索引，所以不能使用for索引的方式进行遍历 for（let key in 对象）｛｝
for (let key in student) {
console.log(key, student[key]);
}
对象的渲染--**
- 渲染页面，首先要写出静态结构
- 然后获取数据源
- 最后将重复的部分用for循环遍历解决
let students = [ { name: '小明', age: 18, gender: '男', hometown: '河北省' }, { name: '小红', age: 19, gender: '女', hometown: '河南省' }, { name: '小刚', age: 17, gender: '男', hometown: '山西省' }, { name: '小丽', age: 18, gender: '女', hometown: '山东省' } ]
// 拼接前面的网页结构
let htmlStr = `<table border="1" width="500px">
<thead>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</thead>
<tbody>`
// 遍历数组，拼接相应的静态结构
for (let i = 0; i < students.length; i++) {
htmlStr += `<tr>
<th>${i + 1}</th>
<th>${students[i].name}</th>
<th>${students[i].age}</th>
<th>${students[i].gender}</th>
<th>${students[i].hometown}</th>
</tr>`
}
// 拼接后面的网页结构
htmlStr += `</tbody>
</table>`
document.write(htmlStr)
Math对象的基本使用
ceil：向上取证：获取比这个数大的 所有证书中最小值 经典应用场景：获取总页数
// 11条 》 每页10条 》 几页？ Math.ceil(11 / 10)
// let num = 1.1
// console.log(Math.ceil(num));
floor：向下取整：获取双这个数 小的 所有整数中的最大值
// let num = 1.9
// console.log(Math.floor(num))
max：求一组数据总的是最大值
// console.log(Math.max(1, 234, 325, 4, 645, 6747, 568))
// ...:展开运算符，可以将数组的所有成员一个一个展开
// console.log(Math.max(...[1, 234, 325, 4, 645, 6747, 568]))
min：获取一组数据中的最小值
// console.log(Math.min(1, 234, 325, 4, 645, 6747, 568))
pow:（数据，n次幂）
// console.log(Math.pow(2, 10))
abs：绝对值：负值为正值
console.log(Math.abs(-100))
random函数生成随机数
Math.random（）只能生成0-1之间的随机数，理论上包含0但是不包含1
写法Math.random()
生成0-10的随机数console.log(Math.floor(Math.random() * 11))
console.log(parseInt(Math.random() * 11))
需要0-n的随机数parseInt(Math.random() * (n+1))
小案例~
let arr = ['张三', '李四', '王五', '易波']
// 生成一个 0 到 长度-1 的随机数
let index = parseInt(Math.random() * arr.length)
document.write(arr[index])
生成指定范围的随机数
// Math.randomI()只能生成0-1之间的随机数，理论上包含0但是不包含1
// 生成5 - 10
// 先生成0-5 + 5
// let num = parseInt(Math.random() * (5 + 1)) + 5
// console.log(num)
// 生成N - M
// let num = parseInt(Math.random() * (N + 1)) + (M - N)
// let num = parseInt(Math.random() * (M - N + 1)) + N
随机点名小案例-优化
let names = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
let btn = document.querySelector('button')
btn.addEventListener('click', function() {
// 1.生成一个合理的随机索引
let index = parseInt(Math.random() * names.length)
console.log(names[index])
// 将当前被抽中的姓名从数组中移除
names.splice(index, 1)
// 如果所有姓名都抽取完毕，则应该禁用按钮
if (names.length == 0) {
btn.disabled = true
}
})
猜数字游戏小案例
需求：---程序随机生成1-10之间的一个数字
-
// ①：如果大于该数字，就提示，数字猜大了，继续猜 -
// ②：如果小于该数字，就提示，数字猜小了，继续猜 -
// ③：如果猜对了，就提示猜对了，程序结束
案例思路
-
// 1.获取用户输入的数字： 1-10 -
// 2.生成随机的1-10的数 -
// 3.进行判断，根据判断结果给出提示或者退出操作 -
// 4.用户输入+ 判断操作 应该包含在这个循环结构中：while:不知道具体的循环次数 -
// 5 写一个死循环，猜对了，使用break关键字可以退出循环
let index = parseInt(Math.random() * 10) + 1
while (1) {
// 用户输入的数字
let num = +prompt('请输入一个1-10的值')
// 判断
if (num > index) {
alert('大了，继续')
} else if (num < index) {
alert('小了，继续')
} else {
alert('真棒，干饭')
// 退出当前循环
break
}
}
值类型数据作为变量赋值时的特点
let num = 20;
console.log(num); // 20
function updateValue(temp) {
temp = 40;
}
updateValue(num);
console.log(updateValue(n));
console.log(num); // 20
简单数据案例
引用类型数据作为变量赋值时的特点
let obj = {
name: "jack",
age: 20,
a: 1,
d: 3,
};
console.log(obj); // jack 20
function updateValue(temp) {
temp.name = "rose";
temp.age = 18000;
console.log(obj);
// console.log(temp === obj);
}
let a = { a: 10000, age: 100 };
updateValue(obj);
console.log(updateValue(a));
console.log(obj); // rose 18
// console.log(temp);
// updateValue(a);
// console.log(updateValue(a));
console.log(a);
-
定义一个对象，一个函数
-
当函数没有被调用的时候，是不执行的。
-
当函数调用了对象的变量的时候，对象的变量会打印出函数内的值+对象本身的只，如果相同键，会打印出函数的优先。
-
但是，如果函数内部的变量是对象，会引发另一种情况。
-
obj会将引用的值给到函数内部，以至于函数内部直接引用了obj对象本身的数
-
导致引用函数的时候，显示出obj函数的值
ps：整不明白拉倒，我也没整明白。
