JavaScript 面试题：从新手到进阶的必备挑战@慕课网原创_慕课网

基础语法测试：变量、数据类型、运算符

题目1：变量类型判断

任务：编写代码，输入任何数据类型，判断并输出其类型。

示例代码：

function checkType(input) {
    console.log(`输入的类型是: ${typeof input}`);
}

// 测试代码
checkType(42);  // 应输出: 输入的类型是: number
checkType('Hello, World!');  // 应输出: 输入的类型是: string
checkType(true);  // 应输出: 输入的类型是: boolean
checkType([1, 2, 3]);  // 应输出: 输入的类型是: object
checkType({ key: 'value' });  // 应输出: 输入的类型是: object

题目2：运算符使用

任务：编写代码，实现基本算术运算、比较运算和逻辑运算。

示例代码：

function performOperations() {
    const a = 10;
    const b = 5;

    console.log(`加法: ${a + b}`);
    console.log(`减法: ${a - b}`);
    console.log(`乘法: ${a * b}`);
    console.log(`除法: ${a / b}`);
    console.log(`取余: ${a % b}`);
    console.log(`大于: ${a > b}`);
    console.log(`小于等于: ${a <= b}`);
    console.log(`等于: ${a === b}`);
    console.log(`不等于: ${a !== b}`);
}

performOperations();

函数应用题：函数定义、闭包概念

题目1：函数定义与调用

任务：定义一个函数，接受一个参数并返回其平方。

示例代码：

function square(n) {
    return n * n;
}

console.log(square(4));  // 应输出: 16

题目2：闭包概念

任务：创建一个函数，接收一个参数并返回一个函数，该函数内部访问并修改外部函数的变量。

示例代码：

function createCounter() {
    let count = 0;
    return function() {
        count++;
        console.log(count);
    };
}

const counter = createCounter();
counter();  // 应输出: 1
counter();  // 应输出: 2
counter();  // 应输出: 3

数组与循环挑战

题目1：数组操作

任务：编写代码，从数组中提取所有偶数并返回一个新数组。

示例代码：

function extractEvens(numbers) {
    return numbers.filter(n => n % 2 === 0);
}

const numbers = [1, 2, 3, 4, 5, 6];
console.log(extractEvens(numbers));  // 应输出: [2, 4, 6]

题目2：循环结构

任务：使用循环结构遍历数组并输出每个元素的平方。

示例代码：

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

numbers.forEach(n => {
    console.log(n * n);
});

条件判断与逻辑题

题目1：复杂条件判断

任务：编写代码检查一个数字是否为偶数、奇数或零。

示例代码：

function checkNumber(n) {
    if (n === 0) {
        return "零";
    } else if (n % 2 === 0) {
        return "偶数";
    } else {
        return "奇数";
    }
}

console.log(checkNumber(4));  // 应输出: 偶数
console.log(checkNumber(3));  // 应输出: 奇数
console.log(checkNumber(0));  // 应输出: 零

题目2：逻辑组合

任务：编写代码，根据给定条件生成一个适当的问候语。

示例代码：

function greeting(name, timeOfDay) {
    if (name && timeOfDay) {
        if (timeOfDay.toLowerCase() === 'morning') {
            return `早上好，${name}！`;
        } else if (timeOfDay.toLowerCase() === 'afternoon') {
            return `下午好，${name}！`;
        } else if (timeOfDay.toLowerCase() === 'evening') {
            return `晚上好，${name}！`;
        }
    }
    return '欢迎使用本服务！';
}

console.log(greeting('Alice', 'Morning'));  // 应输出: 早上好，Alice！
console.log(greeting('Bob', 'afternoon'));  // 应输出: 下午好，Bob！
console.log(greeting('Charlie', ''));      // 应输出: 欢迎使用本服务！

事件处理与DOM操作

题目1：事件绑定

任务：编写代码，为一个按钮添加点击事件监听器，当按钮被点击时，弹出一个包含当前时间的对话框。

示例代码：

<button id="myButton">点击我查看时间</button>

JavaScript 代码：

document.getElementById('myButton').addEventListener('click', function() {
    const currentTime = new Date();
    alert(`当前时间是: ${currentTime.toString()}`);
});

题目2：DOM操作

任务：编写代码，获取页面上的一个元素，并更改其文本内容。

示例代码：

<p id="demo">这是一个示例段落。</p>

JavaScript 代码：

const element = document.getElementById('demo');
element.textContent = '已更改的文本';

函数式编程及ES6特性测试

题目1：箭头函数

任务：使用箭头函数重写给定的常规函数。

示例代码：

const add = (a, b) => {
    return a + b;
};
console.log(add(3, 4));  // 应输出: 7

题目2：模板字符串

任务：使用模板字符串创建一个包含用户信息的字符串。

示例代码：

const name = '张三';
const age = 25;
const greeting = `你好，我的名字是${name}，我今年${age}岁。`;
console.log(greeting);  // 应输出: 你好，我的名字是张三，我今年25岁。

通过这些题目和示例代码，你可以系统地提升对 JavaScript 语言的理解和应用能力，从基础语法到高级特性，逐步建立起扎实的编程功底。实践是检验知识的唯一标准，通过不断编写代码、测试和调试，你将能够在 JavaScript 编程的道路上越走越远。