js ES6 part3

E___V___E

于 2024-07-12 22:03:16 发布

阅读量129

点赞数 1

文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/E___V___E/article/details/140340628

版权

Number

是内置构造函数，用来创建数值

const price =12.345

console.log(price.toFixed(2))//保留两位小数 12.35

综合案例购物车

<body>
    <div class="list">
        <!-- <div class="item">
      <img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="">
      <p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p>
      <p class="spec">白色/10寸</p>
      <p class="price">289.90</p>
      <p class="count">x2</p>
      <p class="sub-total">579.80</p>
    </div> -->
    </div>
    <div class="total">
        <div>合计：<span class="amount">1000.00</span></div>
    </div>
    <script>
        const goodsList = [
            {
                id: '4001172',
                name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
                price: 289.9,
                picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
                count: 2,
                spec: { color: '白色' }
            },
            {
                id: '4001009',
                name: '竹制干泡茶盘正方形沥水茶台品茶盘',
                price: 109.8,
                picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
                count: 3,
                spec: { size: '40cm*40cm', color: '黑色' }
            },
            {
                id: '4001874',
                name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
                price: 488,
                picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
                count: 1,
                spec: { color: '青色', sum: '一大四小' }
            },
            {
                id: '4001649',
                name: '大师监制龙泉青瓷茶叶罐',
                price: 139,
                picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
                count: 1,
                spec: { size: '小号', color: '紫色' },
                gift: '50g茶叶,清洗球,宝马, 奔驰'
            }
        ]
 
        // 1. 根据数据渲染页面
        document.querySelector('.list').innerHTML = goodsList.map(item => {
            // console.log(item)  // 每一条对象
            // 对象解构  item.price item.count
            const { picture, name, count, price, spec, gift } = item
            // 规格文字模块处理
            const text = Object.values(spec).join('/')
            // 计算小计模块 单价 * 数量  保留两位小数 
            // 注意精度问题，因为保留两位小数，所以乘以 100  最后除以100
            const subTotal = ((price * 100 * count) / 100).toFixed(2)
            // 处理赠品模块 '50g茶叶,清洗球'
            const str = gift ? gift.split(',').map(item => `<span class="tag">【赠品】${item}</span> `).join('') : ''
//标签前面不能多打空格
            return `
        <div class="item"> 
          <img src=${picture} alt="">
          <p class="name">${name} ${str} </p>
          <p class="spec">${text} </p>
          <p class="price">${price.toFixed(2)}</p>
          <p class="count">x${count}</p>
          <p class="sub-total">${subTotal}</p>
        </div>
      `
        }).join('')
 
        // 3. 合计模块
        const total = goodsList.reduce((prev, item) => prev + (item.price * 100 * item.count) / 100, 0)
        // console.log(total)
        document.querySelector('.amount').innerHTML = total.toFixed(2)
    </script>
</body>

面向对象和面向过程

构造函数

封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。
同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。
总结：
1. 构造函数体现了面向对象的封装特性
2. 构造函数实例创建的对象彼此独立、互不影响
面向对象编程的特性：比如封装性、继承性等，可以借助于构造函数来实现
但是存在浪费内存的问题

// 构造函数 公共的属性和方法 封装到 Star 构造函数里面了
function Star(uname, age) {
this.uname = uname
this.age = age
this.sing = function () {
console.log('唱歌')
const ldh = new Star（'刘德华'，55）
const zxy = new Star（'张学友'，58）

//console.log(ldh === zxy)
console.log(ldh.sing === zxy.sing)//false

原型

构造函数通过原型分配的函数是所有对象所共享的。

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，所以我们也称为原型对象。
这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存。
可以把那些不变的方法直接定义在 prototype 对象上，这样所有对象的实例都可以共享这些方法。
构造函数和原型对象中的 this 都指向实例化的对象。

this

构造函数和原型对象中的this 都指向实例化的对象

  <script>
    let that
    function Star(uname) {
      // that = this
      // console.log(this)
      this.uname = uname
    }
    // 原型对象里面的函数this指向的还是 实例对象 ldh
    Star.prototype.sing = function () {
      that = this
      console.log('唱歌')
    }
    // 实例对象 ldh   
    // 构造函数里面的 this 就是  实例对象  ldh
    const ldh = new Star('刘德华')
    ldh.sing()
    console.log(that === ldh)
  </script>