Appearance
手写代码
列表数据转换为树形数据
js
function tranListToTreeData(list, rootValue) {
const arr = []
// 遍历需要转换的数据
list.forEach((value) => {
// 如果 pid 为 根值,代表这条数据是根数据
if (value.pid === rootValue) {
// 递归,用 id 去找与之相同的 pid,id 的那条数据是 pid 那条数据的父级
const children = tranListToTreeData(list, value.id)
// 如果有子级,则将给这条数据添加一个 children 属性
if (children.length) {
value.children = children
}
arr.push(value) // 将遍历过后的数据添加到新数组 arr 中
}
})
return arr
}
获取url参数
- 传统方法:location.search
- 新API:URLSearchParams
将url参数转换成对象
js
function queryToObj() {
const res = {}
const search = location.search.substr(1)
search.split('&').forEach(paramStr => {
const arr = paramStr.split('=')
const key = arr[0]
const val = arr[1]
res[key] = val
})
return res
}
使用URLSearchParams
js
function queryToObj() {
const res = {}
const pList = new URLSearchParams(location.search)
pList.forEach((val, key) => {
res[key] = val
})
return res
}
数组扁平化
js
function flat(arr) {
// 验证 arr 中,还有没有深层数组
const isDeep = arr.some(item => item instanceof Array)
if (!isDeep) {
return arr // 没有深层数组,直接返回
}
const res = Array.prototype.concat.apply([], arr)
return flat(res) // 递归
}
数组去重
有很多中,列举两种
第一种:
js
function unique(arr) {
const res = []
arr.forEach(item => {
if (res.indexOf(item) < 0) {
res.push(item)
}
})
return res
}
第二种:
js
function unique(arr) {
const set = new Set(arr)
return [...set]
}
手写防抖和节流
防抖:
js
const debounce = (fn, delay) => {
let timer = null
return function() {
if (timer) clearSetTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
节流:
js
const throttle = (fn, delay) => {
let timer = null
return function() {
if (timer) return
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
})
}
}
深拷贝函数
js
const deepCopy = (obj) => {
if (typeof obj !== 'object') return obj
const newObj = Array.isArray(Obj) ? [] : {}
for (let key in obj) {
newObj[key] = deepCopy(obj[key])
}
return newObj
}
手写 new 操作符
在调用 new 的过程中会发生四件事情:
- 首先创建一个新的空对象
- 设置原型,将对象的原型设置为函数的 prototype 对象
- 让函数的 this 指向这个对象,执行构造函数的代码(为这个对象添加新的属性)
- 判断函数的返回值类型,如果是值类型,返回创建的对象,如果是引用类型,对返回这个引用类型的对象
js
function objectFactory() {
let newObject = null;
let constructor = Array.prototype.shift.call(arguments);
let result = null;
// 判断参数是否是一个函数
if (typeof construstor !== 'function') {
console.log('type error')
return
}
// 新建一个空对象,对象的原型为构造函数的 prototype 对象
newObject = Object.create(constructor.prototype);
// 将 this 指向新建对象,并执行函数
result = constructor.apply(newObject, arguments);
// 判断返回对象
let flag = result && (typeof result === 'object' || typeof result === 'function')
// 判断返回结果
return flag ? result : newObject;
}
// 使用方法
objectFactory(构造函数, 初始化参数)