JS手写题大汇总 | 希亚的西红柿のBlog

文章最后更新于 895 天前，其中的信息可能已经过时。

本文主要记录了关于前端面试常考的手写代码题，常看常复习。

JS 基础篇

深入了解 JS 这门语言的运行逻辑与机制，尝试实现其内部的方法。

ES5 实现继承

使用 ES5 的语法实现继承，有几个注意点：

使用Object.create方法，构造以父类的prototype为原型的新对象，防止对子类原型对象的修改影响到父类的原型对象。
注意静态方法的继承，使用Object.setPrototypeOf将父类设置为子类的原型。

1
function Person(name, age) {
2
  this.name = name;
3
  this.age = age;
4
}
5
Person.say = () => {
6
  console.log("I'm a person!");
7
};
8
function Man(name, age, address) {
9
  Person.call(this, name, age);
10
  this.address = address;
11
}
12
Man.speak = () => {
13
  console.log("I'm a man!");
14
};
15
Object.setPrototypeOf(Man, Person);
16
Man.prototype = Object.create(Person.prototype);
17
Man.prototype.constructor = Man;
18
const person = new Person("person", 10);
19
const man = new Man("man", 11, "Tokyo");
20
Man.say();
21
Man.speak();

验证的例子：

1
class Person {
2
  constructor(name, age) {
3
    this.name = name;
4
    this.age = age;
5
  }
6
  static say = () => {
7
    console.log("I'm a person!");
8
  };
9
}
10
class Man extends Person {
11
  constructor(name, age, address) {
12
    super(name, age);
13
    this.address = address;
14
  }
15
  static speak = () => {
16
    console.log("I'm a man!");
17
  };
18
}
19
const person = new Person("person", 10);
20
const man = new Man("man", 11, "Tokyo");
21
console.log(person, man);
22
console.log(Object.getPrototypeOf(Man) === Person);
23
Man.say();
24
Man.speak();

实现 new 函数

首先对问题进行分析，分析new关键字到底干了什么。

创建一个空对象将该对象的原型设置为函数的prototype。
执行函数，this指向指向该对象。
若函数返回结果不为空且为对象，则返回该对象，否则返回先前生成的对象。

1
/**
2
 * @param {Function} constructor
3
 * @param {any[]} args - argument passed to the constructor
4
 * `myNew(constructor, ...args)` should return the same as `new constructor(...args)`
5
 */
6
const myNew = (func, ...params) => {
7
  const newObj = Object.create(func.prototype);
8
  const result = func.apply(newObj, params);
9
  return typeof result === "object" && result !== null ? result : newObj;
10
};

手写 instanceof

沿着原型链循环查找，即寻找当前对象实例的__proto__的__proto__，是否等于构造函数的prototype。

1
/**
2
 * @param {any} obj
3
 * @param {target} target
4
 * @return {boolean}
5
 */
6
const myInstanceOf = (obj, target) => {
7
  if (typeof obj !== "object" || obj === null) {
8
    return false;
9
  }
10
  const proto = target.prototype;
11
  let curProto = Object.getPrototypeOf(obj);
12
  while (curProto) {
13
    if (curProto === proto) {
14
      return true;
15
    }
16
    curProto = Object.getPrototypeOf(curProto);
17
  }
18
  return false;
19
};

手写数据类型判断函数

Object.prototype.toString调用与正则，需要注意的是call方法的调用与match方法的返回结果。

1
/**
2
 * @param {any} data
3
 * @return {string}
4
 */
5
const detectType = (data) =>
6
  Object.prototype.toString
7
    .call(data)
8
    .match(/^\[object (\w+)\]$/)[1]
9
    .toLowerCase();

手写 promisify 函数

注意promisify需要返回一个函数，这个函数返回一个promise对象。
注意 Node.js 中常规的回调函数形式，因此在改变this执行的时候使用call方法代码更加简洁。
JS
```
1
fs.readFile("1.txt", "utf8", (err, data) => {});
```

err的情况就先reject，也是利用了回调函数的特性。

1
/**
2
 * @param {(...args) => void} func
3
 * @returns {(...args) => Promise<any>}
4
 */
5
const promisify = (func) => {
6
  return function (...params) {
7
    return new Promise((resolve, reject) => {
8
      func.call(this, ...params, (err, data) => {
9
        if (err) {
10
          reject(err);
11
        } else {
12
          resolve(data);
13
        }
14
      });
15
    });
16
  };
17
};

手写 async 方法

async与await的语法其实是generator函数与promise结合的语法糖，通过promise实现自动执行最后实现协程的效果。

首先查看 generator 函数的基本使用

1
function* helloWorldGenerator() {
2
  yield "hello";
3
  yield "world";
4
  return "ending";
5
  yield "what can i say";
6
}
7
const hw = helloWorldGenerator();
8

9
console.log(hw.next());
10
console.log(hw.next());
11
console.log(hw.next());
12
console.log(hw.next());
13
// { value: 'hello', done: false }
14
// { value: 'world', done: false }
15
// { value: 'ending', done: true }
16
// { value: undefined, done: true }
17

18
function* dataConsumer() {
19
  console.log("Started");
20
  console.log(`1. ${yield}`);
21
  console.log(`2. ${yield}`);
22
  return "result";
23
}
24

25
const genObj = dataConsumer();
26
console.log(genObj.next());
27
console.log(genObj.next("a"));
28
console.log(genObj.next("b"));
29
// Started
30
// { value: undefined, done: false }
31
// 1. a
32
// { value: undefined, done: false }
33
// 2. b
34
// { value: 'result', done: true }

1
const asyncFunc = () => {
2
  spawn(function* () {});
3
};
4
const spawn = (genF) => {
5
  return new Promise((resolve, reject) => {
6
    const gen = genF();
7
    const step = (nextF) => {
8
      let next;
9
      try {
10
        next = nextF();
11
      } catch (e) {
12
        return reject(e);
13
      }
14
      if (next.done) {
15
        return resolve(next.value);
16
      }
17
      Promise.resolve(next.value).then(
18
        (v) => step(() => gen.next(v)),
19
        (r) => step(() => gen.throw(r))
20
      );
21
    };
22
    step(() => gen.next(undefined));
23
  });
24
};

