目录
构造函数&数据&数据常用函数
目标：1. 掌握基于构造函数创建对象，理解实例化过程，2. 掌握对象数组字符数字等类型的常见属性和方法，便捷完成功能。
一、深入对象
1、创建对象三种方式
1、new Object({ name: 'tom' })
2、const o = { name: 'tom' }
利用对象字面量创建，推荐
3、利用构造函数创建
2、构造函数
是一种特殊函数，主要用来初始化对象，大写字母开头
使用场景：通过构造函数来快速创建多个类似的对象
2个约定：1、首字母大写 2、只能由‘new’操作符来执行
创建构造函数：
1、使用new关键字调用函数的行为被称为实例化
2、实例化构造函数时没有参数可以省略
3、构造函数内部无需写return，返回值即为新创建的对象
4、构造函数内部的return返回的值无效，所以不需要写return
5、new Object（） new Date（） 也是实例化构造函数
3、实例化执行过程
1. 创建新空对象
创建实例（对象）：new 构造函数
2. 构造函数this指向新对象
3. 执行构造函数代码
4. 返回新对象
3、实例成员&静态成员
一、实例成员
实例对象中的属性和方法
通过构造函数创建的对象称为实例对象
构造函数创建的实例对象彼此独立互不影响
二、静态成员
构造函数上的属性和方法
静态成员方法中的 this 指向构造函数本身
二、内置构造函数
1、一切皆对象
一、静态成员
构造函数上的属性和方法
静态成员方法中的 this 指向构造函数本身
二、引用类型
Object，Array，RegExp，Date 等
三、包装类型
String，Number，Boolean 等
2、Object
keys
获取对象中所有key集合，返回一个数组
values
获取对象中所有的值集合，返回一个数组
assign
合并一个多个对象到目标对象，并返回目标对象
三个常用静态方法（静态方法就是只有构造函数Object可以调用的）
三个常用静态方法（静态方法就是只有构造函数Object可以调用的）
3、Array
一、常用实例方法、核心方法（高阶函数）
forEach：遍历数组 不返回，用于不改变值，经常用于查找打印输出值
filter：过滤数组 筛选数组元素，并生成新数组
map：迭代数组 返回新数组，新数组里面的元素是处理之后的值，经常用于处理数据
reduce
1、累计器 返回函数累计处理的结果，经常用于求和等
2、基本语法：arr.reduce(function(累计值， 当前元素){}, 起始值)
累计值参数
如果有起始值，则以起始值为准开始累计， 累计值 = 起始值
如果没有起始值， 则累计值以数组的第一个数组元素作为起始值开始累计
后面每次遍历就会用后面的数组元素 累计到 累计值 里面 （类似求和里面的 sum ）
示例：
const arr = [1, 2, 3]
const result = arr.reduce(function(count, item){
return count + item
}, 0)
其他
findIndex every some splice join sort reverse concat
详情见MDN社区，保存在火狐浏览器书签里
find：找到符合条件的第一个元素
Array.from()
将伪数组转为数组
静态方法
4、String
一、常用实例方法
split
切割，用来将字符串拆分成数组
substring
用于字符串截取
startsWith
是否以某字符开头
includes
判断一个字符串是否包含在另一个字符串中，根据情况返回布尔值
其他
toUpperCase toLowerCase indexOf replace match
二、实例属性length，String()直接使用转字符串
三、num.toString() 转换为字符串
5、Number
Number() 直接使用传数字
toFixed() 设置保留小数位的长度
综合案例：购物车展示
<!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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.list {
width: 990px;
margin: 100px auto 0;
}
.item {
padding: 15px;
transition: all .5s;
display: flex;
border-top: 1px solid #e4e4e4;
}
.item:nth-child(4n) {
margin-left: 0;
}
.item:hover {
cursor: pointer;
background-color: #f5f5f5;
}
.item img {
width: 80px;
height: 80px;
margin-right: 10px;
}
.item .name {
font-size: 18px;
margin-right: 10px;
color: #333;
flex: 2;
}
.item .name .tag {
display: block;
padding: 2px;
font-size: 12px;
color: #999;
}
.item .price,
.item .sub-total {
font-size: 18px;
color: firebrick;
flex: 1;
}
.item .price::before,
.item .sub-total::before,
.amount::before {
content: "¥";
font-size: 12px;
}
.item .spec {
flex: 2;
color: #888;
font-size: 14px;
}
.item .count {
flex: 1;
color: #aaa;
}
.total {
width: 990px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
border-top: 1px solid #e4e4e4;
padding: 20px;
}
.total .amount {
font-size: 18px;
color: firebrick;
font-weight: bold;
margin-right: 50px;
}
</style>
</head>
<body>
<div class="list">
<!-- <div class="item">
<img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="">
<p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p>
<p class="spec">白色/10寸</p>
<p class="price">289.90</p>
<p class="count">x2</p>
<p class="sub-total">579.80</p>
</div> -->
</div>
<div class="total">
<div>合计：<span class="amount">1000.00</span></div>
</div>
<script>
const goodsList = [
{
id: '4001172',
name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
price: 289.9,
picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
count: 2,
spec: { color: '白色' }
},
{
id: '4001009',
name: '竹制干泡茶盘正方形沥水茶台品茶盘',
price: 109.8,
picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
count: 3,
spec: { size: '40cm*40cm', color: '黑色' }
},
{
id: '4001874',
name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
price: 488,
picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
count: 1,
spec: { color: '青色', sum: '一大四小' }
},
{
id: '4001649',
name: '大师监制龙泉青瓷茶叶罐',
price: 139,
picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
count: 1,
spec: { size: '小号', color: '紫色' },
gift: '50g茶叶,清洗球,宝马, 奔驰'
}
]
// 1. 根据数据渲染页面
document.querySelector('.list').innerHTML = goodsList.map(item => {
// console.log(item) // 每一条对象
// 对象解构 item.price item.count
const { picture, name, count, price, spec, gift } = item
// 规格文字模块处理
const text = Object.values(spec).join('/')
// 计算小计模块 单价 * 数量 保留两位小数
// 注意精度问题，因为保留两位小数，所以乘以 100 最后除以100
const subTotal = ((price * 100 * count) / 100).toFixed(2)
// 处理赠品模块 '50g茶叶,清洗球'
const str = gift ? gift.split(',').map(item => `<span class="tag">【赠品】${item}</span> `).join('') : ''
return `
<div class="item">
<img src=${picture} alt="">
<p class="name">${name} ${str} </p>
<p class="spec">${text} </p>
<p class="price">${price.toFixed(2)}</p>
<p class="count">x${count}</p>
<p class="sub-total">${subTotal}</p>
</div>
`
}).join('')
// 3. 合计模块
const total = goodsList.reduce((prev, item) => prev + (item.price * 100 * item.count) / 100, 0)
// console.log(total)
document.querySelector('.amount').innerHTML = total.toFixed(2)
</script>
</body>
</html>
扫一扫
1007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
