一、深入对象
1. 创建对象的三种方式

利用 new Object 创建对象
2. 构造函数

【注意事项】

【例】

这样子写好之后,想要添加一个新的结构类似的对象,直接照着红圈中写,最后改相应的数据就好了
注意:红色是第一步,黄色是第二步
这样子引用
【总结】

【练习】

黄框声明,蓝框引用

【补充】实例化执行过程

3. 实例动员&静态动员
(1)实例成员

是相互独立的,对于其他对象和其他成员是互不影响的
(2)静态成员


【总结】

二、内置构造函数

基本包装类型
1. Object

注意:有了静态方法,不需要循环就可以得到全部数据

(1)获得所有的属性名 keys
【示例】
(2)获得所有的属性值 values

【示例】
(3)对象的拷贝 assign
注意:assign 经常用于给对象添加属性(追加属性)

【示例】
把后面的对象拷贝给前面的对象
【适用场景】 assign 经常用于给对象添加属性(追加属性)
【示例】
2. Array

(1)数组常见实例方法 - 核心方法

① reduce

实现数组求和
① 没有初始值时,数组内所有元素相加
② 有初始值时,数组内所有元素相加,再加上最后的初始值
箭头函数的写法
结果也为24

无初始值
有初始值
【案例】


reduce 执行过程

(2)数组常见方法-其他方法


① find


② every
每一个是否都符合条件,如果都符合返回true,否则返回false

③ some
有一个符合条件,结果就返回true,都不符合则返回false
【练习】

注意:把所选的东西都放到一个盒子里面去
需要处理红框中的数据

这样处理
④ from
把伪数组转变成真数组

3. String
注意:转化字符串的两种方法


① split
分割字符串,将原来的字符串,拆分成数组

② substring
字符串的截取


③ startsWith
判断是不是以某个字母开头
返回结果也是 true 或者 false

注意:只要是以 p 开头的,不论什么,结果都是 true

④ includes
判断某个字符是不是包含在一个字符串里面


【String 练习】

将上述结构中的 gift 内容部分取出来,再将内容渲染到 p 标签中,实现下图效果

【代码】
1. 把字符串拆分成数组

2. 根据数组元素的个数,生成对应的span标签
得到的结果仍然是一个数组

3. 把数组变为字符串

注意:这两部分等价
4. Number

三、综合案例
效果图


1. 根据数据,渲染页面

①
注意:map 你有多少数据,就渲染多少个


②

注意:每一个对象都返回一个 字符串(div)

2. 更换数据
① 换不需要处理的数据

注意:解构
可以不再使用 item.name item.id 等来获取对象中的数据
可以直接使用 解构时,给起的名字 来使用对象中的数据
item 是每一个对象

效果图
注意:toFixed(2)的意思是保留两位小数
注意:不要再 div 区域中,在任何一个位置加任何一个空格
② 处理 型号颜色 模块

注意:蓝框中 将数组变为字符串
Object.values 获取到 spec 中的所有值
③ 处理赠品模块

如果有 gift 的话,则前面为真,执行黄框中的语句;没有的话,返回空字符串
用三元运算符
黄框中的语句,先把 gift 分解为数组,再遍历数组并添加元素,再将数组转变为字符串
3. 处理小计模块


4. 合计模块


注意:精度问题,保留两位小数,则乘以100进行计算后,再除以100
若保留一位小数,则乘以10,再除以10
四、【构造函数总结】


好啦!本次的分享到这里就结束啦!我们下次再见!!!





































![[数据集][目标检测]电力场景电力目标检测数据集VOC+YOLO格式476张5类别](https://img-blog.csdnimg.cn/direct/1f52480201b24e7094a9c763bb7ed91c.png)











