js高级2

构造函数创建对象，理解实例化过程

1.深入对象 

1.1创建对象的三种方式  

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

②利用new object 创建对象

③利用构造函数创建对象

1.2 构造函数 

是一种特殊的函数，主要是用来初始化对象

使用场景 ： 

 

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

注意事项：①它们的命名以大写字母开头 ②它们只能由new 操作符来执行

什么是实例化？ 使用new关键字调用函数的行为被称为实例化

作用？是来快速创建多个类似的对象！

构造函数内部不需要写return，函数会自动返回创建的新对象。

如何创造构造函数？

 案例 

代码

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


}
const p = new Goods('小米','1999','20')//实例化对象 
console..log(p) //输出存入的小米
console.log(new Goods('华为','3999','59'),new Goods('vivo','1888','100'))//可以合写

 实例化过程

①创建新构造对象

②构造函数this指向新对象

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

④返回新对象

1.3实例成员&静态成员 

实例成员 指的是实例对象中的属性和方法称之为实例成员

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

 

2.内置构造函数

 

2.1引用类型

Object，Array，RegExp，Date等

2.2包装类型

String，Number，Boolean等

2.1.1 Object 

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

const user = new Object({name:'小明',age:15})
//通过内置的构造函数创建普通对象


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

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

①Object.keys 静态方法获取对象中所有的属性（键）

语法：

const o = {name:'佩奇',age:6}
//获得对象的所有键并且返回是一个数组
const arr = Object.keys(o)
console.log(arr)//['name','age']

②Object.values静态方法获取对象中所有属性

const o = {name:'佩奇',age:6}
//获得对象的所有值并且返回是一个数组
const arr = Object.values(o)
console.log(arr)//['佩奇','6']

③Object.assgin静态方法拷贝对象

const o = {name:'佩奇',age:6}
//创建一个空对象 
const obj = {}
//调用静态方法 将O 拷贝给obj
Object.assign(obj,o)
console.log(obj)// {name:'佩奇',age:6}

该方法常用于给对象添加属性

//给O对象 新增属性和值
const o = {name:'佩奇',age:6}
Object.assign(o,{gender:'女'})
console.log(o)//{name:'佩奇',age:6,gender:'女'}

什么是静态方法？ 只能给构造函数使用的方法 比如Object.keys();

2.2.1Array

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

const arr = new Array(3,5)
创建数组建议使用字面量创建，不用 Array构造函数创建

 

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

基本语法 ：arr.reduce(function(){},起始值)

参数值 起始值可以省略，如果省略之后就从数组的第一个元素开始计算（初始值），如果不省略参数就作为第一次累加的初始值。

 

案例1  计算每位工资涨30%的时候 需要多支出多钱

 const arr = [{
            name:'张三',
            salary:10000
        },
        {
            name:'李四',
            salary:10000
        },
        {
            name:'李四',
            salary:10000
        },
    ]
    const sum = arr.reduce((prev,item)=>prev+item.salary*0.3,0);//  *0.3  并且是从0开始的
    console.log(sum);

arr的find方法

包含参数 当前元素的值、当前元素的索引，以及数组本身。

const arr = [

       {
        name:'小米',
        price:1999
       },
       {
        name:'华为',
        price:1999
       }
       ]
    //    const re=arr.find(function(item){
      
    //     return item.name==='小米'
       
    //    })
    //    console.log(re);

       const re=   arr.find(item => item.name==='小米')
       console.log(re);

arr的from方法  将伪数组转换为真数组

  //  Array.from(lis) 把伪数组转换为真数组
    const lis = document.querySelectorAll('ul li')
    // console.log(lis)
    // lis.pop() 报错
    const liss = Array.from(lis)
    liss.pop()
    console.log(liss)

其他实例化方法 

 

2.3String 

 

 

 

2.4 number的方法 是内置的构造函数，用于创建数值

toFixed方法

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

购物车案例

 <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茶叶,清洗球'
      }
    ]
    //渲染页面
    document.querySelector('.list').innerHTML=goodsList.map(item =>  {
     //解构赋值 方便调用
      const {name,price,picture,count,spec,gift}=item;
     
      //获取spec 的所有值并且用join 拼接
      const text = Object.values(spec).join('/')
      //判断是否具有 gift 参数 如果有 就返回赠品的数据 如果没有就返回空 
     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">${((price* 100*count)/100).toFixed(2)}</p>
    </div>` 
  }).join('');

  let  total = goodsList.reduce((prev,item) => prev+(item.price *100* item.count)/100,0);
 document.querySelector('.amount').innerHTML=total.toFixed(2);

  </script>