小提示：这些内置函数在开发使用的频率非常的频繁，建议认真看一下，并背一下
目录
知识回顾：
• Object
三个常用静态方法（静态方法就是只有构造函数Object可以调用的）
Object.keys
Object.values
Object. assign
• Array
1. 数组常见实例方法-核心方法
编辑forEach()
filter()
map
reduce（）
2.数组常见方法-其他方法
join()
find()
every()
some()
contact()
sort()
splice()
reverse()
findindex
3.数组特殊方法- 伪数组转换为真数组
静态方法 Array.from()
• String
1. 常见实例方法
• Number
常用方法：
toFixed() 设置保留小数位的长度
综合案例：
知识回顾：
在 JavaScript 中最主要的数据类型有 6 种：
基本数据类型：
- 字符串、数值、布尔、undefined、null
引用类型:
- 对象
但是，我们会发现有些特殊情况：
其实字符串、数值、布尔、等基本类型也都有专门的构造函数，这些我们称为包装类型。 JS中几乎所有的数据都可以基于构成函数创建。
内置函数如下：
引用类型
- Object，Array，RegExp，Date 等
包装类型
- String，Number，Boolean 等
• Object
Object 是内置的构造函数，用于创建普通对象。
推荐使用字面量方式声明对象，而不是 Object 构造函数
三个常用静态方法（静态方法就是只有构造函数Object可以调用的）
-
Object.keys
- 作用：Object.keys 静态方法获取对象中所有属性（键）
- 语法：
注意： 返回的是一个数组
Object.values
作用：Object.values 静态方法获取对象中所有属性值
语法：
注意： 返回的是一个数组
-
Object. assign
作用：Object. assign 静态方法常用于对象拷贝
语法：
• Array
Array 是内置的构造函数，用于创建数组
创建数组建议使用字面量创建，不用 Array构造函数创建
1. 数组常见实例方法-核心方法
forEach()
filter()
map
reduce（）
作用：reduce 返回函数累计处理的结果，经常用于求和等
基本语法：
参数：
起始值可以省略，如果写就作为第一次累计的起始值
累计值参数：
1. 如果有起始值，则以起始值为准开始累计， 累计值 = 起始值
2. 如果没有起始值， 则累计值以数组的第一个数组元素作为起始值开始累计
3. 后面每次遍历就会用后面的数组元素 累计到 累计值 里面 （类似求和里面的 sum ）
使用场景：求和运算：
2.数组常见方法-其他方法
join()
find()
every()
some()
contact()
sort()
splice()
reverse()
findindex
3.数组特殊方法- 伪数组转换为真数组
知识回顾：Js种有那些是伪数组
- 使用document.querySelectorAll()得到的数组
- 在函数种的arguments参数也是一个伪数组
静态方法 Array.from()
这个方法一般不用，哈哈
• String
在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法
之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。
1. 常见实例方法
• 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 渲染数据
const str = goodsList.map(item=>{
// console.log(item);
//解构数据对象 //如果对应的变量没有赋值，就默认值是undefined
let {name,price,picture,count,spec,gift} = item
//处理spec --使用内置Object类的values方法
spec = Object.values(spec).join('/')
//处理gift
gift = gift!==undefined?gift.split(',').map(item=>`<span class="tag">【赠品】${item}</span>`).join(''):''
//渲染数据
return `
<div class="item">
<img src=${picture} alt="">
<p class="name">${name} ${gift}</p>
<p class="spec">${spec}</p>
<p class="price">${price.toFixed(2)}</p>
<p class="count">x${count}</p>
<p class="sub-total">${(price*count).toFixed(2)}</p>
</div>
`
}).join('')
document.querySelector('.list').innerHTML = str
//2统计全部金额
const total = goodsList.reduce((prev,item)=>{
return prev+item.count*item.price
},0)
document.querySelector('.amount').innerHTML = total.toFixed(2)
</script>
</body>
</html>
