手写代码，前端面试必备！

2022-12-21 19:08:28

前端面试必备：手写代码技能进阶指南

JavaScript手写题

1. 实现 sleep 函数

作用： 暂停 JavaScript 执行一段时间后再继续执行

代码实现：

// 使用 Promise 实现 sleep 函数
function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

// 使用 async/await 实现 sleep 函数
async function sleep(ms) {
  await new Promise((resolve) => setTimeout(resolve, ms));
}

2. 函数柯里化

含义： 将函数从多个参数变成一个参数的过程

代码实现：

// 实现一个柯里化函数
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn(...args);
    } else {
      return curried(...args);
    }
  };
}

// 使用柯里化函数实现一个计算阶乘的函数
const factorial = curry((n) => {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
});

console.log(factorial(5)); // 120

3. 面向对象

含义： 将程序组织成一系列对象，这些对象包含数据和操作数据的方法

代码实现：

// 定义一个面向对象的类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// 创建一个 Person 对象
const person = new Person('John', 25);

// 调用 Person 对象的方法
person.greet(); // Hello, my name is John and I am 25 years old.

HTML和CSS手写题

4. 手写一个简单的HTML页面

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

5. 手写一个简单的CSS样式表

/* 针对所有元素设置默认样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* 设置标题样式 */
h1 {
  color: blue;
  font-size: 2em;
  text-align: center;
}