手写 EventEmitter 函数

注意emit回调函数的this指向以及参数的问题。
注意once函数可以将函数包装成另一个执行函数，在执行完这个函数后就移除掉。

1
class EventEmitter {
2
  constructor() {
3
    this.callbacks = {};
4
  }
5
  addListener(type, callback) {
6
    if (!this.callbacks[type]) {
7
      this.callbacks[type] = [];
8
    }
9
    this.callbacks[type].push(callback);
10
  }
11
  prependListener(type, callback) {
12
    if (!this.callbacks[type]) {
13
      this.callbacks[type] = [];
14
    }
15
    this.callbacks[type].unshift(callback);
16
  }
17
  on(type, callback) {
18
    this.addListener(type, callback);
19
  }
20
  removeListener(type, callback) {
21
    if (!this.callbacks[type]) {
22
      console.warn("没有订阅该事件！");
23
      return;
24
    }
25
    const index = this.callbacks[type].indexOf(callback);
26
    if (index > -1) {
27
      this.callbacks[type].splice(index, 1);
28
    }
29
  }
30
  off(type, callback) {
31
    this.removeListener(type, callback);
32
  }
33
  emit(type, ...args) {
34
    if (!this.callbacks[type]) {
35
      console.warn("没有订阅该事件！");
36
      return;
37
    }
38
    this.callbacks[type].forEach((callback) => callback.apply(this, args));
39
  }
40
  once(type, callback) {
41
    function wrapper(...params) {
42
      callback.apply(this, params);
43
      this.removeListener(type, wrapper);
44
    }
45
    this.addListener(type, wrapper);
46
  }
47
}
48
const ee = new EventEmitter();
49

50
// 注册所有事件
51
ee.once("wakeUp", (name) => {
52
  console.log(`${name} 1`);
53
});
54
ee.on("eat", (name) => {
55
  console.log(`${name} 2`);
56
});
57
ee.on("eat", (name) => {
58
  console.log(`${name} 3`);
59
});
60
const meetingFn = (name) => {
61
  console.log(`${name} 4`);
62
};
63
ee.on("work", meetingFn);
64
ee.on("work", (name) => {
65
  console.log(`${name} 5`);
66
});
67
ee.emit("wakeUp", "xx");
68
ee.emit("wakeUp", "xx"); // 第二次没有触发
69
ee.emit("eat", "xx");
70
ee.emit("work", "xx");
71
ee.off("work", meetingFn); // 移除事件
72
ee.emit("work", "xx"); // 再次工作

手写 call,apply,bind

注意自己实现需要实现利用对象的方法隐式绑定做到的，注意bind关键字作为new方法调用的时候对this指向做出特殊的。

super关键字可以作为构造函数在构造函数里面调用super关键字还做作为对象调用父对象上的方法或者静态方法，但在普通方法里面只能调用普通方法而不能调用静态方法，但在子类的静态方法中则可以都可以调用。

1
Function.prototype.myCall = function (obj, ...params) {
2
  const key = Symbol("key");
3
  obj[key] = this;
4
  const result = obj[key](...params);
5
  delete obj[key];
6
  return result;
7
};
8
Function.prototype.myApply = function (obj, params) {
9
  const key = Symbol("key");
10
  obj[key] = this;
11
  const result = obj[key](...params);
12
  delete obj[key];
13
  return result;
14
};
15
Function.prototype.myBind = function (obj, ...params) {
16
  const func = this;
17
  function bound(...args) {
18
    const context = Boolean(new.target) ? this : obj;
19
    return func.myApply(context, [...params, ...args]);
20
  }
21
  bound.prototype = Object.create(func.prototype);
22
  bound.prototype.constructor = bound;
23
  return bound;
24
};
25

26
function say(arg1, arg2) {
27
  console.log(this.age, arg1, arg2);
28
  return 1;
29
}
30
let person = {
31
  age: 3,
32
};
33

34
let bindSay = say.myBind(person, "我叫", "nova");
35
console.log(bindSay());
36
new bindSay();

手写 Object.create

利用new关键字，实例的__proto__属性会指向构造函数的prototype。

在new初始化一个对象的规范：如果构造函数的prototype不是一个对象，则将新创建的对象的__proto__设置为标准的内置的对象的原型对象，即Object.prototype。
在使用Object.create方法时，强制把这个对象的__proto__设置为该参数。目前该方法是将对象原型设置为空的唯一手段。
Class类的prototype属性默认不可写。

1
function Foo() {}
2
Foo.prototype = null;
3
console.log(new Foo().toString); //outputs function toString() { [native code] } (or whatever)
4

5
function Foo() {}
6
Foo.prototype = Object.create(null);
7
console.log(new Foo().toString); //output undefined

1
/**
2
 * @param {any} proto
3
 * @return {object}
4
 */
5
const myObjectCreate = (proto) => {
6
  if (typeof proto !== "object" || proto === null) {
7
    throw new TypeError("Argument must be an object!");
8
  }
9
  function A() {}
10
  A.prototype = proto;
11
  return new A();
12
};

手写数组 push

这种方法有点取巧，很多特性都是 JS 数组特有的行为，比如数组长度会随之数组的最大索引变化，没有值的数据会自动填充为空。

1
/**
2
 * Adds one or more elements to the end of an array and returns the new length of the array.
3
 *
4
 * @param {Array} arr - The target array to which elements will be added.
5
 * @param {...*} params - The elements to add to the array.
6
 * @returns {number} - The new length of the array after adding the elements.
7
 */
8
const push = (arr, ...params) => {
9
  for (let i = 0; i < params.length; i++) {
10
    arr[arr.length] = params[i];
11
  }
12
  return arr.length;
13
};
14
const a = [1, 2, 3];
15
const b = push(a, 1, 2, 3);
16
console.log(a, b);

