JavaScript 基础知识教程:从零开始学习语法和数据类型
介绍与历史
JavaScript 是一种高效、灵活且广泛应用的脚本语言,最初由 Netscape 的 Brendan Eich 于 1995 年开发。它主要用于网页的动态交互,是 Web 开发的核心技术之一。虽然名字中有 “Java”,但 JavaScript 和 Java 完全是不同的两种语言。
- Java 与 JavaScript 的关系:Java 是一种面向对象的编程语言,而 JavaScript 是一种基于事件驱动、非阻塞模型的动态语言。Java 是用来开发大型应用的,而 JavaScript 主要用于在浏览器中提供动态效果。
- JavaScript 运行环境:
- 浏览器:JavaScript 最初是设计用来在网页中提供交互性,现代浏览器(如 Chrome、Firefox、Safari 等)提供了运行 JavaScript 的环境。
- Node.js:随着技术发展,JavaScript 不仅限于浏览器。Node.js 让 JavaScript 可以在服务器端运行,构建高效的后端应用程序。
基础语法
- 变量声明:
var:早期 JavaScript 使用的声明方式,存在作用域问题,已不推荐使用。let:引入了块级作用域的声明方式,可以避免var可能导致的作用域问题。const:常量声明,声明后不可重新赋值,保证值的不可变性。
let age = 25;
const name = 'John';
var city = 'New York'; // 不推荐使用
- 数据类型:
- Number:数字类型,包括整数和浮动小数。
- String:字符串类型,使用单引号或双引号包裹。
- Boolean:布尔值类型,只有两个值:
true或false。 - Null:表示无效或空值。
- Undefined:声明但未赋值的变量默认为
undefined。 - Symbol:ES6 引入的唯一值类型。
- Object:对象类型,可以包含多个值(属性和方法)。
let age = 30; // Number
let name = "Alice"; // String
let isActive = true; // Boolean
let person = null; // Null
let address; // Undefined
- 基本操作符:
- 算术操作符:
+,-,*,/,%,++,-- - 比较操作符:
==,===,!=,!==,<,>,<=,>= - 逻辑操作符:
&&(与),||(或),!(非)
let sum = 5 + 3; // 8
let isEqual = 5 === 5; // true
let isValid = true && false; // false
- 条件语句:
if...else:根据条件判断执行不同的代码块。switch:多个条件选择的简便方法。
let age = 20;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Child");
}
// switch 示例
switch (age) {
case 20:
console.log("20 years old");
break;
default:
console.log("Age not matched");
}
- 循环结构:
for:经典的计数循环。while:在条件为真时执行循环。do...while:至少执行一次的循环。for...in:遍历对象的属性。for...of:遍历数组或其他可迭代对象的值。
// for 循环
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
// for...in 循环
let person = { name: "John", age: 30 };
for (let key in person) {
console.log(key + ": " + person[key]);
}
- 函数的声明与调用:
- 函数声明:通过
function关键字定义函数。 - 函数调用:使用函数名加括号调用。
function greet(name) {
console.log("Hello, " + name);
}
greet("Alice"); // 输出: Hello, Alice
基础数据结构
- 数组:
- 创建数组:通过
[]创建。 - 访问与修改:通过索引访问或修改数组元素。
- 常用数组方法:
push(),pop(),shift(),unshift(),slice(),splice()等。
let fruits = ["Apple", "Banana", "Cherry"];
fruits.push("Orange"); // 添加元素
console.log(fruits[0]); // 输出: Apple
fruits.pop(); // 移除最后一个元素
- 对象:
- 创建对象:使用
{}定义。 - 访问与修改属性:通过点操作符或方括号语法。
- 对象方法:对象可以拥有函数作为属性。
let person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello, " + this.name);
}
};
person.greet(); // 输出: Hello, John
- 字符串:
- 常用字符串方法:
slice(),substring(),charAt(),split(),toUpperCase(),toLowerCase()等。
let str = "JavaScript";
console.log(str.slice(0, 4)); // "Java"
console.log(str.charAt(5)); // "S"
console.log(str.split("")); // ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]
- JSON 处理:
JSON.parse():将 JSON 字符串转换为对象。JSON.stringify():将对象转换为 JSON 字符串。
let jsonString = '{"name": "Alice", "age": 25}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // "Alice"
let jsonObject = { name: "Bob", age: 30 };
let jsonStr = JSON.stringify(jsonObject);
console.log(jsonStr); // '{"name":"Bob","age":30}'
小结
JavaScript 是一门非常强大且灵活的语言,掌握基础语法、数据结构及常用方法是编写高效、可靠代码的基础。通过本部分内容的学习,你已经能够理解 JavaScript 的基本语法、变量声明、数据类型、控制流结构及常用数据结构(如数组和对象),为后续深入学习和实际开发打下了坚实的基础。