JS第十九次笔记1 构造函数 1.1 深入对象 1.1.1 创建对象三种方式 3. 利用自定义构造函数创建对象（简化代码

1 构造函数

1.1 深入对象

1.1.1 创建对象三种方式

3. 利用自定义构造函数创建对象（简化代码）

  <script>
    //1.利用对象字面量创建
    const obj1 = {
      name: '小红',
    }

    //==========================================================

    //2.利用js内置构造函数Object创建对象
    const obj2 = new Object()
    obj2.name = '小明'
    console.log(obj2)

    //===========================================================
    //3.利用自定义的构造函数创建对象（重点）
    //3.1函数名要大写
    //3.2要与new连用
    function Person(a, b, c) {
      //this.属性名=属性值
      this.name = a
      this.age = b
      this.gender = c
    }
    //调用构造函数
    const obj3 = new Person('csq', 18, 'female')
    console.log(obj3)
    const obj4 = new Person('xsp', 22, 'male')
    console.log(obj4)


  </script>

自定义构造函数的输出结果（3）：

1.1.2 构造函数（1.1.1的（3）的延伸）

  <script>
    //new执行过程（伪代码）
    function Person(name) {
      //1.创建一个空对象
      const obj = {}
      //空对象指向新对象
      obj.name = name
      //返回新对象
      return obj

    }
    console.log(Person('zhangsan'))

    //以上代码可简化为：
    function Person(name) {
      this.name = name
    }
    console.log(new Person('zhangsan'))
  </script>

1.2 实例成员和静态成员（实例对象不能访问静态方法）

  <script>
    function Person(name) {
      //属性
      this.name = name;
      //方法
      this.sayHi = function () {
        console.log(`hi,${this.name}`);
      }
    }
    const obj = new Person('kim');
    //obj实例化对象能够访问的属性和方法叫做实例成员
    console.log(obj.name);
    console.log(obj.sayHi());

  </script>

1.3 一切皆对象

1.4 内置构造函数

1.4.1 object

不使用obj就要使用循环将属性循环输出 而通过调用Obj的方法可以直接得到所有哦属性值（得到的是数组）

1.4.1.1 keys和value

  <script>
    const obj = {
      name: "张三",
      age: 18
    }
    //1.获取对象的键（属性名）构造函数.keys(对象)
    const keyArr = Object.keys(obj)
    console.log(keyArr)
    //2.获取对象的值（属性值） 构造函数.values(对象)
    const valueArr = Object.values(obj)
    console.log(valueArr)

  </script>

1.4.1.2 assin（）拷贝

注意：const a=b是赋值操作，会让ab使用同一个内存空间

1.4.2 Arry

实例方法是供给实例对象调用的

1.4.2.1 reduce累计器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 实例化数组
    // const arr=new Arry(2,3)
    // const arr1=[]//数组的实例对象=>字面量的形式 

    // 求和函数
    const arr = [1, 2, 3, 4]
    //语法=>arr.reduce(function(上一次的值,当前值){}，起始值)
    const sum1=arr.reduce(function (prev, item) {
      console.log(prev)
      console.log(item)
      return prev + item//需要return ，否则会undefined(return给prev)
    }, 10)

    //执行过程：
    //1.有起始值。数组会从第一项开始累加：起始值+item(arr[0])
    //加完之后（return），会把本次结果给prev，prev重新赋值

    const sum2 = arr.reduce(function (prev, item) {
      return prev + item
    })
    //执行过程
    //2.没有起始值,则prev为数组的第一项（arr[0]）,item从数组的第二项开始
  </script>
</body>

</html>

