2025年3月14日星期五甲辰(龙)年月十三设为首页加入收藏

进入网站首页面

掌上城东书院
定制您的专属资源库
m.cdsy.xyz

掌上城东书院
随时随地，想看就看

关注我们

首页

您当前的位置：首页 > 计算机 > 编程开发 > JavaScript

JavaScript 面试题解析与代码实践

时间：02-05来源：作者：点击数：22

前言

本文将通过几个典型的面试题和代码示例，深入探讨 JavaScript 的核心概念和实际应用。我们将从基础的同步异步执行顺序，到 DOM 操作和滚动事件处理，再到用户输入验证等多方面进行详细解析。希望读者能够通过本文加深对 JavaScript 的理解，并掌握一些实用的编程技巧。

1. 同步与异步执行顺序

在这里插入图片描述

问题描述

在以下代码中，console.log 的输出顺序是什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(1);
        setTimeout(function(){
            console.log(2);
        }, 0);
        console.log(3);
        setTimeout(function(){
            console.log(4);
        }, 1000);
        console.log(5);
        setTimeout(function(){
            console.log(6);
        }, 500);
        console.log(7);
    </script>
</body>
</html>

代码解析

这段代码展示了 JavaScript 中同步和异步任务的执行顺序。JavaScript 是单线程语言，所有的任务都在一个线程上执行，分为同步任务和异步任务。同步任务会立即执行，而异步任务会被放入任务队列中，等待主线程空闲时再执行。

console.log(1) 是同步任务，立即执行。
setTimeout(function(){ console.log(2); }, 0) 是异步任务，尽管延迟时间为 0，但它仍然会被放入任务队列中，等待主线程空闲时执行。
console.log(3) 是同步任务，立即执行。
setTimeout(function(){ console.log(4); }, 1000) 是异步任务，延迟 1000 毫秒后执行。
console.log(5) 是同步任务，立即执行。
setTimeout(function(){ console.log(6); }, 500) 是异步任务，延迟 500 毫秒后执行。
console.log(7) 是同步任务，立即执行。

因此，最终的输出顺序为：1 3 5 7 2 6 4。

关键点总结

同步任务：立即执行的任务。
异步任务：被放入任务队列中，等待主线程空闲时执行。
事件循环：JavaScript 的执行机制，确保同步任务优先执行，异步任务在适当的时候插入执行。

2. 窗口尺寸与文档可视区域

在这里插入图片描述

问题描述

如何获取窗口的高度和宽度，以及文档的可视区域高度和宽度？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 5000px;
            width: 5000px;
        }
    </style>
</head>
<body>
    <script>
        // 窗口的高（包含滚动条的高）     窗口的宽（包含滚动条）
        console.log(window.innerHeight, window.innerWidth);
        // 文档区域的可视高（不包含滚动条）   文档区域的可视宽（不包含滚动条）
        // document : 文档对象
        // documentElement: html
        console.log(document.documentElement.clientHeight, document.documentElement.clientWidth);
    </script>
</body>
</html>

代码解析

这段代码展示了如何使用 JavaScript 获取窗口和文档的尺寸信息：

window.innerHeight 和 window.innerWidth 分别返回窗口的内高和内宽，包括滚动条。
document.documentElement.clientHeight 和 document.documentElement.clientWidth 分别返回文档的可视区域高度和宽度，不包括滚动条。

关键点总结

窗口尺寸：window.innerHeight 和 window.innerWidth。
文档可视区域尺寸：document.documentElement.clientHeight 和 document.documentElement.clientWidth。
应用场景：这些属性常用于响应式设计和布局调整，确保页面内容适应不同设备的屏幕尺寸。

3. 页面加载事件与 DOM 操作

在这里插入图片描述

问题描述

如何在页面加载完成后执行特定的 JavaScript 代码？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 添加一个页面加载事件
        // window.onload : 页面加载事件，当浏览器将页面中所有的内容（文本、图片、音频、视频）全部加载成功后，执行后面的函数。
        window.onload = function() {
            // document.querySelector('选择器') : 通过选择器获取一个元素对象
            var o_box = document.querySelector('#box');
            alert(o_box);
        }
    </script>
</head>
<body>
    <div id="box"></div>
    <script>
        // document.querySelector('选择器') : 通过选择器获取一个元素对象
        var o_box = document.querySelector('#box');
        alert(o_box);
    </script>
</body>
</html>

代码解析

这段代码展示了如何使用 window.onload 事件来确保页面所有资源加载完毕后再执行 JavaScript 代码。window.onload 事件会在页面的所有内容（包括图片、音频、视频等）加载完成后触发。

在 window.onload 事件中，使用 document.querySelector('#box') 获取元素并弹出提示框。
如果不在 window.onload 中获取元素，可能会因为元素尚未加载而导致获取失败。

关键点总结

页面加载事件：window.onload 确保页面所有资源加载完毕后再执行代码。
DOM 操作：document.querySelector 用于通过选择器获取页面中的元素。
应用场景：适用于需要在页面完全加载后执行的操作，如初始化插件、设置样式等。

