一、对象基本使用
对象：一种数据类型（引l用类型），也是用于存储数据的。用键值对形式存储语义。
键值对：一个单词对应一个值的写法都是键值对。
对象特点：对象数据是无序的，数组有序的。
属性和值之间用；隔开
多个属性之间用，逗号隔开
对象组成：
1.属性 ：事物的描述信息称为属性，一般是名词 对象访问属性 ：对象.属性名
2.方法：事物的行为性称为方法 ，一般是动词 对象访问方法 : 对象名.方法名( )
点 . 可以理解为 的，对象的某个属性
<script>
// 键值对：一个单词对应一个值的写法都是键值对
//对象没有索引，没有顺序(无序)
let lh = {
name: '李华',
age: 21,
hobby: '敲代码'
}
console.log(lh) //object
//访问属性→对象名.属性名
console.log(lh.name) //李华
console.log(lh.age) //21
</script>
<script>
let lh = {
name: '李华',
age: 21,
work: '敲代码',
//对象方法
sing: function(song) {
console.log(`喜欢唱歌` + song) //喜欢唱歌青花瓷~
}
}
console.log(lh)
lh.sing(`青花瓷~`)
</script>
二、对象属性和方法的简写
1. 属性简写：如果属性名和属性值的变量一致，可以简写只写属性名
2.方法简写：方法名：function（）{ }---> 简写：方法名：（）{ }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//用户输入什么就显示什么
let name = prompt(`请输入你的对象的名字是：`)
let age = prompt(`请输入你的对象的年龄是：`)
let work = prompt(`请输入你的对象的工作是：`)
// 属性名和属性值的变量一致，可以简写只写属性名即可
let obj = {
// name: `小明`,
name,
// age: 22,
age,
/* sayhi: function() {
},*/
sayhi() {
},
// ----------------
xiugaiAge(b) {
this.age = b
}
}
obj.sayhi(work)
console.log("原对象:")
console.log(obj)
obj.xiugaiAge(100)
console.log("修改年龄之后:")
console.log(obj)
obj.xiugaiAge = function(c) {
this.name = c
}
obj.xiugaiAge("新名字")
console.log("修改名字之后:")
console.log(obj)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let hmbb = {
name: '海绵宝宝',
age: 5,
hobby: '抓水母~',
foods: function(a) {
console.log(`喜欢` + a)
}
}
// 修改属性，对象名.属性=新值
hmbb.name = '派大星'
// 修改方法，对象名.方法=新值
hmbb.foods(`吃汉堡~`) //方法修改之前
hmbb.foods = function(b) {
console.log(`修改后`, +b)
}
hmbb.foods(10) //方法修改之后
console.log(hmbb)
// 新增属性，对象名.新属性=新值
hmbb.work = '自由~职业'
// 新增加对象,对象.新方法名 = function(){}
hmbb.friend = function() {
console.log(`我的好朋友是章鱼哥~`)
console.log(hmbb)
}
//总结：
//1．如果属性名和方法名在对象里面，等号赋值则是修改对象的属性或方法
//2．如果属性名和方法名不在对象里面，等号赋值则是新增属性或方法
//删除 delete.对象名.属性/方法
delete hmbb.age
console.log(hmbb)
// 注意： 删除方法不加小括号
delete hmbb.sing
</script>
</body>
</html>
三、操作对象（ 增 删 改 查）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let hmbb = {
name: '海绵宝宝',
age: 5,
hobby: '抓水母~',
foods: function(a) {
console.log(`喜欢` + a)
}
}
// 修改属性，对象名.属性=新值
hmbb.name = '派大星'
// 修改方法，对象名.方法=新值
hmbb.foods(`吃汉堡~`) //方法修改之前
hmbb.foods = function(b) {
console.log(`修改后`, +b)
}
hmbb.foods(10) //方法修改之后
console.log(hmbb)
// 新增属性，对象名.新属性=新值
hmbb.work = '自由~职业'
// 新增加对象,对象.新方法名 = function(){}
hmbb.friend = function() {
console.log(`我的好朋友是章鱼哥~`)
console.log(hmbb)
}
//总结：
//1．如果属性名和方法名在对象里面，等号赋值则是修改对象的属性或方法
//2．如果属性名和方法名不在对象里面，等号赋值则是新增属性或方法
//删除 delete.对象名.属性/方法
delete hmbb.age
console.log(hmbb)
// 注意： 删除方法不加小括号
delete hmbb.sing
</script>
</body>
</html>
四，属性-查的另外一种写法(两种)
对于多词属性比如中横线分割的属性，对象名.属性 就不能用了
我们可以采取：对象[ ' 属性 ' ]方式，单引号和双引|号都阔以，当然也可以用于其他正常属性
总结：多词属性或者需要解析变量(遍历数组对象)的时候使用 [ ] 语法，
其余的直接使用对象名.属性
五、遍历对象数组
数组里面包对象---对象数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 遍历对象
/*for（let变量in对象）{
console.log(变量)//属性名
console.log(对象[变量])//属性值
*/
let obj = {
' pig-name': `小猪佩奇`,
age: 3,
hobby: `和乔治一起出去玩儿~`
}
//变量名是对象的属性值
//键值对 键key 值value
for (let key in obj) {
// console.log(obj.key)错的-->key当做对象真实存在的属性名，得到undefined
// console.log(obj[key])
}
// for in也可以遍历数组(几乎不用)
let names = ['小小', '小美', '小她']
for (let name in names) {
//name返回的是索引值/下标----->字符串型
console.log(name)
// console.log(names[name])
}
</script>
</body>
</html>
例1：对象数组的打印
<script>
// 数组里面包对象---对象数组
let students = [{
name: '小明',
age: 18,
sex: '男',
hometown: '河北省'
}, {
name: '小红',
age: 19,
sex: '女',
hometown: '河南省'
}, {
name: '小刚',
age: 17,
sex: '男',
hometown: '山西省'
}, {
name: '小丽',
age: 18,
sex: '女',
hometown: '山东省'
}]
for (let i = 0; i < students.length; i++) {
console.log(students[i].name)
}
</script>
例2：渲染学生信息表档案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渲染学生信息表案例</title>
<style>
h2,
p {
text-align: center;
}
.student {
overflow: hidden;
margin: 0 auto;
/* 合并相邻边框 */
border-collapse: collapse;
text-align: center;
border-radius: 10px 10px 0 0;
}
.student tr {
cursor: pointer;
}
.student th {
padding: 5px 50px;
color: #fff;
}
.student,
th,
td {
border: 1px solid #fff;
line-height: 45px;
}
/* 给行添加渐变背景颜色 */
.student thead tr {
background-image: linear-gradient(to right, #f46e33, #f057a5);
}
/* 从第2行开始修改背景颜色 */
.student tbody tr {
background-image: linear-gradient(to right, #fdf0eb, #fdeff6);
}
/* 从第2行开始 最后一个单元格颜色变化 */
.student tbody tr :last-child {
color: #f282bb;
}
/* 第一行鼠标经过不要变颜色 */
.student tbody tr:hover {
background-image: linear-gradient(to right, #f9e3da, #f9d6e8);
}
</style>
</head>
<body>
<h2>学生信息</h2>
<p>将数组中存储的学生信息，以表格的形式把数据渲染到页面中...</p>
<table class="student">
<!--表格头部标签-->
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
</thead>
<!--表格的主体内容标签-->
<tbody> </tbody>
</table>
<script>
// 数据
let students = [{
name: '小明',
age: 18,
sex: '男',
hometown: '河北省'
}, {
name: '小红',
age: 19,
sex: '女',
hometown: '河南省'
}, {
name: '小刚',
age: 17,
sex: '男',
hometown: '山西省'
}, {
name: '小丽',
age: 18,
sex: '女',
hometown: '山东省'
}, {
name: '小强',
age: 18,
sex: '男',
hometown: '北京市'
}]
let str = ''
for (i = 0; i < students.length; i++) {
str += `
<tr>
<td>${i+1}</td>
<td>${students[i].name}</td>
<td>${students[i].age}</td>
<td>${students[i].sex}</td>
<td>${students[i].hometown}</td>
</tr>
`
}
document.querySelector('tbody').innerHTML = str
</script>
</body>
</html>
六、内置对象--Math对象
内置对象：JavaScript内部提供的对象，包含各种属性和方法给开发者调用
例如：document.querySelector() console.log( )
Math对象:提供了一系列做数学运算的方法
Math.floor（Math.random（）*（最大值-最小值+1）+最小值）求任意随机数
Math.floor（Math.random（）* 数组名.length）求数组的随机下标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 内置对象-Math
console.log(`math的圆周率`, Math.PI) //math的圆周率3.141592653589793
console.log(`最大值`, Math.max(1, 2, 3, 4, 4, 5)) //最大值 5
console.log(`最小值`, Math.min(1, 2, 3, 4, 4, 5)) //最小值 1
console.log(`绝对值`, Math.abs(-2)) //绝对值 2
console.log(`向上取整`, Math.ceil(1.1)) //向上取整 2
console.log(`向下取值`, Math.floor(1.9)) //向下取值 1
console.log(`四舍五入`, Math.round(1.1)) // 1
console.log(`四舍五入`, Math.round(1.5)) //2
console.log(`四舍五入`, Math.round(1.95)) //2
//0-1之间的随机小数--取不到1
console.log(`随机小数`, Math.random()) //随机小数 0.123...
//随机整数当索引值使用--数组有5个数据01234
// console.log(Math.floor(Math.random() * 5)) //2
// 求任意区间随机整数的公式
// Math.floor(Math.random() * (最大值 - 最小值 + 1) + 最小值)
// Math.floor(Math.random() * (差值 + 1)) + 最小值
//10-20
console.log(Math.floor(Math.random() * 11) + 10)
</script>
</body>
</html>
1.数组随机数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p></p>
<script>
let names = ['果冻', '提子', '菠萝', '雪糕', '果冻橙']
let num = Math.floor(Math.random() * names.length)
console.log(names[num])
document.querySelector('p').innerHTML = names[num]
</script>
</body>
</html>
2.猜随机数
<script>
// 需求：程序生成 1~10 之间的一个随机整数，用户输入一个数字，返回猜的是否正确
// ①：如果输入数字大于随机数字，就提示：'数字猜大了，继续猜'
// ②：如果输入数字小于随机数字，就提示：'数字猜小了，继续猜'
// ③：如果输入数字等于随机数字，就提示猜对了，程序结束
let randomnum = Math.floor(Math.random() * 10) + 1
while (true) {
let num = prompt(`输入猜测的数字是:`)
if (num > randomnum) {
alert(`猜大了`)
} else if (num < randomnum) {
alert(`猜小了`)
} else if (num == randomnum) {
alert(`猜对了`)
break
}
}
</script>
3.随机颜色
<script>
// 生成随机颜色
// 需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。
// ①：如果参数传递的是 true 或者无参数，则输出 一个随机十六进制的颜色
// ②：如果参数传递的是 false ，则输出 一个随机rgb的颜色
//十六进制 0-9 a-f #XXXXXX (#+6位数)
//rgb（红色，绿色，蓝色）0-255
function getcolor(flag = true) {
if (flag == true) {
//js习惯数组也保存相同类型的数据----''原因
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
let str = '#'
for (let i = 0; i < 7; i++) {
//计算随机数→用随机数当索引从数组取数据→拼到str变量的后面
let randomnum = Math.floor(Math.random() * arr.length)
str += arr[randomnum]
}
console.log(str)
} else if (flag == false) {
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
console.log(`rgb(${r},${g},${b})`)
} else {
console.log(`xxxxx`)
}
}
getcolor()
getcolor(false)
</script>
七、学成在线综合案例渲染
<!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>学成在线</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 精品课程 -->
<div class="course wrapper">
<div class="hd">
<h3>精品推荐</h3>
<a href="#">查看全部
<span class="iconfont icon-arrow-right-bold">
</span>
</a>
</div>
<div class="bd">
<ul class="common"></ul>
</div>
</div>
<script>
// 综合案例代码
// 1. 利用对象数组的数据渲染页面
let data = [{
src: './uploads/quality01.png',
title: 'JavaScript数据看板项目实战',
num: 1125
}, {
src: './uploads/quality02.png',
title: 'Vue.js实战——面经全端项目',
num: 2726
}, {
src: './uploads/quality03.png',
title: '玩转Vue全家桶，iHRM人力资源项目',
num: 9456
}, {
src: './uploads/quality04.png',
title: 'Vue.js实战医疗项目——优医问诊',
num: 7192
}, {
src: './uploads/quality05.png',
title: '小程序实战：小兔鲜电商小程序项目',
num: 2703
}, {
src: './uploads/quality06.png',
title: '前端框架Flutter开发实战',
num: 2841
}, {
src: './uploads/quality07.png',
title: '熟练使用React.js——极客园H5项目',
num: 95682
}, {
src: './uploads/quality08.png',
title: '熟练使用React.js——极客园PC端项目',
num: 904
}, {
src: './uploads/quality09.png',
title: '前端实用技术，Fetch API 实战',
num: 1516
}, {
src: './uploads/quality10.png',
title: '前端高级Node.js零基础入门教程',
num: 2766
}, {
src: './uploads/quality10.png',
title: '前端高级Node.js零基础入门教程',
num: 27669
}]
let str = ``
for (let i = 0; i < data.length - 1; i++) {
str += `
<li>
<a href="#">
<div class="pic"><img src= "${data[i].src}" alt=""></div>
<h4>${data[i].title}</h4>
<p><span>高级</span> · <i>${data[i].num}</i>人在学习</p>
</a>
</li>
`
}
document.querySelector('.common').innerHTML = str
</script>
</body>
</html>
八、类型数据储存（栈,堆--空间）
九、声明变量优先const
变量声明有三个 var let 和 const，
建议:const优先，尽量使用const----原因是：
很多变量声明的时候明确不会被更改了，为了安全性，用const
如果纠结：就有了变量先给const，如果发现它后面是要被修改的，再改为let
const声明的对象可以修改里面的属性：因为对象是引用类型，里面存储的是地址，只要地址不变，就不会报错
建议数组和对象使用const来声明就不会报错
变量被重新赋值的时候需要用let
术语拓展
十、课后练习
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" />
<link rel="stylesheet" href="./css/inputnumber.css" />
<link rel="stylesheet" href="./css/index.css" />
<title>购物车</title>
</head>
<body>
<div class="app-container" id="app">
<!-- 顶部banner -->
<div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
<!-- 面包屑 -->
<div class="breadcrumb">
<span>🏠</span> /
<span>购物车</span>
</div>
<!-- 购物车主体 -->
<div class="main">
<div class="table">
<!-- 头部 -->
<div class="thead">
<div class="tr">
<div class="th">选中</div>
<div class="th th-pic">图片</div>
<div class="th">单价</div>
<div class="th num-th">个数</div>
<div class="th">小计</div>
<div class="th">操作</div>
</div>
</div>
<!-- 身体 -->
<div class="tbody">
<!-- <div class="tr active">
<div class="td"><input type="checkbox" checked /></div>
<div class="td"><img src="./img/火龙果.png" alt="" /></div>
<div class="td">6</div>
<div class="td">
<div class="my-input-number">
<button class="decrease"> - </button>
<span class="my-input__inner">2</span>
<button class="increase"> + </button>
</div>
</div>
<div class="td">12</div>
<div class="td"><a href="javascript:del(0);">删除</a></div>
</div> -->
<!-- 需要渲染的列表 核心代码区域 -->
<!-- <div class="tr">
<div class="td"><input type="checkbox" /></div>
<div class="td"><img src="./img/荔枝.png" alt="" /></div>
<div class="td">7</div>
<div class="td">
<div class="my-input-number">
<button disabled class="decrease"> - </button>
<span class="my-input__inner">1</span>
<button class="increase"> + </button>
</div>
</div>
<div class="td">14</div>
<div class="td"><a href="javascript:del(0);">删除</a></div>
</div> -->
</div>
</div>
<!-- 底部 -->
<div class="bottom">
<!-- 全选 -->
<label class="check-all">
<input type="checkbox" />
全选
</label>
<div class="right-box">
<!-- 所有商品总价 -->
<span class="price-box">总价 : ¥ <span class="price">24</span></span>
<!-- 结算按钮 -->
<button class="pay">结算( 6 )</button>
</div>
</div>
</div>
<!-- 空车 -->
<div class="empty">🛒空空如也</div>
</div>
///---------------js下面的代码-------------------------------------
</body>
</html>
<script>
const fruit = [{
icon: './img/火龙果.png',
num: 2,
price: 6,
}, {
icon: './img/荔枝.png',
num: 7,
price: 20,
}, {
icon: './img/榴莲.png',
num: 3,
price: 40,
}, {
icon: './img/鸭梨.png',
num: 10,
price: 3,
}, {
icon: './img/樱桃.png',
num: 20,
price: 34,
}]
function fn() {
// 渲染
let str = ''
let sum = 0 //总价金额
let js = 0 //结算
for (let i = 0; i < fruit.length; i++) {
str += `
<div class="tr">
<div class="td"><input type="checkbox" /></div>
<div class="td"><img src="${fruit[i].icon}" alt="" /></div>
<div class="td">${fruit[i].price}</div>
<div class="td">
<div class="my-input-number">
<button disabled class="decrease"> - </button>
<span class="my-input__inner">${fruit[i].num}</span>
<button class="increase"> + </button>
</div>
</div>
<div class="td">${fruit[i].num*fruit[i].price}</div>
<div class="td"><a href="javascript:del(${i});">删除</a></div>
</div>
`
sum += fruit[i].num * fruit[i].price
js += fruit[i].num
}
document.querySelector('.tbody').innerHTML = str
document.querySelector('.price').innerHTML = sum
document.querySelector('.pay').innerHTML = `结算(${js})`
}
fn()
//删除
function del(index) {
fruit.splice(index, 1)
fn()
}
</script>
argument
argument 的作用:动态拿到传递的所有实参，箭头函数中没有argument
主要作用是动态获取函数被调用时传递的所有实参,形成伪数组，
无论函数是否声明了对应的形参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// arguments是伪数组,有数组的长度和下标属性,不能调用数组的pop()push()等等一些方法
// argument 的作用:动态拿到传递的所有实参，箭头函数中没有argument
// 主要作用是动态获取函数被调用时传递的所有实参,形成伪数组，无论函数是否声明了对应的形参
function sum() {
let res = 0;
for (let i = 0; i < arguments.length; i++) {
res += arguments[i];
}
console.log(`传递过来所有实参的和`, res);
}
sum(1, 3, 6); //10
sum(7, 8, 9); //24
sum(9, 8); //17
function num2() {
let res2 = 0;
for (let i = 0; i < arguments.length; i++) {
res2 += arguments[i];
}
return res2;
}
console.log(num2(2, 3, 4)); //9
</script>
</body>
</html>
扫一扫
5
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
