JavaScript 初学者练习

2025 年 2 月 16 日 | 7 分钟阅读

JavaScript 是一种多功能且强大的编程语言，主要用于 Web 开发。JavaScript 由 Brendan Eich 于 1995 年开发，最初是为了给静态网页添加交互性。多年来，它已发展成为现代 Web 开发的关键组成部分，使开发人员能够创建动态、交互式和响应式 Web 应用程序。

1. 变量和数据类型

练习 1：声明不同数据类型（字符串、数字、布尔值）的变量，并执行拼接、算术运算和比较等操作。

代码

// Declare variables of different data types
let stringVariable = "Hello";
let numberVariable = 10;
let booleanVariable = true;

// Perform operations
let concatenatedString = stringVariable + " World";
let sum = numberVariable + 5;
let comparisonResult = numberVariable > 5;

// Output the results
console.log("Original string:", stringVariable);
console.log("Original number:", numberVariable);
console.log("Original boolean:", booleanVariable);

console.log("Concatenated string:", concatenatedString);
console.log("Sum:", sum);
console.log(
  "Comparison result (Is numberVariable greater than 5?):",
  comparisonResult
);

输出

JavaScript Practice Exercises for Beginners

2. 函数

练习 2：编写一个函数，根据矩形的长度和宽度计算其面积。

代码

// Function to calculate the area of a rectangle
function calculateRectangleArea(length, width) {
    return length * width;
  }
  
  // Define the dimensions of the rectangle
  let rectangleLength = 5;
  let rectangleWidth = 8;
  
  // Calculate the area of the rectangle using the function
  let areaOfRectangle = calculateRectangleArea(rectangleLength, rectangleWidth);
  
  // Output the result
  console.log("Length of the rectangle:", rectangleLength);
  console.log("Width of the rectangle:", rectangleWidth);
  console.log("Area of the rectangle:", areaOfRectangle);

输出

练习 3：创建一个函数，该函数接受数字数组作为输入，并返回所有元素的总和。

代码

// Function to calculate the sum of elements in an array
function calculateArraySum(numbers) {
    let sum = 0;
    for (let number of numbers) {
      sum += number;
    }
    return sum;
  }
  
  // Define an array of numbers
  let numbersArray = [1, 2, 3, 4, 5];
  
  // Calculate the sum of the array elements using the function
  let sumOfArray = calculateArraySum(numbersArray);
  
  // Output the result
  console.log("Array:", numbersArray);
  console.log("Sum of array elements:", sumOfArray);

输出

练习 4：实现一个函数，用于检查给定的数字是否为素数。

代码

// Function to check if a number is prime
function isPrime(number) {
    if (number <= 1) return false;
    for (let i = 2; i <= Math.sqrt(number); i++) {
      if (number % i === 0) {
        return false;
      }
    }
    return true;
  }
  
  // Define a number to check for primality
  let numberToCheck = 17;
  
  // Check if the number is prime using the function
  let isNumberPrime = isPrime(numberToCheck);
  
  // Output the result
  console.log("Number to check:", numberToCheck);
  console.log("Is the number prime:", isNumberPrime);

输出

3. 循环

练习 5：编写一个循环，打印 1 到 10 的数字。

代码

// Loop to print numbers from 1 to 10
for (let i = 1; i <= 10; i++) {
    console.log(i);
  }

输出

练习 6：创建一个循环，用于遍历姓名数组并打印每个姓名。

代码

// Loop to iterate through an array of names
let names = ["Alice", "Bob", "Charlie"];
for (let name of names) {
  console.log(name);
}

输出

练习 7：使用循环查找数字的阶乘。

代码

// Function to find the factorial of a number
function factorial(number) {
    let result = 1;
    for (let i = 1; i <= number; i++) {
      result *= i;
    }
    return result;
  }
  
  // Define a number to find its factorial
  let numberToFactorial = 5;
  
  // Find the factorial of the number using the function
  let factorialResult = factorial(numberToFactorial);
  
  // Output the result
  console.log("Number:", numberToFactorial);
  console.log("Factorial:", factorialResult);

输出

4. 数组和对象

练习 8：声明一个数字数组，并找出最大和最小的元素。

代码

// Array of numbers to find the largest and smallest elements
let numbers = [5, 8, 2, 10, 3];
let largest = Math.max(...numbers);
let smallest = Math.min(...numbers);

// Output the results
console.log("Array of numbers:", numbers);
console.log("Largest element:", largest);
console.log("Smallest element:", smallest);

输出

练习 9：创建一个表示人的对象，包含姓名、年龄和国家等属性。访问和修改对象属性。

代码

// Object representing a person
let person = {
    name: "John",
    age: 25,
    country: "USA",
  };
  
  // Access and modify object properties
  console.log("Original name:", person.name);
  console.log("Original age:", person.age);
  console.log("Original country:", person.country);
  
  // Modify the age property
  person.age = 30;
  
  // Output the modified age
  console.log("Modified age:", person.age);

输出

练习 10：编写一个函数，用于从数组中删除重复项。

代码

// Function to remove duplicates from an array
function removeDuplicates(array) {
    return Array.from(new Set(array));
  }
  
  // Define an array with duplicates
  let arrayWithDuplicates = [1, 2, 3, 2, 4, 5, 3];
  
  // Remove duplicates from the array using the function
  let arrayWithoutDuplicates = removeDuplicates(arrayWithDuplicates);
  
  // Output the results
  console.log("Array with duplicates:", arrayWithDuplicates);
  console.log("Array without duplicates:", arrayWithoutDuplicates);

输出

5. 条件语句

练习 11：实现一个函数，用于检查给定的年份是否为闰年。

代码

