一、深入对象
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
四、【构造函数总结】
好啦!本次的分享到这里就结束啦!我们下次再见!!!