/** * 构造树型结构数据 * @param {*} data 数据源 * @param {*} id id字段 默认 'id' * @param {*} parentId 父节点字段 默认 'parentId' * @param {*} children 孩子节点字段 默认 'children' */export function handleTree(data, id, parentId, children) {  let config = {    id: id || 'id',    parentId: parentId || 'parentId',    childrenList: children || 'children'  };   var childrenListMap = {};  var nodeIds = {};  var tree = [];   for (let d of data) {    let parentId = d[config.parentId];    if (childrenListMap[parentId] == null) {      childrenListMap[parentId] = [];    }    nodeIds[d[config.id]] = d;    childrenListMap[parentId].push(d);  }   for (let d of data) {    let parentId = d[config.parentId];    if (nodeIds[parentId] == null) {      tree.push(d);    }  }   for (let t of tree) {    adaptToChildrenList(t);  }   function adaptToChildrenList(o) {    if (childrenListMap[o[config.id]] !== null) {      o[config.childrenList] = childrenListMap[o[config.id]];    }    if (o[config.childrenList]) {      for (let c of o[config.childrenList]) {        adaptToChildrenList(c);      }    }  }  return tree;}

p {  writing-mode: vertical-rl;}其中，vertical-rl表示竖排方向为从上至下，文字从右向左排列。还可以使用vertical-lr来实现文字从左向右排列。 需要注意的是，竖排文字在不同浏览器中的效果可能会有所不同，需要进行兼容性测试。writing-mode是CSS3的属性之一，用于控制元素的书写方式，包括从左到右、从右到左、从上到下以及从下到上等多种方式。下面是使用writing-mode属性的方法：语法格式：plaintextCopy codewriting-mode: horizontal-tb | vertical-rl | vertical-lr;属性值：horizontal-tb：表示从左到右，从上到下的水平书写方式，是浏览器默认的书写方式，不需要使用writing-mode属性来指定。vertical-rl：表示从上到下，从右到左的竖直书写方式，即文字顺序是从右向左排列。vertical-lr：表示从上到下，从左到右的竖直书写方式，即文字顺序是从左向右排列。示例代码：/* 将段落中的文字竖排 */p {  writing-mode: vertical-rl;}/* 将div中的文字从下到上竖排 */div {  writing-mode: vertical-lr;}需要注意的是，writing-mode属性可能会影响元素的布局和位置，需要根据实际情况进行调整。

一：概念find()方法用于查找数组中符合条件的第一个元素，如果没有符合条件的元素，则返回undefined注意： find()对于空数组，函数是不会执行的。 find()并没有改变数组的原始值。二：语法array.find(function(currentValue, index, arr),thisValue)参数callback：必须。为数组中每个元素执行的函数，该函数接受三个参数：currentValue：必须。数组中正在处理的当前元素。index：可选。当前元素的索引值。arr：可选。当前元素所在的数组对象。thisValue：可选。传递给函数的值一般用"this"值。如果这个参数为空，"undefined"会传递给"this"值三：实例1、求数组中第一个大于1的值let arr1 = [1, 2, 3, 4, 5];let num = arr1.find(item => item > 1);console.log(num)  //輸出的結果是22、提取第一个id为1的对象 var arr = [{        id: 1,        name: '张一',        age: 25,        class: '一班'    }, {        id: 1,        name: '张二',        age: 25,        class: '二班'    }, {        id: 2,        name: '张三',        age: 25,        class: '三班'    }]    let obj = arr.find(item => item.id == 1)    console.log(obj);     // 结果：{id: 1, name: '张一', age: 25, class: '一班'}

1、gitadd添加多余文件撤销操作gitresetHEAD后面什么都不跟的，就是上一次add里面的内容全部撤销gitresetHEADXXX后面跟文件名，就是对某个文件进行撤销2、gitcommit撤销操作gitreset--softHEAD^ 这样就成功的撤销了commit操作注意，仅仅是撤回commit操作，您写的代码仍然保留。gitreset其他参数说明：--mixed 意思是：不删除工作空间改动代码，撤销commit，并且撤销gitadd.操作这个为默认参数,gitreset--mixedHEAD^和gitresetHEAD^效果是一样的。--soft 不删除工作空间改动代码，撤销commit，不撤销gitadd. --hard删除工作空间改动代码，撤销commit，撤销gitadd. 注意完成这个操作后，就恢复到了上一次的commit状态。commit注释写错了，只是想改一下注释，只需要：gitcommit--amend此时会进入默认vim编辑器，修改注释完毕后保存就好了。原文链接：https://blog.csdn.net/w958796636/article/details/53611133

