JavaScript 问题解决

2025 年 3 月 3 日 | 阅读 9 分钟

JavaScript 是一门非常流行、广泛使用且易于学习的编程语言。由于其多功能性和强大的特性，它在开发者中很受欢迎。要精通 JavaScript，需要深入理解概念并通过解决问题进行实践。

在本文中，我们将讨论 10 个 JavaScript 问题，任何人都可以通过练习这些问题来更好地理解 JavaScript 的概念。我们将讨论不同难度的问题，从适合初学者的问题开始，然后转向更复杂的问题。这 10 个问题将有助于练习概念，并通过各种方法激发解决问题的能力。在这篇内容丰富的文章中，我们开启了 JavaScript 问题解决之旅。我们超越了简单的“Hello, World!”挑战，揭示了一组精心挑选的、涵盖不同技能水平的十个独特问题。

我们在解决这些问题的同时，目标不仅仅是加强编码能力，还要培养解决问题的态度。这些挑战并非孤立存在，而是通往实际应用的入口。从基础的“Hello, World!”到异步获取的复杂性，本文就像一个指南针，指引着新手和经验丰富的程序员走向精通 JavaScript 的道路。因此，无论您是这门语言的新手，还是希望提升技能，都请加入我们，一起探索 JavaScript 问题解决方法。让我们一次解决一个问题，逐层揭开这门多功能语言的神秘面纱。

问题 1：Hello, World!

这是一个非常基础的任务，它提出了如何在控制台上打印文本的问题。要解决这个问题，你需要知道在用户控制台上打印输出的工具。在 JavaScript 中，我们使用 console.log() 函数。要打印的文本应作为参数，用引号括起来传递给该函数。下面的例子展示了这个问题的解决方案。

代码

function sayHello() {
  console.log("Hello, World!");
}
sayHello();

输出

"Hello, World!"

问题 2：打印任意自然数的乘法表

第二个问题是打印任意自然数的乘法表，这是另一个基础级别的问题，需要基本的数学知识、JavaScript 中的运算符和迭代器来解决。可以采用多种方法。下面的代码使用函数和循环来解决这个问题。

代码

function printMultiplicationTable(number) {
  if (number <= 0 || !Number.isInteger(number)) {
    console.log("Please enter a valid natural number.");
    return;
  }
  console.log(`Multiplication Table for ${number}:`);
  for (let i = 1; i <= 10; i++) {
    console.log(`${number} x ${i} = ${number * i}`);
  }
}
// Example: Print the multiplication table for 5
printMultiplicationTable(5);

输出

5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
5 x 6 = 30
5 x 7 = 35
5 x 8 = 40
5 x 9 = 45
5 x 10 = 50

问题 3：阶乘计算

例如，5 的阶乘是 5 × 4 × 3 × 2 × 1，结果是 120。计算一个数的阶乘是一个中等难度的问题。它需要数学公式和基本的编程方法，如循环、函数和递归。解决这个问题有两种流行的方法：一种是使用循环，另一种是使用递归。我们将讨论这两种方法。请仔细阅读每一种方法，充分理解代码，并尝试以最可行的方式实现解决方案。

解决方案 1

在这里，我们将使用循环来求给定数字的阶乘。

代码

function factorialUsingLoop(number) {
  if (number < 0 || !Number.isInteger(number)) {
    console.log("Please enter a non-negative integer.");
    return;
  }
  let result = 1;
  for (let i = 2; i <= number; i++) {
    result *= i;
  }
  console.log(`Factorial of ${number}: ${result}`);
}
// Example: Calculate the factorial of 5
factorialUsingLoop(5);

输出

Factorial of 5: 120

解决方案 2

在这里，我们将使用递归来求给定数字的阶乘。递归是指在同一函数体内调用该函数自身。

代码

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}
console.log(factorial(5)); // Output: 120

输出

Factorial of 5: 120

问题 4：计算数组中数字的总和

这个任务是另一个基础级别的数学问题，但它也需要对一些概念有中等水平的了解，比如条件语句、数组和常量。下面是使用条件语句解决这个问题的方案。为了确保它在所有情况下都能正确运行，建议使用多个样本数组集来检查程序。

代码

function calculateArraySum(arr) {
  if (!Array.isArray(arr)) {
    console.log("Please provide a valid array of numbers.");
    return;
  }
  const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
  console.log(`Sum of the numbers in the array: ${sum}`);
}
// Example: Calculate the sum of numbers in an array
const numbersArray = [1, 2, 3, 4, 5];
calculateArraySum(numbersArray);

输出

The sum of the numbers in the array: 15

问题 5：在 JavaScript 中检查序列是否为回文

