草庐IT

大厂面试 TypeScript 套题,看看你能做出几个

千锋HTML5大前端 2023-04-10 原文

某大厂给前端面试者出了一套 TypeScript 笔试题,要求面试者在线实时答题。这种面试题考察的是应聘者的 TS 硬实力,先把题目和要求给出来,你试试能做出来几个。

一、答题要求

1、环境搭建

所有题目均为 NodeJS 环境下,TypeScript 编程题。 NodeJS 版本建议 v14 及以上。代码题以本地可以运行通过为准,Node 版本不够则无法运行高版本语法。 请提前配置好开发环境。

npm i ts-node -g

2、依赖

NodeJS 环境运行 TS 文件推荐使用 ts-node,建议提前安装。

运行 ts-node 运行第一题命令如下:

ts-node src/1.reverseWord.ts

3、tsconfig.json

{
  "compilerOptions": {
    "target": "es2016", 
    "module": "commonjs", 
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true,
    "strict": true, 
    "skipLibCheck": true 
  }
}

二、笔试题目

1、objToArray.ts

/**
 * @file objToArray
 *
 * 将对象按照要求转为数组
 * 注意console示例运行结果
 */
type Obj = Record<string, string>;
interface FormatItem {
  key: string;
  op: string;
  value: string;
}

function objToArray(obj: Record<string, Obj>): FormatItem[] {
  // 补全此处代码
  throw new Error("功能待实现");
}

console.log(
  objToArray({
    key1: {
      op1: "value1",
    },
    key2: {
      op2: "value2",
    },
  })
);
// result示例
// [
//     {key: 'key1', op: 'op1', value: 'value1'},
//     {key: 'key2', op: 'op2', value: 'value2'}
// ]

export default {};

2、reverseWord.ts

/**
 * @file 反转句子
 * 
 * 同时满足以下条件:1、去除首尾空格,2、单词间隔中多个空格变成一个;
 * 注意console示例运行结果
 */

function reverseWord(str: string) {
	// 补全此处代码
	throw new Error('功能待实现');
}

console.log(reverseWord('the sky is blue')); // blue is sky the
// 去除首尾空格
console.log(reverseWord("  hello world  ")); // world hello
// 单词间隔中多个空格变成一个
console.log(reverseWord("a good   example")); // example good a

export default {}

3、firstSingleChar.ts

/**
 * @file 找出字符串中第一个只出现一次的字符
 */

function firstSingleChar(str: string) {
	// 补全此处代码
	throw new Error('功能待实现');
}

// a 和 b 都出现了两次,只有 c 出现了一次,返回 c
console.log(firstSingleChar('abcba')) // c
// b c d 都出现了一次,返回第一个
console.log(firstSingleChar('aabcdee')) // b
// a 和 b 都出现了多次,没有只出现一次的元素,返回 undefined
console.log(firstSingleChar('aaaabbbb')) // undefined

export default {}

4、mergeArray.ts

/**
 * @file 合并两个有序数组
 */

function merge(arr: number[], arr2: number[]): number[] {
	// 补全此处代码
	throw new Error('功能待实现');
}

// 参数数组从小到大排列
console.log(merge([1, 2, 3], [2, 5, 6])) // [ 1, 2, 2, 3, 5, 6 ]

export default {}

5、map.ts

/**
 * @file 实现数组 map 方法
 */

function myMap<T, R>(arr: T[], callbackFn: (v: T) => R): R[] {
	// 补全此处代码,可以使用除数组 map 以外的其他任何函数
	throw new Error('功能待实现');
}
// 测试
console.log(myMap([1, 2, 3], v => v * 2)) // [2, 4, 6]

export default {};

6、bTreePath.ts

/**
 * @file 二叉树所有路径
 */

type Tree = {
	value: number;
	left?: Tree;
	right?: Tree;
}
const tree: Tree = {
	value: 1,
	left: {
		value: 2,
		right: { value: 5 }
	},
	right: { value: 3 }
};
function treePath(root: Tree): string[] {
	// 补全此处代码
	throw new Error('功能待实现');
}
console.log(treePath(tree)) // [ '1->2->5', '1->3' ]

export default {}

7、mapTree.ts

/**
 * @file 树结构映射
 * 数组 map 保持数组长度相同,将对应位置元素进行映射。
 * 与之类似,在二叉树 Tree 上的映射我们称为 mapTree,该函数返回一个结构相同的新树,对应位置 value 字段经过 fn 映射。
 */

