目录
一、深入对象
1、创建对象三种方式
- 利用对象字面量创建对象
const o = {
name: '佩奇'
}- 利用 new Object 创建对象
const obj = new Object({ uname: 'wen' })
console.log(obj)- 利用构造函数创建对象
2、构造函数
（1）构造函数
- 构造函数 ：是一种特殊的函数，主要用来初始化对象
- 使用场景：常规的 {...} 语法允许创建一个对象。比如我们创建了佩奇的对象，继续创建乔治的对象还需要重新写一 遍，此时可以通过构造函数来快速创建多个类似的对象。
- 构造函数语法：大写字母开头的函数
- 创建构造函数：
- 示例代码如下：
// 创建一个猪 构造函数
function Pig(uname, age) {
this.uname = uname
this.age = age
}
// console.log(new Pig('佩奇', 6))
// console.log(new Pig('乔治', 3))
const p = new Pig('佩奇', 6)
console.log(p)
// const pepa = { uname: '佩奇', age: 6 }
// const obj = new Object()（2）说明：
- 使用 new 关键字调用函数的行为被称为实例化
- 实例化构造函数时没有参数时可以省略 ()
- 构造函数内部无需写return，返回值即为新创建的对象
- 构造函数内部的 return 返回的值无效，所以不要写return
- new Object（） new Date（） 也是实例化构造函数
（3）利用构造函数创建多个对象
示例代码如下：
function Goods(name, price, count) {
this.name = name
this.price = price
this.count = count
this.sayhi = function () { }
}
const mi = new Goods('小米', 1999, 20)
console.log(mi)
const hw = new Goods('华为', 3999, 59)
console.log(hw)
console.log(mi === hw)
mi.name = 'vivo'
console.log(mi)
console.log(hw)（4）实例化执行过程
- 创建新对象
- 构造函数this指向新对象
- 执行构造函数代码，修改this，添加新的属性
- 返回新对象
3、实例成员和静态成员
（1）实例成员：
通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。
（2）静态成员：
构造函数的属性和方法被称为静态成员
示例代码如下：
// 静态成员
Goods.num = 10
console.log(Goods.num)
Goods.sayhi = function () { }二、内置构造函数
JS中的数据类型前面的笔记有讲过，比如基本数据类型和复杂数据类型，基本数据类型又成为包装数据类型，JS中几乎所有的数据都可以基于构造函数创建。
部分示例代码如下：
const str1 = 'pink'
console.log(str1.length)
const num = 12
console.log(num.toFixed(2))
const str2 = 'pink'
// js 底层完成， 把简单数据类型包装为了引用数据类型
const str3 = new String('pink')1、Object
Object 是内置的构造函数，用于创建普通对象。（推荐使用字面量）
const pepa = ({ uname: '佩奇', age: 6 })- 作用：Object.keys 静态方法获取对象中所有属性（键）
- 语法：
const o = { uname: 'pink', age: 18 }
// 1.获得所有的属性名
console.log(Object.keys(o)) //返回数组['uname', 'age']- 作用：Object.values 静态方法获取对象中所有属性值
- 语法：
// 2. 获得所有的属性值
console.log(Object.values(o)) // ['pink', 18]- 作用：Object. assign 静态方法常用于对象拷贝
- 使用：经常使用的场景给对象添加属性
- 语法：
// 3. 对象的拷贝
// const oo = {}
// Object.assign(oo, o)
// console.log(oo)
Object.assign(o, { gender: '女' })
console.log(o)2、Array
Array 是内置的构造函数，用于创建数组
（1）数组常见实例方法-核心方法
- 作用：reduce 返回函数累计处理的结果，经常用于求和等
- 基本语法：
arr.reduce(function(累计值, 当前元素){}, 起始值)- 参数： 起始值可以省略，如果写就作为第一次累计的起始值
- 累计值参数：
- 如果有起始值，则以起始值为准开始累计， 累计值 = 起始值
- 如果没有起始值， 则累计值以数组的第一个数组元素作为起始值开始累计
- 后面每次遍历就会用后面的数组元素 累计到 累计值 里面 （类似求和里面的 sum ）
（2）员工涨薪计算成本案例
示例代码如下：
const arr = [{
name: '张三',
salary: 10000
}, {
name: '李四',
salary: 10000
}, {
name: '王五',
salary: 20000
},
]
// 涨薪的钱数 10000 * 0.3
// const money = arr.reduce(function (prev, item) {
// return prev + item.salary * 0.3
// }, 0)
const money = arr.reduce((prev, item) => prev + item.salary * 0.3, 0)
console.log(money)（3）还有些数组常见方法
你们可以搜寻MDN官网进行查阅学习，前面也有数组相关的文档学习。
（4）伪数组转换为真数组
静态方法 Array.from()
示例代码如下：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// Array.from(lis) 把伪数组转换为真数组
const lis = document.querySelectorAll('ul li')
// console.log(lis)
// lis.pop() 报错
const liss = Array.from(lis)
liss.pop()
console.log(liss)
</script>
</body>3、String
在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法
之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被 称为包装类型。
（1）常见实例方法
示例代码如下：
//1. split 把字符串 转换为 数组 和 join() 相反
// const str = 'pink,red'
// const arr = str.split(',')
// console.log(arr)
// const str1 = '2022-4-8'
// const arr1 = str1.split('-')
// console.log(arr1)
// 2. 字符串的截取 substring(开始的索引号[， 结束的索引号])
// 2.1 如果省略 结束的索引号，默认取到最后
// 2.2 结束的索引号不包含想要截取的部分
// const str = '今天天气真好'
// console.log(str.substring(5, 7))
// 3. startsWith 判断是不是以某个字符开头
// const str = 'pink上课中'
// console.log(str.startsWith('pink'))
// 4. includes 判断某个字符是不是包含在一个字符串里面
const str = '我是pink'
console.log(str.includes('pink')) // true4、Number
Number 是内置的构造函数，用于创建数值
常用方法：
toFixed() 设置保留小数位的长度
// toFixed 方法可以让数字指定保留的小数位数
const num = 10.923
// console.log(num.toFixed())
console.log(num.toFixed(1))
const num1 = 10
console.log(num1.toFixed(2))数字型转换为字符串型：
const num = 10
console.log(String(num))
console.log(num.toString())三、综合案例
1、需求
根据后台提供的数据，渲染购物车页面
2、分析业务模块：
①：渲染图片、标题、颜色、价格、赠品等数据
- 先利用map来遍历，有多少条数据，渲染多少相同商品
- 可以先写死的数据
- 注意map返回值是 数组，我们需要用 join 转换为字符串
- 把返回的字符串 赋值 给 list 大盒子的 innerHTML
②：单价和小计模块
- 更换数据
- 先更换不需要处理的数据，图片，商品名称，单价，数量
- 采取对象解构的方式
- 注意 单价要保留2位小数， 489.00 toFixed(2)
- 更换数据
- 处理-规格文字-模块
- 获取 每个对象里面的 spec , 上面对象解构添加 spec
- 获得所有属性值是： Object.values() 返回的是数组
- 拼接数组是 join(‘’) 这样就可以转换为字符串了
- 更换数据 - 处理 赠品 模块
- 获取 每个对象里面的 gift , 上面对象解构添加 gift
- 更换数据 - 处理 小计 模块
- 小计 = 单价 * 数量
- 小计名可以为: subTotal = price * count
- 注意保留2位小数
③：总价模块
- 计算 合计 模块
- 求和用到数组 reduce 方法 累计器
- 根据数据里面的数量和单价累加和即可
- 注意 reduce方法有2个参数，第一个是回调函数，第二个是 初始值，这里写 0
示例代码如下：
CSS样式代码如下：
<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>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>JavaScript行为代码如下：
<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>