要判断一个字符串是否是回文，你可以构建一个 JavaScript 函数，该函数从字符串的末尾和开头开始比较字符。这里有一个解决这个问题的简单例子。回文是一个字母串，无论正向还是反向阅读，其含义都相同。它可以是单词、句子、数字或整个短语。其关键特征是对称的字符排列。例如：“level”、“radar”和“civic”。在短语和句子中，空格、大小写和标点符号通常被忽略。

代码

function isPalindrome(str) {
  // Remove non-alphanumeric characters and convert to lowercase
  const cleanedStr = str.replace(/[^A-Za-z0-9]/g, '').toLowerCase();
  // Compare the original and reversed strings
  return cleanedStr === cleanedStr.split('').reverse().join('');
}
// Example: Check if "radar" is a palindrome
console.log(isPalindrome("radar")); // Output: true
// Example: Check if "hello" is a palindrome
console.log(isPalindrome("hello")); // Output: false

输出

true
false

问题 6：在 JavaScript 中打印 FizzBuzz 模式

这是一个非常传统的编程问题。问题要求一个 FizzBuzz 程序应遍历从 1 到 n 的所有自然数。对于任何能被 3 整除的数，它应打印“Fizz”；对于任何能被 5 整除的数，打印“Buzz”；如果一个数既能被 3 又能被 5 整除，则打印“FizzBuzz”。下面是这个经典问题的解决方案。

代码

function fizzBuzz(n) {
  for (let i = 1; i <= n; i++) {
    if (i % 3 === 0 && i % 5 === 0) {
      console.log("FizzBuzz");
    } else if (i % 3 === 0) {
      console.log("Fizz");
    } else if (i % 5 === 0) {
      console.log("Buzz");
    } else {
      console.log(i);
    }
  }
}

fizzBuzz(15);

输出

1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz

问题 7：找出质数

在这种方法中，我们在一个函数内使用条件语句和循环。除此之外，请尝试用其他方法来解决这个问题。找出质数是数学和计算机科学中的一个常见挑战。质数是指大于 1 且除了 1 和自身之外没有其他正因数的自然数。这个 JavaScript 程序向您展示了如何找出质数。

代码

function isPrime(number) {
  if (number <= 1) {
    return false;
  }
  // Check for divisibility from 2 to the square root of the number
  for (let i = 2; i <= Math.sqrt(number); i++) {
    if (number % i === 0) {
      return false; // If divisible, it's not a prime number
    }
  }

  return true; // If not divisible, it's a prime number
}
function findPrimesInRange(start, end) {
  const primes = [];
  for (let i = start; i <= end; i++) {
    if (isPrime(i)) {
      primes.push(i);
    }
  }
  return primes;
}
// Example: Find prime numbers between 1 and 20
const primeNumbers = findPrimesInRange(1, 20);
console.log("Prime Numbers:", primeNumbers);

输出

Prime Numbers: [
   2,  3,  5,  7,
  11, 13, 17, 19
]

问题 8：返回字符串中有多少个元音字母

可以使用 JavaScript 创建一个函数来计算字符串中元音字母的数量，该函数遍历字符串中的每个字母并检测它是否是元音。该函数首先使用 toLowerCase() 将文本转换为小写，然后使用一个名为 vowels 的 Set 来保存元音字母。在初始化一个名为 vowelCount 的计数器变量后，使用 for...of 循环遍历小写字符串中的每个字母。如果一个字符是元音，vowelCount 就会增加。该函数可以用于不同的字符串，以计算不同输入中的元音数量，并返回元音的总数。

代码

function countVowels(str) {
  // Convert the string to lowercase to handle both uppercase and lowercase vowels
  const lowerCaseStr = str.toLowerCase();

  // Define a set of vowels
  const vowels = new Set(['a', 'e', 'i', 'o', 'u']);

  // Initialize a counter for vowels
  let vowelCount = 0;

  // Iterate through each character in the string
  for (let char of lowerCaseStr) {
    // Check if the character is a vowel
    if (vowels.has(char)) {
      vowelCount++;
    }
  }

  // Return the total count of vowels
  return vowelCount;
}

// Example: Count vowels in the string "Hello World"
const vowelCount = countVowels("Hello World");
console.log("Number of vowels:", vowelCount);

输出

Number of vowels: 3

问题 9：对象操作

这里是关于如何用 JavaScript 操作对象的解释和示例。编程中经常涉及到操作对象，尤其是在 JavaScript 中，对象是数据表示的核心。这项工作包括根据预定规范更改、添加或删除对象的属性。

代码

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
  occupation: "Engineer",
};

// Adding a Property
person.city = "New York";

// Modifying a Property
person.age = 26;

// Deleting a Property
delete person.occupation;

// Object Iteration
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

// Object Spread for Creating a Modified Copy
let updatedPerson = { ...person, age: 27, city: "San Francisco" };

// Displaying Updated Object
console.log("Original Person:", person);
console.log("Updated Person:", updatedPerson);