手写字符串 repeat

实现字符串的repeat方法，注意递归的核心为保证字符串不变

1
const repeat = (str, n) => {
2
  return new Array(n + 1).join(str);
3
};
4
// 核心为保证 str 不变
5
const repeat0 = (str, n) => {
6
  return n > 1 ? str.concat(repeat0(str, n - 1)) : str;
7
};
8
const a = repeat("sasda", 3);
9
console.log(a);

手写 Object.assign

注意对参数为剩余参数，同时Object强制转换对象会返回对象本身。

1
/**
2
 * @param {any} target
3
 * @param {any[]} sources
4
 * @return {object}
5
 */
6
const objectAssign = (target, ...sources) => {
7
  if (!target) {
8
    throw new TypeError(
9
      "TypeError: Cannot convert undefined or null to object"
10
    );
11
  }
12
  const ret = Object(target);
13
  sources.forEach((source) => {
14
    if (source) {
15
      source = Object(source);
16
      Reflect.ownKeys(source).forEach((key) => {
17
        if (Reflect.getOwnPropertyDescriptor(source, key).enumerable) {
18
          ret[key] = source[key];
19
          if (ret[key] !== source[key]) {
20
            throw new Error();
21
          }
22
        }
23
      });
24
    }
25
  });
26
  return ret;
27
};
28

29
const a = { a: 1 };
30
const b = { b: 2 };
31
const c = objectAssign(a, b);
32
console.log(a, b, c);

实现数组的 flat 方法

核心思路为递归，使用数组的reduce方法能减少不少代码量。

1
/**
2
 * @param { Array } arr
3
 * @param { number } depth
4
 * @returns { Array }
5
 */
6
const flat = (arr, depth = 1) => {
7
  const res = [];
8
  const step = (array, count) => {
9
    if (!Array.isArray(array) || count < 0) {
10
      res.push(array);
11
      return;
12
    }
13
    for (const item of array) {
14
      step(item, count - 1);
15
    }
16
  };
17
  step(arr, depth);
18
  return res;
19
};
20

21
/**
22
 * @param { Array } arr
23
 * @param { number } depth
24
 * @returns { Array }
25
 */
26
const flat = (arr, depth = 1) =>
27
  depth > 0
28
    ? arr.reduce(
29
        (pre, cur) =>
30
          pre.concat(Array.isArray(cur) ? flat(cur, depth - 1) : [cur]),
31
        []
32
      )
33
    : arr;

深入 JS 的使用

柯里化

注意外层函数需要命名以便在递归的时候引用，内层函数则是内部也应该返回函数的相关结果。

1
/**
2
 * @param { (...args: any[]) => any } fn
3
 * @returns { (...args: any[]) => any }
4
 */
5
const curry = (fn) =>
6
  function curryInner(...params) {
7
    if (params.length < fn.length)
8
      return function (...args) {
9
        return curryInner(...params, ...args);
10
      };
11
    else {
12
      return fn.apply(this, params);
13
    }
14
  };
15

16
/**
17
 * @param { (...args: any[]) => any } fn
18
 * @returns { (...args: any[]) => any }
19
 */
20
const curry = (fn) =>
21
  function curryInner(...params) {
22
    if (params.length < fn.length || params.includes(curry.placeholder)) {
23
      return function (...args) {
24
        params = params.map((item) => {
25
          if (item === curry.placeholder) {
26
            return args.shift();
27
          } else {
28
            return item;
29
          }
30
        });
31
        return curryInner(...params, ...args);
32
      };
33
    } else {
34
      return fn.apply(this, params);
35
    }
36
  };
37

38
curry.placeholder = Symbol();

深拷贝

采用ES6之后的方法进行，原型链与属性修饰符

~~Descriptors来全给你拷了。~~

1
const copy = (obj) =>
2
  Object.create(
3
    Object.getPrototypeOf(obj),
4
    Object.getOwnPropertyDescriptors(obj)
5
  );

采用for循环实现深拷贝

1
const cloneDeep = (data) => {
2
  const map = new WeakMap();
3
  const clone = (obj) => {
4
    if (typeof obj !== "object" || obj === null) return obj;
5
    if (map.has(obj)) return map.get(obj);
6
    const newObj = new obj.constructor();
7
    map.set(obj, newObj);
8
    Reflect.ownKeys(obj).forEach((key) => {
9
      newObj[key] = clone(obj[key]);
10
    });
11
    return newObj;
12
  };
13
  return clone(data);
14
};

防抖与节流

防抖的复杂实现注意isInvoked的位置放在了返回函数的里面，这样可以保证初始执行的这一次不会触发trailing这一次的执行。有定时器就清除，无论之前有没有定时器都需要继续设置setTimeout。

1
/**
2
 * @param {(...args: any[]) => any} func
3
 * @param {number} wait
4
 * @returns {(...args: any[]) => any}
5
 */
6
const debounce = (func, wait) => {
7
  let timer = null;
8
  return function (...params) {
9
    if (timer) {
10
      clearTimeout(timer);
11
    }
12
    timer = setTimeout(() => {
13
      func.apply(this, params);
14
      timer = null;
15
    }, wait);
16
  };
17
};
18

19
/**
20
 * @param {(...args: any[]) => any} func
21
 * @param {number} wait
22
 * @param {boolean} option.leading
23
 * @param {boolean} option.trailing
24
 * @returns {(...args: any[]) => any}
25
 */
26
const debounce = (func, wait, option = { leading: false, trailing: true }) => {
27
  let timer = null;
28
  return function (...params) {
29
    let isInvoked = false;
30
    if (timer) {
31
      clearTimeout(timer);
32
    } else if (option.leading) {
33
      func.apply(this, params);
34
      isInvoked = true;
35
    }
36
    timer = setTimeout(() => {
37
      if (option.trailing && !isInvoked) {
38
        func.apply(this, params);
39
      }
40
      timer = null;
41
    }, wait);
42
  };
43
};