type Tree = {
	value: number;
	left?: Tree;
	right?: Tree;
}

function mapTree(tree: Tree, fn: (v: number) => number): Tree {
	// 补全此处代码
	throw new Error('功能待实现');
}

// 测试
const tree: Tree = {
	value: 1,
	left: { value: 2 },
	right: { value: 3 }
};
console.log(mapTree(tree, v => v * 2)) // { value: 2, left: { value: 4 }, right: { value: 6 } }

export default {};

8、product.ts

/**
 * @file 计算数组笛卡尔积
 */

// 示例
product([1, 2], [3, 4]) // [[1, 3], [1, 4], [2, 3], [2, 4]]

function product(xList: number[], yList: number[]): [number, number][] {
	// 补全内部实现
	throw new Error('功能待实现');
}

export default {}

9、sleep.ts

/**
 * @file 返回一个 Promise,并在 ms 毫秒后 Promise 变为完成状态
 */

export function sleep(ms: number): Promise<undefined> {
  // 补全此处代码
	throw new Error('功能待实现');
}

async function main(){
    console.log('a')
    await sleep(1000);
    console.log('b');
    await sleep(1000);
    console.log('c');
}
main()

export default {}

10、promiseAll.ts

/**
 * @file 实现 PromiseAll 方法
 */

import { sleep } from "./8.sleep";

async function myAll<T extends unknown[] | []>(values: T): Promise<{ [P in keyof T]: Awaited<T[P]> }> {
	// 补全此处代码,使用 Promise.all 以外的语法完成
	throw new Error('功能待实现');
}

// 一秒钟后返回结果 value
async function request(value: string) {
	await sleep(1000);
	return value;
}
async function main() {
	console.log('start');
	const res = await myAll([
		request('a'),
		request('b'),
		request('c'),
	])
	console.log(res); // 预期输出 start 一秒后输出 ['a', 'b', 'c']
}
main()

export default {}

11、asyncAdd.ts

/**
 * @file 假设加法是一个异步过程,如何计算多个数组之和?
 */
function sleep(ms: number) {
	return new Promise(r => {
		setTimeout(() => {
			r(undefined)
		}, ms);
	})
}

async function asyncAdd(a: number, b: number) {
	await sleep(1000);
	return a + b;
}

function sum(arr: number[]): Promise<number> {
	// 补全这里代码,涉及 arr 中两数求和只能使用 asyncAdd,禁止使用加号
	throw new Error('功能待实现');
}

console.time('a')
sum([1, 2, 3, 4, 5, 6, 7, 8])
	.then(v => {
		console.log(v) // 36
		console.timeEnd('a') // a: <耗时>
	})

export default {}

三、参考答案

1、objToArray.ts

/**
 * @file objToArray
 *
 * 将对象按照要求转为数组
 * 注意console示例运行结果
 */
type Obj = Record<string, string>;
interface FormatItem {
  key: string;
  op: string;
  value: string;
}

function objToArray(obj: Record<string, Obj>): FormatItem[] {
	// 参考答案
  return Object.keys(obj).reduce((value: Array<FormatItem>, key: string) => {
    var op: string = Object.keys(obj[key])[0];
    value.push({ key: key, op: op, value: obj[key][op] });
    return value;
  }, []);
}

console.log(
  objToArray({
    key1: {
      op1: "value1",
    },
    key2: {
      op2: "value2",
    },
  })
);
// result示例
// [
//     {key: 'key1', op: 'op1', value: 'value1'},
//     {key: 'key2', op: 'op2', value: 'value2'}
// ]

export default {};

2、reverseWord.ts

/**
 * @file 反转句子
 * 
 * 同时满足以下条件:1、去除首尾空格,2、单词间隔中多个空格变成一个;
 * 注意console示例运行结果
 */

function reverseWord(str: string):string {
	// 参考答案
	return (<string[]>str.match(/\S+/g)).reverse().join(" ");
}

console.log(reverseWord('the sky is blue')); // blue is sky the
// 去除首尾空格
console.log(reverseWord("  hello world  ")); // world hello
// 单词间隔中多个空格变成一个
console.log(reverseWord("a good   example")); // example good a

export default {}

3、firstSingleChar.ts

/**
 * @file 找出字符串中第一个只出现一次的字符
 */

