首页手记前端开发入门：高频前端面试题详解

前端开发入门：高频前端面试题详解

标签：

面试

本文详细介绍了HTML、CSS、JavaScript等前端技术的基础知识，并深入讲解了Vue.js、React.js等前端框架的应用，同时提供了高频前端面试题的解析，帮助读者在面试中游刃有余。高频前端面试题涵盖了数组操作、字符串处理、常用排序算法等多个方面。

HTML与CSS基础

HTML标签与属性

HTML是构成网页的基础，每个HTML文档由一系列标签和文本组成。HTML标签定义了文本的结构和意义，属性进一步提供了标签的额外信息。

标签

<html>：定义HTML文档
<head>：包含文档的元数据，例如<title>标签定义文档标题
<body>：包含文档的具体内容
<div>：定义一个区域，通常用于布局
<p>：定义段落
<a>：定义链接
<img>：定义图片
<table>：定义表格

属性

id：用于唯一标识一个元素
class：用于给一组元素定义样式
src：用于定义<img>标签中的图片路径
href：用于定义<a>标签中的链接地址
alt：用于定义<img>标签中的替代文本

下面是一个简单的HTML示例：

<!DOCTYPE html>
<html>
<head>
    <title>示例文档</title>
</head>
<body>
    <h1>欢迎来到示例网站</h1>
    <p>这是第一个段落。</p>
    <a href="http://example.com" alt="示例链接">点击这里</a>
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="example.png" alt="示例图片">
</body>
</html>

CSS选择器与样式

CSS（层叠样式表）用于定义网页的样式，使得网页更加美观。

选择器

#id: 根据ID选择元素
.class: 根据类名选择元素
element: 选择特定的标签
element, element: 选择多个标签
element element: 选择子元素
伪类选择器：用于选择特定状态下的元素，如:hover、:active等。
伪元素选择器：用于选择元素的特定部分，如:before、:after。

属性

font-size: 设置文本大小
color: 设置文本颜色
background-color: 设置背景颜色
padding: 设置元素内边距
margin: 设置元素外边距
border: 设置边框
box-shadow: 设置阴影效果
flex: 设置弹性布局

下面是一个简单的CSS示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
        p {
            background-color: yellow;
            padding: 10px;
            margin: 10px;
        }
        .container {
            border: 1px solid black;
            box-shadow: 10px 10px 5px grey;
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <h1>欢迎来到示例网站</h1>
    <p>这是第一个段落。</p>
    <div class="container">
        <p>这是一个子元素。</p>
    </div>
</body>
</html>

常见布局问题

布局问题是前端开发中的重要部分。以下是一些常见的布局问题和解决方法：

固定高度 vs 自适应高度

使用height: 100%可以使元素高度自适应父元素高度。
```
.container {
  height: 100%;
}
```
浮动元素清理

浮动元素会导致父元素高度塌陷，使用clearfix类解决。
```
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
```

响应式布局

使用媒体查询进行响应式设计。

@media screen and (max-width: 600px) {
  .container {
      width: 100%;
  }
}

JavaScript核心概念

变量、数据类型与作用域

JavaScript是一种动态类型语言，支持多种数据类型和变量。

变量

可以使用var、let或const声明变量。

var age = 25;
let name = '张三';
const PI = 3.14;

数据类型
- Number: 数字类型，例如123
- String: 字符串类型，例如"Hello"
- Boolean: 布尔类型，例如true或false
- Object: 对象类型，例如{ name: "张三" }
- Array: 数组类型，例如[1, 2, 3]
- null: 空值类型
- undefined: 未定义类型

作用域

变量的作用域决定了它在代码中的可见范围。

var globalVar = '全局变量';

function example() {
  var localVar = '局部变量';
  console.log(globalVar); // 可以访问
  console.log(localVar);  // 可以访问
}

console.log(globalVar); // 可以访问
console.log(localVar);  // 无法访问，因为localVar是局部变量

函数与事件处理

函数

函数是JavaScript中可重复使用的一段代码。

function add(a, b) {
  return a + b;
}

console.log(add(1, 2)); // 输出 3

更复杂的函数示例

function computeSumAndProduct(a, b) {
    return {
        sum: a + b,
        product: a * b
    };
}

console.log(computeSumAndProduct(2, 3)); // 输出 { sum: 5, product: 6 }

事件处理

事件处理指的是监听并响应用户的操作，例如点击事件。

<!DOCTYPE html>
<html>
<body>

<button id="myBtn">点击我</button>

<script>
  document.getElementById("myBtn").addEventListener("click", function() {
      alert("按钮被点击了");
  });
</script>

</body>
</html>

事件冒泡与事件委托

var parent = document.getElementById("parent");
var child = document.getElementById("child");

parent.addEventListener("click", function(e) {
    if (e.target === child) {
        console.log("点击了子元素");
    } else {
        console.log("点击了父元素");
    }
});

DOM操作与BOM基础

DOM操作

DOM（文档对象模型）是HTML和XML文档的编程接口。

var element = document.getElementById("demo");
element.innerHTML = "Hello World";

复杂的DOM操作

var parent = document.getElementById("parent");
var newElement = document.createElement("div");
newElement.innerHTML = "新元素";
parent.appendChild(newElement);

BOM（浏览器对象模型）

BOM提供了与浏览器交互的API，例如操作浏览器窗口。

setTimeout(function() {
  alert("弹出提示");
}, 3000);

window.location.href = "http://example.com";

更复杂的BOM操作

localStorage.setItem("username", "张三");
console.log(localStorage.getItem("username")); // 输出 "张三"
sessionStorage.setItem("token", "abc123");
console.log(sessionStorage.getItem("token")); // 输出 "abc123"

前端框架与库简介

Vue.js与React.js基础

Vue.js

Vue.js是一个渐进式框架，易于上手。

<!DOCTYPE html>
<html>
<body>
  <div id="app">
      {{ message }}
  </div>

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

Vue.js指令与Computed属性

<div id="app">
    <p>{{ message }}</p>
    <p>{{ reversedMessage }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        computed: {
            reversedMessage: function() {
                return this.message.split('').reverse().join('');
            }
        }
    });
