JavaScript 进阶（二）

一、深入对象

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

四、【构造函数总结】

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