* **平扁化,解决flat()兼容问题**
*****
```
export function flattenDeep(arr = []) {
return arr.reduce((acc, val) =>Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), [])
}
```
* **深拷贝**
*****
了解更多,请点击[这里](https://www.kancloud.cn/vvmily_king/vvmily/2306112)
```
export function deepClone(obj) {
var newObj = Array.isArray(obj) ? [] : {};
for(var key in obj){
if(obj[key] && typeof obj[key] === 'object'){
newObj[key] = deepClone(obj[key])
}else{
newObj[key] = obj[key]
}
}
return newObj;
}
```
* **解析URL中的参数**
```
export const parseUrlParams =(params) => {
let url = params.substring(params.indexOf("?")); //获取url中"?"符后的字串
let result = {};
if (url.indexOf("?") !=-1) {
let str = url.substr(1);
let strs = str.split("&");
for (leti = 0; i < strs.length; i++) {
result[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return result;
}
```
* **一维数组转树结构**
```
/**
* 一维数组转树结构
* @param {*} data 一维数组
* @param {*} id 当前id
* @param {*} pid 父级关联id
* @param {*} children 子级数组键
* @returns 树形Array
*/
export function toTree(
data,
id = 'menuId',
pid = 'parentId',
children = 'children'
) {
const result = []
if (!Array.isArray(data)) {
return result
}
data.forEach(item => {
delete item[children]
})
const map = {}
data.forEach(item => {
map[item[id]] = item
})
data.forEach(item => {
const parent = map[item[pid]]
item.parentName = (parent || {}).menuName
item.parentId = (parent || {}).menuId
if (parent) {
(parent[children] || (parent[children] = [])).push(item)
} else {
result.push(item)
}
})
return result
}
```
* **查找数组树形数组一级最后一级的第一项**
```
/**
* 查找数组树形数组一级最后一级的第一项
* @param {*} arr 树形数组
* @param {*} children 树下级
* @returns Array
*/
export function arrayFirstById(arr = [], children = 'children') {
return arr.reduce((pre, cur) => {
pre.push(cur)
return pre.concat(
cur[children] && cur[children].length ? arrayFirstById(cur[children]) : []
)
}, [])
}
```
* **查找树结构,当前id的所有上级id**
```
/**
* 从下往上查找
* 查找树结构,当前id的所有上级id
* @param {*} treeData 树结构 数组,必传
* @param {*} id 当前id ,必传
* @param {*} key 与id相匹配的键
* @param {*} children 树结构下级
* @returns Array
*/
export function findTreeParents(
treeData,
id,
key = 'id',
children = 'children'
) {
if (treeData.length === 0) return
for (let i = 0; i < treeData.length; i++) {
if (treeData[i][key] === id) {
return []
} else {
if (treeData[i][children]) {
const res = findTreeParents(treeData[i][children], id)
if (res !== undefined) {
return res.concat(treeData[i])
}
}
}
}
}
```
* **找树结构,当前id的所有上级id**
```
/**
* 通过子级parentId与父级id相对应,从上往下查找
* 找树结构,当前id的所有上级id
* @param {*} treeData 树结构 数组,必传
* @param {*} id 当前id ,必传
* @param {*} option 配置项
* @returns Array
*/
export function treeFindParentById(treeData, id, option) {
const { key, children, parentId } = {
key: 'id',
children: 'children',
parentId: 'parentId',
...option
}
const allParents = []
if (treeData.length === 0) {
return []
}
const findParents = (data, id) => {
if (!id) return
data.forEach((item, index) => {
if (item[key] === id) {
allParents.unshift(item)
findParents(treeData, item[parentId])
} else {
if (item.children) {
findParents(item[children], id)
}
}
})
}
findParents(treeData, id)
return allParents
}
```
工具类验证:https://www.helloweba.net/javascript/639.html
- 首页
- 2021年
- 基础知识
- 同源策略
- 跨域
- css
- less
- scss
- reset
- 超出文本显示省略号
- 默认滚动条
- 清除浮动
- line-height与vertical-align
- box-sizing
- 动画
- 布局
- JavaScript
- 设计模式
- 深浅拷贝
- 排序
- canvas
- 防抖节流
- 获取屏幕/可视区域宽高
- 正则
- 重绘重排
- rem换算
- 手写算法
- apply、call和bind原理与实现
- this的理解-普通函数、箭头函数
- node
- nodejs
- express
- koa
- egg
- 基于nodeJS的全栈项目
- 小程序
- 常见问题
- ec-canvas之横竖屏切换重绘
- 公众号后台基本配置
- 小程序发布协议更新
- 小程序引入iconfont字体
- Uni-app
- 环境搭建
- 项目搭建
- 数据库
- MySQL数据库安装
- 数据库图形化界面常用命令行
- cmd命令行操作数据库
- Redis安装
- APP
- 控制缩放meta
- GIT
- 常用命令
- vsCode
- 常用插件
- Ajax
- axios-services
- 文章
- 如何让代码更加优雅
- 虚拟滚动
- 网站收藏
- 防抖节流之定时器清除问题
- 号称破解全网会员的脚本
- 资料笔记
- 资料笔记2
- 公司面试题
- 服务器相关
- 前端自动化部署-jenkins
- nginx.conf配置
- https添加证书
- shell基本命令
- 微型ssh-deploy前端部署插件
- webpack
- 深入理解loader
- 深入理解plugin
- webpack注意事项
- vite和webpack区别
- React
- react+antd搭建
- Vue
- vue-cli
- vue.config.js
- 面板分割左右拖动
- vvmily-admin-template
- v-if与v-for那个优先级高?
- 下载excel
- 导入excel
- Echart-China-Map
- vue-xlsx(解析excel)
- 给elementUI的el-table添加骨架
- cdn引入配置
- Vue2.x之defineProperty应用
- 彻底弄懂diff算法的key作用
- 复制模板内容
- 表格操作按钮太多
- element常用组件二次封装
- Vue3.x
- Vue3快速上手(第一天)
- Vue3.x快速上手(第二天)
- Vue3.x快速上手(第三天)
- vue3+element-plus搭建项目
- vue3
- 脚手架
- vvmily-cli
- TS
- ts笔记
- common
- Date
- utils
- axios封装
- 2022年
- HTML
- CSS基础
- JavaScript 基础
- 前端框架Vue
- 计算机网络
- 浏览器相关
- 性能优化
- js手写代码
- 前端安全
- 前端算法
- 前端构建与编译
- 操作系统
- Node.js
- 一些开放问题、智力题