function firstSingleChar(str: string) {
  // 参考答案
  return str.split("").filter((item: string, index: number, arr: string[]) => {
    arr.splice(index, 1);
    return !arr.includes(item);
  })[0];
}

// a 和 b 都出现了两次,只有 c 出现了一次,返回 c
console.log(firstSingleChar("abcba")); // c
// b c d 都出现了一次,返回第一个
console.log(firstSingleChar("aabcdee")); // b
// a 和 b 都出现了多次,没有只出现一次的元素,返回 undefined
console.log(firstSingleChar("aaaabbbb")); // undefined
console.log(firstSingleChar("dabvb"));

export default {};

4、mergeArray.ts

/**
 * @file 合并两个有序数组
 */

function merge(arr: number[], arr2: number[]): number[] {
  // 参考答案
  return arr.concat(arr2).sort((a: number, b: number) => a - b);
}

// 参数数组从小到大排列
console.log(merge([1, 2, 3], [2, 5, 6])); // [ 1, 2, 2, 3, 5, 6 ]

export default {};

5、map.ts

/**
 * @file 实现数组 map 方法
 */

function myMap<T, R>(arr: T[], callbackFn: (v: T) => R): R[] {
  // 参考答案
  var arr1: R[] = [];
  for (var i = 0; i < arr.length; i++) {
    if (i in arr) arr1[i] = callbackFn(arr[i]);
  }
  return arr1;
}
// 测试
console.log(myMap([1, 2, 3], (v) => v * 2)); // [2, 4, 6]

export default {};

6、bTreePath.ts

/**
 * @file 二叉树所有路径
 */

type Tree = {
  value: number;
  left?: Tree;
  right?: Tree;
};

const tree: Tree = {
  value: 1,
  left: {
    value: 2,
    right: { value: 5 },
  },
  right: { value: 3 },
};

function treePath(root: Tree): string[] {
  // 补全此处代码
  // throw new Error('功能待实现');
  const answer: [] = [];
  let tmp: [][] = [];
  const travel = (r: Tree) => {
    if (r == null) {
      return;
    }
    //@ts-ignore
    tmp.push(r.value);
    if (r.left == null && r.right == null) {
      //@ts-ignore
      answer.push(tmp);
      tmp = [tmp[0]];
      return;
    }
    if (r.left) travel(r.left);
    if (r.right) travel(r.right);
  };
  travel(root);
  //@ts-ignore
  return answer.map((t) => t.join("->"));
}
console.log(treePath(tree)); // [ '1->2->5', '1->3' ]

export default {};

7、mapTree.ts

/**
 * @file 树结构映射
 * 数组 map 保持数组长度相同,将对应位置元素进行映射。
 * 与之类似,在二叉树 Tree 上的映射我们称为 mapTree,该函数返回一个结构相同的新树,对应位置 value 字段经过 fn 映射。
 */

type Tree = {
  value: number;
  left?: Tree;
  right?: Tree;
};

function mapTree(tree: Tree, fn: (v: number) => number): Tree {
  // 参考答案
  if (tree == null) {
    return tree;
  }
  tree.value = fn(tree.value);
  if (tree.left) mapTree(tree.left, fn);
  if (tree.right) mapTree(tree.right, fn);
  return tree;
}

// 测试
const tree: Tree = {
  value: 1,
  left: { value: 2 },
  right: { value: 3 },
};
console.log(mapTree(tree, (v) => v * 2)); // { value: 2, left: { value: 4 }, right: { value: 6 } }

export default {};

8、product.ts

/**
 * @file 计算数组笛卡尔积
 */

// 示例
console.log(product([1, 2], [3, 4])); // [[1, 3], [1, 4], [2, 3], [2, 4]]

function product(xList: number[], yList: number[]): [number, number][] {
  // 参考答案
  return xList.reduce((v, t) => {
    return v.concat(yList.map((item) => [t, item]));
  }, [] as [number, number][]);
}

export default {};

9、sleep.ts

/**
 * @file 返回一个 Promise,并在 ms 毫秒后 Promise 变为完成状态
 */

export function sleep(ms: number): Promise<undefined> {
  // 参考答案
  return new Promise(
    (
      resolve: (value: undefined) => void,
      reject: (value: undefined) => void
    ) => {
      setTimeout(() => {
        resolve(undefined);
      }, ms);
    }
  );
}

async function main() {
  console.log("a");
  await sleep(1000);
  console.log("b");
  await sleep(1000);
  console.log("c");
}
main();

