为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 前端面试真题精讲：初级工程师必学面试技巧

前端面试真题精讲：初级工程师必学面试技巧

标签：
Html/CSS 前端工具 面试
概述

本文详细介绍了前端面试中常见的知识点和技巧，涵盖了HTML、CSS、JavaScript的基础语法以及React.js、Vue.js、Angular.js等框架的介绍。此外，文章还提供了数据类型、DOM操作、事件处理、异步编程等面试真题的解析，并分享了项目经验的准备和展示策略。前端面试真题精讲，助你全面掌握前端技术，提升面试竞争力。

前端基础知识回顾
HTML、CSS、JavaScript 基本语法

HTML 基本语法

HTML (HyperText Markup Language) 是用来描述网页内容的标记语言。HTML文档由一系列的标签组成，这些标签定义了内容的结构。

基本标签示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <a href="https://www.imooc.com/">慕课网</a>
</body>
</html>

CSS 基本语法

CSS (Cascading Style Sheets) 用来控制网页的样式，包括颜色、布局、字体等。

基本选择器示例：

/* 选择所有 p 标签 */
p {
    color: blue;
    font-size: 16px;
}

/* 选择 id 为 main 的元素 */
#main {
    background-color: lightgray;
}

/* 选择 class 为 highlight 的元素 */
.highlight {
    font-weight: bold;
}

JavaScript 基本语法

JavaScript 是一种动态编程语言，用于在网页上添加交互功能。

基本语法示例：

// 变量和常量
let age = 25; // 变量
const PI = 3.14; // 常量

// 函数
function sayHello(name) {
    console.log(`Hello, ${name}!`);
}

sayHello("World");

// 对象
let user = {
    name: "张三",
    age: 28,
    sayHello: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

user.sayHello();
常见的前端框架和库简介

React.js

React.js 是一个由 Facebook 开源的用于构建用户界面的库，它采用虚拟 DOM 技术，能够高效地更新用户界面。

基本示例：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        return <h1>Hello, React!</h1>;
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

Vue.js

Vue.js 是一个渐进式的 JavaScript 框架，易于上手，扩展性好。

基本示例：

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js 示例</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            }
        });
    </script>
</body>
</html>

Angular.js

Angular.js 是由 Google 开发的前端框架，用于构建大规模动态 Web 应用。

基本示例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <div ng-controller="MyController">
        {{ message }}
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('MyController', function($scope) {
            $scope.message = 'Hello, Angular!';
        });
    </script>
</body>
</html>
常见前端面试题解析
数据类型与数据结构

数据类型

JavaScript 中的数据类型分为原始数据类型和引用数据类型。

原始数据类型包括：number, string, boolean, null, undefined, symbol 和 bigint。

引用数据类型包括：object, array, function。

数据类型示例：

let number = 123; // number
let string = "Hello"; // string
let boolean = true; // boolean
let nullValue = null; // null
let undefinedValue = undefined; // undefined

let symbol = Symbol("symbol"); // symbol
let bigInt = 1234567890123456789012345678901234567890n; // bigint

let object = {}; // object
let array = []; // array
let functionType = function() {}; // function

数据结构

JavaScript 中常见的数据结构包括数组、对象和函数。

数组示例：

let array = [1, 2, 3, 4, 5];
console.log(array[0]); // 1
array.push(6); // 添加元素
console.log(array); // [1, 2, 3, 4, 5, 6]
array.pop(); // 删除最后一个元素
console.log(array); // [1, 2, 3, 4, 5]

对象示例：

