Skip to content

手写代码

列表数据转换为树形数据

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 的过程中会发生四件事情:

  1. 首先创建一个新的空对象
  2. 设置原型,将对象的原型设置为函数的 prototype 对象
  3. 让函数的 this 指向这个对象,执行构造函数的代码(为这个对象添加新的属性)
  4. 判断函数的返回值类型,如果是值类型,返回创建的对象,如果是引用类型,对返回这个引用类型的对象
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(构造函数, 初始化参数)

Released under the MIT License.