206 lines
7.8 KiB
Plaintext
206 lines
7.8 KiB
Plaintext
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 变量不能修改。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|