节流的复杂实现在于实现trailing的功能，这边涉及到递归函数的提取。注意之前有定时器的话就只保存参数什么都不做，没定时器才要设置setTimeout。

1
/**
2
 * @param {(...args:any[]) => any} func
3
 * @param {number} wait
4
 * @returns {(...args:any[]) => any}
5
 */
6
const throttle = (func, wait) => {
7
  let timer = null;
8
  let lastArgs = null;
9
  const run = () => {
10
    timer = null;
11
    if (lastArgs) {
12
      func.apply(this, lastArgs);
13
      lastArgs = null;
14
      timer = setTimeout(run, wait);
15
    }
16
  };
17
  return function (...params) {
18
    if (!timer) {
19
      func.apply(this, params);
20
      timer = setTimeout(run, wait);
21
    } else {
22
      lastArgs = params;
23
    }
24
  };
25
};
26

27
/**
28
 * @param {(...args: any[]) => any} func
29
 * @param {number} wait
30
 * @param {boolean} option.leading
31
 * @param {boolean} option.trailing
32
 * @returns {(...args: any[]) => any}
33
 */
34
const throttle = (func, wait, option = { leading: true, trailing: true }) => {
35
  let timer = null;
36
  let lastArgs = null;
37
  const run = () => {
38
    timer = null;
39
    if (option.trailing && lastArgs) {
40
      func.apply(this, lastArgs);
41
      lastArgs = null;
42
      timer = setTimeout(run, wait);
43
    }
44
  };
45
  return function (...params) {
46
    if (!timer) {
47
      if (option.leading) {
48
        func.apply(this, params);
49
      }
50
      timer = setTimeout(run, wait);
51
    } else {
52
      lastArgs = params;
53
    }
54
  };
55
};

并发控制

并发池

1
const asyncPool = async (poolLimit, array, iteratorFn) => {
2
  const ret = [],
3
    executing = [];
4
  for (const item of array) {
5
    const p = Promise.resolve(iteratorFn(item));
6
    ret.push(p);
7
    if (poolLimit < array.length) {
8
      const e = p.finally(() => executing.splice(executing.indexOf(e), 1));
9
      executing.push(e);
10
      if (executing.length >= poolLimit) {
11
        await Promise.race(executing);
12
      }
13
    }
14
  }
15
  return Promise.all(ret);
16
};
17

18
const timeout = (i) =>
19
  new Promise((resolve) =>
20
    setTimeout(() => {
21
      console.log(i);
22
      resolve(i);
23
    }, i)
24
  );
25

26
asyncPool(2, [1000, 5000, 3000, 2000], timeout);

递归版本，也叫能够实现并发控制的Promise.all版本。注意while循环的巧妙使用，先将能填进去的数组先填进去。为了严格与Promise.all方法保持一致，这里做到了索引与数组直接相同。同时还需要注意递归调用的重要性。同时还有万能并发池的版本，有点缺陷的地方在于数组splice方法的时间复杂度部分。

1
/**
2
 * @param {Array<() => Promise<any>>} funcs
3
 * @param {number} max
4
 * @return {Promise}
5
 */
6
const throttlePromises = (funcs, max = Infinity) => {
7
  return new Promise((resolve, reject) => {
8
    const length = funcs.length;
9
    const res = new Array(length);
10
    let count = 0,
11
      running = 0,
12
      index = 0;
13
    const run = () => {
14
      while (funcs.length && running < max) {
15
        const func = funcs.shift();
16
        const idx = index;
17
        func().then((v) => {
18
          res[idx] = v;
19
          running--;
20
          count++;
21
          if (count === length) {
22
            resolve(res);
23
          }
24
          run();
25
        }, reject);
26
        running++;
27
        index++;
28
      }
29
    };
30
    run();
31
  });
32
};
33

34
/**
35
 * @param {Array<() => Promise<any>>} funcs
36
 * @param {number} max
37
 * @return {Promise}
38
 */
39
const throttlePromises = async (funcs, max = Infinity) => {
40
  const ret = [],
41
    executing = [];
42
  for (const func of funcs) {
43
    const p = Promise.resolve(func());
44
    ret.push(p);
45
    if (funcs.length > max) {
46
      const e = p.finally(() => executing.splice(executing.indexOf(e), 1));
47
      executing.push(e);
48
      if (executing.length >= max) {
49
        await Promise.race(executing);
50
      }
51
    }
52
  }
53
  return Promise.all(ret);
54
};

调度器版本

难绷，曾经最熟悉的一题，居然没做出来。🤡 卡点主要在于add方法需要返回一个promise对象，这个promise对象的状态应该由task函数的执行结果来决定，但根据并发控制的需求，不能直接执行task函数，这样违背了并发控制的需求，需要将这个函数再包装一下，包装成另一个函数即() => task().then(resolve, reject)，推入任务队列，其他即为递归的调度执行。注意由于任务是一个个加进来的所以使用的是if判断条件，和上面的还是有一些不一样。

1
class Scheduler {
2
  constructor(size = 2) {
3
    this.size = size;
4
    this.queue = [];
5
    this.running = 0;
6
  }
7
  add(task) {
8
    return new Promise((resolve, reject) => {
9
      this.queue.push(() => task().then(resolve, reject));
10
      this.executeNext();
11
    });
12
  }
13
  executeNext() {
14
    if (this.queue.length && this.running < this.size) {
15
      const task = this.queue.shift();
16
      task().finally(() => {
17
        this.running--;
18
        this.executeNext();
19
      });
20
      this.running++;
21
    }
22
  }
23
}
24

25
const timeout = (time) =>
26
  new Promise((resolve) => {
27
    setTimeout(resolve, time);
28
  });
29
const timeout0 = (time) =>
30
  new Promise((resolve, reject) => {
31
    setTimeout(reject, time);
32
  }).catch((e) => e);
33