export default {};

10、promiseAll.ts

/**
 * @file 实现 PromiseAll 方法
 */

import { sleep } from "./8.sleep";

async function myAll<T extends unknown[] | []>(
  values: T
): Promise<{ [P in keyof T]: Awaited<T[P]> }> {
  // 补全此处代码,使用 Promise.all 以外的语法完成
  // throw new Error('功能待实现');
  var arr = [];
  for (var i = 0; i < values.length; i++) {
    arr.push(await values[i]);
  }
  return arr as { [P in keyof T]: Awaited<T[P]> };
}

// 一秒钟后返回结果 value
async function request(value: string) {
  await sleep(1000);
  return value;
}
async function main() {
  console.log("start");
  const res = await myAll([request("a"), request("b"), request("c")]);
  console.log(res); // 预期输出 start 一秒后输出 ['a', 'b', 'c']
}
main();

export default {};

11、asyncAdd.ts

/**
 * @file 假设加法是一个异步过程,如何计算多个数组之和?
 */
function sleep(ms: number) {
  return new Promise((r) => {
    setTimeout(() => {
      r(undefined);
    }, ms);
  });
}

async function asyncAdd(a: number, b: number) {
  await sleep(1000);
  return a + b;
}

async function sum(arr: number[]): Promise<number> {
  // 参考答案
  var s: number = arr[0];
  for (var i = 1; i < arr.length; i++) {
    s = await asyncAdd(s, arr[i]);
  }
  return s;
}

console.time("a");
sum([1, 2, 3, 4, 5, 6, 7, 8]).then((v) => {
  console.log(v); // 36
  console.timeEnd("a"); // a: <耗时>
});

export default {};

