对象
1.对象初体验
<!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 person = { //对象名
name: '', //对象属性不分顺序，如果多的话，固定写法属性值后面写完加逗号，最后一个不用加
age: 18,
sex: '女'
}
console.log(typeof person); //打印对象属性类型
console.log(person) //打印对象到控制台
</script>
</body>
</html>
2.对象的使用
<!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 goods1 = {
name: '大米',
price: 8888,
size: '无敌大'
}
//第一种不常用(写法：对象名加中括号里面引号写属性值)
console.log(goods1["name"]);
console.log(goods1['price']);
console.log(goods1['size']);
//第二种常用（对象名加点直接写属性值）
document.write(`${goods1.name}, ${goods1.price}, ${goods1.size}`)
</script>
</body>
</html>
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 person = {
name: '奥特曼',
sayHi: function () {
let a = prompt() //定义一个变量，由用户输入
// document.write('大家好')
// document.write(a)
return a // 返回值 返回一个用户输入的变量
}
}
//对象-方法 其实就是一个函数，函数怎么用 它就怎么用
// person.sayHi()
// person.sayHi('你相信光么')
document.write(person.sayHi()) //body显示用户输入的变量 （要显示返回值，要把整个函数写里面）
</script>
</body>
</html>
4.容易错的地方
<!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 name = "color"
let person = {
name: '奥特曼',
color: "red"
}
console.log(person.name);//输出奥特曼
console.log(person.color);//输出 red
console.log(person[name]); //当中括号里面没有引号的时候，它就是一个变量，上面有一个变量，所以它输出的时red
console.log(person['name'])//输出奥特曼
</script>
</body>
</html>
5.对象-新增和修改
新增和修改都差不多，主要看对象里面有没有整个属性值
<!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 person = {
username: '奥特曼', //存在就是修改
}
//修改和新增的方法都是一样的，如果存在原属性就是修改，如果不存在就是新增
person.username = "小怪兽" //新增或者修改（看对象里面有没有原属性）
document.write(person.username)
// 新增方法
person.sayHi = function () { //新增函数也就是方法 固定写法 匿名函数
document.write('打死你') //封装的内容
}
person.sayHi() //函数也就是方法输出
</script>
</body>
</html>
6.对象的删除
很好理解，就一个单词，三个e前面 dlt（大乐透）每一个包一个e，就是delete(中式读法 di 累) 写法如下
<!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 person = {
say: 10 //已经被删除
}
delete person.say; //删除固定写法 delete
document.write(person.say) //此时输出变成未定义
</script>
</body>
</html>
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>
</head>
<body>
<script>
// 数组和对象 都可以遍历
// 数组的遍历 使用 for循环
// 对象的遍历 使用 forin
// 对对象遍历的时候 可以直接获取到 对象的属性名
// 根据对象的属性名获取对象的熟悉值 person[k]
let person = {
name: '奥特曼',
age: 18,
height: 180
}
//forin：就是遍历的意思 ，然后就是定义一个变量加变量名字k in时固定写法 person是对象名
for (let k in person) {
document.write(k) //输出属性名
document.write(person[k]) //输出属性值
}
</script>
</body>
</html>
8.内置对象math（就是数学运算之类的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>14-内置对象Math.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// console.log(typeof document);
// console.log(typeof console);
// console.log( document);
// console.log( console);
// Math js内置的数学对象 里面会包含有关于数学操作的相对 方法或者属性
// 常用
// random() 返回一个随机数 包含0 不包含1
// console.log(Math.random());
// Math.ceil(0.1) = 1 Math.ceil(0.001) = 1
// console.log(Math.ceil(0.1)); // 我能吃西瓜 一次就1个半西瓜 去外面商品买西瓜 = 2
// 下取整
// console.log(Math.floor(1.9)); // 0
// 四舍五入
// console.log(Math.round(0.4));
// 求最大值 数学对象内置有方法 算出来 最大值和最小值
// 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));
// console.log(Math.abs(-3));
</script>
</body>
</html>
案例加运用规律
规律: Math.random() * (最大值 - 最小值) + 最小值;(math:js内置的数学对象 里面会包含有关于数学操作的相对 方法或者属性 : random:返回一个随机数 包含0 不包含1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>15-课堂练习.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 生成 0~10 随机数 可以取到 0 也可以取到10 整数
// Math.round(Math.random() * 10)
/*
分析
1 Math.random() 返回 0~1
2 0~1 * 10 => 0 ~ 10 Math.random() * 10
3 真的可以取到0 取到10 Math.round(Math.random() * 10)
*/
// console.log(Math.round(Math.random() * 10));
// 如何生成 5 - 10 随机数
/*
分析
1 先生成 0~5 的随机数 Math.random()*5
2 0~5 加上 5
5 ~ 10 Math.random()*5 + 5
3 整数
Math.round(Math.random()*5 + 5 )
*/
// console.log(Math.round(Math.random() * 5 + 5));
// 如何 生成 6 - 10 的随机数
// 1 先生成 0 ~ 1 Math.random()
// 2 再生成 0 ~ 4 Math.random() * 4
// 3 再生成 6 ~ 10 Math.random() * 4 + 6
// Math.random() * 4 + 6;
// 理解不理解都好 都是规律 Math.random() * (最大值 - 最小值) + 最小值; 6-10
// Math.random() * (10 - 6) + 6; 6-10
function getRandom(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
// console.log(getRandom(0,10));
// console.log(getRandom(5,10));
// console.log(getRandom(6,10));
</script>
</body>
</html>
课堂案例-内置对象-名字随机
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>16-随机显示英雄的姓名.html</title>
<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]);
// 第二和第三个打印
// 。。。。。 去写业务处理
let index2=getRandom(0, arr.length - 1)
console.log(arr[index2]); // 不能和上一个打印 重复
let index3=getRandom(0, arr.length - 1)
console.log(arr[index3]); // 不能和上一个打印 重复
</script>
</body>
</html>
课堂案例-内置对象-名字随机
为了不让它重复出现，出现过一次的就将它删掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>16-随机显示英雄的姓名.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<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>
</body>
</html>
基本数据类型和引用类型的各方面分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>18.基本数据类型和引用数据类型.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// let num = 10; // 基本数据类型 数字
// function changeNum(n) {
// // 基本数据类型 传参 需要这么来理解
// // let n = num ; // 复制了一份数据 给n
// n = 100; // n的改变和num 不影响
// }
// changeNum(num);
// console.log(num); // = 10 !
// // 对象 引用数据类型
// let person = {
// name: '悟空',
// };
// function changePerson(obj) {
// obj.name = '八戒';
// }
// changePerson(person);
// console.log(person); // 八戒 被函数修改了
// 基本数据类型
// let num = 100;
// let num2 = num; // 把num 100 赋值给了 num2
// num2 = 10000;// 修改了num2
// console.log(num);
// let person={
// name:"悟空"
// };
// let newPerson=person;
// newPerson.name="八戒";
// console.log(person);
// console.log(newPerson);
/*
栈
1 适合存放具体具体大小的数据， 这一些数据一般变化不会太大
let num =100;
let show=true;
let msg="你好";
堆
1 适合存放可能会经常改变大小的数据，这一些数据变化比较大
let person={}
person.name="悟空" // 增加数据的属性
delete person.name // 删除了数据的属性
let arr=[];
for 100次 arr.push(index) // 数组 被修改的比较多了
arr.splice(3,1)// 修改元素了
只要我们开始声明一个变量 ，内存中就开始开辟了空间
let a=100 ;// 有a在， 开辟空间 来存放变量 （写代码 故意写了很多个 let 。。。。 浪费内存 性能下去）
两个都是存放数据的地方
*/
let num = 100; // 基本数据类型 放心的是复制吧 新旧两个数据 互不影响
let num2 = num;
num2 = 10000;
console.log(num); // 100 互不影响
let person={username:"悟空"};// 引用数据类型
let person2=person; // 引用地址的传递 复制而已 新旧数据 本质是一样的 会收到影响
person2.username="八戒";
console.log(person);// 也是八戒 新旧数据 本质是一样的
</script>
</body>
</html>
总结：回忆js基础的一些知识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>19-回顾知识.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// let a = 100;
// console.log(b);
// console.log(a);
// 1 代码 报错 不会继续输出 a 正解
// 2 不会报错 b 输出 undefined a 输出 100
// 3 代码 报错 会继续输出 a
// js的组成部分 两大部分
// 1 ECMAScript 规定语法的标准 -> if for while
// 2 webAPI(还没有学到)
// 2.1 Dom 文档对象模型
// 2.2 Bom 浏览器对象模型
// 2.3 Bom 是包含这 Dom
// 数据类型的分类
// 基本数据类型 简单数据类型 值类型 字符串 数字 布尔 undefined null
// 引用数据类型 复杂数据类型 数组、对象、函数
// 类型转换
// 隐式转换
// 显式转换
// console.log("1"+1);// "11" 数字转字符串
// console.log(true + 1); // 2 在计算机种 false : 0 true : 1
// console.log(Number("123b"));//NaN
// console.log(parseInt("123b")); // 123
// return break coninute
// return 终止函数的运行并返回结果
// break 终止循环 （for和while）
// coninute 跳过本次循环 还会继续开启下一次的循环
// 在同一个作用域内必须 先声明再使用
// console.log(b);
// let b = 100;
// let b = 100;
// function func1() {
// // 在同一个作用域内必须 先声明再使用 否则就报错
// console.log(b);
// let b = 200;
// }
// func1();
let num = 1;
let sum = ++num + num++;
console.log(sum); // 4
console.log(num);
</script>
</body>
</html>