34
const scheduler = new Scheduler();
35
const addTask = (time, order) => {
36
  scheduler.add(() => timeout(time)).then(() => console.log(order));
37
};
38
const addTask0 = (time, order) => {
39
  scheduler.add(() => timeout0(time)).then(() => console.log(order));
40
};
41

42
addTask(1000, "1");
43
addTask0(500, "2");
44
addTask(300, "3");
45
addTask(400, "4");
46

47
// output: 2 3 1 4
48
// 一开始，1、2两个任务进入队列
49
// 500ms时，2完成，输出2，任务3进队
50
// 800ms时，3完成，输出3，任务4进队
51
// 1000ms时，1完成，输出1
52
// 1200ms时，4完成，输出4

lodash.get

基本思路为解析路径至数组然后使用数组的reduce方法进行递归获取对象

1
/**
2
 * @param {object} source
3
 * @param {string | string[]} path
4
 * @param {any} [defaultValue]
5
 * @return {any}
6
 */
7
const get = (source, path, defaultValue = undefined) => {
8
  if (!Array.isArray(path)) {
9
    path = path.replace(/\[(\w+)\]/g, ".$1").split(".");
10
  }
11
  if (path.length === 0) {
12
    return defaultValue;
13
  }
14
  const res = path.reduce((pre, cur) => pre[cur], source);
15
  return res ?? defaultValue;
16
};

lodash.set

这个比较复杂一些，需要注意的细节有点多。

1
/**
2
 * @param {object} obj
3
 * @param {string | string[]} path
4
 * @param {any} value
5
 */
6
const set = (obj, path, value) => {
7
  if (!Array.isArray(path)) {
8
    path = path.replace(/\[(\w+)\]/g, ".$1").split(".");
9
  }
10
  const isNumber = (str) => str === String(Number(str));
11
  path.reduce((pre, cur, index) => {
12
    if (index === path.length - 1) {
13
      pre[cur] = value;
14
    }
15
    if (!pre[cur]) {
16
      if (isNumber(path[index + 1])) {
17
        pre[cur] = [];
18
      } else {
19
        pre[cur] = {};
20
      }
21
    }
22
    return pre[cur];
23
  }, obj);
24
};

千分位格式化

两种方式，循环与正则，推荐正则，注意正先行断言-存在使用的一些注意事项。

1
/**
2
 * @param {number} num
3
 * @return {string}
4
 */
5
const addComma = (num) => {
6
  const [p, q] = String(num).split(".");
7
  let count = 0,
8
    res = "";
9
  const regex = /[0-9]/;
10
  for (let i = p.length - 1; i >= 0; i--) {
11
    res = p[i] + res;
12
    if (++count % 3 === 0 && regex.test(p[i - 1])) {
13
      res = "," + res;
14
    }
15
  }
16
  if (!q) {
17
    return res;
18
  }
19
  return res + "." + q;
20
};
21

22
/**
23
 * @param {number} num
24
 * @return {string}
25
 */
26
const addComma = (num) => {
27
  let [p, q] = String(num).split(".");
28
  p = p.replace(/(\d)(?=(\d{3})+$)/g, "$1,");
29
  if (!q) {
30
    return p;
31
  }
32
  return p + "." + q;
33
};
34

35
console.log(addComma(-10000000000.102));

LazyMan

很经典的手写题，值得注意的地方有：

维护一个tasks队列存储所有任务。
使用setTimeout函数将任务推入宏任务队列，并且使用async和await语法配合for循环控制任务的执行顺序。
返回一个对象，对象身上有相关的执行方法，每个执行方法都返回对象本身，实现链式调用，注意相关方法不能使用箭头函数，这样this指向会出现问题，不会指向返回的对象。

1
// interface Laziness {
2
//   sleep: (time: number) => Laziness
3
//   sleepFirst: (time: number) => Laziness
4
//   eat: (food: string) => Laziness
5
// }
6

7
/**
8
 * @param {string} name
9
 * @param {(log: string) => void} logFn
10
 * @returns {Laziness}
11
 */
12
const LazyMan = (name, logFn) => {
13
  const tasks = [() => logFn(`Hi, I'm ${name}.`)];
14
  const eat = (food) => logFn(`Eat ${food}.`);
15
  const sleep = (time) =>
16
    new Promise((resolve) => setTimeout(() => resolve(), 1000 * time)).then(
17
      () => logFn(`Wake up after ${time} second${time > 1 ? "s" : ""}.`)
18
    );
19
  setTimeout(async () => {
20
    for (const func of tasks) {
21
      await func();
22
    }
23
  });
24
  return {
25
    eat(food) {
26
      tasks.push(() => eat(food));
27
      return this;
28
    },
29
    sleep(time) {
30
      tasks.push(() => sleep(time));
31
      return this;
32
    },
33
    sleepFirst(time) {
34
      tasks.unshift(() => sleep(time));
35
      return this;
36
    },
37
  };
38
};
39

40
const HardMan = (name) => {
41
  const tasks = [() => console.log(`I am ${name}`)];
42
  const rest = (i) =>
43
    new Promise((resolve) => setTimeout(resolve, i * 1000)).then(() =>
44
      console.log(`Start learning after ${i} seconds`)
45
    );
46
  const learn = (subject) => console.log(`Learning ${subject}`);
47
  setTimeout(async () => {
48
    for (const task of tasks) {
49
      await task();
50
    }
51
  });
52
  return {
53
    rest(i) {
54
      tasks.push(() => rest(i));
55
      return this;
56
    },
57
    restFirst(i) {
58
      tasks.unshift(() => rest(i));
59
      return this;
60
    },
61
    learn(subject) {
62
      tasks.push(() => learn(subject));
63
      return this;
64
    },
65
  };
66
};
67

68
// HardMan("jack");
69
// I am jack
70

71
// HardMan("jack").rest(10).learn("computer");
72
// 输出
73
// I am jack
74
// 等待10秒
75
// Start learning after 10 seconds
76
// Learning computer
77