let person = {
    name: "张三",
    age: 28,
    sayHello: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

console.log(person.name); // 张三
person.sayHello(); // Hello, my name is 张三
DOM 操作与事件处理

DOM 操作

DOM (Document Object Model) 是一种编程接口，它将网页解析为一个节点树。

获取元素：

let element = document.getElementById('id');
let elements = document.getElementsByClassName('className');
let elements = document.getElementsByTagName('tagName');

修改元素：

let element = document.getElementById('id');
element.innerHTML = "新内容";
element.className = "newClassName";

创建元素：

let element = document.createElement('div');
element.innerHTML = "创建的新元素";
document.body.appendChild(element);

事件处理

事件处理是处理用户与网页交互的重要方式。

添加事件监听器：

let button = document.getElementById('buttonId');
button.addEventListener('click', function() {
    console.log("按钮被点击了");
});

移除事件监听器：

let button = document.getElementById('buttonId');
let handler = function(event) {
    console.log("按钮被点击了");
};

button.removeEventListener('click', handler);
CSS 常见问题及解决方法

常见问题

  1. 元素不按预期显示：

    • 检查CSS规则的优先级和选择器的精确度。
    • 确保没有重复的CSS规则覆盖了预期的样式。

  2. 浮动元素布局问题：

    • 使用 clearfix 类来清除浮动，避免父元素高度塌陷。
  3. 跨浏览器兼容性问题：
    • 使用 box-sizing: border-box 来统一边框尺寸。
    • 针对不同浏览器使用厂商前缀，如 -webkit-, -moz- 等。

解决方法

清除浮动：

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

使用 box-sizing：

* {
    box-sizing: border-box;
}

使用厂商前缀：

.element {
    -webkit-box-shadow: 10px 10px 5px #ccc;
    -moz-box-shadow: 10px 10px 5px #ccc;
    box-shadow: 10px 10px 5px #ccc;
}
JavaScript 面试题详解
函数与作用域

函数

函数是JavaScript中重要的组成部分，用于执行特定任务。

函数定义：

function sayHello(name) {
    console.log(`Hello, ${name}!`);
}

sayHello("World");

箭头函数：

let sayHello = name => console.log(`Hello, ${name}!`);
sayHello("World");

作用域

JavaScript 中的作用域分为全局作用域、函数作用域、块作用域。

全局作用域：

let globalVariable = "全局变量";

function checkScope() {
    console.log(globalVariable); // 全局变量
}

checkScope();

函数作用域：

function checkScope() {
    let functionVariable = "函数作用域变量";
    console.log(functionVariable); // 函数作用域变量
}

checkScope();
console.log(functionVariable); // ReferenceError: functionVariable is not defined

块作用域：

function checkScope() {
    if (true) {
        let blockVariable = "块作用域变量";
        console.log(blockVariable); // 块作用域变量
    }
    console.log(blockVariable); // ReferenceError: blockVariable is not defined
}

checkScope();
console.log(blockVariable); // ReferenceError: blockVariable is not defined
异步编程与回调函数

异步编程

异步编程是处理长时间操作的一种方式，避免阻塞主线程。

回调函数：

function doSomething(callback) {
    setTimeout(function() {
        console.log("异步操作完成");
        callback();
    }, 2000);
}

doSomething(function() {
    console.log("回调函数执行");
});

Promise：

function doSomething() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("异步操作完成");
            resolve();
        }, 2000);
    });
}

doSomething().then(() => {
    console.log("Promise 状态变为 resolve");
});

async/await：

function doSomething() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("异步操作完成");
            resolve();
        }, 2000);
    });
}

async function main() {
    await doSomething();
    console.log("异步操作完成，await 后继续执行");
}

main();
ES6 新特性

let 和 const

ES6 引入了新的关键字 let 和 const，用于声明变量。

let 和 const 示例：

let name = "张三";
name = "李四"; // 值可以被改变
console.log(name); // 李四

const PI = 3.14;
// PI = 3.15; // TypeError: Assignment to constant variable
console.log(PI); // 3.14

解构赋值

解构赋值允许直接从数组或对象中提取值。

数组解构：

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c); // 1 2 3

对象解构：

let obj = { x: 1, y: 2, z: 3 };
let { x, y, z } = obj;
console.log(x, y, z); // 1 2 3