有关大厂面试 TypeScript 套题,看看你能做出几个的更多相关文章

  1. 【Java 面试合集】HashMap中为什么引入红黑树,而不是AVL树呢 - 2

    HashMap中为什么引入红黑树,而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道,在JDK1.8以及之前,针对HashMap有什么不同。JDK1.7的时候,HashMap的底层实现是数组+链表JDK1.8的时候,HashMap的底层实现是数组+链表+红黑树我们要思考一个问题,为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好???2.链表上述的截图其实就是链表的结构,我们来看下链表的增删改查的时间复杂度增:因为链表不是线性结构,所以每次添加的时候,只需要移动一个节点,所以可以理解为复杂度是N(1)删:算法时间复杂度跟增保持一致查:既然是非线性结构,所以查询某一个节点的时候

  2. ruby-on-rails - 你能为 Ruby on Rails 推荐好的数据网格类/gem 吗? - 2

    您能为RubyonRails推荐好的数据网格类/gem吗?喜欢http://code.google.com/p/zend-framework-datagrid/采埃孚 最佳答案 你也可以试试datagridgem。这不仅关注带有列的网格,还关注过滤器。classSimpleReportincludeDatagridscopedoUser.includes(:group)endfilter(:category,:enum,:select=>["first","second"])filter(:disabled,:eboolean)fi

  3. ruby - 如何检查一个字符串是否是几个不同值之一? - 2

    我有一个字符串变量,它只能包含6个不同的值。我想检查它是否包含前4个值之一或2个第二值之一。有没有比这更优雅的方式:ifstring.eql?'val1'||string.eql?'val2'||string.eql?'val3'||string.eql?'val4'...elsifstring.eql?'val5'||string.eql?'val6'...end可能类似于ifstringisin['val1','val2','val3','val4']? 最佳答案 您可以使用include?:if['val1','val2','

  4. 西安华为OD面试体验 - 2

    西安华为OD面试体验开始投简历技术面试进展工作进展开始投简历去年一整年一直在考研和工作之间纠结,感觉自己的状态好像当时的疫情一样差劲。之前刚毕业的时候投了个大厂的简历,结果一面写算法的时候太拉跨了,虽然知道时dfs但是代码熟练度不够,放在平时给足时间自己可以调试通过,但是熟练度不够那面试当时就写不出来被刷了。说真的算法学到后期我感觉最重要的是熟练度和背板子(对于我这种普通玩家来说),面试题如果一上来短时间内想不出思路就完蛋了。然后由于当时找的工作不是很理想就又想考研了。但是考研是有风险的,我自我感觉自己可能冲不上那个学校,而找工作一个没成可以继续找嘛。本着抱着试试看的态度在boss上投了简历,

  5. [面试直通版]操作系统核心之进程、线程与协程(下) - 2

    点击->操作系统复习的文章集目录操作系统线程线程是什么进程与线程的关系用户态/内核态操作系统资源管理内核态用户态内核态/用户态切换程序运行类型分析计算密集型IO密集型结合进程,线程来理解程序运行类型分析协程基础上下文切换协程协程为什么叫协作式线程?协程的优缺点操作系统线程典型问题:简述进程和线程的区别以下内容带您一步步了解线程是什么比进程更小的独立运行的基本单位-线程(Threads)线程的提出主要是为了提高系统内程序并发执行的程度,从而进一步提升系统的吞吐量,充分发挥多核CPU的优越性而设计的引入进程是为了操作系统更加方便地管理程序,使得多个程序能并发管理和执行而线程则是为了减少程序在并发执

  6. jquery - 你能通过 url 发送 JSON 吗? - 2

    我有一个ruby​​散列,其中键是url,值是整数。我将散列转换为JSON,我想知道我是否能够通过AJAX请求在url中发送JSON,然后从参数散列中提取该JSON。另外,我将向客户端发送一个JSON化的ruby​​散列。如果我在我的AJAX函数中有一个成功的回调,我在其中接收到data变量中的数据,我该如何使用JQuery解析该JSON?如果我需要更具体一点,请告诉我。 最佳答案 是的,你可以毫无问题。无需手动编码/解码!你的代码应该是这样的:varjsonParam='{"name":"Edgar"}';//Samplejson

  7. ruby-on-rails - 你能解释一下这段 Ruby 代码中发生了什么吗? - 2

    我现在正在努力学习Ruby和RubyonRails。我正在学习LearningRails,第1版,但我很难理解其中的一些代码。我通常使用C、C++或Java工作,因此Ruby对我来说是一个很大的改变。我目前对数据库迁移器的以下代码块感到困惑:defself.upcreate_table:entriesdo|t|t.string:namet.timestampsendendt变量来自哪里?它实际上代表什么?它有点像for(i=0;i另外,:entries是在什么地方定义的?(entries是我的Controller的名称,但是这个函数怎么知道的?) 最佳答案

  8. ruby-on-rails - 你能检查 ruby​​ on rails 中同一行的多个值是否相同吗? - 2

    基本上,我正在尝试检查我的6个值是否相同。我试着把它们串起来:ifval1==val2==val3==val4==val5==val6#...end但这会出错。这可能使用另一种方法吗?谢谢 最佳答案 试试这个:if[val1,val2,val3,val4,val5,val6].uniq.count==1#...end如果你喜欢花哨的,你可以试试这个unless[val2,val3,val4,val5,val6].find{|x|x!=val1}#...end一旦找到不等于val1的元素,上面的代码就会停止,否则,将执行该block。

  9. 【华为OD技术面试 | 真八股 】MySQL联合索引,谈springIOC的理解,谈springAOP的理解,Erika和zookeeper等问题 - 2

    文章目录华为OD面试流程1.mysql数据库建了两个字段,且设置了联合索引,如果其中有一个字段为空会出现什么问题?2.谈谈springIOC的理解,有什么好处,解决了什么问题3.谈谈springAOP的理解,切面编程有没有实际应用,有哪些注解,作用是什么,有那些应用场景?4.Erika和zookeeper有了解过吗,作用是什么,主要解决了什么问题5.谈谈JDK、JRE、JVM的理解,区别是什么6.谈谈对泛型的理解7.JVM的组成华为OD面试流程机试:三道算法题,关于机试,橡皮擦已经准备好了各语言专栏,可以直接订阅。性格测试:机试技术一面(本专栏核心)技术二面(本专栏核心)主管面试定级定薪发of

  10. ruby-on-rails - 你能把一个变量放在正则表达式中吗? - 2

    我正在尝试验证Model.category是否等于任何现有的类别名称unlessCategory.exists?(:name=>self.category.downcase)我必须在其中放入小写字母以确保所有这些都是小写字母,以便它们可以匹配为字符串。但是更新属性before_save是一个很大的服务器命中,我正在考虑通过正则表达式匹配它们。像这样unlessCategory.exists?(:name=>/#{self.category}/}有这样的可能吗?或者有更好的方法吗? 最佳答案 是的,您可以在正则表达式中使用变量插值。>

随机推荐