78
// HardMan("jack").restFirst(5).learn("chinese");
79
// 输出
80
// 等待5秒
81
// Start learning after 5 seconds
82
// I am jack
83
// Learning chinese

数组转树

JSON文件转化为树结构的问题，关键在于利用对象的引用和map结构来进行操作。

面试的时候这么简单的题居然没做出来，顶级 🤡，DFS入脑了看啥都想DFS，其实只要对每个对象建立一个Map，然后遍历对象进行赋值就好了，主要还是利用了对象本身的唯一性。

1
const arr = [
2
  { id: 1, name: "部门1", pid: 0 },
3
  { id: 2, name: "部门2", pid: 1 },
4
  { id: 3, name: "部门3", pid: 1 },
5
  { id: 4, name: "部门4", pid: 3 },
6
  { id: 5, name: "部门5", pid: 4 },
7
];
8

9
const target = [
10
  {
11
    id: 1,
12
    name: "部门1",
13
    pid: 0,
14
    children: [
15
      {
16
        id: 2,
17
        name: "部门2",
18
        pid: 1,
19
        children: [],
20
      },
21
      {
22
        id: 3,
23
        name: "部门3",
24
        pid: 1,
25
        children: [],
26
      },
27
    ],
28
  },
29
];
30
const convertToTree = (arr) => {
31
  const map = new Map();
32
  for (const item of arr) {
33
    map.set(item.id, item);
34
  }
35
  let res = null;
36
  for (const item of arr) {
37
    if (item.pid === 0) {
38
      res = item;
39
      continue;
40
    }
41
    const parent = map.get(item.pid);
42
    if (!parent.children) {
43
      parent.children = [];
44
    }
45
    parent.children.push(item);
46
  }
47
  return res;
48
};
49
console.dir(convertToTree(arr), { depth: null });
50

51
// {
52
//   id: 1,
53
//   name: '部门1',
54
//   pid: 0,
55
//   children: [
56
//     { id: 2, name: '部门2', pid: 1 },
57
//     {
58
//       id: 3,
59
//       name: '部门3',
60
//       pid: 1,
61
//       children: [
62
//         {
63
//           id: 4,
64
//           name: '部门4',
65
//           pid: 3,
66
//           children: [ { id: 5, name: '部门5', pid: 4 } ]
67
//         }
68
//       ]
69
//     }
70
//   ]
71
// }

斐波那契数列的两种实现方式

尾调用优化解决问题。

1
const fib = (n, a = 0, b = 1) => {
2
  if (n === 0) {
3
    return a;
4
  }
5
  return fib(n - 1, b, a + b);
6
};
7

8
const fib = (n) => {
9
  if (n === 0) return 0;
10
  if (n === 1) return 1;
11
  return fib(n - 1) + fib(n - 2);
12
};
13

14
fib(10); // 55
15
fib(1000); // timeout

业务场景题

利用迭代器来使async与await来阻塞当前函数的执行线程。

1
const sleep = (delay) =>
2
  new Promise((resolve) => {
3
    setTimeout(resolve, delay);
4
  });
5

6
async function test() {
7
  console.log(1);
8
  await sleep(1000);
9
  console.log("Stop for 1s!");
10
  await sleep(2000);
11
  console.log("Stop for 2s!");
12
  await sleep(3000);
13
  console.log("Stop for 3s!");
14
}
15
test();

使用promise封装一个ajax请求

1
<body>
2
  <button>发送ajax请求</button>
3
  <script>
4
    //1.获取DOM元素对象
5
    let btn = document.querySelector("button");
6
    //2.绑定事件
7
    btn.onclick = function () {
8
      //3.创建promise实例对象
9
      const p = new Promise((resolve, reject) => {
10
        //4.创建ajax实例对象
11
        const xhr = new XMLHttpRequest();
12
        //5.打开请求
13
        xhr.open(
14
          "get",
15
          "https://www.yiketianqi.com/free/day?appid=82294778&appsecret=4PKVFula&unescape=1"
16
        );
17
        //6.发送请求
18
        xhr.send();
19
        //7.利用onreadystatechange事件
20
        xhr.onreadystatechange = function () {
21
          //8.判断
22
          if (xhr.readyState == 4) {
23
            if (xhr.status == 200) {
24
              resolve(xhr.responseText);
25
            } else {
26
              reject(xhr.response);
27
            }
28
          }
29
        };
30
      });
31
      p.then(
32
        (value) => {
33
          console.log(JSON.parse(value));
34
        },
35
        (reason) => {
36
          console.log("获取信息失败");
37
        }
38
      );
39
    };
40
  </script>
41
</body>

实现日期格式化函数

1
const dateFormat = (dateString, format) => {
2
  const date = new Date(dateString);
3
  const day = date.getDay();
4
  const month = date.getMonth() + 1;
5
  const year = date.getFullYear();
6
  format = format.replace(/yyyy/, year);
7
  format = format.replace(/MM/, month);
8
  format = format.replace(/dd/, day);
9
  return format;
10
};
11
dateFormat("2020-12-01", "yyyy/MM/dd"); // 2020/12/01
12
dateFormat("2020-04-01", "yyyy/MM/dd"); // 2020/04/01
13
dateFormat("2020-04-01", "yyyy年MM月dd日"); // 2020年04月01日

交换a, b的值不能用临时变量
JS
```
1
b = a + b;
2
a = b - a;
3
b = b - a;
```

注意ajax一定需要send方法

1
function getJSON(url) {
2
  const p = new Promise((resolve, reject) => {
3
    const xhr = new XMLHttpRequest();
4
    xhr.open("GET", url);
5
    xhr.responseType = "json";
6
    xhr.setRequestHeader("Accept", "application/json");
7
    xhr.onreadystatechange = () => {
8
      if (xhr.readyState === XMLHttpRequest.DONE) {
9
        if (xhr.status === 200) {
10
          return resolve(xhr.responseText);
11
        }
12
      }
13
      reject(xhr.statusText);
14
    };
15
    xhr.send();
16
  });
17
  return p;
18
}

