From f640169d42950f4d5cc607b59b28aaa69950ecf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=98=8E=E5=81=A5?= <2161737470@qq.com>
Date: Wed, 6 Dec 2023 11:41:02 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E5=8D=81=E4=B9=9D=E6=AC=A1=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231205 js\350\277\233\351\230\26602.md" | 375 ++++++++++++++++++
 1 file changed, 375 insertions(+)
 create mode 100644 "04 \346\235\216\346\230\216\345\201\245/20231205 js\350\277\233\351\230\26602.md"

diff --git "a/04 \346\235\216\346\230\216\345\201\245/20231205 js\350\277\233\351\230\26602.md" "b/04 \346\235\216\346\230\216\345\201\245/20231205 js\350\277\233\351\230\26602.md"
new file mode 100644
index 0000000..2631625
--- /dev/null
+++ "b/04 \346\235\216\346\230\216\345\201\245/20231205 js\350\277\233\351\230\26602.md"	
@@ -0,0 +1,375 @@
+#### 一.深入对象
+
+**构造函数**：是一种特殊的函数，主要用来初始化对象
+
+使用场景：==多个对象有相同属性，封装成一个构造函数==
+
+~~~ javascript
+// 创建一个构造函数,首字母要大写
+function Pig(uname,age){
+    this.uname = uname
+    this.age = age
+}
+// 创建对象
+const p1 = new Pig('佩奇',6)
+const p2 = new Pig('乔治',4)
+~~~
+
+实例成员：通过构造函数创建的对象称之为实例对象，==实例对象中==的属性和方法称之为==实例成员==（实例属性和实例方法）
+
+- 为构造函数传入参数，创建结构相同但值不同的对象
+- 构造函数创建的实例对象彼此独立互不影响
+
+静态成员：构造函数的属性和方法被称为静态成员（静态属性和静态方法）
+
+- 静态成员只能构造函数访问
+- 静态方法中 this 指向构造函数
+
+~~~ javascript
+// 静态成员
+function Pig(name){
+    this.name = name
+}
+Pig.eyes = 2	// 静态属性
+Pig.sayHi = function(){
+    log(this)
+}
+Pig.sayHi()		// 指向构造函数
+log(Pig.eyes)	// 2
+~~~
+
+#### 二.内置构造函数
+
+其实字符串。数值。布尔等基本数据类型也都有专门的构造函数，称为包装类型
+
+**Object**
+
+object 是内置的构造函数，用于创建普通对象
+
+三个常用静态方法：
+
+- **Object.keys**  获取对象中的所有属性（键），返回数组
+- **Object.keys**  获取对象中的所有属性值（值），返回数组
+- **Object.assign** 常用于对象拷贝
+
+~~~ javascript
+const o = {uname: 'pink',age: 18}
+log(Object.keys(o))		// [uname,age]
+log(Object.values(o))	// ['pink',18]
+// 拷贝
+const oo = {}
+Object.assign(oo,o)		// 将 o 对象拷贝给 oo 对象
+// 给对象追加属性
+Object.assign(o,{sex: '男'})
+log(o)				   // [uname: 'pink',age: 18,sex: '男']
+~~~
+
+**Array**
+
+Array 是内置构造函数，用于创建数组
+
+常用实例方法：
+
+| 方法        | 作用     | 说明                                                 |
+| ----------- | -------- | ---------------------------------------------------- |
+| **forEach** | 遍历数组 | 不返回数组，经常用于==查找遍历数组元素==             |
+| **filter**  | 过滤数组 | ==返回新数组==，返回==筛选满足条件==的数组元素       |
+| **map**     | 迭代数组 | ==放回新数组==，返回==处理之后==的数组元素           |
+| **reduce**  | 累计器   | 返回累计处理的结果，经常用于求和等                   |
+| **find**    | 查找元素 | 返回符合条件的第一个数组元素值，没则有返回undefined  |
+| **every**   | 检查数组 | 检查数组中所有元素，都满足某个条件，返回 true或false |
+| **some**    | 检查数组 | 检查数组中所有元素，有元素满足条件，返回 true或false |
+| **concat**  | 合并数组 | 合并两个数组，返回一个新数组                         |
+| **sort**    | 排序数组 | 对原数组单元值进行排序                               |
+| **reverse** | 反转数组 | 将数组反转                                           |
+
+~~~ javascript
+// 数组 reduce 方法
+const arr = [1,5,8]
+//1. 没有初始值
+const total = arr.reduce(function(prev,current){
+    return prev + current	//上一次的值 + 当前的值
+})
+log(total)	// 14
+//2. 有初始值
+const total = arr.reduce(function(prev,current){
+    return prev + current	//上一次的值 + 当前的值
+}.10)
+log(total)	// 24
+//3. 箭头函数写法
+const total = arr.reduce((prev,current) => prev + current, 10)
+~~~
+
+案例：有一个员工数组对象，计算当月支出多少薪资 
+
+~~~ javascript
+const arr =[
+  {
+      uname: '张三',
+      salary: 10000
+  },  {
+      uname: '李四',
+      salary: 10000
+  },  {
+      uname: '王五',
+      salary: 10000
+  }
+]
+//一定要有初始值，否则默认第一个对象为初始值
+const total = arr.reduce((prev,current) => prev + current.salary, 0)
+log(total)		// 30000
+~~~
+
+静态方法 **Array.from(数组)**	将伪数组转换为真数组
+
+~~~ javascript
+const lis = document.querySelectorAll('ul li')
+const liArr = Array.from(lis)
+~~~
+
+**String**
+
+常见实例方法1：
+
+| 方法                                    | 说明                                          |
+| --------------------------------------- | --------------------------------------------- |
+| **split(’分隔符’)**                     | 将字符串转换为数组，和 join() 相反            |
+| **substring(起始索引，结束索引)**       | 截取字符串                                    |
+| **startswith(检查字符串,检测开始索引)** | 检测是否以某字符开头，返回布尔值，endwith相反 |
+| **includes(搜索的字符串,位置索引)**     | 判断一个字符串是否包含某个字符                |
+
+**Number**
+
+​	**toFixed()** 设置保留小数位的长度
+
+~~~ javascript
+const num = 10.923
+log(num.toFixed(1))	//10.9
+log(num.toFixed(2))	//10.92
+log(num.toFixed())	//11 四舍五入
+~~~
+
+
+
+### 作业
+
+**综合案例**
+
+~~~ html
+<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茶叶,清洗球,宝马, 奔驰'
+          }
+        ]
+
+    const list = document.querySelector('.list')
+    // 渲染页面
+    list.innerHTML = goodsList.map(item => {
+      // 解构对象
+      let { name, price, picture, count, spec, gift } = item
+      // 单独处理赠品(如果有赠品就做处理，没有就是空字符串)
+      gift = gift ? gift.split(',').map(item => `<span class="tag">【赠品】${item}</span>`).join('') : ''
+      // 对SKU做处理
+      const str = Object.values(spec).join('/')
+      return `
+          <div class="item">
+            <img src="${picture}" alt="">
+            <p class="name">${name} ${gift}</p>
+            <p class="spec">${str}</p>
+            <p class="price">${price.toFixed(2)}</p>
+            <p class="count">x${count}</p>
+            <p class="sub-total">${(price * count).toFixed(2)}</p>
+          </div>
+        `
+    }).join('')
+
+    // 合计处理
+    document.querySelector('.amount').innerHTML = goodsList.reduce((sum, item) => sum + item.price * item.count, 0).toFixed(2)
+</script>
+~~~
+
+**购物车**
+
+~~~ html
+<script>
+    const dataArr = [
+      {
+        id: 1,
+        icon: 'img/火龙果.png',
+        isChecked: true,
+        num: 2,
+        price: 6,
+      },
+      {
+        id: 2,
+        icon: 'img/荔枝.png',
+        isChecked: false,
+        num: 7,
+        price: 20,
+      },
+      {
+        id: 3,
+        icon: 'img/榴莲.png',
+        isChecked: false,
+        num: 3,
+        price: 40,
+      },
+      {
+        id: 4,
+        icon: 'img/鸭梨.png',
+        isChecked: true,
+        num: 10,
+        price: 3,
+      },
+      {
+        id: 5,
+        icon: 'img/樱桃.png',
+        isChecked: false,
+        num: 20,
+        price: 34,
+      },
+    ]
+
+    // 1.1 定义一个渲染函数
+    function render() {
+      document.querySelector('.tbody').innerHTML = dataArr.map((item, index) => {
+        // 1.2 对象解构
+        let { id, icon, isChecked, num, price } = item
+        // 1.3 单独处理复选框是否被选
+        let checked = isChecked ? 'checked' : ''
+        // 1.4 通过 map 和 join 方法将数据拼接成一个大的字符串
+        return `
+        <div class="tr">
+            <div class="td"><input type="checkbox" ${checked}></div>
+            <div class="td"><img src="${icon}"></div>
+            <div class="td">${price}</div>
+            <div class="td">
+              <div class="my-input-number">
+                <button class="decrease"> - </button>
+                <span class="my-input__inner">${num}</span>
+                <button class="increase"> + </button>
+              </div>
+            </div>
+            <div class="td">${price * num}</div>
+            <div class="td"><button class="del" data-id="${index}">删除</button></div>
+          </div>
+        `
+      }).join('')
+
+      // 2 给 个数 模块添加点击事件（事件委托）
+      // 2.1 获取所有的加减按钮盒子
+      const buts = document.querySelectorAll('.my-input-number')
+
+      // 2.2 循环添加点击事件
+      for (let i = 0; i < buts.length; i++) {
+        buts[i].addEventListener('click', e => {
+          // 2.3 判断点击的是不是 加减按钮
+          // 如果点击的是 减号，num --
+          if (e.target.classList.contains('decrease')) {
+            // render(dataArr[i].num--)
+            dataArr[i].num <= 0 ? dataArr[i].num = 0 : dataArr[i].num--
+            // 如果点击的是 加号，num ++
+          } else if (e.target.classList.contains('increase')) {
+            // render(dataArr[i].num++)
+            dataArr[i].num++
+          }
+          render()
+        })
+      }
+
+      // 计算总价
+      getSum()
+      // 3. 全选和复选
+      const checks = document.querySelectorAll('.td [type=checkbox]')
+      const checkAll = document.querySelector('.bottom [type=checkbox]')
+      // console.log(checks);
+      // 给全选按钮添加点击事件
+      checkAll.addEventListener('click', function () {
+        // 将全选的状态，赋给所有复选框
+        checks.forEach((item, index) => {
+          checks[index].checked = this.checked
+          // console.log(dataArr);
+          // 更新数组 isChecked属性 是否选中
+          dataArr[index].isChecked = checks[index].checked
+          getSum()
+          // console.log(dataArr[index]);
+        })
+      })
+
+      // 循环给所有复选框添加点击事件
+      for (let i = 0; i < checks.length; i++) {
+        checks[i].addEventListener('click', function () {
+          // 通过当前复选框的状态，更新数组 isChecked属性
+          dataArr[i].isChecked = this.checked
+          // 如果数组中 isChecked 全是 true，则是全选，有一个为 false 则不是全选
+          checkAll.checked = dataArr.every(item => item.isChecked)
+          // console.log(dataArr[i]);
+          getSum()
+          // render()
+        })
+      }
+
+      // 5. 删除功能
+      const dels = document.querySelectorAll('.del')
+      // 给每个删除按钮添加点击事件
+      dels.forEach(item => {
+        item.addEventListener('click', e => {
+          // 根据自定义属性删除
+          dataArr.splice(e.target.dataset.id, 1)
+          if (!dataArr.length) {
+            document.querySelector('.empty').style.display = 'block'
+          }
+          render()
+        })
+      })
+
+    }
+    // 页面加载渲染一次
+    render()
+    // 4. 计算已选中的商品的总价
+    function getSum() {
+      let sum = 0
+      dataArr.forEach(item => {
+        if (item.isChecked) {
+          sum += item.price * item.num
+        }
+      })
+      // console.log(dataArr);
+      // console.log(sum);
+      document.querySelector('.price').innerHTML = sum
+      document.querySelector('.pay').innerHTML = `结算(${sum})`
+    }
+  </script>
+~~~
+
-- 
Gitee