</script>

Vue Router

<div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
</div>

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue-router@3"></script>
<script>
    const Home = { template: '<div>首页</div>' };
    const About = { template: '<div>关于</div>' };
    const routes = [
        { path: '/home', component: Home },
        { path: '/about', component: About }
    ];
    const router = new VueRouter({
        routes
    });
    new Vue({
        el: '#app',
        router
    });
</script>

React.js

React.js是一个用于构建用户界面的JavaScript库。

<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>

  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
  <script type="text/babel">
      ReactDOM.render(
          <h1>Hello, React!</h1>,
          document.getElementById('root')
      );
  </script>
</body>
</html>

JSX语法与组件化开发

<!DOCTYPE html>
<html>
<body>
    <div id="root"></div>

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <script type="text/babel">
        const Hello = () => <h1>Hello, React!</h1>;
        ReactDOM.render(
            <Hello />,
            document.getElementById('root')
        );
    </script>
</body>
</html>

React Hooks

<!DOCTYPE html>
<html>
<body>
    <div id="root"></div>

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <script type="text/babel">
        const Example = () => {
            const [count, setCount] = React.useState(0);
            return (
                <div>
                    <p>点击了{count}次</p>
                    <button onClick={() => setCount(count + 1)}>点击我</button>
                </div>
            );
        };
        ReactDOM.render(
            <Example />,
            document.getElementById('root')
        );
    </script>
</body>
</html>

jQuery与Bootstrap介绍

jQuery

jQuery简化了HTML文档操作、事件处理、动画等操作。

<!DOCTYPE html>
<html>
<head>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<button id="myBtn">点击我</button>

<script>
  $(document).ready(function(){
      $("#myBtn").click(function(){
          alert("按钮被点击了");
      });
  });
</script>

</body>
</html>

Bootstrap

Bootstrap是一个前端框架，提供了大量的CSS和JavaScript组件。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container">
      <div class="row">
          <div class="col-sm-6">
              <h3>左侧内容</h3>
          </div>
          <div class="col-sm-6">
              <h3>右侧内容</h3>
          </div>
      </div>
  </div>
</body>
</html>

常见面试算法题

数组与字符串操作

数组

获取数组长度

let arr = [1, 2, 3];
console.log(arr.length); // 输出 3

数组排序

let arr = [3, 1, 2];
arr.sort(function(a, b) { return a - b });
console.log(arr); // 输出 [1, 2, 3]

数组去重

let arr = [1, 2, 2, 3, 4, 4];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // 输出 [1, 2, 3, 4]

数组映射

