笔试题

[toc]

JavaScript

下面代码中 a 在什么情况下会打印 1？

  1. var a = ?;
  2. if(a == 1 && a == 2 && a == 3){
  3.      console.log(1);
  4. }
  6. //解答
  7. var a = {
  8.   value: 0,
  10.   valueOf() {
  11.     return ++this.value;
  12.   }
  13. };

实现一个 sleep 函数?

比如 sleep(1000) 意味着等待1000毫秒，可从 Promise、Generator、Async/Await 等角度实现

  1. // Promise
  3. function sleep1(time) {
  4.   return new Promise(resolve => {
  5.     setTimeout(() => {
  6.       resolve();
  7.     }, time);
  8.   })
  9. }
  11. sleep1(1000).then(() => console.log("sleep1"));
  13. // Generator
  15. function* sleep2(time) {
  16.   return yield sleep1(time);
  17. }
  19. const s = sleep2(1500);
  20. s.next().value.then(() => console.log("sleep2"));
  23. // Async/Await
  25. async function sleep3(time) {
  26.   await sleep1(time);
  27. }
  29. (async () => {
  30.   await sleep3(2000);
  31.   console.log("sleep3")
  32. })()

实现 (5).add(3).minus(2) 功能?

  1. Number.prototype.add = function(n) {
  2.   return this + n;
  3. }
  5. Number.prototype.minus = function(n) {
  6.   return this - n;
  7. }

instanceof 的实现原理

  1. while (x.__proto__) {
  2.   if (x.__proto__ === y.prototype) {
  3.     return true;
  4.   }
  5.   x.__proto__ = x.__proto__.__proto__;
  6. }
  7. if (x.__proto__ === null) {
  8.   return false;
  9. }

考察this指向的题

  1. //请给出如下代码的打印结果
  2. function Foo() {
  3.   Foo.a = function() {
  4.       console.log(1)
  5.   }
  6.   this.a = function() {
  7.       console.log(2)
  8.   }
  9. }
  10. Foo.prototype.a = function() {
  11.   console.log(3)
  12. }
  13. Foo.a = function() {
  14.   console.log(4)
  15. }
  16. Foo.a();
  17. let obj = new Foo(); 
  18. obj.a();
  19. Foo.a();
  21. //print
  22. 打印结果： 4 2 1

考察赋值表达式

  1. var a = {n: 1};
  2. var b = a;
  3. a.x = a = {n: 2};
  5. console.log(a.x)     
  6. console.log(b.x)
  8. //输出
  9. {n:2}
  10. undefined
  1. // example 1
  2. var a={}, b='123', c=123;  
  3. a[b]='b';
  4. a[c]='c';  
  5. console.log(a[b]);
  7. ---------------------
  8. // example 2
  9. var a={}, b=Symbol('123'), c=Symbol('123');  
  10. a[b]='b';
  11. a[c]='c';  
  12. console.log(a[b]);
  14. ---------------------
  15. // example 3
  16. var a={}, b={key:'123'}, c={key:'456'};  
  17. a[b]='b';
  18. a[c]='c';  
  19. console.log(a[b]);
  21. //输出：
  22. c b c

考察事件循环

  1. async function async1() {
  2.   console.log('async1 start');
  3.   await async2();
  4.   console.log('async1 end');
  5. }
  6. async function async2() {
  7.   console.log('async2');
  8. }
  9. console.log('script start');
  10. setTimeout(function() {
  11.   console.log('setTimeout');
  12. }, 0)
  13. async1();
  14. new Promise(function(resolve) {
  15.   console.log('promise1');
  16.   resolve();
  17. }).then(function() {
  18.   console.log('promise2');
  19. });
  20. console.log('script end');
  22. //运行结果：
  23. script start
  24. async1 start
  25. async2
  26. promise1
  27. script end
  28. async1 end
  29. promise2
  30. setTimeout

考察作用域

  1. var b = 10;
  2. (function b(){
  3.     b = 20;
  4.     console.log(b); 
  5. })();
  7. //输出：
  8. ƒ b(){
  9.   b = 20;
  10.   console.log(b); 
  11. }
  13. //原因:
  15. 作用域：执行上下文中包含作用域链；
  16. 特性：声明提前：一个声明在函数体内都是可见的，函数声明优先于变量声明；
  17. 在非匿名自执行函数中，函数变量为只读状态无法修改。
  1. var a = 10;
  2. (function () {
  3.     console.log(a)
  4.     a = 5
  5.     console.log(window.a)
  6.     var a = 20;
  7.     console.log(a)
  8. })()
  10. //输出 undefined 10 20

