【JavaScript进阶】构造函数数据常用函数

本章节用到的所有素材都可以找到：素材自取~~~~

1、深入对象

1.1创建对象三种方式

1.2 构造函数

练习利用构造函数创建多个对象

实例化执行过程

1.3实例成员&静态成员

2. 内置构造函数

2.1 Object

2.2 Array

练习员工涨薪计算成本

2.3 String

练习请完成以下需求

2.4 Number

综合案例购物车展示

总结一下~本章节对我有很大收获，希望对你也是！！！！

本章节用到的所有素材都可以找到：素材自取~~~~

1、深入对象

1.1创建对象三种方式

目标：了解创建对象有三种方式

1. 利用对象字面量创建对象

    const obj = {
    uname: 'lyh'
    }
    console.log(obj)

2. 利用 new Object 创建对象

    const obj = new Object({ uname: 'lyh' })
    console.log(obj)

3. 利用构造函数创建对象

1.2 构造函数

构造函数在技术上是常规函数。

不过有两个约定：

1. 它们的命名以大写字母开头。

2. 它们只能由 "new" 操作符来执行。

说明：

1. 使用 new 关键字调用函数的行为被称为实例化

2. 实例化构造函数时没有参数时可以省略 ()

3. 构造函数内部无需写return，返回值即为新创建的对象

4. 构造函数内部的 return 返回的值无效，所以不要写return

5. new Object（） new Date（）也是实例化构造函数

6.箭头函数不能用作构造函数箭头函数没有自己的 this

练习利用构造函数创建多个对象

需求：

①：写一个Goods构造函数

②：里面包含属性 name 商品名称 price 价格 count 库存数量

③：实例化多个商品对象，并打印到控制台，例如

小米 1999 20

华为 3999 59

vivo 1888 100

    function Goods(name, price, count) {
      this.name = name
      this.price = price
      this.count = count
    }

    const xm = new Goods('小米', 1999, 20)
    const hw = new Goods('华为', 3999, 59)
    const vo = new Goods('vivo', 1888, 100)
    console.log(xm)
    console.log(hw)
    console.log(vo)

实例化执行过程

说明：

1. 创建新对象

2. 构造函数this指向新对象

3. 执行构造函数代码，修改this，添加新的属性

4. 返回新对象

1.3实例成员&静态成员

实例成员：

通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。

说明：

1. 实例对象的属性和方法即为实例成员

2. 为构造函数传入参数，动态创建结构相同但值不同的对象

3. 构造函数创建的实例对象彼此独立互不影响。

静态成员：

构造函数的属性和方法被称为静态成员

说明：

1. 构造函数的属性和方法被称为静态成员

2. 一般公共特征的属性或方法静态成员设置为静态成员

3. 静态成员方法中的 this 指向构造函数本身

总结：

1. 什么是实例成员？

实例对象的属性和方法即为实例成员

实例对象相互独立，实例成员当前实例对象使用

2. 什么是静态成员？

构造函数的属性和方法被称为静态成员

静态成员只能构造函数访问

2. 内置构造函数

在 JavaScript 中最主要的数据类型有 6 种：

基本数据类型：

字符串、数值、布尔、undefined、null

引用类型:

对象

但是，我们会发现有些特殊情况：

其实字符串、数值、布尔、等基本类型也都有专门的构造函数，这些我们称为包装类型。

JS中几乎所有的数据都可以基于构成函数创建。

引用类型

Object，Array，RegExp，Date 等

包装类型

String，Number，Boolean 等

2.1 Object

Object 是内置的构造函数，用于创建普通对象。

推荐使用字面量方式声明对象，而不是 Object 构造函数

学习三个常用静态方法（静态方法就是只有构造函数Object可以调用的）

以前都是i通过for in 来进行遍历，现在有新方法啦~~~~

作用： Object.keys 静态方法获取对象中所有属性（键）

2.2 Array

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

通过图片能够很好的理解关于各个函数的功能作用

作用： reduce 返回函数累计处理的结果，经常用于求和等

    // 数组reduce方法
    // arr.reduce(function(上一次值，当前值){}，初始值)
    const arr = [1, 5, 8]

    // 1.没有初始值
    const total = arr.reduce(function (prev, current) {
      return prev + current
    })
    console.log(total) //14

    // 2. 有初始值
    const total = arr.reduce(function (prev, current) {
      return prev + current
    }, 10)
    console.log(total) //24

    // 3.箭头函数
    const total = arr.reduce((prev, current) => prev + current, 10)
    console.log(total) //24

累计值参数：

1. 如果有起始值，则以起始值为准开始累计，累计值 = 起始值

2. 如果没有起始值，则累计值以数组的第一个数组元素作为起始值开始累计

3. 后面每次遍历就会用后面的数组元素累计到累计值里面（类似求和里面的 sum ）

总结：

练习员工涨薪计算成本

需求：

①：给员工每人涨薪 30%

②：然后计算需要支出的费用

数据：

    const arr = [
      {
        name: '张三',
        salary: 10000
      },
      {
        name: '李四',
        salary: 10000
      },
      {
        name: '王五',
        salary: 10000
      },
    ]

    const arr = [
      {
        name: '张三',
        salary: 10000
      },
      {
        name: '李四',
        salary: 10000
      },
      {
        name: '王五',
        salary: 10000
      },
    ]

    // 这里reduce，第二个参数必须加0 如果不加0 默认是数组的第一个元素，但是第一个元素是对象，不是我们要的值
    const total = arr.reduce((prev, currten) => prev + currten.salary, 0) * 1.3
    console.log(total)