let arr = [1, 2, 3];
let mappedArr = arr.map(x => x * 2);
console.log(mappedArr); // 输出 [2, 4, 6]

数组过滤

let arr = [1, 2, 3, 4, 5];
let filteredArr = arr.filter(x => x % 2 === 0);
console.log(filteredArr); // 输出 [2, 4]

数组归约

let arr = [1, 2, 3];
let reducedArr = arr.reduce((acc, curr) => acc + curr, 0);
console.log(reducedArr); // 输出 6

字符串

查找子字符串

let str = "Hello World";
let index = str.indexOf("World");
console.log(index); // 输出 6

字符串分割

let str = "a,b,c";
let arr = str.split(",");
console.log(arr); // 输出 ["a", "b", "c"]

字符串替换

let str = "Hello World";
let newStr = str.replace("World", "JavaScript");
console.log(newStr); // 输出 "Hello JavaScript"

常用排序算法

冒泡排序

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

快速排序

function quickSort(arr, left, right) {
  let index;
  if (arr.length > 1) {
      index = partition(arr, left, right);
      if (left < index - 1) {
          quickSort(arr, left, index - 1);
      }
      if (index < right) {
          quickSort(arr, index, right);
      }
  }
  return arr;
}

function partition(arr, left, right) {
  let pivot = arr[Math.floor((right + left) / 2)];
  let i = left;
  let j = right;
  while (i <= j) {
      while (arr[i] < pivot) {
          i++;
      }
      while (arr[j] > pivot) {
          j--;
      }
      if (i <= j) {
          let temp = arr[i];
          arr[i] = arr[j];
          arr[j] = temp;
          i++;
          j--;
      }
  }
  return i;
}

递归与回溯

递归

阶乘

function factorial(n) {
    if (n === 0 || n === 1) {
        return 1;
    }
    return n * factorial(n - 1);
}

斐波那契数列

function fibonacci(n) {
    if (n <= 1) {
        return n;
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}

回溯

全排列

function permute(arr, l, r) {
    if (l === r) {
        console.log(arr.join(' '));
    } else {
        for (let i = l; i <= r; i++) {
            [arr[l], arr[i]] = [arr[i], arr[l]];
            permute(arr, l + 1, r);
            [arr[l], arr[i]] = [arr[i], arr[l]];
        }
    }
}

前端工具与优化

包管理工具npm与yarn

npm

npm（Node Package Manager）是Node.js的包管理器。
```
npm install express
```
yarn

yarn是Facebook开发的一个替代npm的包管理器。
```
yarn add express
```

构建工具Webpack

安装Webpack

npm install --save-dev webpack webpack-cli

配置文件webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
      filename: 'bundle.js',
      path: __dirname + '/dist'
  },
  module: {
      rules: [
          {
              test: /\.js$/,
              exclude: /node_modules/,
              use: {
                  loader: 'babel-loader'
              }
          }
      ]
  }
};

使用Webpack进行代码分割与懒加载

import(/* webpackChunkName: "lodash" */ 'lodash');

const chunk = function() {
  return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
      console.log(_.join(['Hello', 'world'], ' '));
  });
};
chunk();

性能优化技巧

减少HTTP请求

合并CSS和JS文件，减少图片请求。
压缩资源

使用Gzip压缩文件。
```
gzip --best file.js
```

缓存控制

设置合理的缓存过期时间。

<meta http-equiv="Cache-Control" content="max-age=31536000" />

面试技巧与注意事项

面试常见问题与回答

介绍一下你自己

简短地介绍自己的背景、技能和经验。
你的优势是什么

强调自己在前端开发中的技能和优势。
解决过哪些技术难题

举例说明自己解决过的具体问题和解决方案。

代码规范与团队协作

代码规范

遵循统一的代码规范，例如ESLint。

npm install eslint --save-dev

配置ESLint

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

团队协作

使用版本控制工具如Git进行协同开发。

git clone https://github.com/example/repo.git

Git示例

git pull origin main
git add .
git commit -m "更新代码"
git push origin main

总结

通过上述内容，你已经掌握了前端开发的基础知识和常见面试问题的解答方法。希望你能熟练掌握前端开发的每一个环节，不断提高自己的技能和水平。如果有更多问题，可以参考在线教程，例如慕课网（https://www.imooc.com/）提供的课程。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

一只甜甜圈

手记
篇

粉丝

55

获赞与收藏

117

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30936 346

网络编程入门教程

20个小节 12729 240

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空