JavaScript 基础语法

JavaScript 是一种动态类型语言,变量声明使用 varletconstletconst 是 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));
相关推荐
半桔8 分钟前
【STL源码剖析】从源码看 vector:底层扩容逻辑与内存复用机制
java·开发语言·c++·容器·stl
lly20240615 分钟前
PHP MySQLi 教程:基础与高级应用
开发语言
Shun_Tianyou19 分钟前
Python Day21 re模块正则表达式 简单小说爬取 及例题分析
开发语言·数据结构·python·算法·正则表达式
千里镜宵烛37 分钟前
互斥锁与条件变量
linux·开发语言·c++·算法·系统架构
每天的每一天1 小时前
分布式文件系统05-生产级中间件的Java网络通信技术深度优化
java·开发语言·中间件
欧的曼1 小时前
cygwin+php教程(swoole扩展+redis扩展)
开发语言·redis·后端·mysql·nginx·php·swoole
智江鹏1 小时前
Android 之 Kotlin中的符号
android·开发语言·kotlin
一叶怎知秋1 小时前
【openlayers框架学习】九:openlayers中的交互类(select和draw)
前端·javascript·笔记·学习·交互
allenlluo2 小时前
浅谈Web Components
前端·javascript
Mintopia2 小时前
把猫咪装进 public/ 文件夹:Next.js 静态资源管理的魔幻漂流
前端·javascript·next.js