// Function to check if a year is a leap year
function isLeapYear(year) {
    if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
      return true;
    } else {
      return false;
    }
  }
  
  // Define years to check
  let yearsToCheck = [2020, 2021, 2024, 2100, 2400];
  
  // Check each year and output the result
  yearsToCheck.forEach((year) => {
    console.log(year + " is a leap year:", isLeapYear(year));
  });

输出

练习 12：创建一个程序，根据分数对学生进行评分。

代码

// Function to grade students based on their score
function gradeStudents(score) {
    if (score >= 90) {
      return "A";
    } else if (score >= 80) {
      return "B";
    } else if (score >= 70) {
      return "C";
    } else if (score >= 60) {
      return "D";
    } else {
      return "F";
    }
  }
  
  // Define scores to grade
  let scores = [95, 83, 75, 62, 45];
  
  // Grade each score and output the result
  scores.forEach((score) => {
    console.log("Score:", score, "Grade:", gradeStudents(score));
  });

输出

优点

强化学习：练习题通过提供实践经验来强化理论知识，有助于更好地理解和记忆概念。
提高解决问题的能力：通过解决各种练习题，初学者可以提高解决问题的能力，并学会系统地处理编码挑战。
建立信心：完成练习题能给初学者带来成就感，增强他们对编码技能的信心，并激励他们承担更具挑战性的任务。
鼓励探索：练习题通常涵盖不同的主题和场景，鼓励初学者探索 JavaScript 编程的不同方面并扩展他们的技能。
促进精通：持续的练习可以掌握 JavaScript 的概念和语法，使初学者能够编写更清晰、更高效的代码，成为熟练的开发人员。
为真实项目做准备：练习题模拟真实场景，为初学者准备实际开发项目，并为他们提供应对复杂任务所需的技能。

缺点

重复的风险：如果课程安排得当，练习题可能会变得更加多样化，导致学习者感到无聊和失去兴趣。
上下文有限：练习题通常侧重于孤立的问题，这可能只能部分反映实际开发场景的复杂性。这可能会限制学习者对实际应用的理解。
缺乏反馈：初学者可能需要来自教师或同行的反馈来识别和纠正代码中的错误，这可能会阻碍他们的学习进展。
过度强调语法：一些练习题可能比解决问题更侧重于语法，导致学习者只关注编写正确的代码，而不是理解底层概念。
难度递进：练习题难度级别的不足可能会让初学者感到不知所措或觉得没有挑战性，从而影响他们的动力和学习成果。
耗时：参与练习题需要时间和精力，这对于日程繁忙或有其他优先事项的学习者来说可能具有挑战性。

应用

巩固概念：练习题有助于初学者巩固对基本 JavaScript 概念的理解，如变量、数据类型、函数、循环、条件语句、数组和对象。通过在不同场景中反复应用这些概念，学习者可以巩固他们的知识，并为进一步学习打下坚实的基础。
提高解决问题的能力：解决练习题可以挑战初学者批判性思维，并培养有效的解决问题策略。当他们遇到不同的编码挑战时，学习者会学会将问题分解成更小、更易于管理的任务，并使用 JavaScript 语法和逻辑来设计解决方案。
建立信心：完成练习题可以增强学习者对自己编码能力的信心。每完成一项练习都是一项小成就，有助于培养进步感和成就感。这种信心鼓励初学者迎接更复杂的问题，并以热情探索高级 JavaScript 主题。
将理论应用于实践：练习题为初学者提供了将理论知识应用于真实编码场景的机会。通过编写代码、调试错误和测试解决方案，学习者获得了与教程、课程和书籍中的理论学习相辅相成的实践经验。
培养创造力和实验精神：练习题鼓励初学者尝试不同的方法和技术来解决问题。这种实验精神可以培养创造力和创新，因为学习者会发现替代解决方案，并通过试错来从错误中学习。
为面试和评估做准备：许多入门级 JavaScript 职位的编码面试和评估都包含编码练习，以评估候选人的技能。参与练习题可以让初学者熟悉面试中可能遇到的问题类型，从而帮助他们有效备考并在压力下表现出色。
促进同伴学习与协作：当与小组或同伴一起进行练习时，练习题可以成为一种协作式学习体验。初学者可以分享他们的解决方案、讨论策略，并从彼此的方法中学习，从而创建一个支持性的学习社区，鼓励成长和协作。
跟踪进度并识别弱点：定期练习 JavaScript 练习题可以让初学者跟踪他们的进度。通过回顾他们的解决方案并识别薄弱环节或困惑的领域，学习者可以集中精力提高特定技能并解决理解上的差距。

结论

尽管存在一些缺点，但通过练习题练习 JavaScript 的优点远远大于其缺点。通过提供实践经验、培养解决问题的能力和增强信心，练习题在帮助初学者熟练掌握 JavaScript 编程方面发挥着至关重要的作用。

然而，确保练习题设计周全、提供充分的反馈并涵盖各种主题，以最大化学习成果并为学习者应对实际开发挑战做好准备至关重要。

下一主题JavaScript 入门练习题

JavaScript 初学者练习

1. 变量和数据类型

2. 函数

3. 循环

4. 数组和对象

5. 条件语句

优点

缺点

应用

结论

联系信息

关注我们

教程

面试题

在线编译器

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. 变量和数据类型

2. 函数

3. 循环

4. 数组和对象

5. 条件语句

优点

缺点

应用

结论

相关帖子

JavaScript Regex 构造函数属性

在 JavaScript 对象中添加键值

JavaScript 中的 Fizzbuzz 程序

JavaScript 中的命名空间

JavaScript 中的二维数组

在 JavaScript 数组中替换元素

Babel JavaScript

JavaScript label 语句