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

目录

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

1、深入对象

1.1创建对象三种方式

1.2 构造函数

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

实例化执行过程

1.3实例成员&静态成员

2. 内置构造函数

2.1 Object

2.2 Array

练习   员工涨薪计算成本

2.3 String

练习   请完成以下需求

2.4 Number

综合案例   购物车展示

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

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

1、深入对象

1.1创建对象三种方式

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

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

1.2 构造函数

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

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

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

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

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

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

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

①：写一个Goods构造函数

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

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

    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. 构造函数创建的实例对象彼此独立互不影响。

总结：

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

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

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

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

2. 内置构造函数

2.1 Object

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

2.2 Array

    // 数组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 ）

总结：

    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)

    // 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: '黑色' }
    // 1. 所有的属性值回去过来
    // console.log(Object.values(spec))
    // 2. 转换为字符串 join('/')
    console.log(Object.values(spec).join('/'))
    document.querySelector('div').innerHTML = Object.values(spec).join('/') 

  <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. 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

练习   请完成以下需求

①：把字符串拆分为数组，这样两个赠品就拆分开了 用那个方法？ 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

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

综合案例   购物车展示

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

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

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

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

    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)

就只是简单的获取goodsList内的数据 然后添加到str内直接渲染到list上，跟昨天的综合案例大差不差~~~~

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