类

ES6 引入了新的 class 关键字，用来实现面向对象编程。

基本示例：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

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

let person = new Person("张三", 28);
person.sayHello(); // Hello, my name is 张三 and I am 28 years old.

模板字符串

模板字符串允许在字符串中嵌入变量和表达式。

模板字符串示例：

let name = "张三";
let age = 28;

let message = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(message); // Hello, my name is 张三 and I am 28 years old.
算法与数据结构题解
常用算法详解

排序算法

冒泡排序：

function bubbleSort(arr) {
    let len = arr.length;
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len - i - 1; j++) {
            if (arr[j] > arr[j + 1]) {
                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
            }
        }
    }
    return arr;
}

let arr = [5, 3, 8, 4, 2];
console.log(bubbleSort(arr)); // [2, 3, 4, 5, 8]

快速排序：

function quickSort(arr) {
    if (arr.length <= 1) return arr;
    let pivot = arr[Math.floor(arr.length / 2)];
    let left = arr.filter(x => x < pivot);
    let right = arr.filter(x => x > pivot);
    let middle = arr.filter(x => x === pivot);
    return [...quickSort(left), ...middle, ...quickSort(right)];
}

let arr = [5, 3, 8, 4, 2];
console.log(quickSort(arr)); // [2, 3, 4, 5, 8]

查找算法

二分查找：

function binarySearch(arr, target) {
    let left = 0;
    let right = arr.length - 1;
    while (left <= right) {
        let mid = Math.floor((left + right) / 2);
        if (arr[mid] === target) return mid;
        if (arr[mid] < target) left = mid + 1;
        else right = mid - 1;
    }
    return -1;
}

let arr = [1, 3, 5, 7, 9];
console.log(binarySearch(arr, 5)); // 2
console.log(binarySearch(arr, 4)); // -1
数据结构应用实例

链表

链表是一种线性数据结构，由一系列节点组成，每个节点包含数据和指向下一个节点的指针。

单链表示例：

function Node(data) {
    this.data = data;
    this.next = null;
}

function LinkedList() {
    this.head = null;
}

LinkedList.prototype.add = function(data) {
    let newNode = new Node(data);
    if (!this.head) {
        this.head = newNode;
    } else {
        let current = this.head;
        while (current.next) {
            current = current.next;
        }
        current.next = newNode;
    }
}

let list = new LinkedList();
list.add(1);
list.add(2);
list.add(3);

let current = list.head;
while (current) {
    console.log(current.data); // 1 2 3
    current = current.next;
}

栈

栈是一种只能在一端进行插入和删除的线性表，插入端称为栈顶。

基本操作示例：

function Stack() {
    this.items = [];
}

Stack.prototype.push = function(element) {
    this.items.push(element);
};

Stack.prototype.pop = function() {
    return this.items.pop();
};

Stack.prototype.peek = function() {
    return this.items[this.items.length - 1];
};

Stack.prototype.isEmpty = function() {
    return this.items.length === 0;
};

let stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(3);

console.log(stack.pop()); // 3
console.log(stack.peek()); // 2
console.log(stack.isEmpty()); // false

队列

队列是一种只能在一端插入数据，在另一端删除数据的线性表，插入端称为队尾，删除端称为队首。

基本操作示例：

function Queue() {
    this.items = [];
}

Queue.prototype.enqueue = function(element) {
    this.items.push(element);
};

Queue.prototype.dequeue = function() {
    return this.items.shift();
};

Queue.prototype.front = function() {
    return this.items[0];
};

Queue.prototype.isEmpty = function() {
    return this.items.length === 0;
};

let queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);

console.log(queue.dequeue()); // 1
console.log(queue.front()); // 2
console.log(queue.isEmpty()); // false
项目经验与实战分享
如何准备和展示项目经验

