JavaScript 是一种动态类型语言,变量声明使用 var
、let
或 const
。let
和 const
是 ES6 引入的块级作用域变量声明方式。
javascript
let name = "John";
const age = 25;
var isStudent = true;
数据类型
JavaScript 包含以下基本数据类型:
- 字符串(String)
- 数字(Number)
- 布尔值(Boolean)
- null
- undefined
- 对象(Object)
- Symbol(ES6 新增)
javascript
typeof "Hello"; // "string"
typeof 42; // "number"
typeof true; // "boolean"
函数定义
函数可以通过多种方式定义:
javascript
// 函数声明
function greet(name) {
return `Hello, ${name}!`;
}
// 函数表达式
const greet = function(name) {
return `Hello, ${name}!`;
};
// 箭头函数(ES6)
const greet = (name) => `Hello, ${name}!`;
对象和数组
对象用于存储键值对集合:
javascript
const person = {
name: "Alice",
age: 30,
greet: function() {
console.log(`My name is ${this.name}`);
}
};
数组用于存储有序数据:
javascript
const numbers = [1, 2, 3, 4, 5];
numbers.push(6); // 添加元素
numbers.forEach(num => console.log(num));
DOM 操作
JavaScript 可以操作网页元素:
javascript
// 获取元素
const btn = document.getElementById("myButton");
// 添加事件监听
btn.addEventListener("click", function() {
console.log("Button clicked");
});
// 修改内容
document.querySelector(".content").textContent = "New content";
异步编程
处理异步操作的几种方式:
javascript
// 回调函数
setTimeout(() => {
console.log("Delayed message");
}, 1000);
// Promise
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// async/await
async function getData() {
try {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
ES6+ 特性
现代 JavaScript 的重要特性:
- 模板字符串
- 解构赋值
- 默认参数
- 展开运算符
- 类语法
javascript
// 解构赋值
const { name, age } = person;
// 类
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, ${this.name}`);
}
}
模块化
ES6 模块系统:
javascript
// module.js
export const PI = 3.14159;
export function circleArea(r) {
return PI * r * r;
}
// app.js
import { PI, circleArea } from "./module.js";
console.log(circleArea(5));