4. 滚动事件与固定元素

在这里插入图片描述

问题描述

如何根据滚动条的位置显示或隐藏一个固定元素？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 5000px;
        }
        #box {
            width: 50px;
            height: 50px;
            background: red;
            color: yellow;
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">顶部</div>
    <script>
        // 获取页面元素
        var o_box = document.querySelector('#box');
        // 1. 求滚动条到顶端的距离
        // 2. 触发滚动事件 onscroll
        // 添加事件
        window.onscroll = function() {
            // 求滚动条到顶端的距离
            // 除了低版本谷歌都支持
            // var scrollTop = document.documentElement.scrollTop;
            // 低版本谷歌
            // var scrollTop = document.body.scrollTop;
            // 兼容
            var scrollTop = Math.floor(document.documentElement.scrollTop || document.body.scrollTop);
            console.log(scrollTop);
            if (scrollTop >= 3000) {
                o_box.style.display = 'block';
            } else {
                o_box.style.display = 'none';
            }
        }
        // 给 box 添加一个点击事件
        o_box.onclick = function() {
            document.documentElement.scrollTop = document.body.scrollTop = 0;
        }
    </script>
</body>
</html>

代码解析

这段代码展示了如何使用滚动事件 window.onscroll 来监听用户的滚动行为，并根据滚动距离显示或隐藏一个固定元素。

使用 document.documentElement.scrollTop 或 document.body.scrollTop 获取滚动条到顶端的距离，确保兼容性。
当滚动距离大于等于 3000 时，显示固定元素；否则隐藏。
给固定元素添加点击事件，点击后将页面滚动到顶部。

关键点总结

滚动事件：window.onscroll 监听用户的滚动行为。
固定元素：position: fixed 实现元素固定在页面某一位置。
应用场景：适用于需要根据滚动位置动态显示或隐藏元素的场景，如回到顶部按钮、悬浮菜单等。

5. 用户输入验证与循环操作

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

问题描述

如何实现一个带输入提示框的数字验证功能？如果输入的数字大于 10，提示是否进行加 10 操作；如果小于 10，则提示无法运算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        while (true) {
            // 一个带输入的提示框
            var n = prompt('请输入一个数字');
            // 点击取消,就不进行后面操作。直接退出循环
            if (!n) {
                break;
            }
            // 判断是否为数字 只能输入数字
            if (!isNaN(n)) { // 数字
                // 如果输入的数字大于 10
                if (n > 10) {
                    // 提示我们是否进行输入的数 + 10
                    if (confirm("是否进行输入的数 + 10")) {
                        // <1>如果点击确定,输出表达式和结果,
                        alert(n + '+' + 10 + '=' + (Number(n) + 10));
                    }
                } else {
                    alert('无法运算');
                }
            }
        }
    </script>
</body>
</html>

代码解析

这段代码实现了用户输入验证和循环操作的功能：

使用 prompt 弹出一个带输入的提示框，要求用户输入一个数字。
使用 isNaN 函数判断输入是否为数字。
如果输入的数字大于 10，使用 confirm 提示用户是否进行加 10 操作，点击确定后显示结果；点击取消则重新弹出提示框。
如果输入的数字小于 10，提示无法运算。
用户点击取消时，直接退出循环。

关键点总结

用户输入验证：使用 prompt 和 isNaN 进行输入验证。
条件判断：根据输入值的不同，执行不同的逻辑分支。
循环操作：使用 while 循环实现重复操作，直到用户点击取消为止。
应用场景：适用于需要反复验证用户输入的场景，如表单验证、游戏规则等。

结尾

通过以上几个典型面试题的解析和代码示例，我们可以看到 JavaScript 在前端开发中的广泛应用。无论是同步异步执行顺序、DOM 操作、滚动事件处理，还是用户输入验证，都是前端开发者必须掌握的核心技能。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

城东书院微信服务号

城东书院微信订阅号

2

上一篇:JavaScript DOM 操作与事件处理深入解析下一篇:JavaScript 中的 Math 对象与字符串操作详解

推荐内容

Grid-A-Licious 基于	使用Windows API实现
如何快速了解一个行业	InDesign入门教程\|半

相关内容

栏目更新

栏目热门

本栏推荐

关于我们 | 联系我们 | 用户协议 | 广告服务 | 申请链接 | 网站地图 | 版权声明 | 用户留言 | 招聘信息 | 帮助中心 | 社区讨论 | 下载服务

中国文明网传播文明

城东书院^® CDSY.XYZ 版权所有 Copyright ©2019-2025 CDSY Corporation, All Rights Reserved

湘ICP备19021508号-1 公安网备案

公安网备案

湘公网安备 43102202000103号出版物经营许可证

※学习、工作、生活信息平台※

我从不把安逸和享乐看作是生活的目的。 —爱因斯坦

本网大部分资源来源于会员上传，除本网组织的资源外，版权归原作者所有，如有侵犯版权，请立刻和本网联系并提供证据，本网将在三个工作日内改正。