首页手记 JavaScript面试题详解：新手必学指南

JavaScript面试题详解：新手必学指南

标签：

JavaScript 面试

本文主要介绍了JavaScript的基础概念、语法以及常见的内置对象，涵盖了变量、数据类型、函数定义与调用等内容。此外，文章还详细解释了JavaScript中的异步编程机制，包括回调函数、Promise和async/await等。文章最后提供了关于JavaScript数组与对象的操作方法，以及如何处理和调试异步代码。文中包含了许多详细的示例代码和常见面试题解析，对于理解JavaScript面试题非常有帮助。

JavaScript基础概念与语法

变量与数据类型

在JavaScript中，变量用于存储数据，数据类型则决定了变量可以存储什么样的数据。JavaScript是一种动态类型语言，这意味着你不需要明确声明变量的数据类型。但是，你仍然需要了解不同的数据类型以便更好地使用它们。

基本数据类型包括：

number: 用于表示数字，包括整数和浮点数。
string: 用于表示文本，通常用单引号或双引号包裹。
boolean: 逻辑值，只有 true 和 false。
undefined: 未定义或尚未赋值的变量。
null: 表示一个空值，不同于 undefined。
symbol: ES6 中引入的新数据类型，用于创建唯一的标识符。
bigint: ES10 中引入的数据类型，用于表示大整数。

引用数据类型包括：

object: 对象可以包含多个属性和方法。
function: 函数是一种特殊类型的对象。
array: 一种特殊类型的对象，用于存储一组有序的元素。

示例代码：

let numberExample = 42;          // number
let stringExample = "Hello";     // string
let booleanExample = true;       // boolean
let undefinedExample;            // undefined
let nullExample = null;          // null

let symbolExample = Symbol("id"); // symbol

let bigintExample = 1234567890123456789012345678901234567890n; // bigint

let objectExample = { name: "John", age: 30 };  // object
let arrayExample = [1, 2, 3, 4, 5];            // array

函数定义与调用

函数是JavaScript的核心组成部分，用于封装可重用的代码块。函数可以通过关键字 function 来定义，并通过函数名调用。

示例代码：

function greet(name) {
    return "Hello, " + name;
}

let result = greet("John");  // 调用函数并传入参数
console.log(result);         // 输出 "Hello, John"

函数还可以通过箭头函数（ES6）来定义，语法更加简洁。

示例代码：

let square = (x) => x * x;  // 箭头函数

console.log(square(5));      // 输出 25

代码块与作用域

在JavaScript中，代码块是由花括号 {} 括起来的部分，通常用于定义函数体、循环、条件等结构。作用域决定了变量或函数可以被访问的范围。

全局作用域：在函数外部定义的变量或函数是全局作用域的一部分，可以在任何地方访问到它们。

函数作用域：变量或函数定义在函数内部时，被称为局部变量或局部函数，只能在该函数内部访问。

示例代码：

// 全局作用域
let globalVar = "I'm in the global scope";

function myFunction() {
    // 函数作用域
    let localVar = "I'm in the function scope";
    console.log(localVar);  // 输出 "I'm in the function scope"
}

console.log(globalVar);      // 输出 "I'm in the global scope"
console.log(localVar);       // 报错，localVar 未定义

常用内置对象

JavaScript提供了许多内置对象，这些对象是一些预先定义好的函数和属性的集合，可以用来执行特定的功能。

Math 对象：提供了一些数学常数和函数，如 Math.PI 代表圆周率，Math.random() 生成一个 0 到 1 之间的随机数。

Date 对象：用于处理日期和时间。例如，new Date() 创建一个新的日期对象，Date.now() 返回当前时间的毫秒数。

Array 对象：用于存储一组有序的元素。例如，array.push() 向数组末尾添加元素，array.pop() 移除数组末尾的元素。

示例代码：

// 使用 Math 对象
console.log(Math.PI);       // 输出 3.141592653589793
console.log(Math.random()); // 输出一个 0 到 1 之间的随机数

// 使用 Date 对象
let now = new Date();
console.log(now);           // 输出当前日期和时间

// 使用 Array 对象
let arr = [1, 2, 3];
arr.push(4);
console.log(arr);           // 输出 [1, 2, 3, 4]
arr.pop();
console.log(arr);           // 输出 [1, 2, 3]

常见JavaScript面试题解析

解释JavaScript中的异步编程