手写 bind、call、apply

  1. Function.prototype.MyCall = function (context) {
  2.   const args = [...arguments].slice(1);
  4.   context.fn = this;
  6.   const result = context.fn(...args);
  7.   delete context.fn;
  9.   return result;
  10. }
  12. Function.prototype.MyApply = function (context) {
  13.   const args = arguments[1] || [];
  15.   context.fn = this;
  16.   const result = context.fn(...args);
  17.   delete context.fn;
  19.   return result;
  20. }
  22. Function.prototype.MyBind = function (context) {
  23.   const args = [...arguments].slice(1);
  25.   return function () {
  26.     context.MyApply(context, args);
  27.   }
  28. }

模拟 new 的实现

  1. function myNew(fn) {
  2.   const newObj = Object.create(fn.prototype);
  3.   result = fn.apply(newObj, [...arguments].slice(1));
  4.   return typeof result === "object" ? result : newObj;
  5. }

数据结构

数据处理1(数组基础)

某公司 1 到 12 月份的销售额存在一个对象里面 如下：{1:222, 2:123, 5:888}，请把数据处理为如下结构：[222, 123, null, null, 888, null, null, null, null, null, null, null]

  1. //解答：
  2. function convert(obj) {
  3.   return Array.from({ length: 12 }).map((item, index) => obj[index] || null).slice(1);
  4. }

数据处理2(数组基础)

  1. var obj = {
  2.   '2': 3,
  3.   '3': 4,
  4.   'length': 2,
  5.   'splice': Array.prototype.splice,
  6.   'push': Array.prototype.push
  7. }
  8. obj.push(1)
  9. obj.push(2)
  10. console.log(obj)
  12. 输出：[,,1,2] length 为 4
  13. 解释：Array.prototype.push 将根据 length 将元素填充到对应位置并修改 length 属性 +1，所以输出的结果就是上述结果

数据处理3(消息队列)

要求设计 LazyMan 类，实现以下功能。

  1. LazyMan('Tony');
  2. // Hi I am Tony
  4. LazyMan('Tony').sleep(10).eat('lunch');
  5. // Hi I am Tony
  6. // 等待了10秒...
  7. // I am eating lunch
  9. LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
  10. // Hi I am Tony
  11. // I am eating lunch
  12. // 等待了10秒...
  13. // I am eating diner
  15. LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
  16. // Hi I am Tony
  17. // 等待了5秒...
  18. // I am eating lunch
  19. // I am eating dinner
  20. // 等待了10秒...
  21. // I am eating junk food
  23. //实现：
  24. class LazyManClass {
  25.   constructor(name) {
  26.     this.name = name;
  27.     this.fns = [];
  28.     console.log(`Hi I am ${this.name}`);
  29.     setTimeout(() => {
  30.       this.next();
  31.     });
  32.     return this
  33.   }
  35.   sleep(time) {
  36.     const fn = () => {
  37.       setTimeout(() => {
  38.         console.log(`等待了${time}秒...`)
  39.         this.next();
  40.       }, time * 1000)
  41.     }
  42.     this.fns.push(fn);
  43.     return this;
  44.   }
  46.   sleepFirst(time) {
  47.     const fn = () => {
  48.       setTimeout(() => {
  49.         console.log(`等待了${time}秒...`)
  50.         this.next();
  51.       }, time * 1000)
  52.     }
  53.     this.fns.unshift(fn);
  54.     return this;
  55.   }
  57.   eat(food) {
  58.     const fn = () => {
  59.       console.log(`I am eating ${food}`);
  60.       this.next();
  61.     }
  62.     this.fns.push(fn);
  63.     return this;
  64.   }
  66.   next() {
  67.     const fn = this.fns.shift();
  68.     fn && fn();
  69.   }
  70. }
  72. const LazyMan = (name) => {
  73.   return new LazyManClass(name);
  74. }
  76. // LazyMan('Tony');
  77. // Hi I am Tony
  79. // LazyMan('Tony').sleep(10).eat('lunch');
  80. // Hi I am Tony
  81. // 等待了10秒...
  82. // I am eating lunch
  84. // LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
  85. // Hi I am Tony
  86. // I am eating lunch
  87. // 等待了10秒...
  88. // I am eating diner
  90. LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
  91. // Hi I am Tony
  92. // 等待了5秒...
  93. // I am eating lunch
  94. // I am eating dinner
  95. // 等待了10秒...
  96. // I am eating junk food

