From 5dd6c6182bd879fdf7b968221cb5e51a114345e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=BF=97=E4=BC=9F?= <2152890632@qq.com>
Date: Mon, 11 Dec 2023 21:47:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...76\344\271\246\347\256\241\347\220\206.md" |  124 ++
 ...07\346\273\244\347\255\233\351\200\211.md" | 1093 +++++++++++++++++
 2 files changed, 1217 insertions(+)
 create mode 100644 "19\345\275\255\345\213\207\346\226\214/\345\233\276\344\271\246\347\256\241\347\220\206.md"
 create mode 100644 "19\345\275\255\345\213\207\346\226\214/\350\277\207\346\273\244\347\255\233\351\200\211.md"

diff --git "a/19\345\275\255\345\213\207\346\226\214/\345\233\276\344\271\246\347\256\241\347\220\206.md" "b/19\345\275\255\345\213\207\346\226\214/\345\233\276\344\271\246\347\256\241\347\220\206.md"
new file mode 100644
index 0000000..9ec7365
--- /dev/null
+++ "b/19\345\275\255\345\213\207\346\226\214/\345\233\276\344\271\246\347\256\241\347\220\206.md"
@@ -0,0 +1,124 @@
+图书管理
+
+```html
+<script>
+// 定义变量
+ let tbody = document.querySelector("body > div.container > table > tbody"); // 获取页面中的table的tbody元素
+ let addModal = document.querySelector("body > div.modal.fade.add-modal"); // 获取页面中的添加模态框
+ let editModal = document.querySelector("body > div.modal.fade.edit-modal"); // 获取页面中的编辑模态框
+tbody.innerHTML = ''; // 清空tbody元素的内容
+
+// 渲染函数
+function render() {
+    // 发送请求获取书籍数据
+    axios({
+        url: 'https://hmajax.itheima.net/api/books', // 请求地址
+        params: {
+            creator: 'zhc' // 请求参数
+        }
+    }).then(res => {
+        tbody.innerHTML = ''; // 清空tbody元素的内容
+        res.data.data.forEach((item, i) => { // 遍历返回的书籍数据
+            let {id, bookname, author, publisher} = item; // 解构赋值
+            let tr = document.createElement(`tr`); // 创建一个tr元素
+            tr.innerHTML = `
+            <td>${i + 1}</td>
+            <td>${bookname}</td>
+            <td>${author}</td>
+            <td>${publisher}</td>
+            <td data-id="${id}">
+            <span class="del">删除</span>
+            <span class="edit">编辑</span>
+            </td>
+            `; // 设置td元素的内容
+
+            tbody.appendChild(tr); // 将tr元素添加到tbody中
+        })
+    }).catch(err => {
+        // console.log(err);
+    })
+}
+
+render(); // 调用渲染函数
+
+// 添加书籍函数
+function addBook() {
+    let addform = addModal.querySelector('.modal-body.form-wrap .add-form'); // 获取添加模态框中的表单元素
+    let inputs = serialize(addform, {hash: true, empty: true}); // 序列化表单的输入值
+    if (inputs.bookname.trim() === '' || inputs.author.trim() === '' || inputs.publisher.trim() === '') {
+        return alert('请填写完整'); // 如果有空项，则弹出提示框
+    } else {
+        axios({
+            url: 'https://hmajax.itheima.net/api/books', // 请求地址
+            method: 'post', // 请求方法为post
+            data: {
+                creator: 'zhc', // 请求参数
+                ...inputs // 将序列化后的表单值传递给请求数据
+            }
+        }).then(res => {
+            // console.log(res);
+            bootstrap.Modal.getOrCreateInstance(addModal).hide(); // 隐藏添加模态框
+
+            addform.reset(); // 清空表单数据
+            render(); // 重新渲染数据
+        }).catch(err => {
+            // console.log(err);
+        })
+    }
+}
+
+addModal.querySelector('.btn.btn-primary.add-btn').onclick = function () { // 给添加按钮添加点击事件
+    addBook(); // 调用添加书籍函数
+}
+
+tbody.addEventListener('click', e => { // 给tbody元素添加点击事件
+    if (e.target.className === 'del') { // 如果点击的目标元素的类名为del
+        if (confirm('确定要删除吗？')) { // 如果确认删除
+            let id = e.target.parentNode.dataset.id; // 获取删除按钮所在的行的id值
+            // console.log(id);
+            axios({
+                url: `https://hmajax.itheima.net/api/books/${id}`, // 请求地址，拼接书籍id
+                method: 'delete' // 请求方法为delete
+            }).then(res => {
+                // console.log(res);
+                render(); // 重新渲染数据
+            }).catch(err => {
+                // console.log(err);
+            })
+        }
+    }
+    if (e.target.className === 'edit') { // 如果点击的目标元素的类名为edit
+        let id = e.target.parentNode.dataset.id; // 获取编辑按钮所在的行的id值
+        let inputs = editModal.querySelector('.edit-form'); // 获取编辑模态框中的表单元素
+        axios({
+            url: `https://hmajax.itheima.net/api/books/${id}`, // 请求地址，拼接书籍id
+            method: 'get' // 请求方法为get
+        }).then(res => {
+            let {id, bookname, author, publisher} = res.data.data; // 获取书籍信息
+            inputs.querySelector('.id').value = id; // 设置表单的id值
+            inputs.querySelector('.bookname').value = bookname; // 设置表单的bookname值
+            inputs.querySelector('.author').value = author; // 设置表单的author值
+            inputs.querySelector('.publisher').value = publisher; // 设置表单的publisher值
+        }).catch(err => {
+            // console.log(err);
+        })
+        bootstrap.Modal.getOrCreateInstance(editModal).show(); // 显示编辑模态框
+        editModal.querySelector('.btn.btn-primary.edit-btn').onclick = function () { // 给编辑按钮添加点击事件
+            let editform = editModal.querySelector('.edit-form'); // 获取编辑模态框中的表单元素
+            let data = serialize(editform, {hash: true, empty: true}); // 序列化表单的输入值
+            axios({
+                url: `https://hmajax.itheima.net/api/books/${id}`, // 请求地址，拼接书籍id
+                method: 'put', // 请求方法为put，更新数据
+                data
+            }).then(res => {
+                // console.log(res);
+                bootstrap.Modal.getOrCreateInstance(editModal).hide(); // 隐藏编辑模态框
+                render(); // 重新渲染数据
+            }).catch(err => {
+                // console.log(err);
+            })
+        }
+    }
+})
+</script>
+```
\ No newline at end of file
diff --git "a/19\345\275\255\345\213\207\346\226\214/\350\277\207\346\273\244\347\255\233\351\200\211.md" "b/19\345\275\255\345\213\207\346\226\214/\350\277\207\346\273\244\347\255\233\351\200\211.md"
new file mode 100644
index 0000000..52af759
--- /dev/null
+++ "b/19\345\275\255\345\213\207\346\226\214/\350\277\207\346\273\244\347\255\233\351\200\211.md"
@@ -0,0 +1,1093 @@
+## 过滤筛选
+
+### 块作用域
+
+```html
+<script>
+    //   function f1(){
+    //       var n = 999;     
+    //       function f2(){
+    //         console.log(n); //999
+    //       }  
+    //       return f2//返回内部函数f2，这样在f1中就能读取f2的数据和函数等价于window.f2 = f2;     
+    //   }
+
+    // // f1()();
+    // // 
+    // let f3 = f1();
+    // f3();
+
+    // // let const
+    for (let i = 1; i <= 3; i++) {
+      // 块作用域
+      console.log('内：' + i)
+    }
+    console.log(i) //
+    var a = 1;
+    var a =10;
+
+    // let i = 0;
+    // for (let index = i; index < 2; index++) {
+    //   console.log(index);
+    // }
+    // //  i = 1;
+    // if (true) {
+    //   let i = 10 // 这个只在{}里可见，提升作用域
+    // }
+
+    // console.log(i) //10
+  </script>
+```
+
+### js垃圾回收
+
+```html
+ <script>
+    for (let i = 1; i <= 3; i++) {}
+    let num = 10
+    function fn() {
+      const str = 'andy'
+      // str = 'lily'
+      console.log(str)
+    }
+    fn()
+    fn()
+    fn()
+  </script>
+```
+
+### 闭包
+
+```html
+<script>
+    // // 简单的写法
+    function outer() {
+      let a=100;
+      function x(){
+        console.log(a);
+      }
+      return x;
+    }
+    outer()()
+
+    // 常见的闭包的形式   外部可以访问使用 函数内部的变量
+    // function outer() {
+    //   let a = 100
+    //   function fn() {
+    //     console.log(a)
+    //   }
+    //   return fn
+    // }
+
+    // outer()();
+
+    // outer()   ===  fn   ===  function fn() {}
+    // const fun = function fn() { }
+
+    // // 常见的写法2
+    // function outer() {
+    //   let a = 100
+    //   return function () {
+    //     console.log(a)
+    //   }
+    // }
+    // const fun = outer()
+    // fun() // 调用函数
+
+    // 外面要使用这个 10
+
+    // 闭包的应用 
+    // 普通形式 统计函数调用的次数
+    // let i = 0
+    // function fn() {
+    //   i++
+    //   console.log(`函数被调用了${i}次`)
+    // }
+
+    // fn();
+    // i = 100;
+    // fn();
+    // fn();
+    //  因为 i 是全局变量，容易被修改
+    // 闭包形式 统计函数调用的次数
+    function count() {
+      let i = 0
+      function fn() {
+        i++
+        console.log(`函数被调用了${i}次`)
+      }
+      return fn
+    }
+    const fun = count()
+    fun();
+    i = 100;
+    fun();
+    fun();
+    fun();
+  </script>
+```
+
+### 变量提升
+
+```html
+<script>
+    var a;
+    console.log(a);
+    // var a = 10;
+
+    // 1. 把所有var声明的变量提升到 当前作用域的最前面
+    // 2. 只提升声明， 不提升赋值
+    // var num
+    // console.log(num + '件')
+    // num = 10
+    // console.log(num)
+    // var 全局，会提到前面
+
+    // function fn() {
+    //   console.log(num)
+    //   var num = 10
+    // }
+    // fn()
+</script>
+<script>
+    // function fn() {
+    //   console.log('函数提升')
+    // }
+    // var fun
+    // // 1. 会把所有函数声明提升到当前作用域的最前面
+    // // 2. 只提升函数声明，不提升函数调用
+    // fn()
+
+    fun()
+    var fun = function () {
+      console.log('函数表达式')
+    }
+    // 函数表达式 必须先声明和赋值， 后调用 否则 报错
+</script>
+```
+
+### 函数动态参数
+
+```html
+<script>
+    // 设计一个求和函数，统计任意多个数字的和
+    function getSum() {
+      // arguments 是伪数组，不能用真数组的方法
+      // arguments 动态参数 只存在于 函数里面
+      // 是伪数组 里面存储的是传递过来的实参
+      // console.log(a + b);
+      // console.log(arguments);
+      let sum = 0;
+      for (let i = 0; i < arguments.length; i++) {
+        sum += arguments[i];
+      }
+      console.log(sum);;
+    }
+    getSum(1, 2, 3, 4, 5, 6, 7, 78)
+  </script>
+```
+
+### 函数参数剩余参数
+
+```html
+<script>
+    // https://cn.bing.com/search?q=参数1&PC=参数2&FORM=参数3
+
+    // function getUrl(url, ...x) {
+    //   console.log(url, x);
+    //   console.log(url + '?q=' + x[0] + '&PC=' + x[1] + '&FORM=' + x[2]);
+    // }
+    // getUrl('https://cn.bing.com/search', '参数1', '参数2', '参数3',)
+
+    function getSum(...c) {
+      // arguments
+      // console.log(c)  // 使用的时候不需要写 .
+      c.forEach(i => {
+        console.log(i);
+      });
+    }
+    // getSum(2, 3)
+    // getSum(1, 2, 3, 4, 5)
+    // getSum(1)
+  </script>
+```
+
+### 展开运算符
+
+```html
+<script>
+    const arr1 = [1, 3, 5, 7, 9]
+    const arr2 = [2, 4, 6, 8, 10]
+    const arr3 = [...arr1, ...arr2]; // [1, 3, 5, 7, 9,2, 4, 6, 8, 10]
+    console.log(arr3);
+    console.log(arr1 + arr2);
+    console.log(arr3.sort(function (a, b) {
+      return b - a;
+    }));
+
+    // console.log(Math.max(...arr1));
+
+    // // 展开运算符 可以展开数组
+    // console.log(...arr1)
+    // // 求和函数
+    // function getSum() {
+    //   // arguments 是伪数组，不能用真数组的方法
+    //   // console.log(a + b);
+    //   // console.log(arguments);
+    //   let sum = 0;
+    //   for (let i = 0; i < arguments.length; i++) {
+    //     sum += arguments[i];
+    //   }
+    //   console.log(sum);;
+    // }
+
+    // getSum(...arr1)
+
+    // // console.log(Math.max(1, 2, 3))
+    // // ...arr1  === 1,2,3
+    // // 1 求数组最大值
+    // console.log(Math.max(...arr1)) // 3
+    // console.log(Math.min(...arr1)) // 1
+    // // 2. 合并数组
+    // const arr2 = [3, 4, 5]
+    // const arr = [...arr1, ...arr2]
+    // console.log(arr)
+  </script>
+```
+
+### 箭头函数的基本语法
+
+```html
+ <script>
+    // 箭头函数，只能用在函数表达式的形式止
+    // const fn1 = (a, b) => a + b;
+
+    // console.log(fn1(1, 2));
+    // 1. 箭头函数 基本语法 箭头函数为了简化书写的
+    // const fn = () => {
+    //   console.log(123)
+    // }
+    // fn()
+    // const fn = (x) => {
+    //   console.log(x)
+    // }
+    // fn(1)
+    // 2. 只有一个形参的时候，可以省略小括号
+    // const fn = x => console.log(x)
+
+    // fn(100)
+    // // 3. 只有一行代码的时候，我们可以省略大括号
+    // const fn = x => console.log(x)
+    // fn(1)
+    // 4. 只有一行代码的时候，可以省略return
+    // const fn = x => x + x
+    // console.log(fn(1))
+    // 5. 箭头函数可以直接返回一个对象
+    // const fn = (uname) => ({ uname: uname })
+    // console.log(fn('刘德华'))
+    // const a = {
+    //   name: '张三',
+    //   age: 18
+    // }
+
+    // function getObj(Myname, Myage) {
+    //   // let obj = {};
+    //   // obj.name = Myname;
+    //   // obj.age = Myage;
+    //   // return obj;
+    //   return { name: Myname, age: Myage }
+    // }
+
+    // const getObj = (Myname, Myage) => ({ name: Myname, age: Myage })
+
+
+    // console.log(getObj('刘德华', 18));
+     
+    // const fn = x => '我是箭头，你是函数' + x;
+    const fn = uname => { name: uname };
+    console.log(fn('成龙'));
+</script>
+```
+
+### 箭头函数的参数
+
+```html
+<script>
+    // 1. 利用箭头函数来求和
+    const getSum = (...a) => {
+    // arr就是一个参数的数组，是真数组，保存了所有传递进来的参数 sort()
+      console.log(arr.reduce(function (a, b) {
+        return a + b;
+      }, 0));
+    }
+    getSum(1, 1)
+  </script>
+```
+
+### 箭头函数的this
+
+```html
+ <script>
+    // 以前this的指向：  谁调用的这个函数，this 就指向谁
+    // console.log(this)  // window
+
+    // 普通函数
+    // function fn() {
+    //   console.log(this)  // window
+    // }
+    // window.fn()
+    // 对象方法里面的this
+    // const obj1 = {
+    //   name: 'andy',
+    //   sayHi: function () {
+    //     console.log(this)  // obj
+    //   }
+    // }
+    // obj1.sayHi()
+
+    // 2. 箭头函数的this  是上一层作用域的this 指向
+    // const fn = () => {
+    //   console.log(this)  // window
+    // }
+    // window.fn()
+    // 对象方法箭头函数 this
+    // console.log(this);
+    // const obj = {
+    //   uname: 'Tony老师',
+    //   sayHi: () => {
+    //     console.log(this)  // this 指向谁 obj？ window
+    //   }
+    // }
+    // obj.sayHi() //obj的上一级，window
+
+    // const obj = {
+    //   uname: 'Tony老师',
+    //   sayHi: function () {
+    //     // 外层函数
+    //     console.log(this)  // 普通函数指向调用者本身 obj
+    //     let i = 10
+    //     const count = () => {
+    //       // 内层函数
+    //       console.log(this)  // 指向当前调用者的上一级 obj
+    //     }
+    //     count()
+    //   }
+    // }
+    // obj.sayHi()
+  </script>
+```
+
+### 数组解构
+
+```html
+<script>
+    // 交换两个数的值
+    // let a = 1;
+    // let b = 2;
+    // 以前教的方法1，通过第三个变量 2.+-
+    // a = a + b; //3
+    // b = a - b; //1
+    // a = a - b;  //  2
+    [b, a] = [a, b]
+    console.log(a, b);
+
+    // const arr = [100, 60, 80]
+    // const a = arr[0]; // 100
+    // const b = arr[1]; // 100
+    // const c = arr[2]; // 100
+    // const [a, b, c, d] = arr; //const a=100,b=60,c=80,d;
+    // console.log(d);
+
+    // 解构 ，1，格式保留 [] = []
+    // 解构的变量，与原数组的位置一一对应的 ，变量与原数据的数量不一定这完全一样
+
+    // 数组解构 赋值
+    // const [max, min, avg] = arr
+    // const [max, min] = [100, 60, 80]
+    // // // const max = arr[0]
+    // // // const min = arr[1]
+    // // // const avg = arr[2]
+    // // console.log(max) // 100
+    // // console.log(min) // 80
+    // 交换2个变量的值
+    let a = 1
+    let b = 2;
+    const arr = [a, b]
+    [b, a] = arr;
+    console.log(a, b)
+  </script>
+```
+
+### 数组解构细节
+
+```html
+<script>
+    // a = 10;
+    // const pc = ['海尔', '联想', '小米', '方正']; //4
+    // [hr, lx, mi, fz] = pc //4
+    // console.log(hr, lx, mi, fz);
+
+    // function getValue() {
+    //   let a = 10
+    //   // return [100, 60]  // 返回数组
+    // }
+    // // [max, min] = getValue()
+    // // console.log(max, min);
+    // // console.log(window);
+    // getValue()
+    // console.log(a);
+
+    // const pc = ['海尔', '联想', '小米', '方正']
+    // const [hr, lx, mi, fz] = ['海尔', '联想', '小米', '方正'];
+    // console.log(hr)
+    // console.log(lx)
+    // console.log(mi)
+    // console.log(fz)
+
+    // // 请将最大值和最小值函数返回值解构 max 和min 两个变量
+    // function getValue() {
+    //   return [100, 60]
+    // }
+    // const [max, min] = getValue()
+    // console.log(max)
+    // console.log(min)
+    // 1. 变量多， 单元值少 ， undefined
+    // const [a, b, c, d] = [1, 2, 3]
+    // console.log(a) // 1
+    // console.log(b) // 2
+    // console.log(c) // 3
+    // console.log(d) // undefined
+    // 2. 变量少， 单元值多
+    // const [a, b] = [1, 2, 3]
+    // console.log(a) // 1
+    // console.log(b) // 2
+    // 3.  剩余参数 变量少， 单元值多
+    // const [a, b, ...c] = [1, 2, 3, 4]
+    // console.log(a) // 1
+    // console.log(b) // 2
+    // console.log(c) // [3, 4]  真数组
+    // 4.  防止 undefined 传递
+    // const [a = 0, b = 0, c = 0] = [1, 2, 3]
+    // // const [a = 0, b = 0] = []
+    // console.log(a) // 1
+    // console.log(b) // 2
+    // console.log(c) // 2
+    // 5.  按需导入赋值
+    // const [a, b, , c] = [1, 2, 3, 4]
+    // console.log(a, b, c);
+
+    const arr = [1, 2, [3, 4]]
+    // console.log(arr[2][1]);
+    // 定义四变量 abcd
+    // a = arr[0]
+    // b = arr[1]
+    // c = arr[2][0]
+    // d = arr[2][1]
+    const [a, b, [c, d]] = arr;
+    console.log(a, b, c, d);
+
+    // 多维数组解构
+    // const arr = [1, 2, [3, 4]]
+    // const [a, b, c] = [1, 2, [3, 4]]
+    // console.log(a) // 1
+    // console.log(b) // 2
+    // console.log(c) // [3,4]
+
+    // const [a, b, [c, d]] = [1, 2, [3, 4]]
+    // console.log(a) // 1
+    // console.log(b) // 2
+    // console.log(c) // 3
+    // console.log(d) // 4
+  </script>
+```
+
+### 必须加分号的两种情况
+
+```html
+<script>
+    // 1. 立即执行函数要加
+    (function () { })();
+    (function () { })();
+    
+    // 2. 直接使用数组对象的时候
+    const arr = [11, 222];
+    arr.forEach(function () {
+    });
+    [33, 666].forEach(function () {
+    });
+    [a,c] = arr;
+
+    // const arr = [1, 2, 3]
+    // const str = 'pink';
+    // [1, 2, 3].map(function (item) {
+    //   console.log(item)
+    // })
+
+    // let a = 1
+    // let b = 2
+    //   ;[b, a] = [a, b]
+
+    // console.log(a, b)
+  </script>
+```
+
+### 对象解构
+
+```html
+<script>
+    // // 对象解构
+    // const obj = {
+    //   uname: 'pink老师',
+    //   age: 18
+    // }
+
+    // const { uname: name, age } = obj;
+    // // select a as b from a;
+    // console.log(name);
+
+    // const uname = 'red老师'
+    // 解构的语法
+    // const { uname, age } = {age: 18, uname: 'pink老师' }
+    // // 等价于 const uname =  obj.uname
+    // // 要求属性名和变量名必须一直才可以
+    // console.log(uname)
+    // console.log(age)
+    // 1. 对象解构的变量名 可以重新改名  旧变量名: 新变量名
+    // const { uname: username, age } = { uname: 'pink老师', age: 18 }
+
+    // console.log(username)
+    // console.log(age)
+
+    // 2. 解构数组对象
+    const pigs = [
+      {
+        uname: '佩奇',
+        age: 6
+      }
+    ]
+    const [{ uname, age }] = pigs;
+    console.log(uname, age);
+
+    // const [{ uname, age }] = pig
+    // console.log(uname)
+    // console.log(age)
+  </script>
+```
+
+### 多级对象解构
+
+```html
+ <script>
+    const pig = {
+      name: '佩奇',
+      family: {
+        mother: '猪妈妈',
+        father: '猪爸爸',
+        sister: '乔治'
+      },
+      age: 6
+    }
+    // // 多级对象解构
+    const { name, family: { mother, father, sister }, age } = pig
+    console.log(name)
+    // console.log(family)
+    console.log(age)
+    console.log(mother)
+    console.log(father)
+    console.log(sister)
+
+    // const person = [
+    //   {
+    //     name: '佩奇',
+    //     family: {
+    //       mother: '猪妈妈',
+    //       father: '猪爸爸',
+    //       sister: '乔治'
+    //     },
+    //     age: 6
+    //   }
+    // ]
+    // const [{ name, family: { mother, father, sister } }] = person
+    // console.log(name)
+    // console.log(mother)
+    // console.log(father)
+    // console.log(sister)
+  </script>
+```
+
+### 多级对象解构案例
+
+```html
+<body>
+  <ul></ul>
+  <script>
+    // 1. 这是后台传递过来的数据
+    const msg = {
+      "code": 200, // 正常 
+      "msg": "获取新闻列表成功",
+      "data": [
+        {
+          "id": 1,
+          "title": "5G商用自己，三大运用商收入下降",
+          "count": 58
+        },
+        {
+          "id": 2,
+          "title": "国际媒体头条速览",
+          "count": 56
+        },
+        {
+          "id": 3,
+          "title": "乌克兰和俄罗斯持续冲突",
+          "count": 1669
+        },
+      ]
+    }
+
+    // const { data } = msg;  // vue // 解构得到数组
+
+    // 声明一个函数，专用用来解构一个对角，并渲染
+    function render({ data: mydata }) {
+      let data = 111;
+      const str = mydata.map(function (item) {
+        return `
+      <li><i>编号${item.id}</i><span>${item.title}</span>点击：${item.count}</li>
+      `;
+      })
+      const ul = document.querySelector('ul')
+      ul.innerHTML = str.join('');
+    }
+
+    render(msg)
+
+    // const arr = msg.data //[]
+    // const str = arr.map(function (item) {
+    //   return `
+    //   <li><i>编号${item.id}</i><span>${item.title}</span>点击：${item.count}</li>
+    //   `;
+    // })
+    // const ul = document.querySelector('ul')
+    // ul.innerHTML = str.join('');
+
+    // 需求1： 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面
+    // const { data } = msg
+    // console.log(data)
+    // 需求2： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数
+    // const { data } = msg
+    // msg 虽然很多属性，但是我们利用解构只要 data值
+    // function render({ data }) {
+    //   // const { data } = arr
+    //   // 我们只要 data 数据
+    //   // 内部处理
+    //   console.log(data)
+    // }
+    // render(msg)
+
+    // 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData
+    // function render({ data: myData }) {
+    //   // 要求将 获取过来的 data数据 更名为 myData
+    //   // 内部处理
+    //   console.log(myData)
+    // }
+    // render(msg)
+  </script>
+</body>
+```
+
+### forEach语法
+
+```html
+<script>
+    // forEach 就是遍历  加强版的for循环  适合于遍历数组对象 map 有返回值，foreach无返回
+    const arr = ['red', 'green', 'pink']
+    const result = arr.forEach(function (item, index) {
+      console.log(item)  // 数组元素 red  green pink
+      console.log(index) // 索引号
+    })
+    console.log(result)
+  </script>
+```
+
+### 渲染商品案例
+
+```html
+<body>
+  <div class="list">
+    <!-- <div class="item">
+      <img src="" alt="">
+      <p class="name"></p>
+      <p class="price"></p>
+    </div> -->
+  </div>
+  <script>
+    const goodsList = [
+      {
+        id: '4001172',
+        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
+        price: '289.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
+      },
+      {
+        id: '4001594',
+        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
+        price: '288.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
+      },
+      {
+        id: '4001009',
+        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
+        price: '109.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
+      },
+      {
+        id: '4001874',
+        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
+        price: '488.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
+      },
+      {
+        id: '4001649',
+        name: '大师监制龙泉青瓷茶叶罐',
+        price: '139.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
+      },
+      {
+        id: '3997185',
+        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
+        price: '108.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
+      },
+      {
+        id: '3997403',
+        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
+        price: '99.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
+      },
+      {
+        id: '3998274',
+        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
+        price: '139.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
+      },
+    ]
+
+    // // 1. 声明一个字符串变量,将整个数组的对象。转换html,拼接成一个字符串，最后统一innerHtml
+    // let str = '';
+    // // 遍历数组
+    // goodsList.forEach((item) => {
+    //   // 解析item里属性
+    //   const { id, name, price, picture } = item;
+    //   // 将对象拼成一个html代码
+    //   str += `
+    //   <div class="item">
+    //   <img src="${picture}" alt="${id}">
+    //   <p class="name">${name}</p>
+    //   <p class="price">${price}</p>
+    // </div>
+    //   `;
+    // })
+
+    // const list = document.querySelector('.list');
+    // list.innerHTML = str;
+
+    // map
+    // const str = goodsList.map((item) => {
+    //   // 解析item里属性
+    //   const { id, name, price, picture } = item;
+    //   return `
+    //   <div class="item">
+    //   <img src="${picture}" alt="${id}">
+    //   <p class="name">${name}</p>
+    //   <p class="price">${price}</p>
+    // </div>`;
+    // })
+    // const list = document.querySelector('.list');
+    // list.innerHTML = str.join('');
+
+    const list = document.querySelector('.list');
+    goodsList.forEach((item) => {
+      const { id, name, price, picture } = item;
+      const div = document.createElement('div');
+      div.classList.add('item');
+      div.innerHTML = `<img src="${picture}" alt="${id}">
+      <p class="name">${name}</p>
+      <p class="price">${price}</p>`
+      list.appendChild(div)
+    })
+
+    // 3.生成的 字符串 添加给 list
+    // document.querySelector('.list').innerHTML = str
+
+    // 父节点追加子节点
+    // goodsList.forEach(item => {
+    //   const { name, price, picture } = item;
+    //   const div = document.createElement('div');
+    //   div.classList.add('item');
+    //   div.innerHTML = `<img src=${picture} alt="">
+    //     <p class="name">${name}</p>
+    //     <p class="price">${price}</p>`;
+    //   document.querySelector('.list').appendChild(div)
+    // });
+
+    // //map
+    // const strArr = goodsList.map(function (item, index) {
+    //   const { name, price, picture } = item
+    //   return `
+    //   <div class="item">
+    //     <img src=${picture} alt="">
+    //     <p class="name">${name}</p>
+    //     <p class="price">${price}</p>
+    //   </div>
+    //   `;
+    // })
+    // document.querySelector('.list').innerHTML = strArr.join('')
+  </script>
+</body>
+```
+
+### 价格筛选
+
+```html
+<body>
+  <div class="filter">
+    <a data-index="1" href="javascript:;">0-100元</a>
+    <a data-index="2" href="javascript:;">100-300元</a>
+    <a data-index="3" href="javascript:;">300元以上</a>
+    <a href="javascript:;">全部区间</a>
+  </div>
+  <div class="list">
+    <!-- <div class="item">
+      <img src="" alt="">
+      <p class="name"></p>
+      <p class="price"></p>
+    </div> -->
+  </div>
+  <script>
+    // 2. 初始化数据
+    const goodsList = [
+      {
+        id: '4001172',
+        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
+        price: '289.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
+      },
+      {
+        id: '4001594',
+        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
+        price: '288.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
+      },
+      {
+        id: '4001009',
+        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
+        price: '109.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
+      },
+      {
+        id: '4001874',
+        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
+        price: '488.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
+      },
+      {
+        id: '4001649',
+        name: '大师监制龙泉青瓷茶叶罐',
+        price: '139.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
+      },
+      {
+        id: '3997185',
+        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
+        price: '108.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
+      },
+      {
+        id: '3997403',
+        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
+        price: '100.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
+      },
+      {
+        id: '3998274',
+        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
+        price: '139.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
+      },
+    ]
+
+    function render(arr){
+      let str = ''
+      arr.forEach(item => {
+        let {name,price,picture} = item
+        str += `<div class="item">
+      <img src="${picture}" alt="">
+      <p class="name">${name}</p>
+      <p class="price">${price}</p>
+    </div>`
+      })
+      document.querySelector('.list').innerHTML = str
+    }
+
+    render(goodsList)
+  document.querySelector('.filter').addEventListener('click',e =>{
+      let {dataset} = e.target
+      if(e.target.tagName==='A'){
+        let arr = goodsList
+        if(dataset.index === '1'){
+          arr = goodsList.filter(item => item.price>0 && item.price<=100)
+        }else if(dataset.index === '2'){
+          arr = goodsList.filter(item => item.price>100 && item.price<=300)
+        }else if(dataset.index === '3'){
+          arr = goodsList.filter(item => item.price>300)
+        }
+        render(arr)
+      }
+    })
+
+    // function render(arr){
+    //   let str = ''
+    //   arr.forEach(item => {
+    //     let {name,price,picture} = item
+    //     str+=`<div class="item">
+    //   <img src="${picture}" alt="">
+    //   <p class="name">${name}</p>
+    //   <p class="price">${price}</p>
+    // </div>`
+    //   })
+    //   document.querySelector('.list').innerHTML=str
+    // }
+
+    // render(goodsList)
+
+    // let filter = document.querySelector('.filter')
+    // filter.addEventListener('click',e => {
+    //   let {dataset} = e.target
+    //   if(e.target.tagName === 'A'){
+    //     let arr = goodsList
+    //     if(dataset.index == '1'){
+    //       arr = goodsList.filter(item => item.price<=100 && item.price>0)
+    //     }else if(dataset.index == '2'){
+    //       arr = goodsList.filter(item => item.price<=300 && item.price>100)
+    //     }else if(dataset.index == '3'){
+    //       arr = goodsList.filter(item => item.price>300)
+    //     }
+    //     render(arr)
+    //   }
+    // })
+
+    // // 1. 渲染函数  封装
+    // function render(arr) {
+    //   // 声明空字符串
+    //   let str = ''
+    //   // 遍历数组 
+    //   arr.forEach(item => {
+    //     // 解构
+    //     const { name, picture, price } = item
+    //     str += `
+    //      <div class="item">
+    //       <img src=${picture} alt="">
+    //       <p class="name">${name}</p>
+    //       <p class="price">${price}</p>
+    //     </div> 
+    //     `
+    //   })
+    //   // 追加给list 
+    //   document.querySelector('.list').innerHTML = str
+    // }
+    // render(goodsList)  // 页面一打开就需要渲染
+
+    // // 2. 过滤筛选  
+    // document.querySelector('.filter').addEventListener('click', e => {
+    //   // e.target.dataset.index   e.target.tagName
+    //   const { tagName, dataset } = e.target
+    //   // 判断 
+    //   if (tagName === 'A') {
+    //     // console.log(11) 
+    //     // arr 返回的新数组
+    //     let arr = goodsList
+    //     if (dataset.index === '1') {
+    //       arr = goodsList.filter(item => item.price > 0 && item.price <= 100)
+    //       console.log(arr);
+    //     } else if (dataset.index === '2') {
+    //       arr = goodsList.filter(item => item.price >= 100 && item.price <= 300)
+    //     } else if (dataset.index === '3') {
+    //       arr = goodsList.filter(item => item.price >= 300)
+    //     }
+    //     // 渲染函数
+    //     render(arr)
+    //   }
+    // })
+  </script>
+</body>
+```
+
+### filter筛选数组
+
+```html
+<script>
+    const arr = [10, 20, 30]
+
+    // filter 和map非常像
+    // const newArr = arr.filter((item, i) => {
+    //   return item > 15;  // 
+    // })
+    const newArr = arr.filter(item => item > 15);
+    console.log(newArr);
+
+    // const newArr = arr.filter(function (item, index) {
+    //   console.log(index, item)
+    //   return item >= 20  // 留下符合条件的元素，返回一个新数组
+    // })
+    // 返回的符合条件的新数组
+    // const newArr = arr.filter(item => item >= 20)
+
+    // const newArr = arr.filter(item => item >= 20)
+    // console.log(newArr)
+  </script>
+```
+
+## 作业
+
+```html
+<script>
+// 渲染函数
+    let ul = document.querySelectorAll('.types-ms')
+    function render(arr){
+      let str = ''
+      arr.forEach((item) => {
+        const {icon,name,hero_type,pay_type} = item
+        str +=
+         `<li >
+            <a href="#" target="_blank"><img src="${icon}" width="91" height="91" alt="${name}" />${name}</a>
+          </li>`
+        document.querySelector('.herolist').innerHTML = str  
+      })
+    }
+
+    render(heroArr)
+
+    // pay_type分类
+    ul[0].addEventListener('click',e => {
+      if(e.target.tagName==='I'){
+        document.querySelector('.current').classList.remove('current')
+        e.target.parentNode.parentNode.classList.add('current')
+        let arr = heroArr
+        arr = heroArr.filter(item => item['pay_type'] == e.target.parentNode.parentNode.dataset.ptype)
+        render(arr)
+      }
+    })
+
+    // hero_type分类
+    ul[1].addEventListener('click',e => {
+      if(e.target.tagName==='I'){
+        document.querySelector('.current').classList.remove('current')
+        e.target.parentNode.parentNode.classList.add('current')
+        let arr = heroArr
+        if(e.target.parentNode.parentNode.dataset.type !== '0'){
+          arr = heroArr.filter(item => item['hero_type'] == e.target.parentNode.parentNode.dataset.type)
+        }
+        render(arr)
+      }
+    })
+</script>     
+```
\ No newline at end of file
-- 
Gitee