JavaScript进阶（day02:构造函数&数据常用函数）

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学，可以点心心支持一下哈

一、深入对象

1.创建对象三种方式

①利用对象字面量创建对象

②利用new Object创建对象

③利用构造函数创建对象

2.构造函数

构造函数是一种特殊的函数，主要用来初始化对象，可以通过构造函数来快速创建多个类似的对象

命名以大写字母开头

只能由“new”操作符来执行

创建构造函数

总结

案例（利用构造函数创建多个对象）

      function Goods(name, price, count) {
        this.name = name
        this.price = price
        this.count = count
      }
      console.log(new Goods('小米', 1999, 20))
      console.log(new Goods('华为', 3999, 59))
      console.log(new Goods('vivo', 1888, 100))

实例化过程

1，创建新空对象

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

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

4，返回新对象

3.实例成员&静态成员

实例对象

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

静态成员

总结

二、内置构造函数

引用类型：Object、Array、RegExp、Date等

包装类型：String、Number、Boolean等

1.Object

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

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

1.1Object.keys

2.Object.values

3.Object. assign （了解）

经常使用的场景给对象添加属性

总结

2.Array

Object 是内置的构造函数，用于创建数组。

2.1数组常见实例方法-核心方法

reduce

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

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

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

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

案例（计算薪资）

      const arr = [
        {
          name: '张三',
          salary: 10000
        },
        {
          name: '李四',
          salary: 10000
        },
        {
          name: '王五',
          salary: 20000
        }
      ]
      console.log(arr.reduce((pre, current) => pre + current.salary, 0))

2.2数组常见方法-其他方法

案例（课堂小练习01）

 const spec = { size: '40cm*40cm', color: '黑色' }
      document.querySelector('div').innerHTML = Object.values(spec).join('/')

2.2数组常见方法-伪数组转换成真数组

静态方法Array.from()

3.String

3.1常见实例方法

1.实例属性length用来获取字符串的度长（重点）

2.实例方法split('分隔符')用来将字符串拆分成数组（重点）

3.实例方法substring(需要截取的第一个字符的索引[，结束的索引号])用于字符串截取（重点）

4.实例方法startswith(检测字符串[，检测位置索引号])检测是否以某字符开头（重点）

5.实例方法includes(搜索字符串[，检测位置索引号])判断一个字符串是否包含在另一个字符串中，根据情况返回true或false（重点）

代转化的对象.toString()

转换为字符串

案例（显示赠品练习）

const gift = '50g的茶叶,清洗球'
      // 根据逗号把字符串转为数组
      document.querySelector('div').innerHTML = gift
        .split(',')
        .map(item => `<span>【赠品】${item}</span><br/>`)
        .join('')

4.Number

toFixed()

三、综合案例

案例（购物车展示）

      let renderList = goodsList
        .map(item => {
          let { id, name, price, picture, count, spec, gift } = item
          // 对商品描述数据进行处理
          let specString = ''
          // 如果描述数据只有一个,则直接转换为字符串,否则用/进行分隔再转换为字符串
          specString = Object.values(spec).join('/')
          // 对赠品数据进行处理,使用map返回处理后的新数据
          let giftString = ''
          if (gift) {
            giftString = gift
              .split(',')
              .map(item => `<span class="tag">【赠品】${item}</span>`)
              .join('')
          }
          return `<div class="item">
        <img src="${picture}" alt="">
        <p class="name">${name}${giftString ? giftString : ''}</p>
        <p class="spec">${specString}</p>
        <p class="price">${price.toFixed(2)}</p>
        <p class="count">${count}</p>
        <p class="sub-total">${((price * 100 * count) / 100).toFixed(2)}</p>
      </div>`
        })
        .join('')
      document.querySelector('div').innerHTML = renderList
      // 数组累加
      const total = goodsList.reduce(
        (pre, current) => pre + (current.price * 100 * current.count) / 100,
        0
      )
      document.querySelector('.amount').innerHTML = total.toFixed(2)