输出

firstName: John
lastName: Doe
age: 26
city: New York
Original Person: { firstName: 'John', lastName: 'Doe', age: 26, city: 'New York' }
Updated Person: { firstName: 'John', lastName: 'Doe', age: 27, city: 'San Francisco' }

问题 10：JavaScript 中的异步获取

在进行 Web 开发时，尤其是在 JavaScript 中，异步获取是一个常见问题。它涉及发出异步 HTTP 请求以从远程服务器获取数据。异步检索模式通过在不干扰其他程序执行的情况下实现数据检索，从而增强了 Web 应用程序的用户体验。在现代 Web 开发中，通常使用 fetch API 来实现此目的。fetchData 函数提供一个以 URL 为参数的异步 HTTP 请求，并返回一个已解析的 promise 作为响应。

数据通过使用 response.json() 解析响应的 JSON 来提取；然后，检索到的数据作为已解析的 promise 返回。catch 方法处理在检索过程中出现的任何错误，而 then 函数则管理 promise 的成功解析。以下是关于如何在 JavaScript 中执行异步获取的分步说明。

代码

// Function to perform asynchronous fetch
async function fetchData(url) {
  try {
    // Using the fetch API to make an asynchronous HTTP request
    const response = await fetch(url);

    // Checking if the response status is OK (status code 200-299)
    if (!response.ok) {
      throw new Error(`Error: ${response.status} - ${response.statusText}`);
    }

    // Parsing the response JSON
    const data = await response.json();

    // Returning the fetched data
    return data;
  } catch (error) {
    // Handling errors, such as network issues or invalid response
    console.error("Fetch Error:", error.message);
    throw error; // Propagate the error for further handling
  }
}

// Example: Fetching data from a JSON API
const apiUrl = "https://jsonplaceholder.typicode.com/todos/1";

// Calling the fetchData function with the API URL
fetchData(apiUrl)
  .then((data) => {
    // Handling the fetched data
    console.log("Fetched Data:", data);
  })
  .catch((error) => {
    // Handling errors from the fetchData function
    console.error("Error:", error.message);
  });

输出

Fetched Data: { userId: 1, id: 1, title: 'delectus aut autem', completed: false }

总之，解决 JavaScript 问题是学习这门语言并成为一名熟练开发者的关键部分。本文涵盖了十个不同的 JavaScript 问题，涉及从基础到高级的各种概念和技能。这些练习旨在加深您对 JavaScript 的理解并培养您的问题解决能力。

Hello, World!： 这个问题介绍了使用 console.log() 进行基本控制台输出。
打印任意自然数的乘法表： 演示了函数、循环和基本数学运算的使用。
阶乘计算： 探讨了使用循环和递归两种方法计算阶乘，展示了不同的问题解决方法。
计算数组中数字的总和： 运用了数组操作、条件语句和数学运算。
回文检查： 专注于字符串操作、字符比较和算法逻辑。
FizzBuzz： 一个经典问题，演示了在常见编程场景中如何使用条件语句和循环。
找出质数： 介绍了质数的概念，利用了条件语句和数学运算。
计算字符串中的元音字母数量： 涉及字符串操作、迭代和条件语句。
对象操作： 演示了对 JavaScript 对象的基本操作，包括添加、修改、删除和迭代。
JavaScript 中的异步获取： 探讨了使用 fetch API 进行 HTTP 请求来展示 JavaScript 的异步特性。

这些问题涵盖了广泛的 JavaScript 主题，从语法基础到异步编程等更复杂的主题。

下一个主题JavaScript 中的字符串格式化

JavaScript 问题解决

问题 1：Hello, World!

问题 2：打印任意自然数的乘法表

问题 3：阶乘计算

问题 4：计算数组中数字的总和

问题 5：在 JavaScript 中检查序列是否为回文

问题 6：在 JavaScript 中打印 FizzBuzz 模式

问题 7：找出质数

问题 8：返回字符串中有多少个元音字母

问题 9：对象操作

问题 10：JavaScript 中的异步获取

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 问题解决

问题 1：Hello, World!

问题 2：打印任意自然数的乘法表

问题 3：阶乘计算

问题 4：计算数组中数字的总和

问题 5：在 JavaScript 中检查序列是否为回文

问题 6：在 JavaScript 中打印 FizzBuzz 模式

问题 7：找出质数

问题 8：返回字符串中有多少个元音字母

问题 9：对象操作

问题 10：JavaScript 中的异步获取

相关帖子

JavaScript 中的函数重载

如何在 JavaScript 中在新标签页中打开 href 链接

在 JavaScript 中学习的游戏

JavaScript 中的 Fizzbuzz 程序

JavaScript 中的随机颜色生成器

JavaScript 的最小化

JavaScript .append