掌握基础：简单JS代码示例及应用

资源摘要信息:"JavaScript代码示例" JavaScript是一种广泛使用的前端编程语言，它能够让你在浏览器中创建各种交互式功能。本资源包含了多个简单的JavaScript代码示例，这些示例是新手入门JavaScript编程的基础，同时也适合那些希望复习基础概念的开发者。 一、变量的声明与使用 在JavaScript中，变量是用来存储信息的容器。使用var、let和const关键字声明变量，它们的区别主要在于作用域和是否可以重新赋值。 - 使用var声明变量（函数作用域，可以重新赋值） ```javascript var name = "张三"; console.log(name); // 输出: 张三 name = "李四"; console.log(name); // 输出: 李四 ``` - 使用let声明变量（块级作用域，可以重新赋值） ```javascript let age = 20; console.log(age); // 输出: 20 age = 30; console.log(age); // 输出: 30 ``` - 使用const声明变量（块级作用域，不可以重新赋值） ```javascript const height = 180; console.log(height); // 输出: 180 // height = 190; // 错误：不能重新赋值 ``` 二、基本的数据类型 JavaScript中的基本数据类型包括：String、Number、Boolean、Null、Undefined、Symbol（ES6新增）和BigInt（ES2020新增）。 - String（字符串） ```javascript let greeting = "Hello, world!"; console.log(greeting); // 输出: Hello, world! ``` - Number（数字） ```javascript let num = 42; console.log(num); // 输出: 42 ``` - Boolean（布尔值） ```javascript let isGreater = 10 > 5; console.log(isGreater); // 输出: true ``` - Null（空值） ```javascript let empty = null; console.log(empty); // 输出: null ``` - Undefined（未定义） ```javascript let undefinedVar; console.log(undefinedVar); // 输出: undefined ``` - Symbol（符号） ```javascript let sym = Symbol('sym'); console.log(sym); // 输出: Symbol(sym) ``` - BigInt（大整数） ```javascript let bigInt = BigInt("123456789012345678901234567890"); console.log(bigInt); // 输出: 123456789012345678901234567890n ``` 三、控制结构 控制结构允许我们根据不同的条件执行不同的代码块。 - if语句 ```javascript let score = 85; if (score > 80) { console.log("优秀"); } else if (score > 60) { console.log("良好"); } else { console.log("需要提高"); } // 输出: 优秀 ``` - for循环 ```javascript for (let i = 0; i < 5; i++) { console.log(i); } // 输出: // 0 // 1 // 2 // 3 // 4 ``` - while循环 ```javascript let count = 0; while (count < 5) { console.log(count); count++; } // 输出: // 0 // 1 // 2 // 3 // 4 ``` 四、函数 函数是组织好的，可重复使用的代码块，它执行特定的任务。 - 函数声明 ```javascript function add(x, y) { return x + y; } console.log(add(1, 2)); // 输出: 3 ``` - 箭头函数 ```javascript const multiply = (x, y) => x * y; console.log(multiply(2, 3)); // 输出: 6 ``` - 函数表达式 ```javascript let subtract = function(x, y) { return x - y; }; console.log(subtract(10, 5)); // 输出: 5 ``` 五、数组 数组是JavaScript中一种特殊的对象类型，用于存储有序的集合。 - 创建数组 ```javascript let fruits = ["苹果", "香蕉", "橘子"]; console.log(fruits); // 输出: ["苹果", "香蕉", "橘子"] ``` - 访问和修改数组元素 ```javascript fruits[0] = "梨子"; console.log(fruits[0]); // 输出: 梨子 ``` - 遍历数组 ```javascript for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } // 输出: // 梨子 // 香蕉 // 橘子 ``` 六、对象 对象是JavaScript中的复杂数据类型，用于存储键值对。 - 创建对象 ```javascript let person = { name: "王五", age: 30, greet: function() { console.log("您好，我的名字是" + this.name); } }; console.log(person.name); // 输出: 王五 ``` - 访问对象属性 ```javascript console.log(person.age); // 输出: 30 ``` - 调用对象方法 ```javascript person.greet(); // 输出: 您好，我的名字是王五 ``` 七、事件处理 事件是在特定时间点发生的事，JavaScript可以处理用户触发的事件。 - 监听点击事件 ```javascript document.getElementById("myButton").addEventListener("click", function() { console.log("按钮被点击了!"); }); ``` 以上提供的代码示例涵盖了JavaScript编程的多个基础概念，适合初学者学习和理解。在实际开发中，这些基础知识是非常重要的起点，熟练掌握这些内容是进行更高级JavaScript开发的前提。 【压缩包子文件的文件名称列表】中的“main.js”表明，实际的JavaScript代码示例可能已经被组织在一个名为main.js的文件中，而“README.txt”可能包含有关这些示例的额外说明或者安装、使用指南。在开发过程中，开发者们经常会在README文件中记录项目的相关信息，如安装步骤、如何运行项目、各个文件的作用等，这对项目的维护和协作开发至关重要。