准备阶段

  1. 选择合适的项目：

    • 选择能够展示你技能和知识的项目。
    • 确保项目的规模和复杂度适合你的时间和资源。
  2. 详细记录和反思：
    • 记录项目中的问题、解决方案及设计思路。
    • 反思项目中的不足和改进的空间。

展示阶段

  1. 准备简历：

    • 简历中详细列出项目名称、技术栈、项目描述和你在项目中的贡献。
    • 使用实际的工作经历和项目成果来证明你的技能。
  2. 准备面试：
    • 准备好项目相关的技术问题和可能的面试问题。
    • 思考如何用实际例子来回答问题，展示你的项目经验。

展示技巧

  1. 简洁明了：

    • 确保你的项目展示是简洁明了的，不要过于复杂。
    • 使用图表、图表和时间线来帮助说明项目的关键点。
  2. 使用代码示例：
    • 准备一些关键代码片段，在面试中呈现给你面试的工程师。
    • 确保这些代码是你实际使用过的，而不是从网上下载的。
常见项目面试问题及解答

常见问题

  1. 项目介绍：

    • 请简单介绍一下你做的一个项目。
    • 这个项目中你负责了哪些部分？你在这个项目中的角色是什么？

  2. 技术选型：

    • 你在项目中使用了哪些技术栈？为什么选择这些技术？
    • 你在项目中有没有尝试过其他技术栈？为什么没有选择？
  3. 问题解决：
    • 在这个项目中，你遇到过哪些问题？你是怎么解决的？
    • 你在项目中有没有遇到过性能、兼容性等问题？你如何解决的？

解答技巧

  1. 具体事例：

    • 尽量提供具体的事例来支持你的回答。
    • 确保你的回答是具体的，而不是抽象的。

  2. 技术细节：

    • 讲述技术细节时，尽量使用实际的代码示例。
    • 让面试官了解你的技术深度和广度。
  3. 团队合作：
    • 讲述团队合作的经历，展示你的沟通和协作能力。
    • 强调你在团队中的领导力或协作能力。

示例回答

问题：请简单介绍一下你做的一个项目。

回答：
我曾参与的一个项目是“在线书店”，在这个项目中，我主要负责前端界面的设计和实现。这个项目使用了React.js来构建前端界面，后端使用了Node.js和Express.js来处理API请求。在这个项目中，我负责了用户界面的设计、功能实现以及优化用户体验。通过这个项目，我学会了如何使用现代前端框架和库来构建复杂的用户界面，并且提高了我的问题解决能力和团队合作能力。

问题：你在项目中使用了哪些技术栈？为什么选择这些技术？

回答：
在这个项目中，我选择了React.js来构建前端界面，因为它具有高度可复用性，使得开发效率大大提高。后端选择了Node.js和Express.js，因为它们提供了强大的HTTP请求处理能力和快速的开发速度。这些技术栈可以帮助我快速地构建一个稳定、高效的在线书店系统。选择这些技术栈的原因还包括它们的社区支持、丰富的文档以及大量的第三方库，这些都大大降低了开发难度和时间成本。

代码示例：

React.js 示例：

import React from 'react';
import ReactDOM from 'react-dom';

class BookList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            books: props.books
        };
    }

    render() {
        return (
            <div>
                {this.state.books.map((book, index) => (
                    <div key={index}>
                        <h2>{book.title}</h2>
                        <p>{book.author}</p>
                    </div>
                ))}
            </div>
        );
    }
}

