JavaScript 用法非常广泛，它是 Web 开发中最重要的编程语言之一。接下来我会介绍一些常见的 JavaScript 用法，包括基本的语法、常见操作、以及一些实际应用示例。
1. 基本语法
变量声明
JavaScript 中有三种方式来声明变量：
let name = "Alice"; // 推荐，块级作用域
const age = 25; // 常量，不可修改
var isActive = true; // 传统方式，函数作用域
数据类型
常见的数据类型包括字符串、数字、布尔值、数组、对象等：
let greeting = "Hello, World!"; // 字符串
let number = 100; // 数字
let isActive = true; // 布尔值
let fruits = ["apple", "banana", "cherry"]; // 数组
let person = { name: "John", age: 30 }; // 对象
2. 运算符
算术运算符
let x = 10, y = 5;
console.log(x + y); // 15
console.log(x - y); // 5
console.log(x * y); // 50
console.log(x / y); // 2
console.log(x % y); // 0 (余数)
比较运算符
console.log(5 == 5); // true (值相等)
console.log(5 === "5"); // false (值和类型相等)
console.log(5 != 6); // true
console.log(5 > 3); // true
console.log(5 < 10); // true
逻辑运算符
let a = true, b = false;
console.log(a && b); // false (与运算)
console.log(a || b); // true (或运算)
console.log(!a); // false (非运算)
3. 控制结构
if…else
let age = 20;
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}
switch-case
let day = "Monday";
switch (day) {
case "Monday":
console.log("今天是星期一");
break;
case "Tuesday":
console.log("今天是星期二");
break;
default:
console.log("其他日子");
}
for 循环
for (let i = 0; i < 5; i++) {
console.log(i); // 输出 0, 1, 2, 3, 4
}
while 循环
let count = 0;
while (count < 5) {
console.log(count); // 输出 0, 1, 2, 3, 4
count++;
}
4. 函数
定义函数
function greet(name) {
console.log("Hello, " + name);
}
greet("Alice"); // 输出 "Hello, Alice"
返回值的函数
function add(a, b) {
return a + b;
}
let result = add(5, 3); // 结果是 8
console.log(result); // 输出 8
匿名函数
let multiply = function(a, b) {
return a * b;
};
console.log(multiply(2, 3)); // 输出 6
箭头函数
const subtract = (a, b) => a - b;
console.log(subtract(5, 3)); // 输出 2
5. 数组操作
创建数组
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // 输出 "apple"
遍历数组
fruits.forEach((fruit) => {
console.log(fruit); // 输出 "apple", "banana", "cherry"
});
数组常用方法
fruits.push("orange"); // 添加元素到数组末尾
console.log(fruits); // ["apple", "banana", "cherry", "orange"]
fruits.pop(); // 删除数组末尾的元素
console.log(fruits); // ["apple", "banana", "cherry"]
let first = fruits.shift(); // 删除数组开头的元素
console.log(first); // "apple"
console.log(fruits); // ["banana", "cherry"]
fruits.unshift("kiwi"); // 在数组开头添加元素
console.log(fruits); // ["kiwi", "banana", "cherry"]
6. 对象操作
创建对象
let person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello, " + this.name);
}
};
console.log(person.name); // "John"
person.greet(); // "Hello, John"
修改对象属性
person.age = 35; // 修改年龄
person.address = "New York"; // 新增属性
console.log(person);
7. DOM 操作
获取元素
let element = document.getElementById("myElement"); // 获取 ID 为 myElement 的元素
修改内容
element.innerHTML = "新的内容"; // 修改元素的 HTML 内容
添加事件监听器
document.getElementById("myButton").addEventListener("click", function() {
alert("按钮被点击了！");
});
8. 事件处理
click 事件
document.getElementById("myButton").onclick = function() {
alert("按钮被点击了！");
};
输入框监听（键盘事件）
document.getElementById("myInput").addEventListener("input", function(event) {
console.log("输入了: " + event.target.value);
});
9. 异步操作：AJAX
通过 AJAX 可以在不重新加载页面的情况下从服务器获取数据：
let xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();
10. Promise 和 async/await
Promise 示例
let myPromise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("成功！");
} else {
reject("失败！");
}
});
myPromise.then((message) => {
console.log(message); // "成功！"
}).catch((message) => {
console.log(message); // "失败！"
});
async/await 示例
async function fetchData() {
let response = await fetch("https://jsonplaceholder.typicode.com/posts");
let data = await response.json();
console.log(data);
}
fetchData();
总结：
JavaScript 是一门非常强大和灵活的语言，适用于网页上的动态效果、用户交互、数据处理等任务。通过学习并掌握它的基本语法、控制结构、DOM 操作、异步处理等，你可以制作出互动性强、响应迅速的 Web 应用。如果你有任何问题或者想了解更多的用法，随时告诉我！
发表回复