前端js手写题经常忘，记录一下_js给嵌套数据 加key

实现forEach方法

Array.prototype.myForEach = function(callback, context=window) {
   
  // this=>arr
  let self = this,  
      i = 0,
      len = self.length;

  for(;i<len;i++) {
   
    typeof callback == 'function' && callback.call(context,self[i], i)
   }
}
1
2
3
4
5
6
7
8
9
10
11
12

修改嵌套层级很深对象的 key

// 有一个嵌套层次很深的对象，key 都是 a_b 形式 ，需要改成 ab 的形式，注意不能用递归。

const a = {
   
  a_y: {
   
    a_z: {
   
      y_x: 6
    },
    b_c: 1
  }
}
// {
   
//   ay: {
   
//     az: {
   
//       yx: 6
//     },
//     bc: 1
//   }
// }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

方法1：序列化 JSON.stringify + 正则匹配

const regularExpress = (obj) => {
   
  try {
   
    const str = JSON.stringify(obj).replace(/_/g, "");
    return JSON.parse(str);
  } catch (error) {
   
    return obj;
  }
};;
1
2
3
4
5
6
7
8
9
10
11

方法2：递归

const recursion = (obj) => {
   
  const keys = Object.keys(obj);
  keys.forEach((key) => {
   
    const newKey = key.replace(/_/g, "");
    obj[newKey] = recursion(obj[key]);
    delete obj[key];
  });
  return obj;
};
1
2
3
4
5
6
7
8
9
10
11

前端手写面试题详细解答

数组中的数据根据key去重

给定一个任意数组，实现一个通用函数，让数组中的数据根据 key 排重：

const dedup = (data, getKey = () => {
   } ) => {
   
  // todo
}
let data = [
  {
    id: 1, v: 1 },
  {
    id: 2, v: 2 },
  {
    id: 1, v: 1 },
];

// 以 id 作为排重 key，执行函数得到结果
// data = [
//   { id: 1, v: 1 },
//   { id: 2, v: 2 },
// ];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

实现

const dedup = (data, getKey = () => {
    }) => {
   
    const dateMap = data.reduce((pre, cur) => {
   
        const key = getKey(cur)
        if (!pre[key]) {
   
            pre[key] = cur
        }
        return pre
    }, {
   })
    return Object.values(dateMap)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用

let data = [
    {
    id: 1, v: 1 },
    {
    id: 2, v: 2 },
    {
    id: 1, v: 1 },
];
console.log(dedup(data, (item) => item.id))

// 以 id 作为排重 key，执行函数得到结果
// data = [
//   { id: 1, v: 1 },
//   { id: 2, v: 2 },
// ];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

实现节流函数（throttle）

节流函数原理:指频繁触发事件时，只会在指定的时间段内执行事件回调，即触发事件间隔大于等于指定的时间才会执行回调函数。总结起来就是： 事件，按照一段时间的间隔来进行触发 。

像dom的拖拽，如果用消抖的话，就会出现卡顿的感觉，因为只在停止的时候执行了一次，这个时候就应该用节流，在一定时间内多次执行，会流畅很多

手写简版

使用时间戳的节流函数会在第一次触发事件时立即执行，以后每过 wait 秒之后才执行一次，并且最后一次触发事件不会被执行

时间戳方式：

// func是用户传入需要防抖的函数
// wait是等待时间
const throttle = (func, wait = 50) => {
   
  // 上一次执行该函数的时间
  let lastTime = 0
  return function(...args) {
   
    // 当前时间
    let now = +new Date()
    // 将当前时间和上一次执行函数时间对比
    // 如果差值大于设置的等待时间就执行函数
    if (now - lastTime > wait) {
   
      lastTime = now
      func.apply(this, args)
    }
  }
}

setInterval(
  throttle(() => {
   
    console.log(1)
  }, 500),
  1
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

定时器方式：

使用定时器的节流函数在第一次触发时不会执行，而是在 delay 秒之后才执行，当最后一次停止触发后，还会再执行一次函数

function throttle(func, delay){
   
  var timer = null;
  returnfunction(){
   
    var context = this;
    var args = arguments;
    if(!timer){
   
      timer = setTimeout(function(){
   
        func.apply(context, args);
        timer = null;
      },delay);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

适用场景：

• DOM 元素的拖拽功能实现（mousemove）
• 搜索联想（keyup）
• 计算鼠标移动的距离（mousemove）
• Canvas 模拟画板功能（mousemove）
• 监听滚动事件判断是否到页面底部自动加载更多
• 拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
• 缩放场景：监控浏览器resize
• 动画场景：避免短时间内多次触发动画引起性能问题

总结

• 函数防抖 ：将几次操作合并为一次操作进行。原理是维护