const books = [
    { title: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas' },
    { title: '深入理解ES6', author: '熊冠中' }
];

ReactDOM.render(<BookList books={books} />, document.getElementById('root'));

Node.js 和 Express.js 示例：

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

app.get('/books', (req, res) => {
    const books = [
        { title: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas' },
        { title: '深入理解ES6', author: '熊冠中' }
    ];
    res.json(books);
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

示例回答

问题：在项目中，你遇到过哪些问题？你是怎么解决的？

回答：
在项目开发过程中，我遇到了一个性能问题。当用户尝试加载大量书籍数据时，页面会变得非常卡顿。为了解决这个问题，我优化了前端的渲染逻辑，只在需要的时候动态加载数据，这样可以减少渲染的压力。同时，我还优化了后端的API响应，使用了缓存机制，减少了数据库的查询次数。通过这些优化，页面加载速度得到了显著提高，用户体验也大大改善。

代码示例：

前端优化示例：

// 优化前的渲染逻辑
const books = getBooksFromServer();
renderBooks(books);

// 优化后的渲染逻辑
const chunkSize = 10;
let startIndex = 0;

function loadBooks() {
    const chunk = books.slice(startIndex, startIndex + chunkSize);
    renderBooks(chunk);
    startIndex += chunkSize;
}

setInterval(loadBooks, 500);

后端优化示例：

const express = require('express');
const app = express();
const books = require('./books'); // 假设 books 是从数据库中获取的

// 添加缓存中间件
const cacheControl = require('express-cache-control');
app.use(cacheControl({ maxAge: 1000 * 60 })); // 缓存时间为1分钟

app.get('/books', (req, res) => {
    res.json(books);
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});
面试技巧与准备建议
面试流程与注意事项

面试流程

  1. 面试前的准备：

    • 了解你申请的公司的信息和面试官的背景。
    • 准备好相关的技术问题和面试问题。

  2. 面试中的表现：

    • 在面试中保持自信，回答问题时保持冷静。
    • 如果遇到不会的问题，不要慌张，尝试给出你的思考过程。
  3. 面试后的跟进：
    • 面试结束后，给面试官发一封感谢邮件，感谢他们的时间和机会。
    • 在邮件中可以简单总结一下面试中的一些点，展示你的专业精神。

注意事项

  1. 准时到场：

    • 面试的准时到场非常重要，迟到会给人留下不专业的印象。
    • 如果是远程面试，要确保你的设备和网络环境良好。

  2. 着装得体：

    • 根据公司的文化和面试的形式选择合适的着装。
    • 着装得体可以给人留下良好的第一印象。
  3. 准备简历和作品集：
    • 带上简历和作品集，以便面试官查阅。
    • 预先准备好面试中可能用到的代码或设计文档。
模拟面试与自我提升

模拟面试

  1. 模拟面试的意义：

    • 模拟面试可以帮助你熟悉面试流程。
    • 你可以通过模拟面试发现自己的不足，从而进行有针对性的改进。

  2. 如何进行模拟面试：

    • 可以找志同道合的朋友或者同学来进行模拟面试。
    • 你也可以在慕课网等线上平台找到相关的模拟面试资源。
  3. 模拟面试的注意事项：
    • 在模拟面试中，尽可能真实地还原面试场景。
    • 记录模拟面试中的表现，以便后续改进。

自我提升

  1. 持续学习：

    • 在技术上，要持续学习最新的前端技术和发展趋势。
    • 在软技能上，比如沟通能力、团队协作能力等也要不断提升。

  2. 自我反思：

    • 在每次面试后，都要进行自我反思，总结面试中的不足。
    • 通过反思，制定出改进计划并付诸实施。
  3. 建立人脉：
    • 尝试参加一些前端相关的线上或线下活动，认识更多的同行。
    • 通过建立人脉，可以获取更多的面试机会和机会。

示例代码

// 模拟面试中的一个技术问题
function reverseString(str) {
    let reversed = "";
    for (let i = str.length - 1; i >= 0; i--) {
        reversed += str[i];
    }
    return reversed;
}

console.log(reverseString("hello world")); // dlrow olleh

通过以上内容，你已经掌握了前端面试中常见的知识点和技巧，希望你在面试中能够顺利通过，获得心仪的职位。祝你好运！

点击查看更多内容
发表于 2024.11.05 15:49， 共 41 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

30秒到达战场

手记
篇
粉丝
95
获赞与收藏
569

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消