JavaScript 基础day07
JS - 对象
回顾案例
转换时间案例
需求：用户输入秒数，可以自动转换为时分秒
分析：
1.用户输入总秒数
2.计算时 分秒（封装函数） 里面包含数字补0
3.打印输出
计算公式：计算时分秒
小时； h=parseInt(总秒数/60/60%24)；
分钟：m =parseInt(总秒数/60%60)；
秒数： s =parseInt(总秒数%60)；
先声明一个函数封装getTime()函数，做数字补0操作。
<script>
// 声明一个函数 做到 输入了 秒 返回 时:分:秒
// PPT 希望 把 时分秒 返回 返回一个数组 [时,分,秒]
function getTime(time) {
// 假设 time =2 * 60 * 60 + 2 * 60 + 3
// 来计算 小时
let hour = parseInt(time / 60 / 60);
// 计算 分钟
// 先计算一下 总的分钟数有多少
// time = 60*2+2 = 122 / 60 = 2.333
// (60*2*100+2)/60 = 200.033333
// 200.033333 基于这个分钟数 对 60 取余
// 200 180 = 20
// 200.004 % 60 = 20
// 思路 先将秒转成总的分钟数（可能会超过60分钟，对60 取余 ）
let minute = parseInt(time / 60) % 60;
// 秒 直接对60 取余即可
// 71 => 11
// 122 => 2
let second = time % 60;
// 补0 处理
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;
// console.log(hour, minute, second);
// 返回了一个数组
return [hour, minute, second];
}
// getTime(61); // 00:01:01
// getTime(121); // 00:02:01
// getTime(3 + 60 * 60); // 01:00:03
// return 可以返回多个值吗 ？？
// 最严谨的说法 不可以的
// 较真 可以
// function getNum() {
// // return 1
// // return 2
// // return 3
// // 返回一个数组
// return [1, 2, 3, 4];
// }
// 输入一个 秒数 返回 时分秒 数组
let times = getTime(1000);
console.log(times);
// 写在网页上
document.write(`${times[0]}:${times[1]}:${times[2]}`);
</script>
复制代码
声明和调用有顺序吗？
普通的变量有顺序 函数 没有顺序 （如果使用函数表达式来 也是有顺序）
<script>
function getTime(time) {
let hour = parseInt(time / 60 / 60)%24;
let minute = parseInt(time / 60) % 60;
let second = time % 60;
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;
return [hour, minute, second];
}
let times = getTime(parseInt(Date.now() / 1000));
console.log(`${times[0]}:${times[1]}:${times[2]}`);
</script>
复制代码
JavaScript对象
对象（object）:JavaScript里面的一种数据类型，可以理解为是一种无序的数据集合
是无序的数据的集合，可以详细的描述描述某个事物
对象有属性和方法组成
1 属性 2 方法
对象的使用
//声明了一个对象
let 对象名 ={}；
let 对象名 ={
属性名：属性值，
方法名：函数
}；
<script>
// 描述一个复杂的事物 可以使用对象
// 对象 有两个特点 1 属性 2 方法
let person = {
// 姓名
uname: 'andy',
age: 18,
sex: '男',
};
// 打印一下 这个数据的类型
console.log(typeof person);
// 打印一下 这个数据
console.log(person);
</script>
复制代码
属性：
- 数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
- 属性都是成对 出现的包括属性名和值，它们之间使用英文 : 分隔
- 多个属性之间使用英文，分隔
- 属性没有顺序
- 实现就是依附在对象上的变量（外面是变量 对象内是属性）
- 属性名可以使用“”或'', 一般情况省略，除非名称遇到特殊符号如空格、中横线等。
属性访问
访问对象的属性有两种写法。
两种方式有什么区别？
1。点后面的属性名一定不要加引号 2.。[] 里面的属性名加引号，除非它是一个变量 3。 后期不同使用场景会用到不同的写法
<script>
let username ='color';
let age1 ='age';
let person ={
username:'海贼王',
color:'yellow',
age:13
};
//对象.属性
// console.log(person.username);
// 对象[属性]
console.log(person['username']);
// 中括号没有字符串是变量名 undefind
console.log(person[username]);
// 报错
console.log(person["color"]);
//
console.log(person[age1]);
// console.log(person['username']);
// console.log(person[username]);
// console.log(person['color']);
// //报错 中括号里面没有字符串 表示是个变量
// console.log(person[color]);
// // undefined
// console.log(person.saga);
</script>
复制代码
方法访问
<script>
let person={
name:"adny",
sayHi:function(nds){
document.write(nds);
// 默认返回
return '来自于person的问候';
},
sayHellow:function(msg){
document.write(msg);
return 'person'
}
}
// 方法
person.sayHi("大家好<br>");
person.sayHi("fasdfdfdsfsM<br>");
let result =person.sayHi('hello12');
console.log("==========");
person.sayHellow('大家好<br>');
person.sayHellow('person<br>');
console.log(result);
</script>
复制代码
数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。
- 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
- 多个属性之间使用英文 , 分隔
- 方法是依附在对象中的函数
- 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
对象中的方法访问
- 声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用。
<script>
let person = {
name: 'andy',
sayHi: function (msg) {
document.write(msg);
return '来自于 person的问候';
},
};
// 方法 其实就是一个函数
// 函数 是接收参数
// 函数 有返回值
// 函数的使用 函数()
person.sayHi('大家好 <br/>'); // 页面上会出现 “你好” 1
person.sayHi(' hello <br/>'); // 页面上会出现 “你好” 1
let result = person.sayHi(' hello123 '); // 页面上会出现 “你好” 1
console.log("===========");
console.log(result);
</script>
复制代码
注意
<script>
let username = 'color';
let person = {
username: '海贼王',
color: 'yellow',
};
// 访问它
console.log(person.username); // 固定用户
console.log(person['username']); //
// // person['color'];
console.log(person[username]); // 中括号里 代码没有加字符串 表示一个变量
// console.log(person['color']); // 中括号里 代码没有加字符串 表示一个变量
// console.log(person[color]); // color是一个变量 没有这个变量 报错
// console.log(person.sdfdfdfd); // undefined
</script>
复制代码
操作对象
对象本质是无序的数据集合, 操作数据无非就是 增 删 改 查 语法：
- 查询数据对象.属性 或者 对象[‘属性’] 对象.方法()
- 修改数据：对象.属性 = 值对象.方法 = function() {}
- 添加数据：对象名.新属性名 = 新值
- 删除数据：delete 对象名.属性名 delete 对象名.方法名
添加数据
-
增加属性和修改属性都是同样的写法
-
如果该属性对象中没有 表示新增
-
如果该属性对象已经存在，表示修改
<script>
// 增加
let person ={
username:'2323',
};
person.username='rem';
person.age=23;
// 增加属性和修改属性都是同样的写法
// 如果该属性对象中没有 表示新增
// 如果该属性对象已经存在，表示修改
// person.username="3432";
console.log(person);
// 修改
let person1= {};
// 新增一个方法 匿名函数 固定写法
person1.sayHi = function (){
document.write("这个是我们新增的sayHi 方法");
}
// 调用方法
person1.sayHi();
</script>
复制代码
删除对象中的属性
delete 对象名.属性
<script>
// 声明一个对象
let person ={
username:'海贼王'
};
// 删除
delete person.username; //删除对象中
console.log(person);
</script>
复制代码
遍历对象
let person ={
username:'普通人',
Height:180,
good:'商品',
age:15,
};
for (let k in person) {
// console.log(k);
//调用属性
// console.log(person[k]);
console.log(`属性名:${k} 属性值${person[k]}`);
}
复制代码
对象是什么？
- 一种数据类型
- 可以理解为一堆数据的集合
- 用来表示某个事物
对象的是如何声明和使用的？
- 用 {} 把一堆数据包起来
- 多个属性和方法之间用逗号隔开
- console.log输出能方便查看对象里有哪些属性和方法
如何动态添加属性和方法？
- 对象如果有这个属性相当于重新赋值
- 象如果没有这个属性相当于动态添加一个属性
遍历对象
- 对象没有像数组一样的length属性,所以无法确定长度 对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标
遍历对象用那个语句？
- for in
遍历对象中, for k in obj,获得对象属性是那个，获得值是那
- 获得对象属性是 k
- 获得对象值是 obj[k]
``
遍历数组对象
需求：请把下面数据中的对象打印出来： 分析： 打印表格 头部和尾部 中间的行遍历数组，然后填充对象数据
<script>
let students=[
{name:'小明',age:18,gender:'男',hometown:'河北省'},
{name:'小红',age:19,gender:'女',hometown:'河南省'},
{name:'小刚',age:17,gender:'男',hometown:'山西省'},
{name:'小丽',age:18,gender:'女',hometown:'山东省'}
];
// console.log(students[1].name);
// console.log(students[1].age);
// console.log(students[1].age);
// for in
let htmlStr=`
<table border="1">
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>`;
for(let i=0; i<students.length;i++ ){
console.log(students.length);
htmlStr+=`<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> `;
}
htmlStr+=`</table>`;
document.write(htmlStr);
console.log(htmlStr);
</script>
复制代码
内置对象
JavaScript内部提供的对象，包含各种属性和方法给开发者调用
我们之前用过内置对象吗？ document.write(),console.log()
Math对象
Math对象是JavaScript提供的一个“数学高手”对象
方法有
- random：生成0-1之间的随机数（包含0不包括1）
- ceil：向上取整
- max：找最大数
- min：找最小数
- pow：幂运算
- abs：绝对值
- round:四舍五入
随机数
1.如果生成0-10的随机数？·
console.log(Math.round(Math.random()*10);
复制代码
2.5-10的随机数？
Mathi.round(Math.random()*5+5);
复制代码
3.M-N的随机数
function getRandom(min,max){
return Math.round(Math.random()*(max-min)+min);
}
console.log(getRandom(0,10));
复制代码
// 随机数
function getRandom(min,max){
return Math.round(Math.random()*(max-min)+min);
}
console.log(getRandom(0,10));
复制代码
数组
对象
函数
复制代码
随机点名案例
需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中
分析：
①：利用随机函数随机生成一个数字作为索引号 ②： 数组[随机数] 生成到页面中
<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>
复制代码
补充知识
基本数据类型和引用数据类型
- 简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
- 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null
- 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型 通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
堆栈空间分配区别：
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
- 简单数据类型存放到栈里面
2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
- 引用数据类型存放到堆里面
- 简单类型的内存分配
- 值类型（简单数据类型）： string ，number，boolean，undefined，null
- 值类型变量的数据直接存放在变量（栈空间）中
- 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
- 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
<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>
复制代码
案例随机数
<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>
复制代码
<script>
// let obj1 = {
// name: '黑马程序员',
// level: 1
// }
let arr = [12, 3, 234, 34, 54, 657]
for (let k in arr) {
console.log(arr[k])
}
// let obj2 = obj1
// obj2.name = '传智播客' // 点语法不会改变对象的引用地址
// console.log(obj1.name)
// let obj1 = {
// name: '黑马程序员',
// level: 1
// }
// let obj2 = obj1
// obj2 = {
// name: '传智播客',
// level: 1
// }
// console.log(obj1.name)
// let obj = {
// name: 'jack',
// computer: {
// brandName: 'dell',
// price: 1000
// }
// }
// console.log(obj.computer.brandName);
// 在控制台中打印出1~100中前4个能被7整除的数
// let arr = [],
// count = 0
// for (let i = 1; i <= 100; i++) {
// if (i % 7 == 0) {
// console.log(i)
// count++
// // arr.push(i)
// if (count == 4) {
// break
// }
// }
// }
// 编写js代码，通过prompt()弹出输入框，让用户输入0~6的整数，输入0则在控制台打印：周日，输入1则在控制台打印：周一，输入2则在控制台打印：周二，...，输入6则在控制台打印：周6，如果输入其他内容则在控制台打印：您的输入有误！
// let weeks = ['周日','周一','周二','周三','周四','周五','周六']
// let day = +prompt('请输入0-6之间值')
// console.log(weeks[day] || '输入错误');
// if (day == 0) {
// console.log('周日')
// } else if (day == 1) {
// console.log('周1')
// } else if (day == 2) {
// console.log('周2')
// } else if (day == 3) {
// console.log('周3')
// } else if (day == 4) {
// console.log('周4')
// } else if (day == 5) {
// console.log('周5')
// } else if (day == 6) {
// console.log('周6')
// } else {
// console.log('输入错误')
// }
</script>
复制代码
猜数字游戏
let num1= Math.round(Math.random()*9+1);
// 死循环
while(true){
let num2=+prompt(`请输入您要猜测的数字`);
if(num2>num1){
alert('你猜大了！');
}else if(num2<num1){
alert('你猜小了！');
}else{
alert('你猜对了'+num1);
break;
}
}
复制代码
学成在线
数据渲染
引用style.css, data.js
<link rel="stylesheet" href="./style.css">
复制代码
<script src="./data/data.js"></script>
复制代码
放在body的内容
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<script>
let htmlStr=`<div class="box-bd">
<ul class="clearfix">`;
for(let i=0;i<data.length;i++){
htmlStr+=`<li>
<img src="${data[i].src}" alt="" />
<h4>
${data[i].title}
</h4>
<div class="info">
<span>高级</span> • <span>${data[i].num}</span>人在学习
</div>
</li>`;
}
htmlStr+=` </ul>
</div>
</div> `;
document.write(htmlStr)
</script>
作者：聊了链接：juejin.cn/post/708220…