JavaScript中的异步编程机制主要是为了处理长时间的操作，如网络请求、文件读写等，而不阻塞主线程。异步编程主要通过回调函数、Promise、async/await 来实现。

回调函数：回调函数是一种函数传递给另一个函数并在适当的时候执行的技术。例如，setTimeout 和 setInterval 都使用了回调函数。

示例代码：

setTimeout(function() {
    console.log("Callback function called after 1 second");
}, 1000);

Promise：Promise 是一种用于处理异步操作的对象。它可以有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。Promise 的优势在于可以进行链式调用和错误处理。

示例代码：

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Promise resolved after 1 second");
    }, 1000);
});

promise.then(result => {
    console.log(result); // 输出 "Promise resolved after 1 second"
});

async/await：async/await 是一种更简洁的异步编程方式，它将异步操作写得像同步操作一样。async 修饰的函数返回一个Promise对象，await 只能在 async 函数内部使用，等待 Promise 解析结果。

示例代码：

async function asyncExample() {
    let result = await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Async function resolved after 1 second");
        }, 1000);
    });
    console.log(result);  // 输出 "Async function resolved after 1 second"
}

asyncExample();

如何判断变量的类型

JavaScript中可以使用 typeof 操作符来判断一个变量的数据类型。

示例代码：

let numberExample = 42;
let stringExample = "Hello";
let booleanExample = true;
let undefinedExample;
let nullExample = null;

console.log(typeof numberExample);   // 输出 "number"
console.log(typeof stringExample);   // 输出 "string"
console.log(typeof booleanExample);  // 输出 "boolean"
console.log(typeof undefinedExample); // 输出 "undefined"
console.log(typeof nullExample);     // 输出 "object"

注意：typeof null 返回的是 "object"，这是JavaScript的一个历史遗留问题。

另外，还可以使用 Object.prototype.toString.call 方法来判断变量的类型。

示例代码：

function getType(obj) {
    return Object.prototype.toString.call(obj).slice(8, -1);
}

let arrayExample = [1, 2, 3];
let functionExample = () => {};

console.log(getType(numberExample));  // 输出 "Number"
console.log(getType(stringExample));  // 输出 "String"
console.log(getType(booleanExample)); // 输出 "Boolean"
console.log(getType(arrayExample));   // 输出 "Array"
console.log(getType(functionExample)); // 输出 "Function"

如何识别JavaScript中的错误

JavaScript 中的错误主要分为几类：

SyntaxError：语法错误，如缺少分号、括号不匹配等。
ReferenceError：引用错误，如访问未声明的变量。
TypeError：类型错误，如对 null 或 undefined 调用方法。
RangeError：范围错误，如数组越界。
URIError：URI 错误，如使用 decodeURI 解码无效的字符串。

示例代码：

try {
    let x = y;  // y 未声明
} catch (error) {
    console.log(error.name);  // 输出 "ReferenceError"
}

try {
    null.toString();  // 对 null 调用方法
} catch (error) {
    console.log(error.name);  // 输出 "TypeError"
}

DOM操作与事件处理

基本的DOM选择和修改

DOM（Document Object Model）是浏览器解析 HTML 文档后形成的一种树状结构。可以通过 JavaScript 来选择和修改 DOM 节点。

选择节点：

使用 document.getElementById 通过 ID 选择节点。
使用 document.querySelector 或 document.querySelectorAll 通过 CSS 选择器选择节点。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>DOM操作示例</title>
</head>
<body>
    <div id="myDiv">Hello, World!</div>
    <div class="myClass">Hello, Again!</div>
    <script>
        let myDiv = document.getElementById("myDiv");
        console.log(myDiv.textContent); // 输出 "Hello, World!"

        let myClass = document.querySelector(".myClass");
        console.log(myClass.textContent); // 输出 "Hello, Again!"
    </script>
</body>
</html>

修改节点：

使用 textContent 或 innerHTML 修改节点内容。
使用 appendChild 或 removeChild 添加或移除子节点。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>DOM操作示例</title>
</head>
<body>
    <div id="myDiv">Hello, World!</div>
    <script>
        let myDiv = document.getElementById("myDiv");
        myDiv.textContent = "Hello, JavaScript!";
        console.log(myDiv.textContent); // 输出 "Hello, JavaScript!"

        let newDiv = document.createElement("div");
        newDiv.textContent = "New Div!";
        myDiv.appendChild(newDiv);
        console.log(myDiv.innerHTML); // 输出包含新 div 的 HTML 内容
    </script>
</body>
</html>

事件冒泡与事件捕获