数组的乱序输出

1
const a = [1, 2, 3, 4, 5];
2
const randomOutput = (arr) => {
3
  for (let i = 0; i < arr.length; i++) {
4
    const index = Math.floor(Math.random() * (arr.length - i)) + i;
5
    [arr[index], arr[i]] = [arr[i], arr[index]];
6
    console.log(arr[i]);
7
  }
8
};
9
const randomOutput0 = (arr) => {
10
  let length = arr.length;
11
  while (length) {
12
    const index = Math.floor(Math.random() * length--);
13
    [arr[index], arr[length]] = [arr[length], arr[index]];
14
    console.log(arr[length]);
15
  }
16
};
17
randomOutput(a);
18
console.log(a);

实现数组的斜向打印

1
function printMatrix(arr) {
2
  const m = arr.length,
3
    n = arr[0].length;
4
  const result = [];
5
  for (let i = 0; i < n; i++) {
6
    for (let j = 0, k = i; k >= 0 && j < m; j++, k--) {
7
      result.push(arr[j][k]);
8
    }
9
  }
10
  for (let i = 1; i < m; i++) {
11
    for (let j = n - 1, k = i; j > 0 && k < m; k++, j--) {
12
      result.push(arr[k][j]);
13
    }
14
  }
15
  return result;
16
}
17
console.log(
18
  printMatrix([
19
    [1, 2, 3, 4],
20
    [4, 5, 6, 4],
21
    [7, 8, 9, 4],
22
  ])
23
);

电话号码的打印：

1
const changeNum = (str) => {
2
  return str.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$2");
3
};
4
const changeNum0 = (str) => {
5
  const arr = Array.from(str);
6
  arr.splice(3, 4, "****");
7
  return arr.join("");
8
};
9
const changeNum1 = (str) => {
10
  return str.replace(str.slice(3, 7), "****");
11
};
12

13
console.log(changeNum1("15727709770"));

循环打印方案

1
const task = (light, delay, callback) => {
2
  setTimeout(() => {
3
    if (light === "red") {
4
      console.log("yellow");
5
    } else if (light === "yellow") {
6
      console.log("green");
7
    } else if (light === "green") {
8
      console.log("red");
9
    }
10
    callback();
11
  }, delay);
12
};
13
const step = () => {
14
  task("green", 1000, () =>
15
    task("red", 1000, () => task("yellow", 1000, () => step()))
16
  );
17
};
18
step();
19
// 利用 promise 包装对象链式递归调用
20
const task = (delay, light) => {
21
  return new Promise((resolve, reject) => {
22
    setTimeout(() => {
23
      if (light === "red") {
24
        console.log("red");
25
      } else if (light === "yellow") {
26
        console.log("yellow");
27
      } else if (light === "green") {
28
        console.log("green");
29
      }
30
      resolve();
31
    }, delay);
32
  });
33
};
34

35
const step = () => {
36
  const p = new Promise((resolve, reject) => {
37
    resolve(task(1000, "red"));
38
  });
39
  p.then(() => task(1000, "green"))
40
    .then(() => task(1000, "yellow"))
41
    .then(step);
42
};
43
step();
44

45
const taskMaker = () => {
46
  let run = true;
47
  const stop = () => (run = false);
48
  const execute = async () => {
49
    while (run) {
50
      await task(1000, "red");
51
      await task(1000, "yellow");
52
      await task(1000, "green");
53
    }
54
  };
55
  return { stop, execute };
56
};
57
const { stop, execute } = taskMaker();
58
execute();
59
console.time("Test");
60
setTimeout(() => {
61
  console.log("stop");
62
  stop();
63
  console.timeEnd("Test");
64
}, 4000);

丢手帕问题

1
const Josephu = (num, count) => {
2
  const circle = [];
3
  for (let i = 0; i < num; i++) {
4
    circle[i] = i + 1;
5
  }
6
  let counter = 0;
7
  let out = 0;
8
  for (let i = 0; i < circle.length; i++) {
9
    if (out >= circle.length - 1) break;
10
    if (circle[i]) {
11
      counter++;
12
      if (counter === count) {
13
        circle[i] = 0;
14
        counter = 0;
15
        out++;
16
      }
17
    }
18
    if (i === circle.length - 1) i = -1;
19
  }
20
  for (let i = 0; i < circle.length; i++) {
21
    if (circle[i]) return circle[i];
22
  }
23
};
24
function childNum(num, count) {
25
  let allplayer = [];
26
  for (let i = 0; i < num; i++) {
27
    allplayer[i] = i + 1;
28
  }
29

30
  let exitCount = 0; // 离开人数
31
  let counter = 0; // 记录报数
32
  let curIndex = 0; // 当前下标
33

34
  while (exitCount < num - 1) {
35
    if (allplayer[curIndex] !== 0) counter++;
36

37
    if (counter == count) {
38
      allplayer[curIndex] = 0;
39
      counter = 0;
40
      exitCount++;
41
    }
42
    curIndex++;
43
    if (curIndex == num) {
44
      curIndex = 0;
45
    }
46
  }
47
  for (i = 0; i < num; i++) {
48
    if (allplayer[i] !== 0) {
49
      return allplayer[i];
50
    }
51
  }
52
}
53
console.log(Josephu(39, 6));
54
console.log(childNum(39, 6));

查找文章中出现频率最高的单词