可以使用JavaScript的execCommand()方法来实现复制字符串内容到剪切板的功能，具体实现方法如下：1. 创建一个元素，将要复制的字符串内容赋值给该元素的value属性；2. 将该元素添加到文档中；3. 使用execCommand()方法执行“复制”操作；4. 移除该元素。复制字符串采用临时添加一个元素，模拟选中内容进行选中的方式进行复制，复制后移除临时添加的元素即可。Javascript代码：// 创建元素用于复制var el = document.createElement('textarea');// 将字符串放入元素中el.value = text;// 设置元素不可见el.setAttribute('readonly', '');el.style = {position: 'absolute', left: '-9990009px'};document.body.appendChild(el);// 选中元素el.select();// 复制内容document.execCommand('copy');// 移除元素document.body.removeChild(el);alert('复制成功')

Location对象属性属性描述hash获取网址后面的锚部分，#号开始的urlhost返回一个URL的主机名和端口hostname返回URL的主机名href返回完整的URLpathname返回的URL路径名。port返回一个URL服务器使用的端口号protocol设置或返回当前URL的协议，取值为‘http:’,’https:’,’file:’等等。search设置或返回从问号(?)开始的URL（查询部分）。Location对象方法方法说明assign()载入一个新的文档reload()重新载入当前文档replace()用新的文档替换当前文档注window.location.assign(url)加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。window.location.replace(url)通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

点击查看代码                Document            .btn,        .btn2 {            position: relative;            width: 150px;            height: 60px;            background: #409eff;            outline: 0;            border: none;            padding: 12px 20px;            overflow: hidden;            color: #fff;        }        .btn::before,        .btn2::before {            content: '';            display: block;            position: absolute;            width: 100%;            height: 100%;            left: 0;            top: 0;            transition: 0.2s;            background: #fff;            opacity: 0;        }        .btn:active::before,        .btn2:active::before {            opacity: 0.2;        }        .btn::after {            content: '';            display: block;            position: absolute;            width: 200%;            height: 100%;            left: var(--x, 0);            top: var(--y, 0);            background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);            background-repeat: no-repeat;            background-position: 50%;            transform: translate(-50%, -50%) scale(10);            opacity: 0;            transition: transform 0.8s, opacity 0.8s;        }        .btn:active::after {            transform: translate(-50%, -50%) scale(0);            opacity: 0.3;            transition: 0s;        }        .btn2::after {            content: '';            display: block;            position: absolute;            background: rgb(255, 255, 255, 0.7);            left: 0;            top: 0;            right: 0;            bottom: 0;            opacity: 0;            transition: all 0.8s, opacity 0.8s;        }        .btn2:active::after {            left: var(--l, 0);            right: var(--r, 0);            opacity: 0.3;            transition: 0s;        }            水波纹散开        两边散开    (() => {        const el = document.querySelector('.btn');        el.addEventListener('mousedown', e => {            const { left, top } = el.getBoundingClientRect();            el.style = `--x:${e.clientX - left}px;--y:${e.clientY - top}px`;        });        const el2 = document.querySelector('.btn2');        el2.addEventListener('mousedown', e => {            const { left, right } = el2.getBoundingClientRect();            el2.style = `--l:${e.clientX - left}px;--r:${right - e.clientX}px`;        });    })();原理，通过监听按下事件，获取到点击坐标，将获取到的坐标通过style代入到自定义变量中，css中写入相关样式，引用伪元素，只需改变点击坐标点即可总结，网上水波纹的例子有许多，但很多都不完善，如连续点击后水波纹会失效，本文已优化，并通过自定义css变量来实现，相对于较简单

远程连接工具可以成功连接数据库，但是只会显示information_schema这个自动生成的数据库，其他的数据库无法显示来 解决方法本地连接root，找到mysql数据库，修改user表中需要连接的用户名数据找到Grant_priv,和Super_priv两个字段，将值改为Yflushprivileges（见下方注释）重启mysql注释解析flushprivilegesflush privileges 命令本质上的作用是将当前user和privilige表中的用户信息/权限设置从mysql库(MySQL数据库的内置库)中提取到内存里。MySQL用户数据和权限有修改后，希望在”不重启MySQL服务”的情况下直接生效，那么就需要执行这个命令。通常是在修改ROOT帐号的设置后，怕重启后无法再登录进来，那么直接flush之后就可以看权限设置是否生效。而不必冒太大风险。

在表格的样式中添加border-collapse: collapse;以设置边框合并（如果border-collapse的属性值为collapse，则会忽略border-spacing和empty-cells属性border-collapse 设置表格的边框是否被合并为一个单一的边框，还是像在标准的HTML中那样分开显示。值说明collapse如果可能，边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性separate默认值。边框会被分开。不会忽略border-spacing和empty-cells属性inherit规定应该从父元素继承border-collapse属性的值

hashchange事件是html5新增的api，用来监听浏览器链接的hash值变化。目前流行的spa框架的路由都有使用到该特性，接下来简单介绍下：当URL的片段标识符更改时，将触发hashchange事件(跟在＃符号后面的URL部分，包括＃符号)属性类型描述targetEventTarget上下文为window对象typeDOMStringevent类型bubblesBoolean事件是否能冒泡cancelableBoolean事件是否能被取消oldURLString跳转前的URLnewURLString跳转后的当前URLhashchange跳转到对应的锚点示例应用：https://mackhly.hlytools.top/article/54.html