事件冒泡是指事件从最具体的元素（即触发事件的元素）开始，逐级向上向其祖先元素传播。事件捕获是指事件从最不具体的元素（即 document）开始，逐级向下向具体元素传播。

可以通过 addEventListener 方法来指定事件处理程序的执行阶段。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>事件冒泡与事件捕获示例</title>
</head>
<body>
    <div id="outer">
        <div id="inner">
            Click me
        </div>
    </div>
    <script>
        let outerDiv = document.getElementById("outer");
        let innerDiv = document.getElementById("inner");

        outerDiv.addEventListener("click", function(e) {
            console.log("Outer div click");
        }, false); // 冒泡阶段

        innerDiv.addEventListener("click", function(e) {
            console.log("Inner div click");
        }, true); // 捕获阶段
    </script>
</body>
</html>

防止事件重复绑定

在某些情况下，例如页面多次加载或事件处理程序手动添加后，可能会导致事件重复绑定。可以通过检查是否已经存在事件处理程序来避免重复绑定。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>防止事件重复绑定示例</title>
</head>
<body>
    <button id="myButton">Click Me</button>
    <script>
        function addClickHandler() {
            let button = document.getElementById("myButton");

            if (!button.hasAttribute("data-clicked")) {
                button.addEventListener("click", function() {
                    console.log("Button clicked");
                });
                button.setAttribute("data-clicked", "true");
            }
        }

        addClickHandler();
        addClickHandler();  // 不会重复绑定
    </script>
</body>
</html>

JavaScript数组与对象

常用数组方法

JavaScript中的数组提供了许多内置方法来操作数组。常用的方法包括：

push() 和 pop()：添加和移除数组末尾的元素。
shift() 和 unshift()：移除和添加数组开头的元素。
splice()：在指定位置插入或删除元素。
slice()：返回数组的一部分，不改变原数组。
concat()：合并多个数组。
forEach()：遍历数组中的每个元素。
map()：遍历并返回一个新数组。
filter()：创建一个新数组，只包含满足条件的元素。
reduce()：遍历数组并返回一个值。

示例代码：

let numbers = [1, 2, 3, 4, 5];

numbers.push(6);
console.log(numbers); // 输出 [1, 2, 3, 4, 5, 6]

numbers.pop();
console.log(numbers); // 输出 [1, 2, 3, 4, 5]

numbers.shift();
console.log(numbers); // 输出 [2, 3, 4, 5]

numbers.unshift(1);
console.log(numbers); // 输出 [1, 2, 3, 4, 5]

numbers.splice(1, 2, 6, 7);
console.log(numbers); // 输出 [1, 6, 7, 3, 4, 5]

let partNumbers = numbers.slice(1, 4);
console.log(partNumbers); // 输出 [2, 3, 4]

let mergedNumbers = numbers.concat([6, 7, 8]);
console.log(mergedNumbers); // 输出 [1, 2, 3, 4, 5, 6, 7, 8]

numbers.forEach(function(value) {
    console.log(value); // 输出每个元素
});

let mappedNumbers = numbers.map(function(value) {
    return value * 2;
});
console.log(mappedNumbers); // 输出 [2, 4, 6, 8, 10]

let filteredNumbers = numbers.filter(function(value) {
    return value > 3;
});
console.log(filteredNumbers); // 输出 [4, 5]

let reducedNumber = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
});
console.log(reducedNumber); // 输出 15

对象的遍历与操作

在JavaScript中，对象是键值对的集合。常用的方法包括：

for...in 循环：用于遍历对象的属性。
Object.keys() 和 Object.values()：返回对象的所有键或值的数组。
delete 关键字：删除对象的属性。
Object.assign()：将一个对象的属性复制到另一个对象。
Object.entries()：返回对象的所有键值对。

示例代码：

let person = {
    name: "John",
    age: 30,
    city: "New York"
};

for (let key in person) {
    console.log(key + ": " + person[key]);
}

let keys = Object.keys(person);
console.log(keys); // 输出 ["name", "age", "city"]

let values = Object.values(person);
console.log(values); // 输出 ["John", 30, "New York"]

delete person.city;
console.log(person); // 输出 {name: "John", age: 30}

let newPerson = Object.assign({}, person);
console.log(newPerson); // 输出 {name: "John", age: 30}

let entries = Object.entries(person);
console.log(entries); // 输出 [["name", "John"], ["age", 30]]

JSON的基本使用

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。JavaScript提供了内置的 JSON 对象来处理 JSON 数据。