2. 数组常见方法-其他方法

    // 1. find查找
    const arr = [
      {
        name: '小米',
        price: 1999
      },
      {
        name: '华为',
        price: 3999
      },
    ]
    //找小米 这个对象 并且返回这个对象
    const ret = arr.find(function (item) {
      // console.log(item)
      // console.log(item.name)
      return item.name === '小米'
    })
    console.log(ret.price)

    // 2. every 每一个是否都符合条件 如果都符合返回true 否则返回false
    const arr1 = [10, 20, 30]
    const flag = arr1.every(item => item >= 20)
    console.log(flag)

练习请完成以下需求

const spec = { size: '40cm*40cm' , color: '黑色'}

请将里面的值写到div标签里面，展示内容如下

    const spec = { size: '40cm*40cm', color: '黑色' }
    // 1. 所有的属性值回去过来
    // console.log(Object.values(spec))
    // 2. 转换为字符串 join('/')
    console.log(Object.values(spec).join('/'))
    document.querySelector('div').innerHTML = Object.values(spec).join('/')

2. 数组常见方法 - 伪数组转换为真数组

静态方法 Array.from()

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const lis = document.querySelectorAll('ul li')
    // console.log(lis)
    // lis.pop() // lis是个伪数组，不能对它进行pop()
    const liss = Array.from(lis)
    // liss.pop()
    console.log(liss)

2.3 String

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 如果省略 结束的索引号，就默认到最后的索引
    const str = '今天又要开始做核酸了'
    console.log(str.substring(2))

    // 3. startsWith 判断是不是以某个字符开头
    const str = 'pink老师上课中'
    console.log(str.startsWith('pink')) //true

    // 4.includes 判断某个字符是不是包含在一个字符串里面
    const str = '我是lyh哈哈哈'
    console.log(str.includes('lyh')) //true

练习请完成以下需求

请将下面字符串渲染到准备好的 p标签内部，结构必须如左下图所示，展示效果如右图所示：

const gift = '50g茶叶,清洗球'

思路：

①：把字符串拆分为数组，这样两个赠品就拆分开了用那个方法？ split(',')

②：利用 map 遍历数组，同时把数组元素生成到span里面，并且返回

③：因为返回的是数组，所以需要转换为字符串, 用那个方法？ join('')

④：p的innerHTML 存放刚才的返回值

    const gift = '50g的茶叶,清洗球'
    // 1. 把字符串拆分成数组
    console.log(gift.split(','))
    // 2. 根据数组元素的个数，生成 对应span标签
    const str = gift.split(',').map(item => `<span>【赠品】${item}</span><br>`).join('')
    document.querySelector('div').innerHTML = str

2.4 Number

Number 是内置的构造函数，用于创建数值

常用方法：

toFixed() 设置保留小数位的长度

    // toFixed方法可以让数字指定保留的小数位数
    const num = 10.923
    console.log(num.toFixed(1)) //10.9

综合案例购物车展示

需求：

根据后台提供的数据，渲染购物车页面

今天的综合案例真的还是比较简单，建议先手敲，就跟上面两个小案例一模一样，相信是完全可以自己写出来的！！！

分析业务模块：

①：把整体的结构直接生成然后渲染到大盒子.list 里面

②：那个方法可以遍历的同时还有返回值 map 方法

③：最后计算总价模块，那个方法可以求和？ reduce 方法

①：先利用map来遍历，有多少条数据，渲染多少相同商品

②：里面更换各种数据，注意使用对象解构赋值

③：利用reduce计算总价

①：先利用map来遍历，有多少条数据，渲染多少相同商品

- 可以先写死的数据

- 注意map返回值是数组，我们需要用 join 转换为字符串

- 把返回的字符串赋值给 list 大盒子的 innerHTML

②：更换数据

- 先更换不需要处理的数据，图片，商品名称，单价，数量

- 采取对象解构的方式

- 注意单价要保留2位小数， 489.00 toFixed(2)

- 获取每个对象里面的 spec , 上面对象解构添加 spec

- 获得所有属性值是： Object.values() 返回的是数组

- 拼接数组是 join(‘’) 这样就可以转换为字符串了

注意要判断是否有gif属性，没有的话不需要渲染

利用变成的字符串然后写到 p.name里面

更换数据 - 处理小计模块

- 小计 = 单价 * 数量

- 小计名可以为: subTotal = price * count

- 注意保留2位小数

关于小数的计算精度问题:

0.1 + 0.2 = ?

解决方案：我们经常转换为整数

（0.1*100 + 0.2*100）/ 100 === 0.3

这里是给大家拓展思路和处理方案

③：计算合计模块

- 求和用到数组 reduce 方法累计器

- 根据数据里面的数量和单价累加和即可

- 注意 reduce方法有2个参数，第一个是回调函数，第二个是初始值，这里写 0

    let str = '', cou = 0
    goodsList.map(item => {
      // console.log(item)
      const { id, name, price, picture, count, spec, gift } = item
      // console.log(id)
      // console.log(spec)
      // 生成一个数组
      // const strSpec = Object.values(spec).join('/')
      // const arr = String(gift).split(',').map(item => `【赠品】${item}<br>`).join('')
      // console.log(arr)
      str += `
        <div class="item">
      <img src="${picture}" alt="">
      <p class="name">${name} <span class="tag">${gift ? String(gift).split(',').map(item => `【赠品】${item}<br>`).join('') : ''}</span></p>
      <p class="spec">${Object.values(spec).join('/')}</p>
      <p class="price">${price}</p>
      <p class="count">${count}</p>
      <p class="sub-total">${(count * price).toFixed(2)}</p>
    </div>
      `
      cou += count * price
      // console.log(typeof cou)
    })
    // console.log(str)
    document.querySelector('.list').innerHTML = str
    document.querySelector('.amount').innerHTML = cou.toFixed(2)