1.4.2.2 数组常见方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const arr = [1, 2, 3, 4, 5, 6, 7]
    // 1.find方法
    //find()方法与fliter()方法类似，也是用于查找数组中符合条件的元素，
    // 但是find()方法只会返回符合条件的第一个元素，
    // 而filter()方法会返回所有符合条件的元素。
    const result = arr.find(function (item, index) {
      console.log(item, index)
      return item > 4
    })
    console.log(result)


    //箭头函数写法
    //没有用到index，可以省略
    //只有一个参数，可以省略括号
    //只有一句话，可以省略return和花括号
    const res = arr.find(item => item > 4)
    console.log(res)





    console.log('-----------------------every方法------------------------')

    //2.every方法=>查看数组中语速是否都满足条件，如果都满足，就返回true,否则false
    const arr1 = [10, 20, 30, 40, 50]
    const result1 = arr1.every(function (item, index) {
      return item >= 10

    })
    console.log(result1)


    //箭头函数写法：
    const res1 = arr1.every((item) => item >= 10)
    console.log(res1)
  </script>
</body>

</html>

1.4.2.3 将伪数组转换成真数组

·使用Arry.from（伪数组）将伪数组转化为新数组
· 注意：转化出的真数组是新数组，与伪数组是独立的，也就是说，伪数组仍然存在。只是转化为了真数组，并且用一个实体储存

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
  <script>
    //1.Arry.from()方法将伪数组转化为数组
    const lis = document.querySelectorAll('li');
    //querySelectorAll返回的是一个伪数组，需要转换为数组才能使用数组方法
    //但querySelectorAll可以使用forEach（）循环
    console.log(lis);

    console.log('--------------------------------------------');
    //将伪数组转换成真数组
    //数组的静态方法 const res=Arry.from（伪数组）
    const res = Array.from(lis);
    res.push(123)
    console.log(res);//已经转化成了真数组，所以可以使用push方法追加到尾部

    function fn() {
      console.log(arguments);
      const args = Arry.from(arguments)
      args.forEach(item => {

      });
    }
    fn(1, 2, 3, 4, 5)


  </script>
</body>

</html>

1.4.3 String

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const str = '今天天气好晴朗！'
    console.log(str.length)
    //字符串方法
    //1.将字符串拆分成数组
    //1.1空分割
    const arr1 = str.split('')
    console.log(arr1)
    //1.2以‘天气分割’
    const arr2 = str.split('天气')
    console.log(arr2)

    //2.将字符串进行截取(与索引相同，且选取不包含后一位数字)
    const res1 = str.substring(0, 1)//截取‘今’
    console.log(res1)

    //3.检测字符串是否以某个字符开头
    const res2 = str.startsWith('今')
    console.log(res2)//返回True
    //3.1也可以检测字符串是否以某个字符开头，并且检测位置
    const res3 = str.startsWith('天', 2)
    console.log(res3)//返回False


  </script>
</body>

</html>

结果：

1.5 案例

1.5.1（复选框全选）

业务实现：当全选框勾选的时候，其他三个小框也选中；当三个小框全勾选时，全选框也自动勾选上

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .div {
      width: 100%;
      height: 62px;
      background-color: skyblue;
      text-align: center;
    }

    .checkboxs {

      background-color: skyblue;
      font-size: 20px;
      line-height: 60px;
      text-align: center;

    }
  </style>
</head>

<body>
  <div>
    <label class="checkboxs">
      <input type="checkbox">
      <span class="checkmark"></span>
      一键勾选同意
      </input>
    </label>
  </div><br>


  <label class="minibox">
    <input type="checkbox">
    <span class="checkmark"></span>
    我比狗困
    </input>
  </label><br>

  <label class="minibox">
    <input type="checkbox">
    <span class="checkmark"></span>
    我比狗饿
    </input><br>

  </label>
  <label class="minibox">
    <input type="checkbox">
    <span class="checkmark"></span>
    我比马累
    </input><br>
  </label>

  <script>

    const allbox = document.querySelector('.checkboxs input[type="checkbox"]');
    const minibox = document.querySelectorAll('.minibox input[type="checkbox"]');
    allbox.addEventListener('click', () => {
      minibox.forEach(item => item.checked = allbox.checked)
    })
    minibox.forEach(item => {
      item.addEventListener('click', () => {
        //每次点击小按钮，都循环所有小按钮查看状态(用every方法，但是伪数组用不了，所以需要转化为真数组)
        //伪数组转真数组
        const realminibox = Array.from(minibox);
        //判断三个小选中框是否全部选中
        const res = realminibox.every(function (ele) {
          //将真假值return给res
          //在控制台逐一输出小盒子真数组的checked状态并观察变化
          console.log(ele.checked)
          return ele.checked

        })

        allbox.checked = res

      })
    })
  </script>