JSON.stringify()：将JavaScript对象转换为JSON字符串。
JSON.parse()：将JSON字符串转换为JavaScript对象。

示例代码：

let person = {
    name: "John",
    age: 30,
    city: "New York"
};

let jsonString = JSON.stringify(person);
console.log(jsonString); // 输出 {"name":"John","age":30,"city":"New York"}

let parsedPerson = JSON.parse(jsonString);
console.log(parsedPerson); // 输出 {name: "John", age: 30, city: "New York"}

异步编程与回调函数

setTimeout与setInterval

setTimeout 和 setInterval 是JavaScript中常用的异步函数，用于延迟执行某段代码或定时执行某段代码。

setTimeout：延迟执行一次。

示例代码：

setTimeout(function() {
    console.log("This will be logged after 1 second");
}, 1000);

setInterval：定时执行多次。

示例代码：

let intervalId = setInterval(function() {
    console.log("This will be logged every second");
}, 1000);

// 清除定时器
clearInterval(intervalId);

Promise与async/await

Promise 是一个表示异步操作最终完成（或失败）的对象。async/await 是一种更简洁的异步编程方式。

Promise：

示例代码：

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Promise resolved after 1 second");
    }, 1000);
});

promise.then(result => {
    console.log(result); // 输出 "Promise resolved after 1 second"
});

async/await：

示例代码：

async function asyncExample() {
    let result = await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Async function resolved after 1 second");
        }, 1000);
    });
    console.log(result); // 输出 "Async function resolved after 1 second"
}

asyncExample();

实际项目中的异步处理

在实际项目中，通常会遇到多个异步操作需要协调执行的情况。通过 Promise.all 或 async/await 可以有效地管理多个异步操作。

示例代码：

function fetchData1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data 1");
        }, 1000);
    });
}

function fetchData2() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data 2");
        }, 1500);
    });
}

// 使用 Promise.all
Promise.all([fetchData1(), fetchData2()])
    .then(results => {
        console.log(results); // 输出 ["Data 1", "Data 2"]
    })
    .catch(error => {
        console.error(error);
    });

// 使用 async/await
async function fetchAllData() {
    try {
        let [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
        console.log(data1, data2); // 输出 "Data 1" "Data 2"
    } catch (error) {
        console.error(error);
    }
}

fetchAllData();

常见JavaScript调试技巧

使用console.log进行调试

console.log 是最基本的调试方法，可以用来输出变量的值、表达式的计算结果等。

示例代码：

let x = 10;
console.log(x); // 输出 10

let y = x + 5;
console.log(y); // 输出 15

断点调试技巧

断点调试是通过在代码中设置断点来暂停程序执行，从而逐行检查代码的运行情况。

设置断点：在需要调试的代码行左侧点击，设置断点。
单步执行：点击“Step Over”（F10）或“Step Into”（F11）等按钮逐行执行代码。
查看变量：在断点处，可以通过点击变量或表达式来查看其值。

示例代码：

function exampleFunction() {
    let x = 10;
    console.log(x);  // 输出 10
    x = x + 5;
    console.log(x);  // 输出 15
}

错误调试与日志记录

错误调试通常涉及捕获和处理错误。可以通过 try...catch 语句来捕获错误并进行处理。

示例代码：

try {
    let result = 10 / 0; // 除以0会抛出错误
    console.log(result);
} catch (error) {
    console.error("Error occurred: " + error.message);
}

// 使用日志记录
console.error("Error: Invalid data");

通过这些基本的调试技巧，可以有效地解决JavaScript代码中的问题。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕村9548890

手记
篇

粉丝

227

获赞与收藏

991

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 313218 2205

后端通用面试教程

41个小节 30809 345

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

JavaScript面试题详解：新手必学指南

JavaScript基础概念与语法

变量与数据类型

函数定义与调用

代码块与作用域

常用内置对象

常见JavaScript面试题解析

解释JavaScript中的异步编程

如何判断变量的类型

如何识别JavaScript中的错误

DOM操作与事件处理

基本的DOM选择和修改

事件冒泡与事件捕获

防止事件重复绑定

JavaScript数组与对象

常用数组方法

对象的遍历与操作

JSON的基本使用

异步编程与回调函数

setTimeout与setInterval

Promise与async/await

实际项目中的异步处理

常见JavaScript调试技巧

使用console.log进行调试

断点调试技巧

错误调试与日志记录

阅读免费教程