数据处理4(数组扁平化)

  1. //已知如下数组：
  2. var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
  3. //编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组
  5. // 思路型
  6. function flatten(arr) {
  7.   let flattenArr = [];
  8.   for (let i = 0; i < arr.length; i++) {
  9.     const item = arr[i];
  10.     if (Array.isArray(item)) {
  11.       flattenArr = flattenArr.concat(flatten(item))
  12.     } else {
  13.       if (flattenArr.indexOf(item) > -1) continue;
  14.       flattenArr.push(item);
  15.     }
  16.   }
  17.   return flattenArr.sort((a, b) => a - b);
  18. }
  20. // API 型
  21. function flatten2(arr) {
  22.   return Array.from(new Set(arr.flat(Infinity))).sort((a, b) => a - b);
  23. }

数据处理5(数组大小写取反)

  1. //如何把一个字符串的大小写取反（大写变小写小写变大写），例如 ’AbC' 变成 'aBc' 
  2. function convert(str) {
  3.   let convertStr = "";
  4.   for (let i = 0; i < str.length; i++) {
  5.     const code = str.charCodeAt(i);
  6.     if (code >= 97) {
  7.       convertStr += String.fromCharCode(code - 32);
  8.     } else {
  9.       convertStr += String.fromCharCode(code + 32);
  10.     }
  11.   }
  12.   return convertStr;
  13. }
  15. console.log(convert("AbC"));

数据处理6(数组随机排序)

  1. //如何实现数组的随机排序？
  2. // 随机数排序
  3. function random1(arr) {
  4.   return arr.sort(() => Math.random() - .5);
  5. }
  7. // 随机插入排序
  8. function random2(arr) {
  9.   const cArr = [...arr];
  10.   const newArr = [];
  11.   while (cArr.length) {
  12.     const index = Math.floor(Math.random() * cArr.length);
  13.     newArr.push(cArr[index]);
  14.     cArr.splice(index, 1);
  15.   }
  16.   return newArr;
  17. }
  19. // 洗牌算法，随机交换排序
  20. function random3(arr) {
  21.   const l = arr.length;
  22.   for (let i = 0; i < l; i++) {
  23.     const index = Math.floor(Math.random() * (l - i)) + i;
  24.     const temp = arr[index];
  25.     arr[index] = arr[i];
  26.     arr[i] = temp;
  27.   }
  28.   return arr;
  29. }

网络

使用 Proxy + Fetch 实现类似于 axios 的基础 API

  1. const fetch = require("node-fetch");
  3. const axiosOriginal = {
  4.   methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
  5. };
  6. const axios = new Proxy(axiosOriginal, {
  7.   set() {
  8.     throw new Error("Can't set any property");
  9.   },
  11.   get(target, name) {
  12.     const method = name.toLocaleUpperCase();
  13.     if (target.methods.indexOf(method) === -1) throw new Error(`Can't support method ${method}`);
  14.     return (url, options) => {
  15.       return fetch(url, {
  16.         method,
  17.         ...options
  18.       }).then(res => res.text())
  19.     }
  20.   }
  21. });
  23. axios.get("http://www.baidu.com").then(res => console.log(res));
  24. axios.post("http://www.baidu.com").then(res => console.log(res));

React

考察setState

  1. class Example extends React.Component {
  2.   constructor() {
  3.     super();
  4.     this.state = {
  5.       val: 0
  6.     };
  7.   }
  9.   componentDidMount() {
  10.     this.setState({val: this.state.val + 1});
  11.     console.log(this.state.val);    // 第 1 次 log
  13.     this.setState({val: this.state.val + 1});
  14.     console.log(this.state.val);    // 第 2 次 log
  16.     setTimeout(() => {
  17.       this.setState({val: this.state.val + 1});
  18.       console.log(this.state.val);  // 第 3 次 log
  20.       this.setState({val: this.state.val + 1});
  21.       console.log(this.state.val);  // 第 4 次 log
  22.     }, 0);
  23.   }
  25.   render() {
  26.     return null;
  27.   }
  28. };
  30. //输出
  31. 0 0 2 3
  33. //解答：
  34. 第一次和第二次都是在 react 自身声明周期内，触发时 isBatchingUpdates 为 true，所以并不会直接执行更新 state，而是加入了 dirtyComponents，所以打印的时获取的都是更新前的状态 0；
  35. 两次 setState，获取到 this.state.val 都是 0，所以执行时都是将 0 设置成 1，在 react 内部会被合并掉，只执行一次，设置完成后 state.val 值为 1.
  36. setTimeout 中的代码，触发时 isBatchingUpdate 为 false，所以能够直接进行更新，所以连着输出 2、3