first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/ajax/屁桃案例/知识新增和巩固.txt

@@ -0,0 +1,205 @@
+ 1802    1.19
+
+【张婷】5：模特 列表页面
+  接口：7
+
+
+  
+map() 方法返回一个新数组 {.toString().replaceAll(",", "")————————>手动转为字符串}，数组中的元素为原始数组元素调用函数处理后的值。
+
+使用 prototype 属性就可以给对象的构造函数 添加 新的属性：
+
+
+
+Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
+
+NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。
+
+元素也可以拥有属性  https://blog.csdn.net/m0_53170889/article/details/119414222
+
+
+location.href  可设置或返回当前显示的文档的完整 URL。
+
+window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。
+
+window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的
+
+
+
+
+正则表达式 RegExp
+    query(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null) return unescape(r[2]); return null;
+    }
+
+^     从开始行开始匹配 
+|     或运算符，匹配|符号前或后的字符 
+[]   内为字符集，匹配 [ ] 内任一字符  
+*     匹配 >= 0 个 * 号前的字符。
+[^ ]  匹配除了方括号里的任意字符
+
+
+正则表达式用于定义一些字符串的规则。计算机可以根据正则表达式，来检查一个字符串是否符合指定的规则，或者将字符串中符合规则的内容提取出来。
+search	从问号 (?) 开始的 URL（查询部分）
+substr(start, length)方法是用来截取字符串的 start是要截取字符串的开始下标，length是要截取的长度。
+match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。返回值数组
+unescape() 函数可对通过 escape() 编码的字符串进行解码  unescape() 函数已经从 Web 标准中删除，所以尽量不使用该函数，可以使用 decodeURI 或 decodeURIComponent 代替。
+
+
+
+    click(className, callback) {
+        var domArr = Array.from(className);
+        if (domArr.length != 0) {
+            className.forEach((v,i) => {
+                v.onclick = function (e) {
+                    v.index = i;
+                    v.e = e;
+                    callback.call(this)
+                }
+            })
+        } else {
+            className.onclick = function (e) {
+                className.e = e;
+                callback.call(this)
+            }
+        }
+    }
+
+只针对数组和对象
+浅拷贝：两者之间可以相互影响，用的一个内存空间；
+    例：var a = [1,2,3]
+        var b = a
+        b[0] = 100  输出b=[100,2,3]
+                    输出a=[100,2,3]
+
+深拷贝：两者互不干扰，各用各的内存空间（方法1 对a遍历，将元素取出来依次赋值给b）
+    例：方法2 var a = [1,2,3]
+              var b = JSON.parse(JSON.stringify(a))
+                b[0] = 100  输出b=[100,2,3]
+                            输出a=[1,2,3]
+
+
+
+ Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。  返回值 一个新的数组实例。
+ Array.from(arrayLike[, mapFn[, thisArg]])
+ 
+  arrayLike      想要转换成数组的伪数组对象或可迭代对象。
+  mapFn 可选      如果指定了该参数，新数组中的每个元素会执行该回调函数。
+  thisArg 可选    可选参数，执行回调函数 mapFn 时 this 对象。
+
+
+
+2022.6.30
+  JavaScript 支持不同类型的循环：
+
+for - 循环代码块一定的次数
+for/in - 循环遍历对象的属性
+while - 当指定的条件为 true 时循环指定的代码块
+do/while - 同样当指定的条件为 true 时循环指定的代码块
+注意： 不要使用 for/in 语句来循环数组的索引，你可以使用 for 语句替代。
+
+每当readyState发生变化是都会触发onreadystatechange函数，总共会触发4次
+JSON.parse一般用于将JSON字符串转化为JSON对象
+JSON 是用于存储和传输数据的格式。
+语法规则:
+数据为 键/值 对。
+数据由逗号分隔。
+大括号保存对象
+方括号保存数组
+
+
+
+ this.principal[this.index].content = [
+            ...this.principal[this.index].content,
+            ...res.list
+        ];
+
+//扩展运算符(...)是ES6的语法，用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。
+this.principal[this.index].content = 新对象[
+            {},{},{},{},旧对象
+            {},{},{},{},追加对象
+        ];
+
+
+
+
+
+2022.7.4
+
+history.back()     返回历史记录（后退一步）
+
+分类编辑和首页菜单公用的一个接口，所以要将其数据存储到本地。
+存储：
+cookie、localstorage和sessionStorage三者都是在开发中用到的临时存储客户端会话信息或者数据的方法。
+
+三者区别：
+
+一、存储的时间有效期不同
+
+1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效
+
+2、sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效
+
+3、localStorage的有效期是在不进行手动删除的情况下是一直有效的
+
+二、存储的大小不同
+
+1、cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息
+
+2、localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)
+
+三、与服务端的通信
+
+1、cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。
+
+2、localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信
+
+
+四、读写操作的便捷程度
+cookie操作起来较为繁琐，并且部分数据不可以读取操作
+设置cookie: document.cookie = "key=value;";
+
+localStorage和sessionStorage相似：
+                                存储：localStorage || sessionStorage.setItem("数据名"，“数据值”)[数据名和数据值均要求为字符串]
+                                读取：let data = localStorage || sessionStorage.getItem("数据名")
+                                清除：localStorage || sessionStorage.removeItem("数据名")
+                                移除所有：localStorage || sessionStorage.clear()
+
+splice() 方法用于添加或删除数组中的元素。  
+返回值：如果删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。
+splice（“要删除的元素下标”，“删除几个”）
+
+
+insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素
+
+语法：element.insertAdjacentHTML(position,text)
+
+            position是相对于元素的位置，并且必须是以下字符串之一： 
+
+                        beforebegin: 元素自身的前面。
+                        afterend: 元素自身的后面。
+                        
+     beforebegin和afterend位置,仅在节点在树中且节点具有一个parent元素(父元素)时工作. 
+
+                        afterbegin: 插入元素内部的第一个子节点之前。
+                        beforeend: 插入元素内部的最后一个子节点之后。
+                        text是要被解析为HTML或XML,并插入到DOM树中的字符串。
+
+
+var / let / const
+
+var 声明的变量属于函数作用域，let 和 const 声明的变量属于块级作用域；
+
+var 存在变量提升现象，而 let 和 const 没有此类现象；
+
+var 变量可以重复声明，而在同一个块级作用域，let 变量不能重新声明，const 变量不能修改。
+
+           
+
+
+
+
+
+