校招前端面试题总结(一)（附答案）

2023-09-17 18:35:23

前端校招面试指南：备战热招岗位

HTML

作为网页的基础构建语言，HTML 至关重要。常见的标签包括 <div> 用于划分区域，<p> 用于段落，<a> 用于链接，<img> 用于图像，<form> 用于创建表单。

<div>
  <p>这是一个段落。</p>
  <a href="#">这是一个链接。</a>
  <img src="image.jpg" alt="图像" />
  <form>
    <input type="text" name="name" placeholder="姓名" />
    <input type="submit" value="提交" />
  </form>
</div>

CSS

CSS 用于美化网页。选择器用于选择元素，例如 <div>、<p>。

/* 选择所有 div */
div {
  background-color: #f0f0f0;
  padding: 10px;
}

/* 选择带有类名 "red" 的 p */
p.red {
  color: red;
}

JavaScript

JavaScript 是交互式网页的核心。数据类型包括数字、字符串、数组和对象。

// 定义一个函数
function greet(name) {
  return "你好，" + name + "！";
}

// 使用函数
const message = greet("小明");
console.log(message); // 输出：你好，小明！

React

React 是一个流行的前端框架。组件生命周期函数用于管理组件状态。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        当前计数：{this.state.count}
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点击我
        </button>
      </div>
    );
  }
}

Angular

Angular 是另一个常用的前端框架。模块用于组织代码。

@NgModule({
  declarations: [MyComponent],
  imports: [],
  providers: [],
  bootstrap: [MyComponent],
})
export class AppModule {}

Vue

Vue 是一个轻量级的框架。生命周期函数类似于 React。

<template>
  <div>{{ count }}</div>
  <button @click="increment">+</button>
</template>

<script>
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

Node.js

Node.js 是一个 JavaScript 运行时环境，可用于服务器端编程。

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("你好，世界！");
});

app.listen(3000);

Git 和 GitHub

Git 是一个版本控制工具，GitHub 是一个代码托管平台。

# 使用 Git 提交代码
git add .
git commit -m "修复：更新 README"
git push

# 使用 GitHub 创建仓库
git init
git remote add origin https://github.com/my-username/my-repo.git
git push -u origin master

LeetCode 和 HackerRank

LeetCode 和 HackerRank 是在线编程平台，提供题目帮助开发者提高编程技能。

# LeetCode 第 1 题：两数之和
def twoSum(nums, target):
  """
  :type nums: List[int]
  :type target: int
  :rtype: List[int]
  """
  for i in range(len(nums)):
    for j in range(i + 1, len(nums)):
      if nums[i] + nums[j] == target:
        return [i, j]
  return None