1
const findMostWord = (article) => {
2
  if (!article) {
3
    console.error("Argument cannot be undefined or null!");
4
  }
5
  const str = article.trim().toLowerCase();
6
  const words = str.match(/[a-z]+/g);
7
  let maxCount = 0,
8
    maxStr = "",
9
    set = new Set();
10
  words.forEach((item) => {
11
    if (!set.has(item)) {
12
      set.add(item);
13
      const count = str.match(new RegExp(`\\b${item}\\b`, "g")).length;
14
      if (count > maxCount) {
15
        maxStr = item;
16
        maxCount = count;
17
      }
18
    }
19
  });
20
  return maxStr + ":" + maxCount;
21
};
22
const findMostWord0 = (article) => {
23
  // 合法性判断
24
  if (!article) return;
25
  // 参数处理
26
  article = article.trim().toLowerCase();
27
  let wordList = article.match(/[a-z]+/g),
28
    visited = [],
29
    maxNum = 0,
30
    maxWord = "";
31
  article = " " + wordList.join("  ") + " ";
32
  // 遍历判断单词出现次数
33
  wordList.forEach(function (item) {
34
    if (visited.indexOf(item) < 0) {
35
      // 加入 visited
36
      visited.push(item);
37
      let word = new RegExp(" " + item + " ", "g"),
38
        num = article.match(word).length;
39
      if (num > maxNum) {
40
        maxNum = num;
41
        maxWord = item;
42
      }
43
    }
44
  });
45
  return maxWord + "  " + maxNum;
46
};
47
console.log(findMostWord0("a a a a a a bbb bbb bbb b b b b b b b b b b b"));

setTimeout模仿setInterval

1
const mySetInterval = (fn, wait) => {
2
  const timer = { flag: true };
3
  const step = () => {
4
    if (timer.flag) {
5
      fn();
6
      setTimeout(step, wait);
7
    }
8
  };
9
  step();
10
  return timer;
11
};
12
const timer = mySetInterval(() => console.log(10), 1000);
13
setTimeout(() => (timer.flag = false), 5000);

判断对象中是否存在循环引用

1
const isCircle = (target) => {
2
  const set = new Set();
3
  const step = (obj) => {
4
    if (typeof obj !== "object" || obj === null) return false;
5
    if (set.has(obj)) return true;
6
    set.add(obj);
7
    for (const key of Reflect.ownKeys(obj)) {
8
      const result = step(obj[key]);
9
      if (result) return true;
10
    }
11
  };
12
  return step(target);
13
};
14
const a = { a: 1 };
15
a.b = a;
16
console.log(a);
17
console.log(isCircle(a.b));

手写一个undefinedToNull函数

1
/**
2
 * @param {any} arg
3
 * @returns any
4
 */
5
const undefinedToNull = (arg) => {
6
  if (arg === undefined) return null;
7
  if (typeof arg !== "object" || arg === null) return arg;
8
  for (const key in arg) {
9
    arg[key] = undefinedToNull(arg[key]);
10
  }
11
  return arg;
12
};

判断字符串的有效数字

1
/**
2
 * @param {string} str
3
 * @returns {boolean}
4
 */
5
const validateNumberString = (str) => {
6
  return str !== "" && !isNaN(str);
7
};
8
const validateNumberString = (str) => {
9
  return /^[+-]?(\d+(\.\d*)?|\d*\.\d+)(e[+-]?\d+)?$/i.test(str);
10
};

实现一个累加器

1
/**
2
 * @param {number} num
3
 */
4
const sum = (count) => {
5
  function sumInner(number) {
6
    return sum(count + number);
7
  }
8
  sumInner.valueOf = () => count;
9
  return sumInner;
10
};

counter function自执行包裹

1
const count = (() => {
2
  let num = 0;
3
  function func() {
4
    return ++num;
5
  }
6
  func.reset = () => {
7
    num = 0;
8
  };
9
  return func;
10
})();

counter对象，简单的数据代理

1
/**
2
 * @returns { {count: number}}
3
 */
4
const createCounter = () => {
5
  let count = 0;
6
  return Object.defineProperty({}, "count", {
7
    get() {
8
      return count++;
9
    },
10
    set() {
11
      console.log("it cannot be altered");
12
    },
13
  });
14
};

失败后自动发起请求，超时后停止。

1
/**
2
 * @param {() => Promise<any>} fetcher
3
 * @param {number} maximumRetryCount
4
 * @return {Promise<any>}
5
 */
6
function fetchWithAutoRetry(fetcher, maximumRetryCount) {
7
  // your code here
8
  return new Promise((resolve, reject) => {
9
    let count = 0;
10
    const run = () => {
11
      fetcher().then(resolve, (r) => {
12
        count++;
13
        if (count > maximumRetryCount) return reject(r);
14
        run();
15
      });
16
    };
17
    run();
18
  });
19
}

封装一个fetch请求

1
class HTTPRequestUtil {
2
  async get(url) {
3
    const res = await fetch(url);
4
    const data = await res.json();
5
    return data;
6
  }
7
  async post(url, data) {
8
    const res = await fetch(url, {
9
      method: "POST",
10
      headers: {
11
        "Content-type": "application/json",
12
      },
13
      body: JSON.stringify(data),
14
    });
15
    const result = await res.json();
16
    return result;
17
  }
18
  async put(url, data) {
19
    const res = await fetch(url, {
20
      method: "PUT",
21
      headers: {
22
        "Content-type": "application/json",
23
      },
24
      body: JSON.stringify(data),
25
    });
26
    const result = await res.json();
27
    return result;
28
  }
29
  async delete(url, data) {
30
    const res = await fetch(url, {
31
      method: "DELETE",
32
      headers: {
33
        "Content-type": "application/json",
34
      },
35
      body: JSON.stringify(data),
36
    });
37
    const result = await res.json();
38
    return result;
39
  }
40
}

评论加载中…

JS 基础篇

ES5 实现继承

实现 new 函数

手写 instanceof

手写数据类型判断函数

手写 promisify 函数

手写 async 方法

手写 EventEmitter 函数

手写 call,apply,bind

手写 Object.create

手写数组 push

手写字符串 repeat

手写 Object.assign

实现数组的 flat 方法

深入 JS 的使用

柯里化

深拷贝

防抖与节流

并发控制

lodash.get

lodash.set

千分位格式化

LazyMan

数组转树

斐波那契数列的两种实现方式

业务场景题

相关推荐

评论