JavaScript 是一种广泛使用的客户端脚本语言，通常用于 web 开发中，可以使网页具有动态交互性。它的语法与 C 语言类似，下面我将介绍 JavaScript 的基本语法和一些常见操作与技巧。
1. JavaScript 基本语法
1.1 变量声明
JavaScript 提供了三种方式来声明变量：
var：是 JavaScript 的早期关键字，声明的变量具有函数作用域。
let：声明的变量具有块级作用域，通常推荐使用。
const：声明常量，值不可改变，具有块级作用域。
javascriptCopy Codevar name = "Alice"; // var - 函数作用域
let age = 25; // let - 块级作用域
const pi = 3.14159; // const - 常量，值不可改变
1.2 数据类型
JavaScript 的基本数据类型包括：
Number：数字类型
String：字符串类型
Boolean：布尔值，true 或 false
Object：对象
Array：数组，实际上是对象的一种
null：表示“无”或“空值”
undefined：未定义的值，变量声明但未初始化时为 undefined
Symbol：ES6 引入的唯一标识符
javascriptCopy Codelet num = 10; // Number
let str = "Hello, world!"; // String
let isActive = true; // Boolean
let user = { name: "Alice", age: 25 }; // Object
let arr = [1, 2, 3]; // Array
let nothing = null; // null
let undef; // undefined
1.3 运算符
JavaScript 支持各种运算符，包括算术运算符、比较运算符、逻辑运算符等。
算术运算符
javascriptCopy Codelet x = 10;
let 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
比较运算符
javascriptCopy Codeconsole.log(10 == 10); // true (值相等)
console.log(10 === "10"); // false (严格比较，类型不同)
console.log(10 != 5); // true (不相等)
console.log(10 > 5); // true (大于)
console.log(10 < 5); // false (小于)
逻辑运算符
javascriptCopy Codelet a = true;
let b = false;
console.log(a && b); // false (与运算)
console.log(a || b); // true (或运算)
console.log(!a); // false (非运算)
1.4 控制结构
条件语句：if 和 switch
javascriptCopy Codelet age = 18;
if (age >= 18) {
console.log("成人");
} else {
console.log("未成年");
}
// switch 语句
let day = 3;
switch (day) {
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
default:
console.log("其他");
}
循环语句：for 和 while
javascriptCopy Code// for 循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
// while 循环
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
1.5 函数
JavaScript 中的函数可以使用 function 关键字声明，支持匿名函数和箭头函数。
javascriptCopy Code// 普通函数声明
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Alice")); // "Hello, Alice"
// 匿名函数
let greet = function(name) {
return "Hello, " + name;
};
console.log(greet("Bob"));
// 箭头函数(ES6)
const greet = (name) => `Hello, ${name}`;
console.log(greet("Charlie"));
1.6 数组与对象
数组
数组是存储多个值的有序列表，可以包含各种数据类型的元素。
javascriptCopy Codelet fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[0]); // "Apple"
fruits.push("Grapes"); // 添加元素
console.log(fruits); // ["Apple", "Banana", "Orange", "Grapes"]
fruits.pop(); // 删除最后一个元素
console.log(fruits); // ["Apple", "Banana", "Orange"]
对象
对象是由多个键值对构成的数据集合。
javascriptCopy Codelet person = {
name: "Alice",
age: 25,
greet: function() {
console.log("Hello, " + this.name);
}
};
console.log(person.name); // "Alice"
person.greet(); // "Hello, Alice"
2. JavaScript 常见操作与技巧
2.1 模板字符串(Template Literals)
模板字符串是 ES6 新增的一种字符串拼接方式，可以更方便地嵌入变量和表达式。
javascriptCopy Codelet name = "Alice";
let age = 25;
let greeting = `My name is ${name} and I am ${age} years old.`;
console.log(greeting); // "My name is Alice and I am 25 years old."
2.2 解构赋值
解构赋值是一种从数组或对象中提取值并将其赋给变量的简便方式。
javascriptCopy Code// 数组解构
let [x, y] = [10, 20];
console.log(x); // 10
console.log(y); // 20
// 对象解构
let person = { name: "Alice", age: 25 };
let { name, age } = person;
console.log(name); // "Alice"
console.log(age); // 25
2.3 默认参数值
ES6 允许为函数的参数设置默认值。
javascriptCopy Codefunction greet(name = "Guest") {
console.log(`Hello, ${name}!`);
}
greet("Alice"); // "Hello, Alice!"
greet(); // "Hello, Guest!"
2.4 扩展运算符(Spread Operator)
扩展运算符用于展开数组或对象。
javascriptCopy Code// 数组扩展
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]
// 对象扩展
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }
2.5 事件处理
在 DOM 操作中，JavaScript 用来处理用户输入和页面交互的事件。
javascriptCopy Codelet button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});
2.6 异步编程
JavaScript 中的异步编程通常使用回调函数、Promise 或 async/await 来处理。
使用 Promise
javascriptCopy Codelet promise = new Promise(function(resolve, reject) {
let success = true;
if (success) {
resolve("Success!");
} else {
reject("Failure!");
}
});
promise.then(function(value) {
console.log(value); // "Success!"
}).catch(function(error) {
console.log(error); // "Failure!"
});
使用 async/await
javascriptCopy Codeasync function fetchData() {
let data = await fetch("https://api.example.com");
let json = await data.json();
console.log(json);
}
fetchData();
JavaScript 是一门功能强大的语言，可以处理客户端交互、DOM 操作、异步请求等。掌握基本语法是学习 JavaScript 的第一步，但了解一些常用技巧(如模板字符串、解构赋值、扩展运算符等)将有助于你编写更简洁和高效的代码。