</body>

</html>

1.5.2 翻转字符串

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //本质就是利用数组的reverse()方法，需要先将字符串逐字分割，
    // 并作为元素添加到数组中，再利用reverse()方法进行翻转
    const str = 'NEWJEANS'
    console.log('翻转前：')
    console.log(str)

    //1.将字符串转化为数组
    const arr = str.split('')
    console.log(arr)

    //2.将数组进行翻转
    const newArr = arr.reverse()
    console.log(newArr)

    //3.将数组转化为字符串
    const str1 = newArr.join('')
    console.log('翻转后：')
    console.log(str1)


  </script>
</body>

</html>

1.6 Number 数字方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const num = 10
    console.log(num.toFixed())
    console.log(num.toFixed(2))
    console.log(10.235.toFixed(2))
  </script>
</body>

</html>

结果：

1.7 渲染案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 100px auto 0;
    }

    .item {
      padding: 15px;
      transition: all .5s;
      display: flex;
      border-top: 1px solid #e4e4e4;
    }

    .item:nth-child(4n) {
      margin-left: 0;
    }

    .item:hover {
      cursor: pointer;
      background-color: #f5f5f5;
    }

    .item img {
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }

    .item .name {
      font-size: 18px;
      margin-right: 10px;
      color: #333;
      flex: 2;
    }

    .item .name .tag {
      display: block;
      padding: 2px;
      font-size: 12px;
      color: #999;
    }

    .item .price,
    .item .sub-total {
      font-size: 18px;
      color: firebrick;
      flex: 1;
    }

    .item .price::before,
    .item .sub-total::before,
    .amount::before {
      content: "¥";
      font-size: 12px;
    }

    .item .spec {
      flex: 2;
      color: #888;
      font-size: 14px;
    }

    .item .count {
      flex: 1;
      color: #aaa;
    }

    .total {
      width: 990px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      border-top: 1px solid #e4e4e4;
      padding: 20px;
    }

    .total .amount {
      font-size: 18px;
      color: firebrick;
      font-weight: bold;
      margin-right: 50px;
    }
  </style>
</head>

<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茶叶,清洗球'
      }
    ]


    //业务一：渲染页面 map+join(渲染到list标签里)
    const list = document.querySelector('.list')
    // 将goodlist数组中的对象
    list.innerHTML = goodsList.map(function (item) {
      // 解构赋值
      let { picture, name, price, count, spec, gift } = item
      gift = gift ? gift.split(',').map(function (item) {
        return `<span class="tag">【赠品】${item}</span></p>`
      }) : ' '

      //业务二：处理规格型号
      return `
      <div class="item">
      <img src="${picture}" alt="">
      <p class="name">
      ${name}${gift}</p>
      <p class="spec">${Object.values(spec).join('/')}</p>
      <p class="price">
      ${price.toFixed()}</p>
      <p class="count">x${count}</p>
      <p class="sub-total">${((price * 10 * count) / 10).toFixed(2)}</p>
    </div>
  `
    }).join('')

    // 总计处理
    const total = goodsList.reduce((prev, item) => {
      (item.price * 10 * item.count) / 10
      return prev + item.price * 10 * item.count
    }, 0)//0是起始值
    console.log(total.toFixed(2))
    document.querySelector('.total').innerHTML = `
      <p class="total-price">${total.toFixed(2)}</p>
      <p class="total-count">${goodsList.length}</p>
    `
  </script>
</body>

</html>